<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:''}
|
}
|
//添加校验
|
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'
|
})
|
}
|
}
|
</script>
|
<template>
|
<view class="container">
|
<navbar title = '用户资料'></navbar>
|
<view class="content">
|
<view class="info-box">
|
<view class="info-up">
|
<view class="info-img">
|
<text>头像</text>
|
<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>
|
<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>
|
</view>
|
<view class="info-list">
|
<view class="item">
|
<text>会员卡号</text>
|
<text v-if="userInfo.waterCardNumber">{{userInfo.waterCardNumber}}</text>
|
<text v-else>未绑定会员卡</text>
|
</view>
|
<view class="item">
|
<text>联系方式</text>
|
<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>
|
<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>
|
</template>
|
|
<style lang="scss">
|
.container{
|
width: 100%;
|
height: 100vh;
|
.content{
|
width: 100%;
|
height:calc(100vh - 176rpx);
|
background:linear-gradient(to top,#FFFFFF,#E8EFFF);
|
padding-top:36rpx;
|
position: relative;
|
box-sizing: border-box;
|
.info-value{
|
font-size:32rpx;
|
color: #777777;
|
}
|
// .edit{
|
// margin-left:15rpx;
|
// width: 20rpx;
|
// height:28rpx;
|
// }
|
.info-box{
|
width: 100%;
|
//该页面公用input样式
|
input{
|
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);
|
color: #777777;
|
height:50rpx;
|
line-height:50rpx;
|
width:300rpx;
|
}
|
.info-up{
|
height:308rpx;
|
width:100%;
|
background: #FFFFFF;
|
padding:32rpx;
|
display: flex;
|
justify-content:space-between;
|
align-items:center;
|
flex-direction: column;
|
box-sizing: border-box;
|
font-size: 32rpx;
|
color: #343434;
|
.info-img{
|
width:100%;
|
display: flex;
|
justify-content:space-between;
|
align-items:center;
|
.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{
|
width:100%;
|
display: flex;
|
justify-content:space-between;
|
align-items:center;
|
.validate-text{
|
color:#f56c6c;
|
font-size:24rpx;
|
}
|
}
|
}
|
.info-list{
|
width:100%;
|
height:252rpx;
|
display: flex;
|
flex-direction:column;
|
justify-content:space-between;
|
align-items: center;
|
margin-top:20rpx;
|
.item{
|
width:100%;
|
height: 116rpx;
|
background-color: #FFFFFF;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding:0 32rpx;
|
box-sizing: border-box;
|
text:last-child{
|
color: #777777;
|
}
|
.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;
|
}
|
}
|
}
|
}
|
}
|
.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;
|
position: absolute;
|
bottom:100rpx;
|
left:32rpx;
|
}
|
.btn{
|
width: 200rpx;
|
height: 70rpx;
|
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;
|
}
|
}
|
}
|
</style>
|
