cloud_admin_app/pages/userCenter/personalDetails/personalDetails.vue

<template>
	<view class="content">
		<view class="cu-card ">
			<view class="cu-item shadow padding-lr-sm">
				<view class="flex solid-bottom padding-tb-lg justify-between" @click="upAvatar">
					<view class="orderNumber">头像</view>
					<view class=" flex">
						<u-avatar :src="userAvatar"></u-avatar>
						<text class="lg text-gray cuIcon-right center-div"></text>
					</view>
				</view>
				<view class="flex solid-bottom padding-tb-lg justify-between">
					<view class="orderNumber">昵称</view>
					<view class="flex" style="margin-right: 16rpx;">
						<u-input border="none" v-model.trim="userName" placeholder="请输入姓名" inputAlign='right'></u-input>
					</view>
				</view>
				<view class="flex solid-bottom padding-tb-lg justify-between" v-if="realNameAuthFlag == 1">
					<view class="orderNumber">姓名</view>
					<view class="flex" style="margin-right: 16rpx;">
						<u-input border="none" v-model.trim="realName" placeholder="请输入姓名" disabled inputAlign='right'
							disabledColor="#fff" color="#808080"></u-input>
					</view>
				</view>

				<!-- <view class="flex solid-bottom padding-tb-lg justify-between" @click="getBirth">
					<view class="orderNumber">出生年月</view>
					<view class="flex">
						{{birthday}}
						<u-datetime-picker v-model="birValue" mode="year-month" :min-date="10" :show="timeShow" :max-date='dataTime'
							@confirm="confirmBirth" @cancel="cancelBirth" :immediateChange='true'></u-datetime-picker>
						<text class="lg text-gray cuIcon-right center-div" ></text>
					</view>
				</view> -->
				<view class="flex solid-bottom padding-tb-lg justify-between" @click="getGender">
					<view class="orderNumber">性别</view>
					<view class="flex">
						{{['未知','男','女'][ indexs=== '' ? '--' :indexs ]}}
						<u-picker :show="show" :columns="list" keyName="label" @confirm="confirmGender"
							@cancel="cancelGender" :immediateChange='true'> </u-picker>
						<text class="lg text-gray cuIcon-right center-div"></text>
					</view>
				</view>
				<!-- 暂时关闭  不删-->
				<!-- <view class="flex solid-bottom padding-tb-lg justify-between">
					<view class="orderNumber">手机</view>
					<view class=" flex">
						<u--input border="none" inputAlign='right' placeholder="请输入姓名" v-model.trim="iphone" type="number" maxlength="11">
						</u--input>
					</view>
				</view> -->
			</view>
		</view>
		<view class="confirm">
			<u-button @click="add" shape='circle' type="primary">提交</u-button>
		</view>
	</view>
</template>

<script setup>
	import config from '@/common/config/config.js';
	import {
		reactive,
		ref,
		getCurrentInstance
	} from "vue";
	import {
		onLoad,
		onShow,
	} from "@dcloudio/uni-app";

	const iphone = ref()
	const userName = ref()
	const realName = ref()
	const userAvatar = ref()
	const birthday = ref()
	const indexs = ref()
	const show = ref(false)
	const timeShow = ref(false)
	const birValue = ref(Date.now());
	const list = reactive([
		[{
				value: '0',
				label: '未知'
			},
			{
				value: '1',
				label: '男'
			},
			{
				value: '2',
				label: '女'
			}
		]
	])
	const imgs_id_front = ref()
	const dataTime = ref()
	const realNameAuthFlag = ref(0)
	onLoad(() => {
		uni.$request({
			url: config.baseUrl + 'app-api/member/user/get',
		}).then((res) => {
			userAvatar.value = res.data.data.userAvatar
			userName.value = res.data.data.nickname
			iphone.value = res.data.data.mobile
			// birthday.value = (res.data.data.birthday == null || "") ? "1990-01" : res.data.data.birthday
			indexs.value = res.data.data.sex
			if (uni.getStorageSync("realNameAuthFlag") == 1) {
				realNameAuthFlag.value = 1
				realName.value = res.data.data.name
			}
		})

	})
	onShow(() => {
		dataTime.value = new Date().getTime();
	})
	const getGender = () => {
		show.value = true
	}
	const confirmGender = (e) => {
		indexs.value = e.value[0].value
		show.value = false
	}
	const cancelGender = () => {
		show.value = false
	}
	const confirmBirth = () => {
		setTimeout(() => {
			let n = new Date(birValue._rawValue)
			const year = n.getFullYear()
			const month = n.getMonth() + 1
			let res = year + '-' + month
			birthday.value = res
			timeShow.value = false
		}, 500)

	}
	const cancelBirth = () => {
		timeShow.value = false
	}
	const getBirth = () => {
		timeShow.value = true
	}
	const add = () => {
		// console.log(userName.value.length,'length');
		if (userName.value.length >= 30) {
			uni.showToast({
				title: "昵称超长...",
				duration: 2000,
				icon: 'error'
			});
			return
		}
		uni.$request({
			url: config.baseUrl + 'app-api/member/user/update',
			method: "PUT",
			data: {
				avatar: userAvatar.value,
				sex: indexs.value,
				nickname: userName.value
			},
		}).then((res) => {
			uni.showToast({
				title: '修改成功',
				duration: 1000,
			})
			setTimeout(function() {
				uni.navigateBack({
					delta: 1,
				});
			}, 1000)
		})
	}
	const upAvatar = () => {
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'],
			sourceType: ['camera', 'album'],
			success: (res) => {
				const tempFilePaths = res.tempFilePaths;
				if (tempFilePaths.length >= 1) {
					imgs_id_front.value = tempFilePaths[0]
				} else {
					return;
				}
				uplodFile(1)
			}

		});
	}
	const uplodFile = (type) => {
		let filePath = null;
		if (type == 1) {
			filePath = imgs_id_front.value
		} else {
			uni.$u.toast("无效的图片类型！")
		}

		if (filePath == null || filePath == "") {
			uni.$u.toast("无效的图片,请重新选择！")
		}
		let token = uni.getStorageSync('token')
		uni.uploadFile({
			filePath: filePath,
			name: 'file',
			url: config.upload,
			formData: {},
			header: {
				'content-type': 'application/json',
				'Authorization': 'Bearer ' + token,
				'tenant-id': 1
			},
			success: function(res) {
				let data = JSON.parse(res.data);
				if (data.code === 0) {
					userAvatar.value = data.data //服务器的图片
				} else {
					uni.$u.toast("头像上传失败")
				}
			}
		})
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		background: #F7F8FA;
		position: relative;
	}

	.confirm {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		padding: 16rpx 32rpx;
	}

	.center-div {
		display: flex;
		align-items: center;
	}
</style>