match_applet/pagesHome/activity/info.vue

<template>
	<view class="content">
		<view class="one">
			<view class="one_1">
				·{{info.number||0}}制 | 共{{info.wheel||0}}轮
			</view>
			<view class="one_2">
				<view class="left">
					<image class="image" mode="aspectFill" :src="info?.redInfo?.logo||config.logoUrl">
					</image>
					<view class="name">{{info?.redInfo?.name||'暂无红方名称'}}</view>
				</view>
				<view class="center">{{info.redScore||0}} : {{info.blueScore||0}}</view>
				<view class="right">
					<image class="image" mode="aspectFill" :src="info?.blueInfo?.logo||config.logoUrl">
					</image>
					<view class="name">{{info?.blueInfo?.name||'暂无蓝方名称'}}</view>
				</view>
			</view>
			<view class="one_3">
				<text>{{getDayOfWeek(info.startTime)}}</text>
				{{info.time||'暂无时间'}}
			</view>
			<view class="one_4 textOne"><text>{{info?.matchInfo?.address||'暂无地点'}}</text> </view>
		</view>
		<view class="position">
			<view class="two">
				<uni-segmented-control :current="current" :values="list" @clickItem="onClickItem" styleType="text"
					activeColor="#dd524d"></uni-segmented-control>
				<view class="two_1">
					<view v-show="current === 0">
						出勤报名
					</view>
					<view v-show="current === 1">
						数据统计
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import moment from 'moment';
	import { getCurrentInstance, ref } from 'vue';
	//该依赖已内置不需要单独安装
	import { onLoad } from "@dcloudio/uni-app";
	// 请求接口
	const $api = getCurrentInstance()?.appContext.config.globalProperties.$api;
	// 基本信息
	const config = ref({ logoUrl: '' });
	const info = ref({});
	const list = ref(['出勤报名', '数据统计']);
	const current = ref(0);
	// 详情信息id
	const id = ref('');
	onLoad(async (options) => {
		id.value = options && options.id
		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 res = await $api(`game/${id.value}`, 'GET', {});
			if (res.code === 200) {
				if (res.data) {
					const date1 = moment(res.data.startTime).format('YYYY-MM-DD')
					const date2 = moment(res.data.endTime).format('YYYY-MM-DD')
					if (moment(date1).isSame(date2)) res.data.time = moment(res.data.startTime).format('MM-DD') + ' ' + moment(res.data.startTime).format('HH:mm') + '-' + moment(res.data.endTime).format('HH:mm');
					else res.data.time = moment(res.data.startTime).format('MM-DD') + '/' + moment(res.data.endTime).format('MM-DD')
					info.value = res.data
				}
			} else {
				uni.showToast({
					title: res.msg || '',
					icon: 'error',
				});
			}
		}
	};
	// 点击分页器
	const onClickItem = (e) => {
		if (current.value !== e.currentIndex) current.value = e.currentIndex
	};
	// 日期换算星期几
	const getDayOfWeek = (dateString) => {
		if (dateString) {
			const date = new Date(dateString);
			const dayOfWeek = date.getDay();
			const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
			return weekdays[dayOfWeek];
		} else return '暂无日期';
	};
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;

		.one {
			background-color: var(--f12Color);
			padding: 0 0 10vw 0;

			.one_1 {
				padding: 2vw;
				text-align: center;
				font-size: var(--font14Size);
				color: var(--f99Color);
			}

			.one_2 {
				display: flex;
				justify-content: space-around;
				align-items: center;
				color: var(--mainColor);

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

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

					.name {
						margin: 2vw 0 0 0;
					}
				}

				.center {
					font-size: 25px;
				}

				.right {
					display: flex;
					flex-direction: column;
					align-items: center;

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

					.name {
						margin: 2vw 0 0 0;
					}
				}
			}

			.one_3 {
				color: var(--mainColor);
				text-align: center;
				padding: 2vw;
				font-size: var(--font16Size);

				text {
					padding: 2px 5px;
					background-color: rgba(105, 105, 105, 0.9);
					border-radius: 2vw;
				}
			}

			.one_4 {
				text-align: center;
				margin: 2vw;

				text {
					font-size: var(--font14Size);
					padding: 2px 5px;
					background-color: rgba(105, 105, 105, 0.9);
					border-radius: 10vw;
					color: var(--mainColor);
				}
			}
		}

		.position {
			position: absolute;
			top: 50vw;

			.two {
				width: 100vw;
				border-top-left-radius: 25px;
				border-top-right-radius: 25px;
				background-color: var(--mainColor);
			}
		}
	}
</style>