mobile_h5/actMgt/pages/actManage/rankList.vue

<template>
	<view class="body">
		<view class="content uni-column">
			<view class="uni-column top" :style="getBannerStyle()">
				<my-topbar :title="actRs.config.matchInfo.compName" @btnBackClick="btnBack"></my-topbar>
				<view class="top-content uni-row">
				</view>
			</view>

			<view class="main uni-column">
				<my-tab ref="tab" :tabItems="tabItems" :tabItemsMark="tabItemsMark" :type="0"
					:initActIndex=0 @onTabClick="onTabClick" :fontSize="12"></my-tab>
				
				<view class="tab-view uni-column">
					<template v-for="(item, index) in rankRsList" :key="index">
						<my-ranklist v-show="tabCurrent === index" :rankRs="rankList[item]"
							:rank-type="rankTypeList[index]"></my-ranklist>
					</template>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex';
	import tools from '/utils/tools.js';
	import card from '/utils/card.js';
	// import { tplStyleList, userLevel, pubState } from '/utils/define.js';
	import {
		apiCompInfoDetail,
		apiCardRankDetailQuery,
		checkResCode
	} from '/utils/api.js';

	export default {
		data() {
			return {
				queryObj: {},
				queryString: "",
				compId: 0,	// 赛事ID
				dispArrStr: "totalDistance,totalCp,totalSysPoint,fastPace", // 要显示的集合范围
				tabItems: ["总里程", "打点数", "百味豆", "配速"],
				rankTypeList: ["totalDistance", "totalCp", "totalSysPoint", "fastPace"],
				tabCurrent: 0,
				tabItemsMark: null,
				// tabItemsMark: [{
				// 	textColor: "#ff6203",
				// 	icon: "static/common/award.png"
				// }],
				rankRsList: ["totalDistanceRs", "totalCpRs", "totalSysPointRs", "fastPaceRs"],
				
				rankList: {}, // 排名列表
				
				actRs: card.actRs,
				/* actRs: {
					otherInfo: {
						compIdd: 1,
						pubState: "内测",
						playNum: 26,
						signupState: false,
						createTime: 1735530373
					},
					config: {
						"tplInfo": {
							"styleId": 0,
							"matchLogo": "/static/run.png",
							"matchBanner": "static/banner/banner1.png",
						},
						"matchInfo": {
							"compName": "小飞龙系列定向赛",
							"description": " · 小飞龙定向赛再次来袭！这次有五个场地哟~<br>  · 小飞龙定向赛再次来袭！这次有五个场地哟~<br>  · 小飞龙定向赛再次来袭！这次有五个场地哟~<br>  · 小飞龙定向赛再次来袭！这次有五个场地哟~<br> · 神秘“蛋叔”闪亮登场~<br> · 蛋叔放大招，百味豆换鸡蛋！<br> · 时不可待！冲鸭！<br><br> · 能不能把蛋叔整郁闷，就看你的啦~<br> · 还等啥？火速报名吧！",
							"rules": "<li>随时参赛、不限完赛次数、起点任选、实时排名 <li>起点 -各途经点 -结束点完整打卡为一次有效完赛",
							"maxNum": 20,
							"contactName": "王老师",
							"phone": "13335116666",
							"regBeginSecond": 1735530373,
							"regEndSecond": 1735950373,
							"compBeginSecond": 1736050373,
							"compEndSecond": 1736950373,
						}
					}
				} */
			}
		},
		computed: {
			...mapState([
				'username', // 映射 this.username 为 store.state.username
				'userlevel',
				'token'
			]),
			...mapGetters([
				'metadata'
			]),
		},
		onLoad(query) {
			// console.log(query);
			this.queryObj = query;
			this.queryString = tools.objectToQueryString(this.queryObj);
			// console.log(queryString);
			
			this.compId = query["compId"] ?? 0;
			
			this.compInfoDetail();
			this.cardRankDetailQuery();
		},
		methods: {
			getBannerStyle() {
				return card.getBannerStyle(this.actRs);
			},
			getActtime() {
				return tools.fmtMcTime3(this.actRs.config.matchInfo.compBeginSecond, this.actRs.config.matchInfo.compEndSecond);
			},
			// 自助赛事详情查询
			compInfoDetail() {				
				uni.request({
					url: apiCompInfoDetail,
					header: this.metadata,
					method: "POST",
					data: {
						compId: this.compId,
					},
					success: (res) => {
						// console.log("compInfoDetail", res);
						if (checkResCode(res)) {
							const data = res.data.data;
							this.actRs = data;
						}
					},
					fail: (err) => {
						console.log("compInfoDetail err", err);
					},
				});
			},
			// 排名查询
			cardRankDetailQuery() {				
				uni.request({
					url: apiCardRankDetailQuery,
					header: this.metadata,
					method: "POST",
					data: {
						compId: this.compId,
						dispArrStr: this.dispArrStr
					},
					success: (res) => {
						// console.log("cardRankDetailQuery", res);
						if (checkResCode(res)) {
							const data = res.data.data;
							this.rankList = data;
						}
					},
					fail: (err) => {
						console.log("cardRankDetailQuery err", err);
					},
				});
			},
			btnBack() {
				const url = "/pages/actManage/actDetail?" + this.queryString;
				tools.appAction(url, "uni.navigateTo");
			},
			btnRankList() {
				// this.queryObj.actId = data.actId;
				// this.queryString = tools.objectToQueryString(this.queryObj);
				const url = '/pages/actManage/rankList?' + this.queryString;
				tools.appAction(url, "uni.navigateTo");
			},
			onTabClick(val) {
				// console.log("onTabClick: ", val);
				this.tabCurrent = val;
			}
		}
	}
</script>

<style scoped>
	.top {
		height: 170px;
		padding-top: 16px;
		flex-shrink: 0;
		background-repeat: no-repeat;
		background-size: cover;
	}
	
	.main {
	}
	
	.tab-view {
		width: 100%;
		flex-grow: 1;
	}
	
	/* ::v-deep .tab-active{
		background-color: #a43a07 !important;
	} */
</style>