yuxingu-Miniprogram-dev/pages/edit-userinfo/edit-userinfo.vue

<template>
	<view class="content">
		<myNav title="编辑资料" bgColor="#fff" titleColor="#614D49" :backIcon="true" :backHome="false" :flex="false"></myNav>
		<view style="display: flex;flex-direction: column;align-items: center;padding: 40rpx;box-sizing: border-box;width: 100%;">
			<view style="display: flex;justify-content: space-between;width: 100%;flex-direction: column;padding:58rpx 40rpx 80rpx 40rpx;
					border-radius: 10rpx; box-sizing: border-box;background-color: #fff;">
				<view style="display: flex;align-items: center;justify-content: space-between;">
					<text class="p-title">头像</text>
					<view style="display: flex;align-items: center;">
						<button type="default" open-type="chooseAvatar"
							style="width: 100%;background-color: #fff;text-align: right;border: none;margin-right: 0;padding-right: 10rpx;height: 95rpx;"
							@chooseavatar="chooseavatar" plain>
							<image v-if="showObj.avatarUrl" :src="showObj.avatarUrl" style="width: 80rpx;height: 80rpx;border-radius: 80rpx;"></image>
							<image v-else src="/static/n-pc/head.png" style="width: 80rpx;height: 80rpx;"></image>
						</button>
						
						<image src="/static/n-pc/p-left.png" style="width: 12rpx;height: 22rpx;margin-left: 22rpx;"></image>
					</view>
				</view>	
				<view style="display: flex;align-items: center;justify-content: space-between;margin-top: 40rpx;">
					<text class="p-title">昵称</text>
					<view style="display: flex;align-items: center;">
						<!-- <text class="p-name">微信用户</text> -->
						<input type="nickname" style="width: 100%;background-color: #fff;text-align: right;border: none;padding-right: 10rpx;
								font-family: 'SourceHanSans';font-size: 28rpx;color: rgba(0, 0, 0, 0.7);" v-model="showObj.nickName"
							  placeholder-class="user-input-placeholder" @change="getNickname"></input>
						<image src="/static/n-pc/p-left.png" style="width: 12rpx;height: 22rpx;margin-left: 22rpx;"></image>
					</view>
				</view>		
					
			</view>
			<view style="display: flex;justify-content:center;width: 90%;flex-direction: column;height:96rpx;align-items: center;margin-top: 100rpx;
					border-radius: 2002rpx; box-sizing: border-box;background:  linear-gradient(180deg, #E84B2A 0%, #FF846A 100%);" @click="saveUserinfo">
					<text class="btn-text">保存</text>
			</view>	
		</view>
				
			
	</view>
</template>

<script setup>
import myNav from '@/components/my-nav.vue'
import {
  urls
} from '@/util/apiUrl.js'
import dohttp from '@/util/requestConfig.js'
	const showObj=ref({
		avatarUrl: null,
		nickName: null
	})
	onLoad((option) => {
		const userinfo = uni.getStorageSync('userinfo')
		if(userinfo){
			showObj.value.avatarUrl= userinfo.avatarUrl
			showObj.value.nickName = userinfo.nickName
			if(!showObj.value.nickName){
				showObj.value.nickName = "微信用户"
			}
		}else{
			getUserInfo()
		}
	})
	const getUserInfo = () => {
		dohttp.get(urls.getSelfInfo).then((result) => {
			const userinfo = {
				avatarUrl: result.avatarUrl,
				nickName: result.nickName
			}
			uni.setStorageSync('userinfo', userinfo)
			showObj.value.avatarUrl= result.avatarUrl
			showObj.value.nickName = result.nickName
			if(!showObj.value.nickName){
				showObj.value.nickName = "微信用户"
			}
		})

	}
	
	const chooseavatar = (result) => {
		console.log("chooseavatarchooseavatar",result,dohttp.baseUrl + urls.upload)
		if (result.detail.avatarUrl) {
			uni.uploadFile({
				url: dohttp.baseUrl + urls.upload,
				filePath: result.detail.avatarUrl,
				name: "file",
				success: (res) => {
					if (res.statusCode == 200) {
						let data = JSON.parse(res.data)
						showObj.value.avatarUrl = data.data
					}
				},
			})
		}
	}
	const getNickname = (event) => {
		if (event.detail.value) {
			showObj.value.nickName = event.detail.value
		}
	}
	
	const saveUserinfo = ()=>{
		if (!showObj.value.avatarUrl) {
			uni.showToast({
				title: '请上传头像',
				duration: 2000,
				icon: "error"
			});
			return
		}
		if (!showObj.value.nickName) {
			uni.showToast({
				title: '请输入昵称',
				duration: 2000,
				icon: "error"
			});
			return
		}
		const params = {
			nickName:showObj.value.nickName,
			avatarUrl:showObj.value.avatarUrl
		}
		
		uni.setStorageSync('userinfo', showObj.value)
		
		
		dohttp.post(urls.updateUserInfo,params).then((result) => {
      uni.showToast({
        title: '更新成功',
        duration: 2000,
        icon: "success",
		success: () => {
		    setTimeout(() => {
		      uni.navigateBack({
		        delta: 1
		      });
		    }, 2000);
		  }
      });
		})	
		// uni.reLaunch({
		// 	url:"/pages/index/index"
		// })
		
		
	}
</script>

<style scoped>
.content {
  width: 100vw;
  height: 100vh;
  background-color: #f9f8f8;
  display: flex;
  flex-direction: column;
  font-family: SourceHanSans;
  background-image: url('https://miniapp.yuxingu.com.cn/yxg-mp/pic/bg-all.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.p-title{
	font-size: 28rpx;
	font-family: SourceHanSansBold;
	color: #614D49;
}

.p-name{
	font-size: 28rpx;
	color: #9B918C;
}
.btn-text{
	font-size: 36rpx;
	font-family: SourceHanSansBold;
	color: #FFFFFF;
}
</style>