From 15a55f79a84e5dab670d54a9dc0c6b9133a18441 Mon Sep 17 00:00:00 2001
From: Liuyi <candymxq888@outlook.com>
Date: 星期一, 21 十月 2024 17:29:37 +0800
Subject: [PATCH] 添加更改用户头像，添加故障上报校验
---
pages/userInfo/index.vue | 266 ++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 251 insertions(+), 15 deletions(-)
diff --git a/pages/userInfo/index.vue b/pages/userInfo/index.vue
index 3b17850..90d1241 100644
--- a/pages/userInfo/index.vue
+++ b/pages/userInfo/index.vue
@@ -1,27 +1,138 @@
<script setup>
- import { ref } from 'vue'
- const infoList = ref([
- {text:'',value:''},
- {text:'',value:''},
- {text:'',value:''},
- {text:'',value:''},
- ])
+ 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')))
+ //修改用户头像
+ 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:headImgStatic}).then(async(res) =>{
+ if(res.code == 200){
+ uni.showToast({
+ title: '修改成功！',
+ duration: 1000,
+ });
+ await getUserInfo().then((res) =>{
+ userInfo.value.headImg = res.data.userInfo.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(){
+ 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:''}
+ })
+ }
</script>
<template>
<view class="container">
- <navbar title = '账户详情'></navbar>
+ <navbar title = '用户资料'></navbar>
<view class="content">
<view class="info-box">
- <view class="info-up"></view>
- <view class="info-list">
- <block v-for="(item,index) in infoList" :key = index>
- <view class="item">
- <text></text>
- <text></text>
+ <view class="info-up">
+ <view class="info-img">
+ <text>头像</text>
+ <view class="img-box" @click="changeImg">
+ <image v-if="userInfo.headImg" :src='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>
- </block>
+ </view>
+ <view class="info-name">
+ <text>用户名称</text>
+ <view>
+ <input v-if="isEdit" v-model="editForm.userName" placeholder="请输入新用户名"/>
+ <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>
+ <input v-if="isEdit" v-model="editForm.userPhone" placeholder="请输入新联系方式"/>
+ <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>
@@ -35,17 +146,142 @@
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: 10rpx;
+ 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;
+ }
}
.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;
+ }
+ view{
+ height: 116rpx;
+ display: flex;
+ justify-content:flex-end;
+ align-items: center;
+ 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>
--
Gitblit v1.9.3