match_applet/pagesHome/draft/index.vue

<template>
	<view class="content">
		<view class="one">
			<view class="one_1">
				<uni-segmented-control :current="current" :values="list" @clickItem="onClickItem" styleType="text"
					activeColor="#dd524d"></uni-segmented-control>
			</view>
			<view class="one_2">
				<view v-show="current === 0">
					<view class="list" v-for="(item, index) in historyList" :key="index">
						<view class="left" style = "outline-width:3px;outline-style:groove;"></view>
						<view class="right">
							<view class="name">{{item.title||'暂无名称'}}</view>
							<view class="type textOne">类型：{{item.title||'暂无类型'}} 人均：{{item.per||'0'}}元/人</view>
							<view class="type textOne">地址：{{item.address||'暂无地址'}}</view>
						</view>
						<view class="button">
							<text>复用</text>
						</view>
					</view>
				</view>
				<view v-show="current === 1">
					<view class="list" v-for="(item, index) in draftsList" :key="index">
						<view class="left"></view>
						<view class="right">
							<view class="name">{{item.title||'暂无名称'}}</view>
							<view class="type">类型：{{item.title||'暂无类型'}}</view>
							<view class="type">地址：{{item.address||'暂无地址'}}</view>
						</view>
						<view class="button">
							<text>复用</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { getCurrentInstance, ref } from 'vue';
	//该依赖已内置不需要单独安装
	import { onLoad } from "@dcloudio/uni-app";
	// 请求接口
	const $api = getCurrentInstance()?.appContext.config.globalProperties.$api;
	// 详情信息id
	const id = ref('');
	// 基本信息
	const config = ref({ logoUrl: '' });
	const list = ref(['历史记录', '草稿箱']);
	const current = ref(0);
	// 历史记录
	const historyList = ref([{ id: 1, title: '友谊赛' }, { id: 1, title: '肝帝联赛' }])
	// 草稿箱
	const draftsList = ref([{ id: 1, title: '友谊赛' }, { id: 1, title: '友谊赛' }])
	onLoad(async (options) => {
		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;

		.one {
			.one_2 {
				padding: 2vw;
				background-color: var(--footColor);

				.list {
					display: flex;
					justify-content: space-between;
					align-items: center;
					background-color: var(--mainColor);
					margin: 4vw 2vw 0 2vw;
					padding: 4vw;
					border-radius: 2vw;
					.left{
						
					}

					.right {
						width: 50vw;

						.name {
							font-size: var(--font16Size);
							font-weight: bold;
						}

						.type {
							font-size: var(--font14Size);
							color: var(--f85Color);
							margin: 1vw 0 0 0;
						}
					}

					.button {
						text {
							font-size: var(--font14Size);
							border: 1px solid var(--f12Color);
							padding: 1vw 3vw;
							border-radius: 5vw;
						}
					}
				}
			}
		}
	}
</style>