mobile_h5/actMgt/pages/actManage/userList.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> -->
				
				<my-userlist :userRs="userList" :admin="userlevel > 0"></my-userlist>
			</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,
		apiCardUserListQuery,
		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"],
				
				userList: {}, // 玩家列表
				actRs: card.actRs,				
			}
		},
		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.cardUserListQuery();
		},
		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);
					},
				});
			},
			// 自助赛用户列表查询
			cardUserListQuery() {				
				uni.request({
					url: apiCardUserListQuery,
					header: this.metadata,
					method: "POST",
					data: {
						compId: this.compId,
						// dispArrStr: this.dispArrStr
					},
					success: (res) => {
						console.log("cardUserListQuery", res);
						if (checkResCode(res)) {
							const data = res.data.data;
							this.userList = data;
						}
					},
					fail: (err) => {
						console.log("cardUserListQuery 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;
		background-position: center;
	}
	
	.main {
	}
	
	.tab-view {
		width: 100%;
		flex-grow: 1;
	}
	
	/* ::v-deep .tab-active{
		background-color: #a43a07 !important;
	} */
</style>