mobile_h5/actMgt/pages/actManage/index.vue

<!-- 
[活动管理] 活动列表
http://localhost:5173/actMgt/#/pages/actManage/index
https://oss-mbh5.colormaprun.com/actMgt/#/pages/actManage/index
 -->
<template>
	<view class="body">
		<view class="content uni-column">
			<view class="uni-column top">
				<view class="top-content uni-row">
					<image class="tc-headimg" mode="aspectFit" src="/static/headimg.png"></image>
					<view class="tc-userBox uni-column uni-ais uni-jcse">
						<view class="userBox-name">{{selfInfo.name}}</view>
						<view class="userBox-info uni-row">
							<view class="">等级：{{userLevel[selfInfo.level]}}</view>
							<view class="" style="margin-left: 20px;">余额：￥{{selfInfo.balance}}</view>
						</view>
					</view>
				</view>
			</view>

			<view class="main uni-column">
				<view class="actBox uni-row uni-jcsb">
					<view class="actBox-title">赛事活动</view>
					<view class="actBox-info"><text style="color: #0085D4;">{{actStatistic.totalCompCt}}</text>个赛事，已开赛<text
							style="color: #FF8D1A;">{{actStatistic.normalCompCt}}</text>个，进行中<text style="color: #FF8D1A;">{{actStatistic.InGameCompCt}}</text>个</view>
				</view>
				<view class="norecord" v-if="actList == null || actList.length == 0">暂无记录</view>
				<view class="list uni-row" v-else>
					<view class="item uni-column" v-for="(item, index) in actList" :key="index"
						@click="showDetail(item)">
						<view class="item-cardbox uni-column uni-jcc"
							:class="getCardClass(item.config.tplInfo.styleId)">
							<view class="item-cornerBox item-cornerLeft">{{pubState[item.otherInfo.pubState]}}</view>
							<view class="item-cornerBox item-cornerRight">
								{{getMatchState(item.config.matchInfo.compBeginSecond, item.config.matchInfo.compEndSecond)}}
							</view>
							<image class="item-pic" mode="aspectFit" :src="item.config.tplInfo.matchLogo != '' ? item.config.tplInfo.matchLogo : defaultLogo"></image>
							<view class="item-matchType">锦标赛</view>
							<view class="item-matchName">{{item.config.matchInfo.compName}}</view>
							<view class="item-createTime">（ {{fmtTime(item.otherInfo.createTime, 1)}} 创建 ）</view>
						</view>
						<view class="item-introduce uni-column uni-jcse uni-ais">
							<view class="item-playNum">参赛人数：{{item.otherInfo.playNum}}人</view>
							<view class="uni-width-100 uni-row uni-jcsb">
								<view v-if="item.otherInfo.signupState" class="item-signupState">允许报名</view>
								<view v-else class="item-signupState" style="color: #F70000;">禁止报名</view>
								<image class="item-ico" mode="aspectFit" src="/static/ico_edit.png" @click="btnActEdit(item)">
								</image>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

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

	export default {
		components: {},
		data() {
			return {
				pubState: pubState,
				userLevel: userLevel,
				queryObj: {},
				queryString: "",

				selfInfo: {
					name: "", // 姓名
					phone: "", // 手机号
					balance: "", // 余额
					level: "", // 等级
				},
				
				// defaultLogo: "/static/run.png",
				defaultLogo: "https://oss-mbh5.colormaprun.com/static/logo/default.png",

				actStatistic: {},	// 赛事活动统计信息
				actList: null,	// 赛事活动列表
				/* actList: [{
						otherInfo: {
							compId: 1,
							pubState: 0,
							playNum: 26,
							signupState: false,
							createTime: 1735530373
						},
						config: {
							tplInfo: {
								styleId: 0,
								matchLogo: "/static/run.png",
							},
							matchInfo: {
								compName: "小飞龙系列定向赛",
								compBeginSecond: 1735530373,
								compEndSecond: 1735950373,
							}
						}
					},
					{
						otherInfo: {
							compId: 2,
							pubState: 1,
							playNum: 37,
							signupState: true,
							createTime: 1735530373,
						},
						config: {
							tplInfo: {
								styleId: 1,
								matchLogo: "/static/logo/xfl.png",
							},
							matchInfo: {
								compName: "领秀城社区定向赛",
								compBeginSecond: 1735530373,
								compEndSecond: 1735550373,
							}
						}
					},
					{
						otherInfo: {
							compId: 3,
							pubState: 2,
							playNum: 37,
							signupState: true,
							createTime: 1735530373,
						},
						config: {
							tplInfo: {
								styleId: 2,
								matchLogo: "/static/logo/poly.png",
							},
							matchInfo: {
								compName: "领秀城社区定向赛",
								compBeginSecond: 1735530373,
								compEndSecond: 1735550373,
							}
						}
					},
					{
						otherInfo: {
							compId: 4,
							pubState: 1,
							playNum: 37,
							signupState: true,
							createTime: 1735530373,
						},
						config: {
							tplInfo: {
								styleId: 3,
								matchLogo: "/static/logo/sddx.png",
							},
							matchInfo: {
								compName: "领秀城社区定向赛",
								compBeginSecond: 1735530373,
								compEndSecond: 1735550373,
							}
						}
					},
					{
						otherInfo: {
							compId: 5,
							pubState: 2,
							playNum: 37,
							signupState: true,
							createTime: 1735530373,
						},
						config: {
							tplInfo: {
								styleId: 3,
								matchLogo: "/static/logo/sddx.png",
							},
							matchInfo: {
								compName: "领秀城社区定向赛",
								compBeginSecond: 1735530373,
								compEndSecond: 1735550373,
							}
						}
					}
				] */
			}
		},
		computed: {
			...mapState([
				'username', // 映射 this.username 为 store.state.username
				'userlevel',
				'token'
			]),
			...mapGetters([
				'metadata'
			]),
		},
		onLoad(query) {
			this.init();
		},
		onShow() {
			// console.log("metadata:", this.metadata);
			this.init();
		},
		methods: {
			init() {
				this.getSelfInfo();
				this.compInfoQuery();
			},
			getCardClass(styleid) {
				let css = "";
				if (styleid >= 0) {
					css = "item-cardbox-bg-" + tplStyleList[styleid];
				}
				return css;
			},
			fmtTime(timestamp, type = 3) {
				return tools.timestampToTime(timestamp * 1000, type);
			},
			// 获取比赛状态
			getMatchState(beginSecond, endSecond) {
				// console.log(this.endSecond)
				let countdown = "";
				if (beginSecond > 0 && endSecond > 0) {
					const now = Date.now() / 1000;
					const dif1 = beginSecond - now;
					const dif2 = endSecond - now;
					if (dif1 > 0) {
						countdown = "未开赛";
					} else if (dif2 > 0) {
						countdown = "已开赛";
					} else {
						countdown = "已结束";
					}
					// countdown = tools.convertSecondsToHMS(dif);
				} else {
					countdown = "--";
				}
				return countdown;
			},
			// 获取倒计时
			getCountdown(endSecond) {
				// console.log(this.endSecond)
				let countdown = "";
				if (endSecond > 0) {
					const now = Date.now() / 1000;
					const dif = endSecond - now;
					// const dif = 3600*24 - 60;
					if (dif > 0) {
						countdown = "距结束 " + tools.convertSecondsToDHM(dif);
					} else {
						countdown = "已结束";
					}
					// countdown = tools.convertSecondsToHMS(dif);
				} else {
					countdown = "距结束 --天--小时";
				}
				return countdown;
			},
			// 获取个人信息 
			getSelfInfo() {
				uni.request({
					url: apiGetSelfInfo,
					header: this.metadata,
					method: "POST",
					data: {},
					success: (res) => {
						console.log("getSelfInfo", res);
						if (checkResCode(res)) {
							const data = res.data.data;
							this.selfInfo = data;
						}
					},
					fail: (err) => {
						console.log("getSelfInfo err", err)
					},
				});
			},
			// 自助查询赛事信息
			compInfoQuery() {
				uni.request({
					url: apiCompInfoQuery,
					header: this.metadata,
					method: "POST",
					data: {},
					success: (res) => {
						console.log("compInfoQuery", res);
						if (checkResCode(res)) {
							const data = res.data.data;
							this.actStatistic = data.info;
							this.actList = data.rs;
						}
					},
					fail: (err) => {
						console.log("compInfoQuery err", err)
					},
				});
			},
			showDetail(data) {
				// console.log("showDetail data:", data);
				const queryObj = {
					compId: data.otherInfo.compId
				};
				const queryString = tools.objectToQueryString(queryObj);
				const url = '/pages/actManage/actDetail?' + queryString;
				tools.appAction(url, "uni.navigateTo");
			},
			btnActEdit(data) {
				const queryObj = {
					from: "index",
					compId: data.otherInfo.compId
				};
				const queryString = tools.objectToQueryString(queryObj);
				const url = '/pages/actCreate/actEdit?' + queryString;
				tools.appAction(url, "uni.navigateTo");
				event.stopPropagation();
			},
		}
	}
