androidCnToWechatGrt/pages/my/info.vue

<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='用户信息'></cus-header>
		<div class="info">
			<div class="item">
				<div class="left">头像</div>
				<div class="right" @tap="changeAvatar">
					<image :src="userInfo.headUrl||avatar" mode=""></image>
					<u-icon name="arrow-right" color="#198CFF" size="32" style="margin-left: 10rpx;"></u-icon>
				</div>
			</div>
			<div class="item">
				<div class="left">姓名</div>
				<div class="right">
					<input type="text" v-model="userInfo.realName" placeholder="请输入姓名">
				</div>
			</div>
			<div class="item">
				<div class="left">性别</div>
				<div class="right" @tap="sexShow = true">
					{{userInfo.gender===0?'男':(userInfo.gender==1?'女':'保密')}}
					<u-icon name="arrow-right" color="#198CFF" size="32" style="margin-left: 10rpx;"></u-icon>
				</div>
			</div>
			<div class="item">
				<div class="left">邮箱</div>
				<div class="right">
					<input type="text" v-model="userInfo.email" placeholder="请输入邮箱">
				</div>
			</div>
		</div>
		<div class="btn" @tap="confirm">确定</div>
		<u-picker :show="sexShow" :columns="sexColumns" title="性别" keyName="name" @cancel="sexShow = false;" @confirm="sexConfirm"></u-picker>
	</view>
</template>

<script>
	const baseApi = require("@/http/baseApi.js");
	export default {
		data(){
			return {
				avatar:this.$imgBase+'home/home_avator.png',
				userInfo:{},
				sexShow:false,
				sexColumns:[[{id:0,name:'男'},{id:1,name:'女'},{id:2,name:'保密'}]]
			}
		},
		created() {
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo')||'{}');
		},
		methods:{
			sexConfirm(e){
				this.userInfo.gender = e.value[0].id;
				this.sexShow = false;
			},
			confirm(){
				if(!this.$reg.email(this.userInfo?.email)) return this.$showToast('请输入正确的邮箱');
				this.$api.put('/user',this.userInfo).then(res=>{
					if(res.data.code===0){
						uni.setStorageSync('userInfo',JSON.stringify(this.userInfo));
						this.$showToast('编辑成功');
						setTimeout(()=>{
							uni.navigateBack()
						},1500)
					}else this.$showToast(res.data.msg)
				})
			},
			// 上传头像
			changeAvatar() {
				uni.chooseImage({
					sourceType: ['album'], //从相册选择
					success: chooseImageRes => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: baseApi.BaseApi + '/uploadFile',
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								token: uni.getStorageSync('token')
							},
							success: res => {
								let data = JSON.parse(res.data);
								this.userInfo.headUrl = data.data;
							}
						});
					},
					fail: err => {
						this.$showToast('图片上传失败');
					}
				});
			},
		}
	}
</script>

<style scoped lang="less">
	.page{
		background: #F4F8FB;
		box-sizing: border-box;
		
		.info{
			width: 100%;
			margin-top: 20rpx;
			.item{
				padding: 24rpx 25rpx;
				background: #FFFFFF;
				box-shadow: inset 0rpx -1rpx 0rpx 0rpx #ECECEC;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #1D2129;
					line-height: 42rpx;
					text-align: left;
				}
				.right{
					display: flex;
					align-items: center;
					image{
						width: 96rpx;
						height: 96rpx;
						border-radius: 50%;
					}
					input{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						color: #4E5969;
						line-height: 42rpx;
						text-align: right;
						outline: none;
						border: none;
					}
				}
			}
		}
		
		.btn{
			width: calc(100% - 108rpx);
			height: 88rpx;
			background: #198CFF;
			border-radius: 16rpx;
			margin: 240rpx 54rpx 0;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			letter-spacing: 2rpx;
		}
	}
</style>