feat: 优化获取手机号登录的逻辑

pages/Loading/index.vue

@@ -1,7 +1,12 @@
 <template>
   <view class="lottie-bg">
     <view id="lottie">
-      <image src="@/static/live-logo.gif" rel="preload" mode="widthFix" style="width: 100%" />
+      <image
+        src="@/static/live-logo.gif"
+        rel="preload"
+        mode="widthFix"
+        style="width: 100%"
+      />
     </view>
   </view>
 </template>
@@ -50,7 +55,8 @@ export default {
     }
     console.log('进行登录操作')
     login().finally(() => {
-      this.$yrouter.switchTab({
+      this.changeAuthorization(false)
+      this.$yrouter.replace({
         path: '/pages/home/index',
       })
     })

pages/authorization/index.vue

@@ -1,19 +1,32 @@
 <template>
   <view class="container">
     <!-- #ifdef MP-WEIXIN -->
-    <view v-if="!token" class="force-login-wrap">
+    <view
+      v-if="!token"
+      class="force-login-wrap"
+    >
       <!-- <image class="logo-bg" :src="`${$VUE_APP_RESOURCES_URL}/images/logo_bg.png`" mode="aspectFill"></image> -->
       <view class="force-login__content y-f">
-        <open-data class="user-avatar" type="userAvatarUrl"></open-data>
+        <open-data
-        <open-data class="user-name" type="userNickName"></open-data>
+          class="user-avatar"
+          type="userAvatarUrl"
+        ></open-data>
+        <open-data
+          class="user-name"
+          type="userNickName"
+        ></open-data>
         <view class="login-notice">为了提供更优质的服务，请先登录</view>
         <button
           class="cu-btn author-btn"
           open-type="getPhoneNumber"
-			@getphonenumber="phoneLogin">微信手机号一键登录</button>
+          @getphonenumber="phoneLogin"
+        >微信手机号一键登录</button>
         <!-- <button class="cu-btn author-btn" v-if="canIUseGetUserProfile" @tap="getUserInfoProfile">授权并查看</button>
 		<button class="cu-btn author-btn" v-else @getuserinfo="getUserInfoBtn" open-type="getUserInfo">授权并查看</button> -->
-        <button class="cu-btn close-btn" @tap="back">暂不登录</button>
+        <button
+          class="cu-btn close-btn"
+          @tap="back"
+        >暂不登录</button>
       </view>
     </view>
     <!-- #endif -->
@@ -22,7 +35,10 @@
       <!-- <image class="logo-bg" :src="`${$VUE_APP_RESOURCES_URL}/images/logo_bg.png`" mode="aspectFill"></image> -->
       <view class="force-login__content y-f">
         <view class="login-notice">为了提供更优质的服务，请先登录</view>
-        <button class="cu-btn author-btn" @tap="toLogin">去登录</button>
+        <button
+          class="cu-btn author-btn"
+          @tap="toLogin"
+        >去登录</button>
       </view>
     </view>
     <!-- #endif -->
@@ -44,7 +60,8 @@ export default {
   data() {
     return {
       authorize: false,
-      canIUseGetUserProfile: false
+      canIUseGetUserProfile: false,
+      code: ''
     }
   },
   computed: {
@@ -54,8 +71,13 @@ export default {
     if (wx.getUserProfile) {
       this.canIUseGetUserProfile = true
     }
+    this.getLoginCode()
+
     // // 先校验用户是否授权，如果没有授权，显示授权按钮
   },
+  mounted() {
+    this.getLoginCode()
+  },
   onHide() {
     this.updateAuthorizationPage(false)
     this.changeAuthorization(false)
@@ -118,7 +140,7 @@ export default {
         lang: 'zh_CN',
         desc: '需要获取您的信息用来展示',
         success: res => {
-          console.log('用户信息',res)
+          console.log('用户信息', res)
           uni.showLoading({
             title: '登录中',
           })
@@ -140,31 +162,32 @@ export default {
         },
       })
     },
-	// 微信用户手机号登录
+    getLoginCode() {
-	phoneLogin(e) {
-		console.log('用户微信手机号登录')
-		if (e.mp.detail.errMsg == 'getPhoneNumber:ok') {
-			console.log(e.mp.detail)
       getProvider()
         .then(provider => {
-				console.log('当前的环境商',provider)
-				if (!provider) {
-				  reject()
-				}
           // uni登录
           uni.login({
             provider: provider,
             success: async loginRes => {
-						console.log(loginRes)
+              console.log("🚀 ~ file: index.vue:171 ~ getLoginCode ~ loginRes:", loginRes)
-						let code = loginRes.code // 获取开发code
+              this.code = loginRes.code
-						cookie.set('wxLoginCode', loginRes.code)
+            }
+          })
+        })
+    },
+    // 微信用户手机号登录
+    phoneLogin(e) {
+      console.log('用户微信手机号登录')
+      if (e.mp.detail.errMsg == 'getPhoneNumber:ok') {
+        console.log('wxLoginCode', this.code)
+        cookie.set('wxLoginCode', this.code)
         wxappAuth({
           encryptedData: e.mp.detail.encryptedData,
           iv: e.mp.detail.iv,
-						  code: code,
+          code: this.code,
           spread: cookie.get('spread'),
         })
-						.then( res => {
+          .then(res => {
             console.log('登录成功,开始处理登录信息保存，并获取用户详情')
             uni.hideLoading()
             store.commit('login', res.data.token, dayjs(res.data.expires_time))
@@ -180,16 +203,14 @@ export default {
               })
               .catch(error => {
                 console.log('获取用户信息失败')
+                this.getLoginCode()
               })
           })
           .catch(error => {
             console.log(error)
             console.log('登录接口调用失败')
+            this.getLoginCode()
           })
-					}
-				})
-			})
-			.catch(err => {})
       } else {
         uni.showToast({
           title: '已拒绝授权',

pages/user/User/index.vue

@@ -1,11 +1,26 @@
 <template>
   <view class="user">
     <view v-if="$store.getters.token || userInfo.uid">
-      <view class="getUserBaseData header bg-color-red acea-row row-between-wrapper" v-if="!userInfo.avatar && !userInfo.nickname">
+      <view
-        <button class="userDataBtn" v-if="canIUseGetUserProfile" @tap="getUserInfoProfile">授权并查看用户信息</button>
+        class="getUserBaseData header bg-color-red acea-row row-between-wrapper"
-        <button class="userDataBtn" v-else @getuserinfo="getUserInfo" open-type="getUserInfo">授权并查看用户信息</button>
+        v-if="!userInfo.avatar && !userInfo.nickname"
+      >
+        <button
+          class="userDataBtn"
+          v-if="canIUseGetUserProfile"
+          @tap="getUserInfoProfile"
+        >授权并查看用户信息</button>
+        <button
+          class="userDataBtn"
+          v-else
+          @getuserinfo="getUserInfo"
+          open-type="getUserInfo"
+        >授权并查看用户信息</button>
       </view>
-      <view class="header bg-color-red acea-row row-between-wrapper" v-else>
+      <view
+        class="header bg-color-red acea-row row-between-wrapper"
+        v-else
+      >
         <view class="picTxt acea-row row-between-wrapper">
           <view class="pictrue">
             <image :src="userInfo.avatar" />
@@ -13,12 +28,19 @@
           <view class="text">
             <view class="acea-row row-middle">
               <view class="name line1">{{ userInfo.nickname }}</view>
-              <view class="member acea-row row-middle" v-if="userInfo.vip">
+              <view
+                class="member acea-row row-middle"
+                v-if="userInfo.vip"
+              >
                 <image :src="userInfo.vipIcon" />
                 <text>{{ userInfo.vipName }}</text>
               </view>
             </view>
-            <view @click="goPersonalData()" class="id" v-if="userInfo.phone">
+            <view
+              @click="goPersonalData()"
+              class="id"
+              v-if="userInfo.phone"
+            >
               <text>ID：{{ userInfo.uid || 0 }}</text>
               <text class="iconfont icon-bianji1"></text>
             </view>
@@ -35,23 +57,40 @@
             <!-- #endif -->
           </view>
         </view>
-        <text class="iconfont icon-shezhi" @click="goPersonalData()"></text>
+        <text
+          class="iconfont icon-shezhi"
+          @click="goPersonalData()"
+        ></text>
       </view>
       <view class="wrapper">
         <view class="nav acea-row row-middle">
-          <view @click="goUserAccount()" class="item">
+          <view
+            @click="goUserAccount()"
+            class="item"
+          >
             <text>我的余额</text>
             <text class="num">{{ userInfo.nowMoney || 0 }}</text>
           </view>
-          <view @click="goUserPromotion()" class="item" v-if="userInfo.isPromoter === 1 || userInfo.statu === 2">
+          <view
+            @click="goUserPromotion()"
+            class="item"
+            v-if="userInfo.isPromoter === 1 || userInfo.statu === 2"
+          >
             <text>当前佣金</text>
             <text class="num">{{ userInfo.brokeragePrice || 0 }}</text>
           </view>
-          <view @click="goIntegral()" class="item" v-else>
+          <view
+            @click="goIntegral()"
+            class="item"
+            v-else
+          >
             <text>当前积分</text>
             <text class="num">{{ userInfo.integral || 0 }}</text>
           </view>
-          <view @click="goUserCoupon()" class="item">
+          <view
+            @click="goUserCoupon()"
+            class="item"
+          >
             <text>优惠券</text>
             <text class="num">{{ userInfo.couponCount || 0 }}</text>
           </view>
@@ -59,44 +98,80 @@
         <view class="myOrder">
           <view class="title acea-row row-between-wrapper">
             <text>我的订单</text>
-            <text @click="goMyOrder()" class="allOrder">
+            <text
+              @click="goMyOrder()"
+              class="allOrder"
+            >
               <text>全部订单</text>
               <text class="iconfont icon-jiantou"></text>
             </text>
           </view>
-          <view class="orderState acea-row row-middle" v-if="userInfo.orderStatusNum !== undefined || userInfo.orderStatusNum !== null">
+          <view
-            <view @click="goMyOrder(0)" class="item">
+            class="orderState acea-row row-middle"
+            v-if="userInfo.orderStatusNum !== undefined || userInfo.orderStatusNum !== null"
+          >
+            <view
+              @click="goMyOrder(0)"
+              class="item"
+            >
               <view class="pictrue">
                 <image :src="`${$VUE_APP_RESOURCES_URL}/images/dfk.png`" />
-                <text class="order-status-num" v-if="userInfo.orderStatusNum.unpaidCount > 0">{{ userInfo.orderStatusNum.unpaidCount }}</text>
+                <text
+                  class="order-status-num"
+                  v-if="userInfo.orderStatusNum.unpaidCount > 0"
+                >{{ userInfo.orderStatusNum.unpaidCount }}</text>
               </view>
               <view>待付款</view>
             </view>
-            <view @click="goMyOrder(1)" class="item">
+            <view
+              @click="goMyOrder(1)"
+              class="item"
+            >
               <view class="pictrue">
                 <image :src="`${$VUE_APP_RESOURCES_URL}/images/dfh.png`" />
-                <text class="order-status-num" v-if="userInfo.orderStatusNum.unshippedCount > 0">{{ userInfo.orderStatusNum.unshippedCount }}</text>
+                <text
+                  class="order-status-num"
+                  v-if="userInfo.orderStatusNum.unshippedCount > 0"
+                >{{ userInfo.orderStatusNum.unshippedCount }}</text>
               </view>
               <view>待发货</view>
             </view>
-            <view @click="goMyOrder(2)" class="item">
+            <view
+              @click="goMyOrder(2)"
+              class="item"
+            >
               <view class="pictrue">
                 <image :src="`${$VUE_APP_RESOURCES_URL}/images/dsh.png`" />
-                <text class="order-status-num" v-if="userInfo.orderStatusNum.receivedCount > 0">{{ userInfo.orderStatusNum.receivedCount }}</text>
+                <text
+                  class="order-status-num"
+                  v-if="userInfo.orderStatusNum.receivedCount > 0"
+                >{{ userInfo.orderStatusNum.receivedCount }}</text>
               </view>
               <text>待收货</text>
             </view>
-            <view @click="goMyOrder(3)" class="item">
+            <view
+              @click="goMyOrder(3)"
+              class="item"
+            >
               <view class="pictrue">
                 <image :src="`${$VUE_APP_RESOURCES_URL}/images/dpj.png`" />
-                <text class="order-status-num" v-if="userInfo.orderStatusNum.evaluatedCount > 0">{{ userInfo.orderStatusNum.evaluatedCount }}</text>
+                <text
+                  class="order-status-num"
+                  v-if="userInfo.orderStatusNum.evaluatedCount > 0"
+                >{{ userInfo.orderStatusNum.evaluatedCount }}</text>
               </view>
               <text>待评价</text>
             </view>
-            <view @click="goReturnList()" class="item">
+            <view
+              @click="goReturnList()"
+              class="item"
+            >
               <view class="pictrue">
                 <image :src="`${$VUE_APP_RESOURCES_URL}/images/sh.png`" />
-                <text class="order-status-num" v-if="userInfo.orderStatusNum.refundCount > 0">{{ userInfo.orderStatusNum.refundCount }}</text>
+                <text
+                  class="order-status-num"
+                  v-if="userInfo.orderStatusNum.refundCount > 0"
+                >{{ userInfo.orderStatusNum.refundCount }}</text>
               </view>
               <text>售后/退款</text>
             </view>
@@ -105,7 +180,11 @@
         <view class="myService">
           <view class="serviceList acea-row row-middle">
             <template v-for="(item, MyMenusIndex) in MyMenus">
-              <view class="item" :key="MyMenusIndex" @click="goPages(MyMenusIndex)">
+              <view
+                class="item"
+                :key="MyMenusIndex"
+                @click="goPages(MyMenusIndex)"
+              >
                 <view class="pictrue">
                   <image :src="item.pic" />
                 </view>
@@ -127,7 +206,10 @@
         :login_type="userInfo.login_type"
       ></SwitchWindow>-->
     </view>
-    <Authorization v-else />
+    <Authorization
+      v-else
+      ref="authorization"
+    />
   </view>
 </template>
 <script>
@@ -147,7 +229,7 @@ export default {
     Authorization,
   },
   props: {},
-  data: function() {
+  data: function () {
     return {
       canIUseGetUserProfile: false,
       MyMenus: [],
@@ -160,6 +242,9 @@ export default {
     if (wx.getUserProfile) {
       this.canIUseGetUserProfile = true
     }
+    if (!this.$store.getters.token && !this.userInfo.uid) {
+      this.$refs.authorization.getLoginCode()
+    }
   },
   methods: {
     ...mapMutations(['updateAuthorizationPage']),
@@ -428,6 +513,7 @@ export default {
     color: rgba(255, 255, 255, 1);
   }
 }
+
 .footer-line-height {
   height: 1 * 100rpx;
 }