<template>
  <view>
    <uv-navbar title="" placeholder @leftClick="()=>{uni.navigateBack()}" bgColor="#f9f9f9"></uv-navbar>
    <view class="top">
      <view class="title">绑定手机号</view>
    </view>
    <view class="body">
      <view class="inpBox">
        <image class="icon" :src="$handleImageUrl('/czd/phone.png')" mode=""></image>
        <input class="uni-input" v-model="form.mobile" type="number" maxlength="11" placeholder="输入手机号码" />
      </view>
      <view class="inpBox">
        <image class="yzm" :src="$handleImageUrl('/czd/yzm.png')" mode=""></image>
        <view>
          <input class="uni-input uni-code" v-model="form.captcha" type="number" maxlength="6" placeholder="输入验证码" />
          <view class="reset" @tap="getCode">{{tips}}</view>
        </view>
      </view>
      <view class="btnBox">
        <uv-button type="primary" hover-class="hoverClass" @click="bind">完成</uv-button>
      </view>
    </view>
    <uv-code :seconds="seconds" start-text="重新获取" @end="end" @start="start" ref="uCode" @change="codeChange"></uv-code>
  </view>
</template>

<script setup>
import { smsCode } from '@/api/login'
import { miniappThirdRegister } from "@/api/login.js";
import { ref, reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
const tips = ref(''),
  seconds = ref(60),
  form = reactive({
    mobile: "",
    captcha: ""
  });
const uCode = ref(null);
onLoad(options => {
  form.thirdType = options.thirdType;
  form.identityCode = options.identityCode;
});
const codeChange = text => {
  tips.value = text;
};
const getCode = () => {
  if (uCode.value && uCode.value.canGetCode) {
    // 模拟向后端请求验证码
    uni.showLoading({
      title: '正在获取验证码'
    })
    smsCode({ mobile: form.mobile }).then(res => {
      uni.$uv.toast('验证码已发送');
    }).finally(e => {
      uni.hideLoading();
      // 这里此提示会被this.start()方法中的提示覆盖
      uCode.value.start();
    })
  } else {
    uni.$uv.toast('倒计时结束后再发送');
  }
};
const end = () => {
  uni.$uv.toast('倒计时结束');
};
const start = () => {
  uni.$uv.toast('倒计时开始');
};
const bind = () => {
  if (!form.value.mobile) {
    uni.$uv.toast('请输入手机号！');
    return
  } else if (!uni.$uv.test.mobile(form.value.mobile)) {
    uni.$uv.toast('请输入正确手机号！');
    return
  } else if (!form.value.captcha) {
    uni.$uv.toast('请输入验证码！');
    return
  }
  form.value.clientType=4;
  miniappThirdRegister(form.value).then(res => {
    if (res && res.code == 200) {
      uni.showToast({
        title: '登录成功！',
        icon: 'success',
        duration: 1500
      })
      uni.setStorageSync('apiToken', res.data.token);
      uni.switchTab({
        url: '/pages/tabtar/home'
      })
    } else {
      uni.$uv.toast('验证码错误');
    }
  })
};
</script>
<style>
page {
  background-color: #f9f9f9;
}
</style>
<style lang="scss" scoped>
::v-deep .u-char-item {
  width: 120rpx !important;
  height: 120rpx !important;
  background: #ffffff;
  border-radius: 20rpx;
  border: none !important;
}
.top {
  text-align: center;
  padding: 50rpx 0 100rpx;
  font-size: 28rpx;

  .title {
    font-size: 60rpx;
    margin-bottom: 10rpx;
    font-weight: 700;
  }
}
.body {
  margin: auto;
  width: 615rpx;
  margin-bottom: 30rpx;

  .inpBox {
    background: #fff;
    border-radius: 20rpx;
    padding: 20rpx 30rpx;
    display: flex;
    margin-top: 30rpx;
    .uni-code {
      width: 200rpx;
    }
    > view {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  image {
    width: 36rpx;
    height: 44rpx;
    margin-right: 30rpx;
  }
  .yzm {
    width: 40rpx;
    height: 45rpx;
  }
  .uni-input {
    height: 40rpx;
    .uni-input-placeholder {
      color: #bebebe;
    }
  }

  .login-btn {
    background-color: #4095e5;
    color: #fff;
    margin-top: 100rpx;
  }
}
.btnBox {
  width: 100%;
  margin-top: 60rpx;
}
.u-btn {
  width: 615rpx;
  border-radius: 10rpx;
  background: rgb(64, 149, 229);
  font-size: 30rpx;
  font-weight: 700;
  margin: auto;
  font-family: Microsoft YaHei, Microsoft YaHei-Bold;
  background: linear-gradient(6deg, #56d9ee 0%, #3ebcd0 100%) #3c66d9;
}
.hoverClass {
  background: linear-gradient(6deg, #56d9ee 0%, #3ebcd0 100%) #3c66d9;
}
.reset {
  font-size: 30rpx;
  color: #4ac2d4;
}
</style>