match_applet/pagesMy/basic/index.vue

<template>
	<view class="content">
		<view class="one">
			<form @submit="formSubmit">
				<view class="value other" style="display: none;">
					<view class="title">id</view>
					<view class="label">
						<input name="id" class="input" :value="form.id" placeholder="请输入id" />
					</view>
				</view>
				<view class="value icon">
					<view class="title">头像</view>
					<view class="label">
						<image class="image" mode="aspectFill" :src="form.icon||config.logoUrl" @tap="Preview"></image>
					</view>
				</view>
				<view class="remark">
					实名信息(仅用于赛事报名、参赛证功能)
				</view>
				<view class="value other">
					<view class="title">姓名</view>
					<view class="label">
						<input name="name" class="input" :value="form.name" placeholder="请输入真实姓名" />
					</view>
				</view>
				<view class="value other margin">
					<view class="title">昵称</view>
					<view class="label">
						<input name="nickname" class="input" :value="form.nickname" placeholder="请输入昵称" />
					</view>
				</view>
				<view class="value other">
					<view class="title">性别</view>
					<view class="label">
						<picker name="sex" @change="sexChange" :value="index" :range="sexList" range-key="dictLabel">
							<view class="picker">{{form.sex||'请选择性别'}}</view>
						</picker>
					</view>
				</view>
				<view class="value other">
					<view class="title">手机号</view>
					<view class="label">
						<input name="phone" class="input" :value="form.phone" placeholder="请输入手机号" />
					</view>
				</view>
				<view class="value other">
					<view class="title">城市</view>
					<view class="label" @tap="toCity">
						<text v-if="form.city">{{form.city}}</text>
						<text v-else>请选择城市</text>
					</view>
				</view>
				<view class="value other" style="display: none;">
					<view class="title">城市</view>
					<view class="label">
						<input name="city" class="input" :value="form.city" placeholder="请输入城市" />
					</view>
				</view>
				<view class="value other">
					<view class="title">身高</view>
					<view class="label">
						<input name="height" class="input" :value="form.height" placeholder="请输入身高(cm)" />
					</view>
				</view>
				<view class="value other">
					<view class="title">体重</view>
					<view class="label">
						<input name="weight" class="input" :value="form.weight" placeholder="请输入体重(kg)" />
					</view>
				</view>
				<view class="value other margin">
					<view class="title">主要项目</view>
					<view class="label">
						<picker name="type" @change="typeChange" :value="index" :range="typeList" range-key="dictLabel">
							<view class="picker">{{form.type||'请选择主要项目'}}</view>
						</picker>
					</view>
				</view>
				<view class="value other">
					<view class="title">球龄</view>
					<view class="label">
						<picker name="ballYears" @change="ballYearsChange" :value="index" :range="ballYearsList"
							range-key="dictLabel">
							<view class="picker">{{form.ballYears||'请选择球龄'}}</view>
						</picker>
					</view>
				</view>
				<view class="value other">
					<view class="title">队内位置</view>
					<view class="label">
						<picker name="place" @change="placeChange" :value="index" :range="placeList"
							range-key="dictLabel">
							<view class="picker">{{form.place||'请选择队内位置'}}</view>
						</picker>
					</view>
				</view>
				<view class="button">
					<button type="warn" size="mini" form-type="submit">保存</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { getCurrentInstance, computed, ref } from 'vue';
	//该依赖已内置不需要单独安装
	import { onLoad } from "@dcloudio/uni-app";
	// 请求接口
	const $api = getCurrentInstance()?.appContext.config.globalProperties.$api;
	const $config = getCurrentInstance()?.appContext.config.globalProperties.$config;
	const $apifile = getCurrentInstance()?.appContext.config.globalProperties.$apifile;
	// openid
	const openid = computed(() => {
		return uni.getStorageSync('openid');
	})
	// 基本信息
	const config = ref({ logoUrl: '' });
	// 用户信息
	const form = ref({ icon: '' });
	// 字典表
	const sexList = ref([]);
	const typeList = ref([]);
	const placeList = ref([]);
	const ballYearsList = ref([]);
	onLoad(async () => {
		await searchOther();
		await searchConfig();
		await search();
		uni.$on('setCity', function (city) {
			form.value.city = city
		})
	})
	// 查询其他信息
	const searchOther = async () => {
		let res;
		// 性别
		res = await $api(`dict/data/list`, 'GET', { dictType: 'sys_user_sex', status: '0' });
		if (res.code === 200 && res.total > 0) sexList.value = res.rows
		// 主要项目
		res = await $api(`dict/data/list`, 'GET', { dictType: 'sys_user_type', status: '0' });
		if (res.code === 200 && res.total > 0) typeList.value = res.rows
		// 队内位置
		res = await $api(`dict/data/list`, 'GET', { dictType: 'sys_user_place', status: '0' });
		if (res.code === 200 && res.total > 0) placeList.value = res.rows
		// 球龄
		res = await $api(`dict/data/list`, 'GET', { dictType: 'sys_user_year', status: '0' });
		if (res.code === 200 && res.total > 0) ballYearsList.value = res.rows
	};
	// config信息
	const searchConfig = async () => {
		config.value = uni.getStorageSync('config');
	};
	// 查询
	const search = async () => {
		const res = await $api(`matchUser/find`, 'GET', {
			openid: openid.value
		});
		if (res.code === 200) {
			if (res.data) {
				form.value = res.data
				form.value.sex = toData(form.value.sex, sexList.value)
				form.value.type = toData(form.value.type, typeList.value)
				form.value.place = toData(form.value.place, placeList.value)
				form.value.ballYears = toData(form.value.ballYears, ballYearsList.value)
			}
			else {
				uni.navigateTo({
					url: `/pages/login/index`,
				})
			}
		} else {
			uni.showToast({
				title: res.msg || '',
				icon: 'error',
			});
		}
	};
	// 处理字典表数据
	const toData = (value, list) => {
		if (value) return value = list[value].dictLabel
	};
	// 城市选择
	const toCity = () => {
		if (form.value.city) {
			uni.navigateTo({
				url: `/pagesHome/city/index?city=${form.value.city}`,
			})
		} else {
			uni.navigateTo({
				url: `/pagesHome/city/index`,
			})
		}
	};
	// 性别选择
	const sexChange = (e) => {
		const data = sexList.value[e.detail.value]
		if (data) form.value.sex = data.dictLabel
	};
	// 主要项目选择
	const typeChange = (e) => {
		const data = typeList.value[e.detail.value]
		if (data) form.value.type = data.dictLabel
	};
	// 队内位置别选择
	const placeChange = (e) => {
		const data = placeList.value[e.detail.value]
		if (data) form.value.place = data.dictLabel
	};
	// 球龄选择
	const ballYearsChange = (e) => {
		const data = ballYearsList.value[e.detail.value]
		if (data) form.value.ballYears = data.dictLabel
	};
	// 上传图片
	const Preview = () => {
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'],
			sourceType: ['album', 'camera'],
			success: async function (res) {
				let tempFile = JSON.parse(JSON.stringify(res.tempFilePaths));
				const arr = await $apifile(`/common/upload`, 'file', tempFile[0],
					'file');
				if (arr.code == 200) {
					form.value.icon = arr.url
				} else {
					uni.showToast({
						title: arr.msg,
						icon: 'none'
					});
				}
			}
		});
	};
	// 保存
	const formSubmit = async (e) => {
		let data = e.detail.value;
		data.icon = form.value.icon;
		data = delEmptyQueryNodes(data);
		const arr = await $api(`matchUser`, 'PUT', data);
		if (arr.code === 200) {
			search();
		} else {
			uni.showToast({
				title: arr.msg,
				icon: 'error'
			});
		}
	};
	// 去除obj里为null的数据
	const delEmptyQueryNodes = (obj = {}) => {
		Object.keys(obj).forEach((key) => {
			let value = obj[key];
			value && typeof value === 'object' && delEmptyQueryNodes(value);
			(value === '' || value === null || value === undefined || value.length === 0 || Object.keys(value).length === 0) && delete obj[key];
		});
		return obj;
	};
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
		background-color: var(--footColor);

		.one {
			.icon {
				padding: 2vw;
			}

			.margin {
				margin: 3vw 0 0 0;
			}

			.other {
				padding: 3vw 2vw;
				border-bottom: 1px solid var(--footColor);
			}

			.value {
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: var(--mainColor);

				.label {
					.input {
						text-align: right;
					}

					.image {
						width: 15vw;
						height: 15vw;
						border-radius: 20vw;
					}
				}
			}

			.remark {
				padding: 4vw 2vw;
				text-align: center;
				color: var(--f99Color);
				font-size: var(--font18Size);
			}

			.button {
				margin: 2vw 0 0 0;
				text-align: center;

				button {
					font-size: var(--font14Size);
					border-radius: 2vw;
				}
			}
		}
	}
</style>