match_applet/pagesHome/team/index.vue

<template>
	<view class="content">
		<view class="one">
		</view>
		<view class="two">
			<text>设置队徽</text>
		</view>
		<view class="thr">
			<form @submit="formSubmit">
				<view class="logo">
					<image name="logo" class="image" mode="aspectFill" :src="form.logo||'/static/qiudui.png'" @tap="Preview">
					</image>
				</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">
					<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" @tap="toCity" name="city">
						<text v-if="form.city">{{form.city}}</text>
						<text v-else>请选择城市</text>
					</view>
				</view>
				<view class="value other">
					<view class="title">成立时间</view>
					<view class="label">
						<picker name="date" mode="date" @change="dateChange" :value="index" fields="month">
							<view class="picker">{{form.date||'请选择成立时间'}}</view>
						</picker>
					</view>
				</view>
				<view class="value other">
					<view class="title">队服颜色</view>
					<view class="label">
						<input name="color" class="input" :value="form.color" placeholder="请输入队服颜色" />
					</view>
				</view>
				<view class="remark">
					<view class="title">简介</view>
					<view class="label">
						<textarea name="brief" :value="form.brief" placeholder="请简单描述球队" />
					</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 { onShow, 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');
	})
	// id
	const id = ref('');
	// 用户信息
	const form = ref({ icon: '' });
	// 字典表
	const typeList = ref([]);

	onLoad(async (options) => {
		id.value = options && options.id
		await searchOther();
		await search();
	})
	onShow(() => {
		uni.$on('setCity', function (city) {
			form.value.city = city
		})
	})
	// 查询其他信息
	const searchOther = async () => {
		let res;
		// 类型
		res = await $api(`dict/data/list`, 'GET', { dictType: 'sys_user_type' });
		if (res.code === 200 && res.total > 0) typeList.value = res.rows
	};
	// 查询
	const search = async () => { };
	// 类型选择
	const typeChange = (e) => {
		const data = typeList.value[e.detail.value]
		if (data) form.value.type = data.dictLabel
	};
	// 时间选择器
	const dateChange = (e) => {
		form.value.date = e.detail.value
	};
	// 城市选择
	const toCity = () => {
		if (form.value.city) {
			uni.navigateTo({
				url: `/pagesHome/city/index?city=${form.value.city}`,
			})
		} else {
			uni.navigateTo({
				url: `/pagesHome/city/index`,
			})
		}
	};
	// 上传图片
	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.logo = arr.url
				} else {
					uni.showToast({
						title: arr.msg,
						icon: 'none'
					});
				}
			}
		});
	};
	// 创建
	const formSubmit = (e) => {
		console.log(e.deatil.value);
	};
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;

		.one {
			height: 25vw;
			background-color: var(--f00Color);
		}

		.two {
			margin: 10vw 0 0 0;
			text-align: center;
			font-size: var(--font16Size);
			font-weight: bold;
		}

		.thr {
			.logo {
				position: fixed;
				top: 12vw;
				right: 40vw;

				.image {
					width: 20vw;
					height: 20vw;
					border-radius: 20vw;
					background-color: var(--mainColor);
				}
			}

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

			.remark {
				padding: 3vw 2vw 0 2vw;

				.title {
					padding: 0 0 3vw 0;
				}
			}

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

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

			.button {
				text-align: center;

				button {
					width: 80vw;
					font-size: var(--font16Size);
				}
			}
		}
	}
</style>