lunhan/water/water-drinking-uniapp.git

			@@ -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>