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></match>
						</view>
						<view v-show="current === 1">
							<activity></activity>
						</view>
						<view v-show="current === 2">
							<activity></activity>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="two">
			<view class="left">
				<view class="left_1">
					<uni-icons @tap="toClose" custom-prefix="iconfont" type="icon-caogao04" size="20"
						color="#696969"></uni-icons>
					<text>保存草稿</text>
				</view>
				<view class="left_1">
					<uni-icons @tap="toClose" 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);
	onLoad(async (options) => {
		// 球队id
		id.value = options && options.id
		await searchConfig();
		await search();
	})
	// config信息
	const searchConfig = async () => {
		config.value = uni.getStorageSync('config');
	};
	// 查询
	const search = async () => {
		if (id.value) { }
	};
	// 点击分页器
	const onClickItem = (e) => {
		if (current.value !== e.currentIndex) current.value = e.currentIndex
	};
</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>