match_applet/pagesHome/create/index.vue

<template>
	<view class="content">
		<view class="one">
			<scroll-view scroll-y="true" class="scroll-view">
				<view class="list-scroll-view">
					<view class="one_1"></view>
					<uni-segmented-control :current="current" :values="list" @clickItem="onClickItem" styleType="text"
						activeColor="#dd524d"></uni-segmented-control>
					<view class="one_2">
						<view v-show="current === 0">
							<match :typeList="typeList" :numberList="numberList" :durationList='durationList' :openList="openList"></match>
						</view>
						<view v-show="current === 1">
							<activity :typeList="matchList" :durationList='durationList' :openList="openList" type="0"></activity>
						</view>
						<view v-show="current === 2">
							<activity :activityList="activityList" :durationList='durationList' :openList="openList" type="1"></activity>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="two">
			<view class="left">
				<view class="left_1">
					<uni-icons @tap="toAdd" custom-prefix="iconfont" type="icon-caogao04" size="20"
						color="#696969"></uni-icons>
					<text>保存草稿</text>
				</view>
				<view class="left_1">
					<uni-icons @tap="toCopy" custom-prefix="iconfont" type="icon-icon_cz" size="20"
						color="#696969"></uni-icons>
					<text>复用</text>
				</view>
			</view>
			<view class="right">
				<button type="warn" size="mini" form-type="submit">完成</button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { getCurrentInstance, ref } from 'vue';
	//该依赖已内置不需要单独安装
	import { onLoad } from "@dcloudio/uni-app";
	import activity from './components/activity.vue';
	import match from './components/match.vue';
	// 请求接口
	const $api = getCurrentInstance()?.appContext.config.globalProperties.$api;
	// 基本信息
	const config = ref({});
	// 详情信息id
	const id = ref('');
	const list = ref(['友谊赛', '训练', '活动']);
	const current = ref(0);
	// 字典表
	const typeList = ref([]);
	const numberList = ref([]);
	const matchList = ref([]);
	const activityList = ref([]);
	const durationList = ref([]);
	const openList = ref([]);
	onLoad(async (options) => {
		// 球队id
		id.value = options && options.id
		await searchConfig();
		await searchOther();
		await search();
	})
	// config信息
	const searchConfig = async () => {
		config.value = uni.getStorageSync('config');
	};
	// 查询其他信息
	const searchOther = async () => {
		let res;
		// 比赛类型
		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_match_number', status: '0' });
		if (res.code === 200 && res.total > 0) numberList.value = res.rows
		// 训练类型
		res = await $api(`dict/data/list`, 'GET', { dictType: 'sys_train_type', status: '0' });
		if (res.code === 200 && res.total > 0) matchList.value = res.rows
		// 活动类型
		res = await $api(`dict/data/list`, 'GET', { dictType: 'sys_activity_type', status: '0' });
		if (res.code === 200 && res.total > 0) activityList.value = res.rows
		// 时长
		res = await $api(`dict/data/list`, 'GET', { dictType: 'sys_match_duration' , status: '0'});
		if (res.code === 200 && res.total > 0) durationList.value = res.rows
		// 是否公开
		res = await $api(`dict/data/list`, 'GET', { dictType: 'sys_yes_no' , status: '0'});
		if (res.code === 200 && res.total > 0) openList.value = res.rows
	};
	// 查询
	const search = async () => {
		if (id.value) { }
	};
	// 点击分页器
	const onClickItem = (e) => {
		if (current.value !== e.currentIndex) current.value = e.currentIndex
	};
	// 保存草稿
	const toAdd = async () => {
		console.log('保存草稿');
	};
	// 复用
	const toCopy = async () => {
		console.log('复用');
	};
	// 创建
	const formSubmit = (e) => {
		console.log(e.deatil.value);
	};
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;

		.one {
			position: relative;
			flex-grow: 1;

			.one_1 {
				height: 20vw;
				background-color: var(--f12Color);
			}
		}

		.two {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 2vw;

			.left {
				display: flex;

				.left_1 {
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 0 2vw;
					font-size: var(--font14Size);
					color: var(--f69Color);

					text {
						margin: 2px 0 0 0;
					}
				}
			}

			.right {
				button {
					width: 60vw;
					font-size: var(--font16Size);
				}
			}
		}
	}

	.scroll-view {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		.list-scroll-view {
			display: flex;
			flex-direction: column;
		}
	}
</style>