</script>

<style scoped>

	/deep/ uni-page {
		background-color: #F6F6F6;
	}
	
	.top {
		background-color: #FFFFFF;
	}

	.top-content {
		position: relative;
		width: 90%;
		height: 90px;
	}

	.tc-headimg {
		width: 48px;
		height: 48px;
	}

	.tc-userBox {
		height: 80%;
		margin-left: 20px;
		flex-grow: 1;
	}

	.userBox-name {
		font-size: 16px;
		font-weight: 550;
		color: #383838;
	}

	.userBox-info {
		width: 90%;
		font-size: 14px;
		font-weight: 500;
		color: #383838;
	}

	.actBox {
		width: 90%;
		margin-top: 30rpx;
		margin-bottom: 10rpx;
	}

	.actBox-title {
		font-size: 15px;
		font-weight: 550;
	}

	.actBox-info {
		font-size: 14px;
		color: #383838;
	}

	.norecord {
		font-weight: 500;
		color: #818181;
		font-size: 14px;
		text-align: center;
		line-height: 58vh;
	}

	.list {
		width: 95%;
		flex-wrap: wrap;
		justify-content: flex-start;
		/* background-color: #FFCD29; */
	}

	.item {
		/* width: 43.8%; */
		width: 45.7%;
		margin: 20rpx 15rpx;
		border-radius: 8px;
		background-color: #FFFFFF;
	}

	.item-cardbox {
		position: relative;
		width: 100%;
		height: 180px;
		border-radius: 8px 8px 0px 0px;
	}

	.item-cardbox-bg-blue {
		background: linear-gradient(180deg, #009DFF 0%, #005591 100%), #CCCCCC;
	}

	.item-cardbox-bg-green {
		background: linear-gradient(180deg, #39AB27 0%, #006B05 100%), #CCCCCC;
	}

	.item-cardbox-bg-orange {
		background: linear-gradient(180deg, #ff8103 0%, #915900 100%), #CCCCCC;
	}

	.item-cardbox-bg-purple {
		background: linear-gradient(180deg, #ab01ff 0%, #6d0091 100%), #CCCCCC;
	}

	.item-cornerBox {
		position: absolute;
		height: 17px;
		padding: 1px 8px;
		background-color: rgba(0, 0, 0, 0.38);
		border-radius: 17.85px;

		font-size: 12px;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		line-height: 17px;
		white-space: nowrap;
	}

	.item-cornerLeft {
		left: 5px;
		top: 5px;
	}

	.item-cornerRight {
		right: 5px;
		top: 5px;
	}

	.item-pic {
		width: 100%;
		height: 70px;
		/* padding: 10px 0px; */
		padding-top: 20px;
		padding-bottom: 5px;
	}

	.item-matchType {
		font-size: 12px;
		font-weight: 400;
		color: #FFFFFF;
	}

	.item-matchName {
		padding: 5px 0px;
		font-size: 14px;
		font-weight: 700;
		color: #FFFFFF;
	}

	.item-createTime {
		font-size: 11px;
		font-weight: 500;
		color: #FFEB3B;
	}

	.item-introduce {
		width: 86%;
		height: 66px;
		/* margin-top: 10rpx; */
	}

	.item-playNum {
		width: 100%;
		font-size: 14px;
		font-weight: 400;
		color: #383838;
	}

	.item-signupState {
		padding: 2px 8px;
		border-radius: 80px;
		background: #F2F2F2;
		font-size: 14px;
		font-weight: 500;
		color: #383838;
	}

	.item-ico {
		width: 22px;
		height: 22px;
	}
</style>