修复用户微信扫码进入小程序无法跳转及登录问题，修改会员卡解绑接口

Liuyi

2024-12-14 ad876a6fea2df6e2a831d4c9d95cf724855610f4

 pages/userInfo/index.vue

@@ -1,43 +1,155 @@
<script setup>
   import { onMounted, ref } from 'vue'
   import { BASE_URL } from '../../config/baseUrl';
   import { editUserInfoApi,getUserInfo } from '../../api/index.js'
   const isEdit = ref(false)
   const editForm = ref({id:'',userName:'',userPhone:''})
   const userInfo = ref(JSON.parse(uni.getStorageSync('userInfo')))
   // const showHeadImg = ref(BASE_URL + '/upload' + userInfo.value.headImg)
   //修改用户头像
   function changeImg(){
      uni.chooseImage({
         success: async(res) =>{
             //建立表单，请求参数传表单形式
             let fileForm = {
                file1:res.tempFiles,
                path:'qingyuan'
             }
            uni.uploadFile({
               url:BASE_URL+ '/file/upload', 
               filePath:res.tempFilePaths[0],
               name: 'file',
               formData:fileForm,
               success: async(success) => {
                  console.log('success',success);
                  let dataObj = JSON.parse(success.data)
                  // let headImgStatic =  BASE_URL + '/upload' + dataObj.data.newFileName
                  await editUserInfoApi({id:userInfo.value.id,headImg:dataObj.data.newFileName}).then(async(res) =>{
                     if(res.code == 200){
                        uni.showToast({
                           title: '修改成功！',
                           duration: 1000,
                        });
                        await getUserInfo().then((res) =>{
                           userInfo.value.headImg = res.data.userInfo.headImg
                           // showHeadImg.value = BASE_URL + '/upload' + userInfo.value.headImg
                           console.log('resheadImg',userInfo.value.headImg)
									
                           uni.setStorageSync('userInfo',JSON.stringify(userInfo.value))
                        })
                     }else{
                        uni.showToast({
                           title: '网络错误！请重试',
                           duration: 1000,
                           icon:'none'
                        });
                     }
                  })
               },
               fail: (err) => {
                  uni.showToast({
                     title: '上传失败，请重试',
                     duration: 2000,
                     icon:'none'
                  });
                  console.log('err',err,res.tempFilePaths[0])
               }
            });
         }
      });
   }
   //修改用户电话及名称
   function edit(){
      validatePhone.value = true
      validateUserName.value = true
      editForm.value.id = userInfo.value.id
      editForm.value.userName = userInfo.value.userName
      editForm.value.userPhone = userInfo.value.userPhone
      isEdit.value = true
      console.log('userInfo',userInfo.value)
   }
   function cancel(){
      isEdit.value = false
      editForm.vlaue = {id:'',userName:'',userPhone:''}
   }
   async function submitEdit(){
      await editUserInfoApi(editForm.value).then(async(res) =>{
			
         if(res.code == 200){
            uni.showToast({
               title: '修改成功！',
               duration: 2000,
            });
            await getUserInfo().then((res) =>{
               userInfo.value.userName = res.data.userInfo.userName
               userInfo.value.userPhone = res.data.userInfo.userPhone
               uni.setStorageSync('userInfo',JSON.stringify(userInfo.value))
            })
         }else{
            uni.showToast({
               title: '请求错误！请重试',
               duration: 2000,
               icon:'none'
            });
         }
         isEdit.value = false
         editForm.vlaue = {id:'',userName:'',userPhone:''}
      })
   //添加校验
   const validateUserName = ref(true)
   function onBlur1(event){
      const nameValue = event.target.value
      const regExp =/^[\u4e00-\u9fa5\\.]+$/
      if(!regExp.test(nameValue)){
         validateUserName.value = false
      }else{
         validateUserName.value = true
      }
   }
   const validatePhone = ref(true)
   function onBlur2(event){
      const nameValue = event.target.value
      const regExp =/^1[3-9]\d{9}$/
      if(!regExp.test(nameValue)){
         validatePhone.value = false
      }else{
         validatePhone.value = true
      }
   }
   function validate(){
      if(validatePhone.value && validateUserName.value){
         return true
      }else{
         return false
      }
   }
   //提交修改表单
   async function submitEdit(){
      if(validate()){
         await editUserInfoApi(editForm.value).then(async(res) =>{
				
            if(res.code == 200){
               uni.showToast({
                  title: '修改成功！',
                  duration: 2000,
               });
               await getUserInfo().then((res) =>{
                  userInfo.value.userName = res.data.userInfo.userName
                  userInfo.value.userPhone = res.data.userInfo.userPhone
                  uni.setStorageSync('userInfo',JSON.stringify(userInfo.value))
               })
            }else{
               uni.showToast({
                  title: '网络错误！请重试',
                  duration: 2000,
                  icon:'none'
               });
            }
            isEdit.value = false
            editForm.vlaue = {id:'',userName:'',userPhone:''}
         })
      }else{
         uni.showToast({
            title:'输入不符合格式',
            icon:'none'
         })
      }
   }
   function loginout(){
       wx.showModal({
         title: '提示',
         content: '您确定要退出登录吗',
         success: function (res) {
           if (res.confirm) {//点击确定
             console.log('用户点击确定')
             uni.setStorageSync('token', '');//将token置空
             uni.setStorageSync('openId', '');//将openId置空
             uni.redirectTo({
               url: '/pages/login/index',//跳去登录页
             })
           } else {//这里是点击了取消以后
             console.log('用户点击取消')
           }
         }
       })
     }
</script>
<template>
   <view class="container">
@@ -47,12 +159,19 @@
            <view class="info-up">
               <view class="info-img">
                  <text>头像</text>
                  <image src='../../static/images/index/head.png' alt=''></image>
                  <view class="img-box" @click="changeImg">
                     <image v-if="userInfo.headImg" :src="BASE_URL + '/upload' + userInfo.headImg" alt=''></image>
                     <image v-else src='../../static/images/index/head.png' alt=''></image>
                     <image src='../../static/images/other/more.png' alt=''></image>
                  </view>
               </view>
               <view class="info-name">
                  <text>用户名称</text>
                  <view>
                     <input v-if="isEdit" v-model="editForm.userName" placeholder="请输入新用户名"/>
                     <view v-if="isEdit">
                        <input v-model="editForm.userName" @blur="onBlur1" placeholder="请输入新用户名"/>
                        <text class="validate-text" v-if="!validateUserName">请输入中文或" . "符号</text>
                     </view>
                     <text v-else class="info-value">{{userInfo.userName}}</text>
                  </view>
               </view>
@@ -65,18 +184,26 @@
               </view>
               <view class="item">
                  <text>联系方式</text>
                  <view>
                     <input v-if="isEdit" v-model="editForm.userPhone" placeholder="请输入新联系方式"/>
                  <view class="item-change">
                     <view v-if="isEdit">
                        <input v-model="editForm.userPhone" @blur="onBlur2" placeholder="请输入新联系方式"/>
                        <text v-if="!validatePhone">请输入正确的手机号格式</text>
                     </view>
                     <text v-if="userInfo.userPhone && !isEdit">{{userInfo.userPhone}}</text>
                     <text v-if="!userInfo.userPhone && !isEdit">未添加联系方式</text>
                     <!-- <image class="edit"src="../../static/images//other/more.png" alt=''></image> -->
                  </view>
               </view>
            </view>
            <view class="edit-box">
               <view v-if="!isEdit" @click="edit()" class="subBtn">修改</view>
               <view v-if="isEdit" @click="cancel()" class="btn btn1">取消</view>
               <view v-if="isEdit" @click="submitEdit()" class="btn btn2">确认修改</view>
            </view>
         </view>
         <view v-if="!isEdit" @click="edit()" class="subBtn">修改</view>
         <view v-if="isEdit" @click="cancel()" class="btn btn1">取消</view>
         <view v-if="isEdit" @click="submitEdit()" class="btn btn2">确认修改</view>
         <view class="login-out" @click="loginout">
            <view class="login-out-btn">退出登录</view>
         </view>
      </view>
   </view>
</template>
@@ -103,12 +230,15 @@
         // }
         .info-box{
            width: 100%;
            background: #FFFFFF;
            height:85%;
            //该页面公用input样式
            input{
               border-radius: 10rpx;
               border:1px solid rgba(101, 156, 244, 0.2);
               border-radius:5rpx;
               border-bottom: 1px solid rgba(83, 131, 203, 0.5);
               // border:1px solid rgba(101, 156, 244, 0.2);
               padding:5rpx 10rpx;
               box-shadow: 0 0 12rpx 1rpx rgba(101, 156, 244, 0.2);
               // box-shadow: 0 0 12rpx 1rpx rgba(101, 156, 244, 0.2);
               color: #777777;
               height:50rpx;
               line-height:50rpx;
@@ -131,10 +261,20 @@
                  display: flex;
                  justify-content:space-between;
                  align-items:center;
                  image{
                     width:100rpx;
                     height:100rpx;
                     border-radius: 50rpx;
                  .img-box{
                     display: flex;
                     align-items: center;
                     image:first-child{
                        width:100rpx;
                        height:100rpx;
                        border-radius: 50rpx;
                        margin-right:10rpx;
                     }
                     image:last-child{
                        width:30rpx;
                        height:36rpx;
                        border-radius: 50rpx;
                     }
                  }
               }
               .info-name{
@@ -142,6 +282,10 @@
                  display: flex;
                  justify-content:space-between;
                  align-items:center;
                  .validate-text{
                     color:#f56c6c;
                     font-size:24rpx;
                  }
               }
            }
            .info-list{
@@ -164,11 +308,19 @@
                  text:last-child{
                     color: #777777;
                  }
                  view{
                  .item-change{
                     height: 116rpx;
                     display: flex;
                     justify-content:flex-end;
                     align-items: center;
                     view{
                        display: flex;
                        flex-direction: column;
                        text{
                           color:#f56c6c;
                           font-size:24rpx;
                        }
                     }
                     text{
                        color: #777777;
                     }
@@ -176,45 +328,67 @@
               }
            }
         }
         .subBtn{
            width: 686rpx;
            height: 98rpx;
            background:#5EA1FA;
            border-radius:50rpx;
            text-align: center;
            line-height: 98rpx;
            letter-spacing:3rpx;
            font-weight: 300;
            font-size: 36rpx;
            color: #FFFFFF;
         .edit-box{
            margin-top: 20rpx;
            width:100%;
            height:100rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            // background: linear-gradient(to right,#FFFFFF,#E8EFFF);
            .subBtn{
               width:200rpx;
               height:60rpx;
               background:#fff;
               border: 1rpx solid rgba(102, 148, 255, 0.3);
               border-radius:32rpx;
               text-align: center;
               line-height: 60rpx;
               letter-spacing:3rpx;
               font-weight: 300;
               font-size: 36rpx;
               color: #5EA1FA;
            }
            .btn{
               width:200rpx;
               height:60rpx;
                  border-radius: 32rpx;
                  text-align: center;
                  line-height: 60rpx;
                  letter-spacing:3rpx;
                  font-weight: 300;
                  font-size: 36rpx;
            }
            .btn1{
               color:#5EA1FA;
               background:#FFFFFF;
               border: 1rpx solid rgba(102, 148, 255, 0.3);
               margin-right:50rpx;
            }
            .btn2{
               color: #FFFFFF;
               background:rgba(94, 161, 250, 0.8);
            }
         }
         .login-out{
            width:100%;
            height: 70rpx;
            position: absolute;
            bottom:100rpx;
            left:32rpx;
         }
         .btn{
               width: 200rpx;
               height: 70rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            .login-out-btn{
               width:50%;
               border-radius: 32rpx;
               text-align: center;
               line-height: 70rpx;
               letter-spacing:3rpx;
               font-weight: 300;
               font-size: 36rpx;
               position: absolute;
               bottom:100rpx;
         }
         .btn1{
            color:#5EA1FA;
            background:#FFFFFF;
            position: absolute;
            left:130rpx;
            border:2rpx solid #5EA1FA;
         }
         .btn2{
            color: #FFFFFF;
            background:#5EA1FA;
            position: absolute;
            right:130rpx;
               background: rgba(245, 108, 108, 0.9);
               color: #FFFFFF;
            }
         }
      }
   }