match_applet/pagesHome/team/info.vue

<template>
	<view class="content">
		<view class="one">
			<view class="left" @tap="toEdit(info)">
				<view class="left_1">
					<image class="image" mode="aspectFill" :src="info.logo||'/static/qiudui.png'">
					</image>
				</view>
				<view class="right_1">
					<view class="name">{{info.name||'暂无名称'}}</view>
					<view class="ranking">{{info.ranking||'暂无排名'}}</view>
				</view>
			</view>
			<view class="right">
				<button type="warn" size="mini" @tap="toSave">
					<uni-icons type="plusempty" size="12" color="#ffffff"></uni-icons>
					<text>创建</text>
				</button>
			</view>
		</view>
		<view class="position">
			<view class="two">
				<view class="two_1">
					创建活动，还可以微信、短信通知队员报名
				</view>
				<view class="two_2">
					<button type="warn" size="mini" @tap="toSave">创建</button>
				</view>
				<view class="two_3" @tap="toInfo({route: '/pagesHome/activity/index'})">
					<uni-icons type="list" size="18"></uni-icons>
					<text>查看全部活动</text>
				</view>
			</view>
			<view class="thr">
				<view class="thr_1">
					<view class="list" v-for="(item, index) in menuList" :key="index" @tap="toInfo(item)">
						<uni-icons custom-prefix="iconfont" :type="item.icon" size="25" :color="item.color"></uni-icons>
						<view class="name">{{item.name}}</view>
					</view>
				</view>
				<view class="thr_2">
					<view class="fraction">
						<view class="top">{{total||0}}</view>
						<view class="bottom">总比赛</view>
					</view>
					<view class="circle">
						<circle :pro="16/100" :border_back_color="'#f1f1f1'" :border_color="'#FF0000'" content="16">
						</circle>
						<text>胜</text>
					</view>
					<view class="circle">
						<circle :pro="5/100" :border_back_color="'#f1f1f1'" :border_color="'#35BD7B'" content="5">
						</circle>
						<text>平</text>
					</view>
					<view class="circle">
						<circle :pro="17/100" :border_back_color="'#f1f1f1'" :border_color="'#FFA500'" content="17">
						</circle>
						<text>负</text>
					</view>
					<uni-icons type="forward" size="25" color="#858585"></uni-icons>
				</view>
			</view>
			<view class="four">
				<view class="four_1">
					<view class="left">
						球队历程
					</view>
					<view class="right" @tap="toInfo({route: '/pagesHome/team/album'})">
						<uni-icons custom-prefix="iconfont" type="icon-xiangce" size="20" color="#333333"></uni-icons>
						<view class="name">去相册</view>
					</view>
				</view>
				<view class="four_2">
					<view class="list" v-for="(item, index) in list" :key="index" @tap="toActivity(item)">
						<view class="list_1">
							<view class="date">
								{{moment(item.startTime).format('MM-DD')||'暂无日期'}}
								{{getDayOfWeek(item.startTime)}}
							</view>
							<view class="status"
								:class="[item.status=='0'?'status0':item.status=='1'?'status1':item.status=='2'?'status2':'status3']">
								{{getStatus(item.status)}}
							</view>
						</view>
						<view class="list_2">
							<view class="name" v-if="item.type=='0'">{{item?.matchInfo?.title||'友谊赛'}}</view>
							<view class="name" v-else>{{item?.leagueInfo?.title||'联赛'}}</view>
							<view class="score">
								<view class="red">
									<view class="red_name">{{item?.redInfo?.name||'暂无红方名称'}}</view>
									<view class="red_image">
										<image class="image" mode="aspectFill"
											:src="item?.redInfo?.logo||config.logoUrl">
										</image>
									</view>
									<view class="red_score">{{item.redScore||0}}</view>
								</view>
								<view class="center">:</view>
								<view class="blue">
									<view class="blue_score">{{item.blueScore||0}}</view>
									<view class="blue_image">
										<image class="image" mode="aspectFill"
											:src="item?.blueInfo?.logo||config.logoUrl">
										</image>
									</view>
									<view class="blue_name">{{item?.blueInfo?.name||'暂无蓝方名称'}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import moment from 'moment';
	import { getCurrentInstance, ref } from 'vue';
	import circle from './components/circle.vue';
	//该依赖已内置不需要单独安装
	import { onLoad } from "@dcloudio/uni-app";
	// 请求接口
	const $api = getCurrentInstance()?.appContext.config.globalProperties.$api;
	interface PropsItem {
		id ?: number,
		name ?: string,
		date ?: string,
		red_name ?: string,
		red_score ?: number,
		red_logo ?: string,
		blue_name ?: string,
		blue_score ?: number,
		blue_logo ?: string,
		status ?: string,
		status_name ?: string,
	};
	// 列表
	const list = ref<PropsItem[]>([{ id: 1, name: '测试球队' }, { id: 1, name: '肝帝集团队' }]);
	// 分页
	const pageNum = ref(1);
	const pageSize = ref(10);
	const total = ref(0);
	// 详情
	const info = ref({});
	// 详情信息id
	const id = ref('');
	// 基本信息
	const config = ref({ logoUrl: '' });
	// 用户信息
	const user = ref({});
	// 字典表
	const statusList = ref([]);
	onLoad(async (options) => {
		id.value = options && options.id
		await searchConfig();
		await searchOther();
		await search();
		await searchGame()
	})
	// config信息
	const searchConfig = async () => {
		config.value = uni.getStorageSync('config');
		user.value = uni.getStorageSync('user')
	};
	// 查询其他信息
	const searchOther = async () => {
		let res;
		// 比赛状态
		res = await $api(`dict/data/list`, 'GET', { dictType: 'sys_game_status', status: '0' });
		if (res.code === 200 && res.total > 0) statusList.value = res.rows
	};
	// 查询
	const search = async () => {
		if (id.value) {
			const res = await $api(`team/${id.value}`, 'GET', {});
			if (res.code === 200) {
				if (res.data) info.value = res.data
			} else {
				uni.showToast({
					title: res.msg || '',
					icon: 'error',
				});
			}
		}
	};
	// 查询
	const searchGame = async () => {
		if (id.value) {
			const res = await $api('game/list', 'GET', {
				pageNum: pageNum.value,
				pageSize: pageSize.value,
				userId: user.value.id
			});
			if (res.code === 200) {
				list.value = res.rows
				total.value = res.total
			} else {
				uni.showToast({
					title: res.msg || '',
					icon: 'error',
				});
			}
		}
	};
	// 标签列表
	const menuList = ref([
		{ name: '队员', icon: 'icon-a-14-chengyuanguanli', color: '#333333', route: '/pagesHome/team/person', },
		{ name: '相册', icon: 'icon-xiangce', color: '#333333', route: '/pagesHome/team/album', },
		{ name: '账本', icon: 'icon-zhangben', color: '#333333', route: '/pagesHome/team/book', },
		{ name: '战术板', icon: 'icon-cricket-pitch', color: '#333333', route: '/pagesHome/team/board', },
	]);
	// 修改
	const toEdit = (item : any) => {
		uni.navigateTo({
			url: `/pagesHome/team/index?id=${item._id || item.id}`,
		})
	};
	// 菜单详情
	const toInfo = (item : any) => {
		uni.navigateTo({
			url: `${item.route}?id=${id.value}`,
		})
	};
	// 活动详情
	const toActivity = (item : any) => {
		uni.navigateTo({
			url: `/pagesHome/activity/info?id=${item._id || item.id}&name=${item.name || ''}`,
		})
	};
	// 创建
	const toSave = () => {
		uni.navigateTo({
			url: `/pagesHome/create/index?id=${id.value}`,
		})
	};
	// 日期换算星期几
	const getDayOfWeek = (dateString) => {
		if (dateString) {
			const date = new Date(dateString);
			const dayOfWeek = date.getDay();
			const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
			return weekdays[dayOfWeek];
		} else return '暂无日期';
	};
	// 换算状态
	const getStatus = (value) => {
		if (value) {
			const data = statusList.value.find(i => i.dictValue == value)
			if (data) return data.dictLabel
		} else return '暂无状态';
	};
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
		background-color: var(--footColor);

		.one {
			display: flex;
			justify-content: space-between;
			height: 40vw;
			padding: 8vw 3vw 0 3vw;
			background-color: var(--f12Color);

			.left {
				display: flex;

				.left_1 {
					padding: 0 2vw;

					.image {
						width: 18vw;
						height: 18vw;
						border-radius: 1vw;
						background-color: var(--mainColor);
					}
				}

				.right_1 {
					color: var(--mainColor);

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

					.ranking {
						margin: 4vw 0 0 0;
						font-size: var(--font16Size);
					}
				}
			}

			.right {
				margin: 4vw 0 0 0;

				text {
					font-size: var(--font14Size);
				}
			}
		}

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

			.two {
				width: 94vw;
				margin: 0 3vw;
				padding: 5vw 0 0 0;
				border-radius: 1vw;
				text-align: center;
				background-color: var(--mainColor);

				.two_1 {
					font-size: var(--font16Size);
					color: var(--f99Color);
					padding: 2vw 0;
				}

				.two_2 {
					padding: 4vw 0;

					button {
						padding: 0 10vw;
						font-size: var(--font16Size);
					}
				}

				.two_3 {
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 5vw 0;
					font-size: var(--font14Size);
					border-top: 1px solid var(--footColor);

					text {
						padding: 0 2vw;
					}
				}
			}

			.thr {
				width: 94vw;
				margin: 3vw;
				padding: 2vw 0;
				border-radius: 1vw;
				background-color: var(--mainColor);

				.thr_1 {
					display: flex;
					justify-content: space-around;
					padding: 1vw 0 4vw 0;
					border-bottom: 1px solid var(--footColor);

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

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

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

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

						.top {
							font-size: var(--font20Size);
							font-weight: bold;
						}

						.bottom {
							color: var(--f99Color);
							font-size: var(--font14Size);
						}
					}

					.circle {
						display: flex;
						align-items: center;
						color: var(--f99Color);
						font-size: var(--font14Size);

						text {
							padding: 0 1vw;
						}
					}
				}
			}

			.four {
				width: 94vw;
				margin: 3vw;
				padding: 2vw 0;
				border-radius: 1vw;
				background-color: var(--mainColor);

				.four_1 {
					display: flex;
					justify-content: space-between;
					padding: 2vw;
					border-bottom: 1px solid var(--footColor);

					.left {
						font-size: var(--font18Size);
						font-weight: bold;
					}

					.right {
						display: flex;

						.name {
							padding: 0 1vw;
						}
					}
				}

				.four_2 {
					.list {
						.list_1 {
							display: flex;
							align-items: center;
							padding: 4vw 2vw 2vw 2vw;

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

							.status {
								font-size: 10px;
								margin: 0 1vw;
								padding: 1px 5px;
							}

							.status0 {
								color: var(--mainColor);
								background-color: var(--f35BColor);
							}

							.status1 {
								color: var(--mainColor);
								background-color: var(--fFFColor);
							}

							.status2 {
								color: var(--mainColor);
								background-color: var(--fF0Color);
							}

							.status3 {
								color: var(--f99Color);
								background-color: var(--f9Color);
							}
						}

						.list_2 {
							border: 1px solid var(--f5Color);
							padding: 2vw;
							border-radius: 2px;

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

							.score {
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: var(--font14Size);
								background-color: var(--f9Color);
								border-radius: 5vw;
								padding: 1vw 0;

								.red {
									display: flex;
									align-items: center;
									margin: 0 1vw 0 0;

									.red_image {
										margin: 0 1vw;

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

									.red_score {
										font-size: var(--font16Size);
										color: var(--fF0Color);
									}
								}

								.center {
									font-size: var(--font16Size);
									color: var(--fF0Color);
								}

								.blue {
									display: flex;
									align-items: center;
									margin: 0 0 0 1vw;

									.blue_image {
										margin: 0 1vw;

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

									.blue_score {
										font-size: var(--font16Size);
										color: var(--fF0Color);
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>