match_applet/pagesHome/create/components/activity.vue

<template>
	<view class="form">
		<form @submit="formSubmit">
			<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 margin">
				<view class="title">人数</view>
				<view class="label">
					<picker name="number" @change="numberChange" :value="index" :range="numberList"
						range-key="dictLabel">
						<view class="picker">{{form.number||'请选择人数'}}</view>
					</picker>
				</view>
			</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="date" mode="date" @change="dateChange" :value="index">
						<view class="picker">{{form.date||'请选择日期'}}</view>
					</picker>
				</view>
			</view>
			<view class="value other">
				<view class="title">时间</view>
				<view class="label">
					<picker name="time" mode="time" @change="timeChange" :value="index">
						<view class="picker">{{form.time||'请选择时间'}}</view>
					</picker>
				</view>
			</view>
			<view class="value other">
				<view class="title">时长</view>
				<view class="label">
					<picker name="duration" @change="durationChange" :value="index" :range="durationList"
						range-key="dictLabel">
						<view class="picker">{{form.duration||'请选择时长'}}</view>
					</picker>
				</view>
			</view>
			<view class="value other">
				<view class="title">地点</view>
				<view class="label">
					<input name="name" class="input" :value="form.address" placeholder="请选择" />
				</view>
			</view>
			<view class="value other margin">
				<view class="title">队服颜色</view>
				<view class="label">
					<input name="color" class="input" :value="form.color" placeholder="请输入队服颜色" />
				</view>
			</view>
			<view class="value other">
				<view class="title">费用</view>
				<view class="label">
					<input name="money" class="input" :value="form.money" placeholder="请输入费用" />
				</view>
			</view>
			<view class="value other">
				<view class="title">人数上限</view>
				<view class="label">
					<input name="name" class="input" :value="form.address" placeholder="请选择" />
				</view>
			</view>
			<view class="value other">
				<view class="title">公开报名</view>
				<view class="label">
					<input name="name" class="input" :value="form.address" placeholder="请选择" />
				</view>
			</view>
			<view class="value other">
				<view class="title">定时开启报名</view>
				<view class="label">
					<input name="name" class="input" :value="form.address" placeholder="请选择" />
				</view>
			</view>
			<view class="value other">
				<view class="title">报名截止时间</view>
				<view class="label">
					<input name="name" class="input" :value="form.address" placeholder="请选择" />
				</view>
			</view>
			<view class="value other">
				<view class="title">限定人员标签</view>
				<view class="label">
					<input name="name" class="input" :value="form.address" placeholder="请选择" />
				</view>
			</view>
			<view class="value other margin">
				<view class="title">允许待定</view>
				<view class="label">
					<input name="name" class="input" :value="form.address" placeholder="请选择" />
				</view>
			</view>
			<view class="value other">
				<view class="title">活动标题</view>
				<view class="label">
					<input name="title" class="input" :value="form.title" placeholder="请输入活动标题" />
				</view>
			</view>
			<view class="remark">
				<view class="label">
					<textarea name="brief" :value="form.brief" placeholder="请输入简介" />
				</view>
			</view>
			<view class="value other">
				<view class="title">上传图片</view>
				<view class="label">
					
				</view>
			</view>
		</form>
	</view>
</template>

<script setup lang="ts">
	import { getCurrentInstance, computed, ref } from 'vue';
	//该依赖已内置不需要单独安装
	import { onShow } 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 form = ref({});
	// 字典表
	const typeList = ref([]);
	const numberList = ref([]);
	const durationList = ref([]);
	onShow(async () => {
		await searchOther();
		await search();
	})
	// 查询其他信息
	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
		// 人数
		res = await $api(`dict/data/list`, 'GET', { dictType: 'sys_match_number' });
		if (res.code === 200 && res.total > 0) numberList.value = res.rows
		// 时长
		res = await $api(`dict/data/list`, 'GET', { dictType: 'sys_match_duration' });
		if (res.code === 200 && res.total > 0) durationList.value = res.rows
	};
	// 查询
	const search = async () => { };
	// 类型选择
	const typeChange = (e) => {
		const data = typeList.value[e.detail.value]
		if (data) form.value.type = data.dictLabel
	};
	// 人数选择
	const numberChange = (e) => {
		const data = numberList.value[e.detail.value]
		if (data) form.value.number = data.dictLabel
	};
	// 时长选择选择
	const durationChange = (e) => {
		const data = durationList.value[e.detail.value]
		if (data) form.value.duration = data.dictLabel
	};
	// 日期选择器
	const dateChange = (e) => {
		form.value.date = e.detail.value
	};
	// 时间选择器
	const timeChange = (e) => {
		form.value.time = e.detail.value
	};
	// 上传图片
	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>
	.form {
		display: flex;
		flex-direction: column;
		background-color: var(--f9Color);

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

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

		.remark {
			background-color: var(--mainColor);
			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;
				}
			}
		}
	}
</style>