feat: 登录绑定手机

src/pages/login/index.vue

@@ -8,9 +8,9 @@
       title-bold
     ></u-navbar>
     <view class="content">
-      <view>
+      <!-- <view>
         <uni-icons type="weixin" size="120" color="#04BE02"></uni-icons>
-      </view>
+      </view> -->
       <view class="view-image">
         <u-image
           :src="targetImage"
@@ -20,10 +20,22 @@
         ></u-image>
       </view>
       <view class="target">
+        <text v-if="!needAuth" class="bind-phone">绑定手机</text>
         <text class="tips">想要轻松考过，首选模考大师</text>
       </view>
       <view class="text-area" @click.capture="loadLogin">
-        <button class="bottom" type="primary" @tap="wxLogin">授权登录</button>
+        <button v-if="needAuth" class="bottom" type="primary" @tap="wxLogin">
+          授权登录
+        </button>
+        <button
+          v-else
+          class="bottom"
+          type="primary"
+          open-type="getPhoneNumber"
+          @getphonenumber="getphonenumber"
+        >
+          绑定手机
+        </button>
       </view>
     </view>
   </view>
@@ -36,6 +48,7 @@ export default {
       title: '微信授权登录',
       host: '', //配置为自己的额服务器即可
       returnUrl: '', //跳回页面
+      needAuth: true,
     }
   },
   computed: {
@@ -56,6 +69,7 @@ export default {
         mask: true,
       })
     },
+    // 微信登录
     wxLogin() {
       // 获取code 小程序专有，用户登录凭证。
       uni.getUserProfile({
@@ -63,53 +77,108 @@ export default {
         lang: 'zh_CN',
         success: (user) => {
           // 获取成功基本资料后开启登录，因为基本资料首先要授权
-          uni.login({
-            provider: 'weixin',
-            success: (code_res) => {
-              if (code_res.errMsg == 'login:ok') {
-                const code = code_res.code
-                const userInfo = user.userInfo
-                const data = {
-                  code: code,
-                  avatar: userInfo.avatarUrl,
-                  nickname: userInfo.nickName,
-                  orgId: this.orgId,
-                }
-                uni.showLoading({
-                  title: '加载中',
-                })
-                this.$u.api.loginWechatAuth(data).then((res) => {
-                  uni.hideLoading()
-                  this.$u.vuex('vuex_token', res.token)
-                  this.$u.vuex('openId', res.openId)
-                  this.$u.vuex('userInfo', userInfo)
-
-                  if (this.returnUrl) {
-                    if (this.returnUrl === 'pages/learn/selectCategory') {
-                      this.queryMyQuestionWarehouseDetail()
-                      return
-                    }
-                    this.$u.route({
-                      url: this.returnUrl,
-                      type: 'redirectTo',
-                    })
-                  } else {
-                    this.$u.route({
-                      url: '/pages/index/index',
-                      type: 'tab',
-                    })
-                  }
-                })
-              }
-            },
+          const userInfo = user.userInfo
+          this.$u.vuex('userInfo', userInfo)
+          this.uniLogin((code) => {
+            const data = {
+              code: code,
+              avatar: userInfo.avatarUrl,
+              nickname: userInfo.nickName,
+              orgId: this.orgId,
+            }
+            this.studyLogin(data)
           })
         },
         fail: (res) => {
+          uni.hideLoading()
           uni.showModal({
             title: '用户拒绝授权',
             showCancel: false,
           })
+        },
+      })
+    },
+    // 用户登录接口
+    studyLogin(data) {
+      this.$u.api.loginWechatAuth(data).then((res) => {
+        uni.hideLoading()
+        this.$u.vuex('vuex_token', res.token)
+        this.$u.vuex('openId', res.openId)
+        if (res.phoneNumber) {
+          if (this.returnUrl) {
+            if (this.returnUrl === 'pages/learn/selectCategory') {
+              this.queryMyQuestionWarehouseDetail()
+              return
+            }
+            this.$u.route({
+              url: this.returnUrl,
+              type: 'redirectTo',
+            })
+          } else {
+            this.$u.route({
+              url: '/pages/index/index',
+              type: 'tab',
+            })
+          }
+        } else {
+          this.a = 2
+
+          this.needAuth = false
+        }
+      })
+    },
+    // 绑定手机
+    getphonenumber(e) {
+      if (e && e.detail) {
+        if (e.detail.errMsg.indexOf('user deny') > -1) {
+          uni.showModal({
+            title: '提示',
+            showCancel: false,
+            content: '用户未授权不能完成注册',
+          })
+        } else if (e.detail.encryptedData && e.detail.iv) {
+          this.uniLogin((code) => {
+            const data = {
+              code: code,
+              avatar: this.userInfo.avatarUrl,
+              nickname: this.userInfo.nickName,
+              orgId: this.orgId,
+              encryptedData: e.detail.encryptedData,
+              iv: e.detail.iv,
+            }
+            this.studyLogin(data)
+          })
+        } else {
           uni.hideLoading()
+          uni.showModal({
+            title: '提示',
+            showCancel: false,
+            content: '用户取消授权',
+          })
+        }
+      } else {
+        uni.hideLoading()
+        uni.showModal({
+          title: '提示',
+          showCancel: false,
+          content: '授权失败，请重新授权',
+        })
+      }
+    },
+
+    uniLogin(block) {
+      uni.login({
+        provider: 'weixin',
+        success: (code_res) => {
+          if (code_res.errMsg == 'login:ok') {
+            block(code_res.code)
+          } else {
+            uni.hideLoading()
+            uni.showModal({
+              content: code_res.errMsg,
+              showCancel: false,
+            })
+          }
         },
       })
     },
@@ -168,16 +237,18 @@ export default {
   width: 100%;
 }
 .content {
+  height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  /* justify-content: center; */
 }
 .text-area {
   display: flex;
   justify-content: center;
   position: relative;
-  margin-top: 500rpx;
+  position: fixed;
+  bottom: 100rpx;
 }
 .bottom {
   width: 600rpx;
@@ -194,11 +265,18 @@ export default {
   position: relative;
   display: flex;
   flex-direction: column;
+  text-align: center;
+  margin-top: 32rpx;
+}
+.bind-phone {
+  font-size: 52rpx;
+  font-weight: bold;
+  color: #333333;
 }
 .tips {
   font-size: 40rpx;
   color: #adbdd4;
-  margin-top: 64rpx;
+  margin-top: 32rpx;
 }
 .target-image {
   margin: auto;