绿满眶商城微信小程序-uniapp
peng
2025-09-08 f91b8ab866a25cc79b0438952873c9b9463607ec
pages/passport/wechatMPLogin.vue
@@ -3,17 +3,33 @@
      <u-navbar :custom-back="back" title="小程序登录"></u-navbar>
      <u-modal v-model="phoneAuthPopup" :mask-close-able="true" :title="projectName+'商城'"
         :show-confirm-button="false">
         <div class="tips">
            为了更好地用户体验,需要您授权手机号
            为了更好地用户体验,需要您授权手机号和昵称
         </div>
         <button class="register" type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
            去授权
         <view class="auth-row">
            <text class="label">昵称:</text>
            <input
                class="register"
               type="nickname"
               v-model="nickName"
               placeholder="请输入昵称"
            >
            </input>
         </view>
         <button :class="isDisabled ? 'noRegister' : 'register'"  type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" :disabled="isDisabled">
            下一步
         </button>
      </u-modal>
      <view class="wx-auth-container">
         <div class="box">
            <view class="logo-info">
               <text class="title">欢迎进入{{ projectName }}</text>
            </view>
            <view>
               <text class="small-title">你好,此服务仅绿满筐会员使用</text>
            </view>
            <view class="small-tips">
               <view>为您提供优质服务,{{ projectName }}需要获取以下信息</view>
@@ -33,14 +49,13 @@
            </u-checkbox>
        </div>
         </div>
      </view>
   </view>
</template>
<script>
   import UCheckBox from '@/uview-components/uview-ui/components/u-checkbox/u-checkbox.vue';
   import UNavbar from '@/uview-components/uview-ui/components/u-navbar/u-navbar.vue';
   import UModel from '@/uview-components/uview-ui/components/u-modal/u-modal.vue';
   import '@/components/uview-components/uview-ui';
   import {
      mpAutoLogin
   } from "@/api/connect.js";
@@ -49,14 +64,14 @@
      whetherNavigate
   } from "@/utils/Foundation"; //登录跳转
   import {
      getUserInfo
      getUserInfo,updateMemberNickName
   } from "@/api/members";
   import storage from "@/utils/storage.js";
   import config from '@/config/config'
   export default {
      components: {UCheckBox, UModel,UNavbar},
      data() {
         return {
            isDisabled:true,
            lightColor:this.$lightColor,
            checked:false,
        configs:config,
@@ -96,6 +111,15 @@
      });
         
      },
      watch:{
         nickName(newVal){
            if(this.nickName.trim().length === 0){
               this.isDisabled = true;
            }else{
               this.isDisabled = false
            }
         }
      },
      methods: {
         /**
          * TODO 此方法不一定是最优解,如果有更好的办法请在  https://gitee.com/beijing_hongye_huicheng/lilishop/issues 中提出
@@ -114,10 +138,7 @@
               url: `/pages/tabbar/home/index`,
            });
         },
         //获取用户信息
      getUserProfile(e) {
            if(!this.checked){
@@ -134,10 +155,15 @@
          uni.getUserProfile({
            desc: "用于完善会员资料", // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
            success: (res) => {
              console.log("success", res)
              this.nickName = res.userInfo.nickName;
              this.image = res.userInfo.avatarUrl;
              // console.log("success", res)
           //重置按钮显示
           // this.$refs.nicknameInput.focus();
              // this.nickName = res.userInfo.nickName;
              // this.image = res.userInfo.avatarUrl;
           // 打印微信名称
           // console.log("微信昵称:", this.nickName);
              /**
               * 根据公有的配置设置登录方式
               */
@@ -158,6 +184,7 @@
                image,
                nickName,
              }).then((apiRes) => {
              console.log(apiRes)
                storage.setAccessToken(apiRes.data.result.accessToken);
                storage.setRefreshToken(apiRes.data.result.refreshToken);
                // 登录成功
@@ -165,6 +192,7 @@
                  title: "登录成功!",
                  icon: "none",
                });
                //获取用户信息
                getUserInfo().then((user) => {
                  storage.setUserInfo(user.data.result);
@@ -185,11 +213,12 @@
          this.logingFlag = false;
        }
         },
         //获取手机号授权
         getPhoneNumber(e) {
          getPhoneNumber(e) {
           let iv = e.detail.iv;
           let encryptedData = e.detail.encryptedData;
           if (!e.detail.encryptedData) {
             uni.showToast({
               title: "请授予手机号码权限,手机号码会和会员系统用户绑定!",
@@ -197,10 +226,18 @@
             });
             return;
           }
           let code = this.code;
           let image = this.image;
           let nickName = this.nickName;
           console.log('getPhoneNumber:' + code)
           console.log('getPhoneNumber:' + image)
           console.log('getPhoneNumber:' + nickName)
           mpAutoLogin({
             encryptedData,
             iv,
@@ -208,6 +245,7 @@
             image,
             nickName,
           }).then((res) => {
            //登录成功修改用户的昵称
             storage.setAccessToken(res.data.result.accessToken);
             storage.setRefreshToken(res.data.result.refreshToken);
             // 登录成功
@@ -216,14 +254,29 @@
               icon: "none",
             });
             //获取用户信息
             getUserInfo().then((user) => {
               storage.setUserInfo(user.data.result);
               storage.setHasLogin(true);
               getUserInfo().then(async (user) => {
               console.log(user)
               const form ={
                  memberId:user.data.result.id,
                  nickName:this.nickName
               }
               let name = '';
               await updateMemberNickName(form).then(res =>{
                  if(res.statusCode === 200){
                     name = res.data.data;
                  }
               })
               user.data.result.nickName = name
               storage.setUserInfo(user.data.result);
               storage.setHasLogin(true);
               uni.navigateBack({
                 delta: 1,
               });
             });
           });
         },
@@ -234,6 +287,19 @@
   };
</script>
<style lang="scss" scoped>
   .auth-row {
      text-align: left;
      margin: 6% 10%;
     display: flex;
     align-items: center;
     margin-bottom: 30rpx;
   }
   .label {
     width: 150rpx;
     font-size: 32rpx;
     color: #333;
   }
   /*微信授权*/
   page {
      background-color: #ffffff;
@@ -287,7 +353,12 @@
   .box {
      margin: 0 32rpx;
   }
   .small-title {
      width: 94%;
      padding: 20rpx;
      font-size: 34rpx;
      margin: 0 0 20rpx;
   }
   /* 文字提示*/
   .small-tips {
      width: 94%;
@@ -309,7 +380,11 @@
      margin-top: 48rpx;
      line-height: 1.75;
   }
   .noRegister{
      color: #b8b8b8 !important;
      border: none !important;
      background: #fff !important;
   }
   .register {
      color: $weChat-color !important;
      border: none !important;