jje_uniapp/myPages/userInfo/index.vue

<template>
	<view class="user-info-wrap">
		<view class="nav-bar">
			<view class="nav-content">
				<view class="nav-info">
					<view class="nav-desc">
						<view class="nav-name">
							<view class="">头像</view>
						</view>
					</view>
					<view @click="uploadImg1(1)" class="arrow-right">
						<view class="head-img">
							<image v-if="userInfo.selfPhotoUrl" :src="userInfo.selfPhotoUrl" mode=""></image>
							<image v-else src="../../static/me/u1796.png" mode=""></image>
						</view>
						<!-- <u-icon name="arrow-right" color="#666" size="26"></u-icon> -->
					</view>
				</view>
			</view>
			<view class="custom-line"></view>
			<view class="nav-content">
				<view class="nav-info">
					<view class="nav-desc">
						<view class="nav-name">
							<view class="">昵称</view>
						</view>
						<input class="custom-input" v-model="userInfo.ncikName" type="text" placeholder="请输入昵称">
					</view>
					<view class="arrow-right">
						<!-- <u-icon name="arrow-right" color="#666" size="16"></u-icon> -->
					</view>
				</view>
			</view>
			<view class="custom-line"></view>
			<view class="nav-content">
				<view class="nav-info">
					<view class="nav-desc">
						<view class="nav-name">
							<view class="">性别</view>
						</view>
					</view>
					<view @click="chooseGender()" class="arrow-right">
						<view class="change-store">
							<text v-if="userInfo.sex == 0">男</text>
							<text v-else-if="userInfo.sex == 1">女</text>
							<text v-else-if="userInfo.sex == 2">未知</text>
							<text v-else>请选择性别</text>
						</view>
						<u-icon name="arrow-right" color="#666" size="16"></u-icon>
					</view>
				</view>
			</view>
			<view class="custom-line"></view>
			<view class="nav-content">
				<view class="nav-info">
					<view class="nav-desc">
						<view class="nav-name">
							<view class="">生日</view>
						</view>
					</view>
					<view @click="chooseServiceDate()" class="arrow-right">
						<view class="change-store">
							<text v-if="userInfo.birthday">{{userInfo.birthday}}</text>
							<text v-else>请选择生日</text>
						</view>
						<u-icon name="arrow-right" color="#666" size="16"></u-icon>
					</view>
				</view>
			</view>
			<view class="custom-line"></view>
			<view class="nav-content">
				<view class="nav-info">
					<view class="nav-desc">
						<view class="nav-name">
							<view class="">实名认证</view>
						</view>
					</view>
					<view @click="gotoRealNameAuth()" class="arrow-right">
						<view class="change-store">
							<text v-if="userInfo.isAttestation">已认证</text>
							<text v-else>未实名认证，去认证</text>
						</view>
						<u-icon name="arrow-right" color="#666" size="16"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<view @click="saveUserInfo()" class="sure-btn">
			<view class="btn">确认</view>
		</view>


		<!-- 日期时间选择 -->
		<u-datetime-picker
			:show="dateShow"
			v-model="value1"
			mode="date"
			@confirm="sureChooseDate()"
		></u-datetime-picker>

		<!-- 性别选择 -->
		<u-picker :show="genderShow" keyName="gender"  @confirm="sureChooseGender" :columns="genderList"></u-picker>

	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {
				auth: true,
				ncikName: '',
				sex: '',
				birthday: '',
				selfPhoto: '',
				selfPhotoUrl: '',
				memberType: '',
				isAttestation: ''
			},
			genderShow: false,
			dateShow: false,
			value1: '2023-12-12',
			// 服务时间
			genderList: [
			  [{gender:'男',id:'0'},
				{gender:'女',id:'1'},
				{gender:'未知',id:'2'}
			  ],
			],
			imgUrl1: ''
		};
	},
	mounted() {
	},
	onLoad() {

		// 用户信息
		let user = uni.getStorageSync('userInfo')
		this.userInfo.birthday = user.birthday;
		this.userInfo.sex = user.sex;
		this.userInfo.ncikName = user.ncikName;
		this.userInfo.selfPhoto = user.selfPhoto;
		this.getImgUrlByOssId(user.selfPhoto)
		this.userInfo.memberType = user.memberType;
		this.userInfo.isAttestation = user.isAttestation;

	},
	methods: {

		// 选择性别
		chooseGender(){
			this.genderShow = true;
		},
		// 选择值
		sureChooseGender(e){
			this.genderShow = false;
			this.userInfo.sex = e.value[0].id;
		},
		// 确定选择的服务日期
		sureChooseDate(){
			this.dateShow = false;
			this.userInfo.birthday = this.$formatDate(this.value1)
		},
		// 选择服务日期
		chooseServiceDate(){
			this.value1 = Date.now();
			this.dateShow = true;
		},
		// 去会员信息页
		gotoMemberInfo(){

			uni.navigateTo({
				url: '/pages/member/member-info',
			})
		},
		// 去实名认证
		gotoRealNameAuth(){
			uni.navigateTo({
				url: '/pages/me/real-name-auth',
			})
		},
		// 保存用户信息
		saveUserInfo(){
			// 保存数据
			this.$api.saveUserInfo(null,{data:this.userInfo}).then((res)=>{
				console.log(res)
				// 刷新用户信息
				this.$refreshUserLoginInfo();
				uni.showToast({
					title: "操作成功"
				})
				uni.navigateTo({
					url: '/pages/index/tabbar',
				})
			}).catch(() =>{
				uni.showToast({
					title: "操作失败"
				})
			});
		},
		async getImgUrlByOssId(Id){
			let url = await this.$api.getImgUrlByOssId(Id);
			this.userInfo.selfPhotoUrl = url;
			return url;
		},
		//头像上传
		uploadImg1(imgIndex) {
			let that = this;
			uni.chooseImage({
				count: 1,
				success: (chooseImageRes) => {
					const tempFilePaths = chooseImageRes.tempFilePaths;

					uni.uploadFile({
						url: that.$host + '/resource/oss/upload', //仅为示例，非真实的接口地址
						filePath: tempFilePaths[0],
						name: 'file',
						header: {
							// "Content-Type": "multipart/form-data",
							// 'X-Access-Token': uni.getStorageSync('token'),
							'Authorization': 'Bearer ' + that.$store.state.loginState.accessToken,
						},
						success: (uploadFileRes) => {
							let res = JSON.parse(uploadFileRes.data)
							console.log(res.data)
							that.userInfo.selfPhoto = res.data.ossId
							that.getImgUrlByOssId(res.data.ossId);
						}
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.user-info-wrap{
	margin-left: 12px;
	margin-right: 12px;
	/* 导航菜单 */
	.nav-bar{
		background: #fff;
		border-radius: 10px;
		margin-top: 12px;
		/* 商店信息 */
		.nav-content{
			padding-top: 10px;
			padding-bottom: 6px;
			.nav-info{
				display: flex;
				padding-left: 10px;
				align-items: center;
				.logo {
					width: 12%;
					text-align: center;
					image{
						width: 24px;
						height: 24px;
					}
				}
				.nav-desc{
					width: 32%;
					display: flex;
					line-height: 30px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					align-items: center;
					.custom-input{
						font-size: 12px;
					}
					.nav-name{
						width: 60%;
						font-size: 14px;

						color: #333333;
						line-height: 22px;
					}
					.change-store{
						text-align: right;
						width: 40%;
						font-size: 12px;
						color: #333333;
						line-height: 22px;
					}
				}

				.arrow-right{
					width:68%;
					text-align: right;
					margin: 0 auto;
					cursor: pointer;
					padding-top: 3px;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					image{
						width: 18px;
						height: 18px;
					}
					.head-img {
						text-align: center;
						padding-right: 20px;
						image{
							width: 24px;
							height: 24px;
						}
					}
				}
			}
		}
	}

	.sure-btn{
		margin-top: 20px;
		width: 100%;
		.btn{
			text-align: center;
			height: 42px;
			background: #FFE05C;
			border-radius: 27px;
			color: #333333;
			line-height: 42px;
			margin-top: 12px;
			font-size: 14px;
		}
	}
}

</style>