zhaojs
2023-07-07 55803b1a7b478aade9b6e59ca6675777375e2a92
uniapp/pages/login/bindingPhone.vue
@@ -5,28 +5,36 @@
         <view class="titleText">
            绑定手机号
         </view>
         <view class="input-container colCen">
            <view class="outSidebox rowCen" :class="selectedInput=='phone'?'outSidebox-active':''">
               <input type="number" data-type='phone' @focus="changeType" @blur="cleanActive" v-model="phone"
                  placeholder="请输入手机号" placeholder-class="input-placeHolder" />
            </view>
         <view v-if="iscanbind" class="goaccount rowCenCen" @tap="mobShow()">
            <view>本机手机号一键绑定</view>
         </view>
         <view class="input-container colCen">
            <view class="outSidebox rowCenBet" data-type='pass'
               :class="selectedInput=='code'?'outSidebox-active':''">
               <input @focus="changeType" @blur="cleanActive" data-type='code' type="number" v-model="code"
                  placeholder="请输入验证码" placeholder-class="input-placeHolder" />
               <view class="getcodebox" :class="canGetCode?'colorTxt':''" @click="getCode()">
                  {{canGetCode?'获取验证码':second+'s后重新获取'}}
         <view v-else>
            <view class="input-container colCen">
               <view class="outSidebox rowCen" :class="selectedInput=='phone'?'outSidebox-active':''">
                  <input type="number" data-type='phone' @focus="changeType" @blur="cleanActive" v-model="phone"
                     placeholder="请输入手机号" placeholder-class="input-placeHolder" />
               </view>
            </view>
         </view>
         <view class="login-btn rowCenCen" :class="code&&phone?'colorfulbtn':''" @click="bindMobile()">
            <view class="btn-font">
               绑定
            <view class="input-container colCen">
               <view class="outSidebox rowCenBet" data-type='pass'
                  :class="selectedInput=='code'?'outSidebox-active':''">
                  <input @focus="changeType" @blur="cleanActive" data-type='code' type="number" v-model="code"
                     placeholder="请输入验证码" placeholder-class="input-placeHolder" />
                  <view class="getcodebox" :class="canGetCode?'colorTxt':''" @click="getCode()">
                     {{canGetCode?'获取验证码':second+'s后重新获取'}}
                  </view>
               </view>
            </view>
            <view class="login-btn rowCenCen" :class="code&&phone?'colorfulbtn':''" @click="bindMobile()">
               <view class="btn-font">
                  绑定
               </view>
            </view>
            <view style="text-align: center; width: 100%;margin-top: 30rpx;" @click="mobShow()">
               本机手机号一键绑定
            </view>
         </view>
      </view>
@@ -51,6 +59,7 @@
   import MD5 from '../../utils/md5.js'
   import config from '../../utils/config.js'
   import utils from '../../utils/utils.js'
   const univerifyManager = uni.getUniverifyManager();
   export default {
      components: {
         inviteCodeModel,
@@ -72,7 +81,9 @@
            prevent: true,
            inviteCodeShow:false,
            inviterShow:false,
            wxUser:""
            wxUser:"",
            iscanbind:true,
            isyj:false
         };
      },
      onLoad(options) {
@@ -90,6 +101,77 @@
      },
      methods: {
         ...mapMutations(['login']),
         doMobileLogin(mobRes)
         {
            var that=this;
            uniCloud.callFunction({
              name: 'getPhoneNumber', // 你的云函数名称
              data: {
                'access_token': mobRes.access_token, // 客户端一键登录接口返回的access_token
                'openid': mobRes.openid, // 客户端一键登录接口返回的openid
               'op_type':'getmob'
              }
            }).then(res => {
               console.log(res);
               that.phone=res.result.mobile;
                univerifyManager.close();
               that.isyj=true;
                that.bindMobile();
            }).catch(err=>{
               // 处理错误
               console.log(err)
               that.iscanbind=false;
               that.$alert('获取手机号码失败,请使用其他方式绑定')
               setTimeout(function(){
                  univerifyManager.close();
               },2000);
               that.isyj=false;
            })
         },
         mobShow()
         {
            var that=this;
            univerifyManager.login({
               provider: 'univerify',
               univerifyStyle: { // 自定义登录框样式
                "fullScreen":false,
               "authButton":
               {
                  "normalColor":"#F73314",
                  "highlightColor":"#F73314",
                  "title":"本机号码一键绑定"
               },
               "otherLoginButton":{
                  "title":"其他绑定方式"
               },
               "privacyTerms":{
                  "defaultCheckBoxState":false
               }
              },
            success(res){ // 获取成功
               console.log(res.authResult);
                that.doMobileLogin(res.authResult);
            },
            fail(res){  // 登录失败
               console.log(res)
                  if(res.errCode==30002)
                  {//切换登录方式
                     that.iscanbind=false;
                     univerifyManager.close();
                  }
                  else
                  {
                     that.$alert('获取手机号码失败,请使用其他方式绑定')
                     setTimeout(function(){
                        univerifyManager.close();
                     },2000);
                  }
                  that.iscanbind=false;
               }
            })
         },
         backHome() {
            var pages = getCurrentPages();
            console.log(pages.length);
@@ -119,11 +201,11 @@
                     url: './setInviteCode'
                  })
               }
               else if (e.data.userinfo.isPwd == 'N') {
               /* else if (e.data.userinfo.isPwd == 'N') {
                  uni.redirectTo({
                     url: './setPass'
                  })
               } else {
               } */else {
                  uni.switchTab({
                     url: '../index/index'
                  })
@@ -132,11 +214,19 @@
         },
         bindMobile(){
            var that = this;
            if(!this.hasLogin && this.wxUser != ""){
            let clientInfo = uni.getStorageSync('clientInfo');
            var pushCid="";
            if(clientInfo&&clientInfo.clientid)
            {
               pushCid=clientInfo.clientid;
            }
            if(this.wxUser != ""){
               this.$u.api.bindMobileLogin({
                  wxUser : encodeURIComponent(JSON.stringify(that.wxUser)),
                  mobile:this.phone,
                  captcha:this.code
                  captcha:this.code,
                  isyj:this.isyj,
                  pushCid:pushCid
               }).then(e => {
                  console.log(e)
                  if (e.code != 0) return that.$alert(e.msg)
@@ -161,7 +251,8 @@
            }else{
               this.$u.api.changeMobile({
                  mobile:this.phone,
                  captcha:this.code
                  captcha:this.code,
                  isyj:this.isyj
               }).then(e => {
                  if(e.code != 0) return that.$alert(e.msg)
                  that.$alert('绑定成功');
@@ -284,6 +375,17 @@
</script>
<style lang="scss">
   .goaccount {
      width: 100%;
      height: 100rpx;
      background: #FFFFFF;
      border: 1rpx solid #999999;
      border-radius: 50rpx;
      font-size: 30rpx;
      font-weight: 500;
      color: #333333;
      margin-top: 30rpx;
   }
   .login-wrapper {
      width: 100%;
      min-height: 100vh;