match_applet/pagesHome/create/components/match.vue

<template>
	<view class="form">
		<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">{{type_name||'请选择类型'}}</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">{{number_name||'请选择人数'}}</view>
				</picker>
			</view>
		</view>
		<view class="value other">
			<view class="title">对手</view>
			<view class="label" @tap="toOpponent">
				<text v-if="form.opponent">{{opponent_name}}</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">
					<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">{{duration_name||'请选择时长'}}</view>
				</picker>
			</view>
		</view>
		<view class="value other margin">
			<view class="title">地点</view>
			<view class="label" @tap="toLocaltion">
				<text v-if="form.address">{{form.address}}</text>
				<text v-else>请选择</text>
			</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.max_person" placeholder="请输入人数上限" />
			</view>
		</view>
		<view class="value other">
			<view class="title">公开报名</view>
			<view class="label">
				<picker name="is_open" @change="openChange" :value="index" :range="openList" range-key="dictLabel">
					<view class="picker">{{open_name||'请选择'}}</view>
				</picker>
			</view>
		</view>
		<view class="value other" v-if="form.date&&form.time">
			<view class="title">报名截止时间</view>
			<view class="label">
				<uni-datetime-picker :start="form.date" :border="false" v-model="form.end_time" />
			</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 margin">
			<view class="label">
				<textarea name="brief" :value="form.brief" placeholder="请输入简介" />
			</view>
		</view>
		<view class="remark">
			<view class="title">上传图片</view>
			<view class="label">
				<uni-file-picker v-model="form.file" fileMediatype="image" :list-styles="imageStyles" limit="6"
					title="最多选择6张图片" @select="toUpload" @delete="toDelete"></uni-file-picker>
			</view>
		</view>
		<view class="btn" style="display: none;">
			<button form-type="submit">保存</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import moment from 'moment';
	import { ref, toRefs, getCurrentInstance, defineExpose } from 'vue';
	//该依赖已内置不需要单独安装
	import { onShow } from "@dcloudio/uni-app";
	// 请求接口
	const $api = getCurrentInstance()?.appContext.config.globalProperties.$api;
	const $apifile = getCurrentInstance()?.appContext.config.globalProperties.$apifile;
	// 信息
	const form = ref({ file: [], number: '5', type: '0', duration: '2.0', is_open: 'Y' });
	// 对手名称
	const opponent_name = ref('');
	// 类型
	const type_name = ref('足球');
	// 人数
	const number_name = ref('5人制');
	// 是否公开
	const open_name = ref('');
	// 时长
	const duration_name = ref('2.0小时');
	const listStyles = ref({
		width: 64,
		height: 64,
		border: {
			color: "#ff5a5f",
			width: 2,
			style: 'dashed',
			radius: '2px'
		}
	});
	const props = defineProps({
		id: { type: String, default: () => '' },
		typeList: { type: Array, default: () => [] },
		numberList: { type: Array, default: () => [] },
		openList: { type: Array, default: () => [] },
		durationList: { type: Array, default: () => [] },
	});
	const { id, typeList, durationList, numberList, openList } = toRefs(props);
	onShow(() => {
		uni.$on('opponentInfo', function (item) {
			form.value.opponent = item.id
			opponent_name.value = item.name
		})
	})
	// 类型选择
	const typeChange = (e) => {
		const data = typeList.value[e.detail.value]
		if (data) {
			type_name.value = data.dictLabel
			form.value.type = data.dictValue
		}
	};
	// 人数选择
	const numberChange = (e) => {
		const data = numberList.value[e.detail.value]
		if (data) {
			number_name.value = data.dictLabel
			form.value.number = data.dictValue
		}
	};
	// 日期选择器
	const dateChange = (e) => {
		form.value.date = e.detail.value
	};
	// 时间选择器
	const timeChange = (e) => {
		form.value.time = e.detail.value
	};
	// 时长选择选择
	const durationChange = (e) => {
		const data = durationList.value[e.detail.value]
		if (data) {
			duration_name.value = data.dictLabel
			form.value.duration = data.dictValue
		}
	};
	// 是否公开选择器
	const openChange = (e) => {
		const data = openList.value[e.detail.value]
		if (data) {
			open_name.value = data.dictLabel
			form.value.is_open = data.dictValue
		}
	};
	// 定位
	const toLocaltion = (e) => {
		uni.chooseLocation({
			success: function (res) {
				searchAddress(res);
			}
		})
	};
	// 解析位置详细信息
	const searchAddress = (e) => {
		form.value.address = e.address
	};
	// 上传图片
	const toUpload = async (e) => {
		const arr = await $apifile(`/common/upload`, 'file', e.tempFilePaths[0],
			'file');
		if (arr.code == 200) {
			form.value.file.push({
				name: arr.originalFilename,
				url: arr.url
			})
			console.log(form.value.file);
		} else {
			uni.showToast({
				title: arr.msg,
				icon: 'none'
			});
		}
	};
	// 删除图片
	const toDelete = async (e) => {
		form.value.file = form.value.file.filter(i => i.name != e.tempFile.name)
		console.log(form.value.file);
	};
	// 对手选择
	const toOpponent = () => {
		uni.navigateTo({
			url: `/pagesHome/create/person`,
		})
	};
	// 创建
	const formSubmit = async () => {
		if (!form.value.opponent) {
			uni.showToast({ title: '请选择比赛对手', icon: 'none' });
			return
		} else if (!form.value.date) {
			uni.showToast({ title: '请选择活动日期', icon: 'none' });
			return
		} else if (!form.value.time) {
			uni.showToast({ title: '请选择活动时间', icon: 'none' });
			return
		} else if (!form.value.address) {
			uni.showToast({ title: '请选择活动场地', icon: 'none' });
			return
		} else {
			if (form.value.file && form.value.file.length == 0) delete form.value.file
			form.value.teamId = id.value
			const arr = await $api(`friendship`, 'POST', form.value);
			if (arr.code === 200) {
				const data = {
					matchId: arr.id,
					type: '0',
					red: form.value.teamId,
					blue: form.value.opponent,
					startTime: moment(form.value.date + ' ' + form.value.time).format("YYYY-MM-DD HH:mm"),
					endTime: moment(form.value.startTime).add(form.value.duration, 'hours').format("YYYY-MM-DD HH:mm"),
				}
				const res = await $api(`game`, 'POST', data);
				if (res.code === 200) {
					uni.navigateTo({
						url: `/pagesHome/activity/info?id=${res.id}`,
					})
				}
			} else {
				uni.showToast({
					title: arr.msg,
					icon: 'error'
				});
			}
		}
	}
	// 第二部：暴露方法
	defineExpose({
		formSubmit
	})
</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;
				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;
				}
			}
		}
	}
</style>