eaXing_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">{{$t('index.Head_shot')}}</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">{{$t('index.Name')}}</view>
					<view class="flex" style="margin-right: 16rpx;">
						<u-input border="none" v-model.trim="userName" :placeholder="$t('index.enter_name')" inputAlign='right'></u-input>
					</view>
				</view>

				<view class="flex solid-bottom padding-tb-lg justify-between" @click="getBirth">
					<view class="orderNumber">{{$t('index.Date_birth')}}</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">{{$t('index.Gender')}}</view>
					<view class="flex">
						{{['',$t('index.male'),$t('index.female'),$t('index.Confidentiality')][ 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">{{$t('index.Submit')}}</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";
   import { useI18n } from 'vue-i18n'//zz
    const { t } = useI18n()//zz
	const iphone = ref()
	const userName = 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: '1',
				label: t('index.male')
			},
			{
				value: '2',
				label: t('index.female')
			},
			{
				value: '3',
				label: t('index.Confidentiality')
			}
		]
	])
	const imgs_id_front = ref()
	const dataTime = ref()
	onLoad(() => {
		let data = uni.getStorageSync("userInfo").loginNo
		// console.log(data,'data');
		uni.$request({
			url: config.baseUrl + `api/AppCustomer/GetInfo?loginNo=${data}`,
		}).then((res) => {
			userAvatar.value = config.baseUrl + res.data.data.userAvatar,
				userName.value = res.data.data.userName
			iphone.value = res.data.data.iphoneNo
			birthday.value = (res.data.data.birthday == null || "") ? "1990-01" : res.data.data.birthday
			indexs.value = res.data.data.gender == null ? 2 : res.data.data.gender
		})
	})
	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 = () => {

		uni.$request({
			url: config.baseUrl + 'api/AppCustomer/UpdateInfo',
			method: "POST",
			data: {
				loginNo: uni.getStorageSync("userInfo").loginNo,
				NickName: uni.getStorageSync("userInfo").nickName,
				// LoginPsd: uni.getStorageSync("userInfo").LoginPsd,
				// userAvatar: userAvatar.value,
				gender: indexs.value,
				userName: userName.value,
				iphoneNo: iphone.value,
				birthday: birthday.value,
				id: uni.getStorageSync("userInfo").id
			},
		}).then((res) => {
			// console.log(res, '修改');
			if (res.data.isSuccess) {
				uni.showToast({
					title: t('index.Change_successful'),
					duration: 1000,
				})
				setTimeout(function() {
					uni.navigateBack({
						delta: 1,
					});
				}, 1000)
			} else {
				uni.showToast({
					title: res.data.msg,
					duration: 2000,
					icon: 'error'
				});
			}

		})
	}
	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(t('index.Invalid_image_type'))
		}
		let datas = {
			loginNo: uni.getStorageSync("userInfo").loginNo
		}
		if (filePath == null || filePath == "") {
			uni.$u.toast(t('index.Invalid_reselect'))
		}
		let token = uni.getStorageSync('token')
		uni.uploadFile({
			filePath: filePath,
			name: 'file',
			url: config.upload,
			formData: datas,
			header: {
				'content-type': 'application/json',
				'Authorization': 'Bearer ' + token
			},
			success: function(res) {
				let data = JSON.parse(res.data);
				if (data.code === 200) {
					userAvatar.value = data.data.url //服务器的图片
				} else {
					uni.$u.toast(t('index.Avatar_upload_failed'))
				}
			}
		})
	}
</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>