match_applet/pagesHome/enroll/index.vue

<template>
	<view class="content">
		<view class="one">
			<uni-collapse accordion v-model="accordionVal" @change="change">
				<uni-collapse-item :title="one">
					<view class="list" v-for="(item, index) in list" :key="index" @tap="toPerson(item)">
						<view class="left">
							<image class="image" mode="aspectFill" :src="item.icon||config.logoUrl">
							</image>
							<view class="name">{{item.name||item.phone}}</view>
						</view>
					</view>
				</uni-collapse-item>
				<uni-collapse-item :title="two">
					<view class="list" v-for="(item, index) in list" :key="index" @tap="toPerson(item)">
						<view class="left">
							<image class="image" mode="aspectFill" :src="item.icon||config.logoUrl">
							</image>
							<view class="name">{{item.name||item.phone}}</view>
						</view>
					</view>
				</uni-collapse-item>
				<uni-collapse-item :title="thr">
					<view class="list" v-for="(item, index) in list" :key="index" @tap="toPerson(item)">
						<view class="left">
							<image class="image" mode="aspectFill" :src="item.icon||config.logoUrl">
							</image>
							<view class="name">{{item.name||item.phone}}</view>
						</view>
						<view class="right">
							<button v-if="is_yes" class="button1" type="warn" size="mini" @tap="onLeave">移入报名</button>
							<button v-else class="button2" type="warn" size="mini" @tap="onLeave">移出报名</button>
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</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;
	// 基本信息
	const config = ref({ logoUrl: '' });
	const one = ref('报名成功(0)');
	const two = ref('请假(0)');
	const thr = ref('未回应队员(6)');
	const accordionVal = ref('2');
	const is_yes = ref(true);
	const list = ref([{ id: 1, phone: '1234567890' }, { id: 1, name: '肝帝集团队' }]);
	// 详情信息id
	const id = ref('');
	onLoad(async (options) => {
		id.value = options && options.id
		if (options && options.name && options.name == '已回应队员') {
			is_yes.value = false
			thr.value = '已回应队员(6)'
		}
		uni.setNavigationBarTitle({
			title: options && options.name || '报名队员'
		});
		await searchConfig();
		await search();
	})
	// config信息
	const searchConfig = async () => {
		config.value = uni.getStorageSync('config');
	};
	// 查询
	const search = async () => {
		if (id.value) { }
	};
	const change = async (e) => {
		console.log(e);
	};
	// 报名用户详情
	const toPerson = async (item) => {
		console.log(item);
	};
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;

		.one {
			padding: 2vw;

			.list {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 3vw 0;
				border-bottom: 1px solid var(--footColor);

				.left {
					display: flex;
					align-items: center;

					.image {
						width: 10vw;
						height: 10vw;
						border-radius: 10vw;
					}

					.name {
						width: 60vw;
						font-size: var(--font16Size);
						padding: 0 2vw;
					}
				}

				.right {
					.button1 {
						background-color: var(--f3CColor);
						font-size: var(--font12Size);
					}

					.button2 {
						background-color: var(--fF0Color);
						font-size: var(--font12Size);
					}
				}
			}
		}
	}
</style>