tra-app/src/pages/setting/index.vue

<template>
	<view class="max_page detail-main">
		<nav-bar :is_seat="false"></nav-bar>
		<view class="fixed_search_div">
			<view class="back_div" @click="common.navigateBack()">
				<view class="back-icon"></view>
			</view>
			<view class="title font_pf">设置</view>
		</view>
		<view class="detail-body">
			<uv-cell-group :border="false">
				<uv-cell @click="click_update_avatar" name="avatar" isLink title="头像">
					<template #title>
						<view class="font_pf">头像</view>
					</template>
					<template #value>
						<view style="width: 42rpx; height: 42rpx;border-radius: 100%; overflow: hidden">
							<image v-if="userInfo.imagePath" class="img_100" :src="userInfo.imagePath"></image>
							<image-preview v-else class="img_100" :src="userInfo.imageAddr"></image-preview>
						</view>
					</template>
				</uv-cell>
				<uv-cell name="sex" isLink title="性别">
					<template #title>
						<text class="font_pf">性别</text>
					</template>
					<template #value>
						<picker mode="selector" :value="index" range-key="label" style="width: 100%" :range="sexOptions"
							@change="sexChange">
							<view style="text-align: right">{{showGenderText}}</view>
						</picker>
					</template>
				</uv-cell>
				<uv-cell title="形象" @click="gotoMascot()" :isLink="true" :border="false"></uv-cell>
			</uv-cell-group>
		</view>
		<avatar-cropper v-if="avatarCropperStatus" mode="ratio" :imageUrl="avatarCropperUrl" :width="500" :height="500"
			:delay="150" @cancel="onCancel" @confirm="onConfirm"></avatar-cropper>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		computed,
		nextTick
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		uploadFile
	} from '@/api/common'
	import { queryCurrentUser} from '@/api/login.js';
	import common from '@/common/common';
	import {getUserInfo} from '@/common/common';
	import {
		GENDER
	} from '@/enum.js';
	import {
		updateDfSysUserExtandInfoGender,
		updateDfSysUserExtandInfoImageAddr
	} from "@/api/user.js"
	import {queryValidTraMascotInfo} from "@/api/mascot.js"
	import {
		get_base_url
	} from '@/api/request.js'
	const index = ref(0);
	const avatarCropperUrl = ref('');
	const aaa = ref('');
	const userInfo = ref({
		gender: '',
		imagePath: '',
		imageAddr: ''
	});
	const avatarCropperStatus = ref(true)
	const sexOptions = GENDER
	const base_url = get_base_url()
	
	// 去选择百禄
	const gotoMascot = () => {
		
		common.navigateTo('/pages/mascot/mascot_select_list')
		
		// common.loading()
		// queryValidTraMascotInfo().then(({body}) => {
		// 	console.log(body);
		// 	common.setPageCache('mascotList', body)
		// 	body.map(({imgAddr}) => {
		// 		const url = imgAddr
		// 		if (imgAddr){
		// 			const img = new Image();
		// 			img.onload = () => {
		// 				console.log(`图片缓存成功: ${url}`);
		// 				// resolve(img);
		// 			};
					
		// 			img.onerror = () => {
		// 				console.error(`图片缓存失败: ${url}`);
		// 				// reject(new Error(`Failed to load image: ${url}`));
		// 			};
					
		// 			img.src = base_url + url;
		// 		}
		// 	})
		// 	common.hideLoading()
		// 	common.navigateTo('/pages/mascot/mascot_select_list')
			
		// })
	}
		
	const showGenderText = computed(() => {
		const item = sexOptions.find((item) => item.value == userInfo.value.gender)
		if (item) {
			return item.label
		} else {
			return '未填写'
		}
	})
	// 点击修改头像
	const click_update_avatar = (value) => {
		uni.chooseImage({
			count: 1,
			sizeType: ["compressed"],
			success: (res) => {
				avatarCropperUrl.value = res.tempFilePaths[0];
				avatarCropperStatus.value = true
			},
		});
	};
	// 选择头像取消
	const onCancel = (value) => {
		avatarCropperStatus.value = false
	}
	// 选择头像确定
	const onConfirm = (file) => {
		avatarCropperStatus.value = false
		nextTick(async() => {
			common.loading('更新头像中')
			try{
				const data = {
					bizScen: 'S3007',
					thumbnailFlag: true,
					thumbImgSize:100
				}
				// 上传图片
				const res = await uploadFile(file.tempFilePath, data)
				// 更新个人信息
				await updateDfSysUserExtandInfoImageAddr({imageAddr : res.thumbFileId})
				// 更新个人信息
				const userData = await queryCurrentUser()
				common.msg('修改成功')
				userInfo.value.imageAddr = userData.imageAddr
				userInfo.value.imagePath = ''
			} catch {
				common.msg('修改失败')
			}
			common.hideLoading()
		})
	}
	// 修改性别
	const sexChange = (e) => {
		userInfo.value.gender = sexOptions[e.detail.value].value;
		common.loading("修改中")
		updateDfSysUserExtandInfoGender({
			gender: userInfo.value.gender
		}).then(async() => {
			await queryCurrentUser()
			common.msg('修改成功')
		}).finally(() => {
			common.hideLoading()
		})
	};
	onLoad((params) => {
		userInfo.value = getUserInfo()
	});
</script>

<style lang="scss" scoped>
	$bg-margin-left: 50rpx;

	.detail-body {
		margin: 30rpx $bg-margin-left 0 $bg-margin-left;
		background: #ffffff;
		// background: red;
		border-radius: 15rpx;
		z-index: 101;
		overflow: hidden;

		// 为了让线缩进来24单位
		:deep(.uv-line) {
			width: calc(100% - 48rpx) !important;
			margin: 0 24rpx !important;
		}

		:deep(.uv-cell__body) {
			padding: 12px 15px;
		}

		:deep(.uv-cell__title) {
			flex: none !important;
		}
	}

	.detail-main {
		background-color: #F6F8FF;
	}

	.title {
		color: #000000;
		font-size: 34rpx;
		height: 34rpx;
		font-weight: 600;
		// margin-bottom: 30rpx;
		line-height: 34rpx;
	}

	.fixed_search_div {
		padding: calc(10rpx + var(--status-bar-height)) 15rpx 24rpx 30rpx;
		display: flex;
		align-items: center;
		background-color: #f6f7f8;

		.back_div {
			margin-right: 10rpx;

			.back-icon {
				position: relative;
				width: 40rpx;
				height: 40rpx;
				cursor: pointer;
				display: flex;
				align-items: center;
			}

			.back-icon::before,
			.back-icon::after {
				content: '';
				position: absolute;
				transition: all 0.3s ease;
			}

			.back-icon::after {
				top: 25%;
				left: 25%;
				width: 40%;
				height: 40%;
				border-top: 4rpx solid #2b2c2e;
				border-left: 4rpx solid #2b2c2e;
				transform: rotate(-45deg);
			}
		}
	}
</style>