From ad876a6fea2df6e2a831d4c9d95cf724855610f4 Mon Sep 17 00:00:00 2001
From: Liuyi <candymxq888@outlook.com>
Date: 星期六, 14 十二月 2024 16:43:35 +0800
Subject: [PATCH] 修复用户微信扫码进入小程序无法跳转及登录问题，修改会员卡解绑接口
---
pages/userInfo/index.vue | 311 ++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 242 insertions(+), 69 deletions(-)
diff --git a/pages/userInfo/index.vue b/pages/userInfo/index.vue
index fe94ade..2413d72 100644
--- a/pages/userInfo/index.vue
+++ b/pages/userInfo/index.vue
@@ -1,10 +1,67 @@
<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
@@ -15,30 +72,84 @@
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">
@@ -48,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>
@@ -66,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>
@@ -104,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;
@@ -132,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{
@@ -143,6 +282,10 @@
display: flex;
justify-content:space-between;
align-items:center;
+ .validate-text{
+ color:#f56c6c;
+ font-size:24rpx;
+ }
}
}
.info-list{
@@ -165,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;
}
@@ -177,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;
+ }
}
}
}
--
Gitblit v1.9.3