im/pages/user/selfInfo/index.vue

<template>
	<view class="page_container">
		<custom-nav-bar title="个人资料" />

		<view class="info_wrap">
			<info-item :loading="loadingState.faceURL" @click="updateAvatar" title="头像">
				<my-avatar :src="selfInfo.faceURL" :desc="selfInfo.nickname" size="30" slot="value" />
			</info-item>
			<info-item @click="updateNickname" title="姓名" :content="selfInfo.nickname" />
			<info-item :loading="loadingState.gender" @click="updateGender" title="性别" :content="getGender" />
			<info-item :loading="loadingState.birth" @click="() => (showDatePicker = true)" title="生日"
				:content="getBirth" />
		</view>

		<view class="info_wrap">
			<info-item :showArrow="false" title="手机号码" :content="selfInfo.mobile || '-'" />
			<info-item :showArrow="false" title="邮箱" :content="selfInfo.email || '-'" />
		</view>

		<u-datetime-picker :minDate="0" :maxDate="nowDate" :show="showDatePicker" @confirm="confirmDate"
			@cancel="() => (showDatePicker = false)" v-model="selfInfo.birth" mode="date" />
	</view>
</template>

<script>
	import {
		businessInfoUpdate
	} from "@/api/login";
	import IMSDK from "openim-uniapp-polyfill";
	import CustomNavBar from "@/components/CustomNavBar/index.vue";
	import MyAvatar from "@/components/MyAvatar/index.vue";
	import dayjs from "dayjs";
	import InfoItem from "./InfoItem.vue";
	import util from "@/util";
	import {getPurePath} from "@/util/common";
	export default {
		components: {
			CustomNavBar,
			MyAvatar,
			InfoItem,
		},
		data() {
			return {
				showDatePicker: false,
				loadingState: {
					faceURL: false,
					gender: false,
					birth: false,
				},
				nowDate: Date.now(),
			};
		},
		computed: {
			selfInfo() {
				return this.$store.getters.storeSelfInfo;
			},
			getGender() {
				if (this.selfInfo.sex == 0) {
					return "保密";
				}
				if (this.selfInfo.sex == 1) {
					return "男";
				}
				return "女";
			},
			getBirth() {
				const birth = this.selfInfo.birthday ?? 0;
				return dayjs(birth).format("YYYY-MM-DD");
			},
		},
		methods: {
			...util,
			updateNickname() {
				const s = util.aesencode(this.selfInfo);
				uni.navigateTo({
					url: `/pages/common/markOrIDPage/index?isSelfNickname=true&sourceInfo=${s}`,
				});
			},
			updateGender() {
				uni.showActionSheet({
					itemList: ['保密',"男", "女"],
					success: async ({
						tapIndex
					}) => {
						this.loadingState.gender = true;
						await this.updateSelfInfo({gender: tapIndex,},"gender",);
					},
				});
			},
			updateAvatar() {
				uni.chooseImage({
					count: 1,
					sizeType: ["compressed"],
					success: async ({
						tempFilePaths
					}) => {
						const path = tempFilePaths[0];
						const nameIdx = path.lastIndexOf("/") + 1;
						const typeIdx = path.lastIndexOf(".") + 1;
						const fileName = path.slice(nameIdx);
						const fileType = path.slice(typeIdx);
						this.loadingState.faceURL = true;
						try{
							const res = await IMSDK.asyncApi(IMSDK.IMMethods.UploadFile, IMSDK.uuid(), {
								filepath: getPurePath(tempFilePaths[0]),
								name: fileName,
								contentType: fileType,
								uuid: IMSDK.uuid(),
							});
							console.log(res);
							this.updateSelfInfo({
									faceURL: res.data.url,
								},
								"faceURL",
							);
							this.loadingState.faceURL = false;
						}catch(e){
							console.log(e);
						}
					},
				});
			},
			toQrCode() {
				uni.navigateTo({
					url: `/pages/common/userOrGroupQrCode`,
				});
			},
			copyID() {
				uni.setClipboardData({
					data: this.selfInfo.userID,
					success: () => {
						uni.hideToast();
						this.$nextTick(() => {
							uni.$u.toast("复制成功");
						});
					},
				});
			},
			async updateSelfInfo(data, key) {
				try {
					await businessInfoUpdate({
						userID: this.selfInfo.userID,
						...data,
					});
					await this.$store.dispatch("user/updateBusinessInfo");
					uni.$u.toast("修改成功");
				} catch (e) {
					console.log(e);
					uni.$u.toast("修改失败");
				}
				this.loadingState[key] = false;
			},
			confirmDate({value}) {
				this.loadingState.birth = true;
				console.log(this.$store.getters.storeSelfInfo.faceURL);
				this.updateSelfInfo({birth: value,},"birth",);
				this.showDatePicker = false;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.page_container {
		background-color: #f8f8f8;

		.info_wrap {
			margin: 24rpx 24rpx 0 24rpx;
			background: #fff;
			border-radius: 6px;

			.qr_icon {
				width: 22px;
				height: 23px;
			}
		}
	}
</style>