mobile_h5/actMgt/pages/actManage/actDetail.vue

<!-- 
赛事详情
http://localhost:5173/actMgt/#/pages/actManage/actDetail?compId=80 
https://oss-mbh5.colormaprun.com/actMgt/#/pages/actManage/actDetail?compId=80
 -->
<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"
					:showBack="isSelfCreate && userlevel > 0"></my-topbar>
				<view class="top-content uni-row">
				</view>
			</view>

			<view class="main uni-column">
				<view class="compBox uni-column">
					<view class="compName">
						<uni-tag v-if="isSelfCreate && isMgt" :circle="true" :text="pubState[actRs.otherInfo.pubState]"
							:type="actRs.otherInfo.pubState > 1 ? 'primary' : 'warning'" size="small" />
						{{actRs.config.matchInfo.compName}}
					</view>
					<view class="comp_time">赛事日期：{{getActtime()}}</view>
					<view v-if="userlevel > 0 && isSelfCreate" class="comp_time">( 联系人：{{actRs.config.matchInfo.contactName}}
						&nbsp;&nbsp; 电话：<a :href="'tel:' + actRs.config.matchInfo.phone"
							style='color: #ff5500;'>{{actRs.config.matchInfo.phone}}</a> )</view>

					<view class="introduce uni-column">
						<!-- <text class="introduce-title">赛事介绍</text> -->
						<text class="introduce-content" v-html="actRs.config.matchInfo.description"></text>
					</view>
					<view v-if="actRs.config.matchInfo.rules.length > 0" class="activityRules uni-column">
						<text class="activityRules-title">活动规则</text>
						<text class="activityRules-content" v-html="actRs.config.matchInfo.rules"></text>
					</view>
				</view>

				<view class="uni-row uni-jcse qrImgBox">
					<view class="uni-column">
						<image class="imgQrCode" :src="imgQrCodeWx"></image>
						<view class="qrMemo">(微信扫码)</view>
						<view class="qrMemo">查看赛事详情</view>
					</view>
					<view v-if="isMgt" class="uni-column">
						<image class="imgQrCode" :src="imgQrCodeApp"></image>
						<view class="qrMemo">(彩图奔跑APP扫码)</view>
						<view class="qrMemo">查看赛事卡片<text v-if="isMgt" style="color: #ff5500;"
								@click="qrCodeReset"> [重置]</text></view>
					</view>
				</view>
				
				<view class="actButtonBox uni-row uni-jcc">
					<button v-if="isSelfCreate && isMgt" class="actButton" @click="btnActEdit">赛事修改</button>
					<button v-if="isSelfCreate && isMgt && actRs.otherInfo.pubState == 1" class="actButton" @click="btnActPublish">赛事发布</button>
				</view>
			</view>

			<view class="bottom uni-row uni-jcc">
				<button class="bottom-button" @click="btnRankList">排行榜</button>
				<button class="bottom-button" @click="btnUserList">玩家列表</button>
				<button v-if="isMgt" class="bottom-button" @click="btnTrack">场地直播</button>
			</view>
		</view>

		<view class="qrcodeBox">
			<uv-qrcode ref="qrCodeWx" class="qrCode" size="300px" :value="qrCodeWx" :options="qrCodeOptWx"
				@complete="qrCodeWxComplete">
			</uv-qrcode>

			<uv-qrcode v-if="isMgt" ref="qrCodeApp" class="qrCode" size="300px" :value="qrCodeApp"
				:options="qrCodeOptApp" @complete="qrCodeAppComplete">
			</uv-qrcode>
		</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 {
		pubState
	} from '/utils/define.js';
	import {
		apiCompInfoDetail,
		apiCompInfoPublish,
		apiCompQrCodeQuery,
		apiCompQrCodeReset,
		checkResCode
	} from '/utils/api.js';

	export default {
		data() {
			return {
				pubState: pubState, //发布状态  0:审核中 1:内测 2:已发布
				queryObj: {},
				queryString: "",
				compId: 0, // 赛事ID
				
				isMgt: false,	// 当前用户是否有赛事管理权
				isSelfCreate: true,	// 是否自助开赛

				qrCodeWx: "",
				qrCodeOptWx: {
					margin: 5,
					// areaColor: "#f1f1f1",
					foregroundImageSrc: '/static/logo/wechat.png' // 指定二维码前景，一般可在中间放logo
				},
				imgQrCodeWx: "",

				qrCodeApp: "",
				qrCodeOptApp: {
					margin: 5,
					// areaColor: "#f1f1f1",
					foregroundImageSrc: '/static/logo.png' // 指定二维码前景，一般可在中间放logo
				},
				imgQrCodeApp: "",

				actRs: card.actRs,
				/* actRs: {
					otherInfo: {
						compId: 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> · 还等啥？火速报名吧！",
							"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.getQrCodeWx();
		},
		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;
							this.isSelfCreate = data.otherInfo.isSelfCreate;
							this.isMgt = data.otherInfo.isMgt;

							if (this.isMgt) {
								this.getQrCodeApp();
							}
						}
					},
					fail: (err) => {
						console.log("compInfoDetail err", err);
					},
				});
			},
			// 自助赛事发布
			compInfoPublish() {
				uni.request({
					url: apiCompInfoPublish,
					header: this.metadata,
					method: "POST",
					data: {
						compId: this.compId
					},
					success: (res) => {
						// console.log("compInfoPublish", res);
						if (checkResCode(res)) {
							// const data = res.data.data;
							uni.showToast({
								title: `赛事发布成功`,
								icon: 'none',
								duration: 3000
							});

							setTimeout(() => {
								this.$router.go(0); // 刷新当前页面
							}, 1000);
						}
					},
					fail: (err) => {
						console.log("compInfoPublish err", err);
					},
				});
			},
			getQrCodeWx() {
				this.qrCodeWx = process.env.OSS_URL + "#/pages/actManage/actDetail?compId=" + this.compId;
			},
			getQrCodeApp() {
				uni.request({
					url: apiCompQrCodeQuery,
					header: this.metadata,
					method: "POST",
					data: {
						compId: this.compId
					},
					success: (res) => {
						// console.log("getQrCodeApp", res);
						if (checkResCode(res)) {
							const data = res.data.data;
							this.qrCodeApp = "url:" + data.qrCode;
						}
					},
					fail: (err) => {
						console.log("getQrCodeApp err", err);
					},
				});
			},
			// 重置APP二维码
			qrCodeAppReset() {
				uni.request({
					url: apiCompQrCodeReset,
					header: this.metadata,
					method: "POST",
					data: {
						compId: this.compId
					},
					success: (res) => {
						// console.log("qrCodeAppReset", res);
						if (checkResCode(res)) {
							this.getQrCodeApp(); // 重新获取二维码

							uni.showToast({
								title: `二维码重置成功`,
								icon: 'none',
								duration: 3000
							});
						}
					},
					fail: (err) => {
						console.log("qrCodeAppReset err", err);
					},
				});
			},
			btnBack() {
				const url = "/pages/actManage/index";
				tools.appAction(url, "uni.switchTab");
			},
			btnActEdit() {
				this.queryObj.from = "actDetail";
				this.queryString = tools.objectToQueryString(this.queryObj);
				const url = '/pages/actCreate/actEdit?' + this.queryString;
				tools.appAction(url, "uni.navigateTo");
			},
			btnActPublish() {
				let that = this;
				uni.showModal({
					title: '提示',
					content: `赛事发布后将无法修改赛事内容\r\n您确定要继续吗？`,
					confirmText: '确定', //确定文本的文字
					cancelText: '取消', //确定文本的文字
					showCancel: true, //没有取消按钮的弹框
					success: function(res) {
						if (res.confirm) {
							that.compInfoPublish();
						} else if (res.cancel) {}
					}
				});
			},
			btnRankList() {
				const url = '/pages/actManage/rankList?' + this.queryString;
				tools.appAction(url, "uni.navigateTo");
			},
			btnTrack() {
				const url = '/pages/actManage/track?' + this.queryString;
				tools.appAction(url, "uni.navigateTo");
			},
			btnUserList() {
				const url = '/pages/actManage/userList?' + this.queryString;
				tools.appAction(url, "uni.navigateTo");
			},
			qrCodeReset() {
				let that = this;
				uni.showModal({
					title: '重置二维码',
					content: `重置后生成新码，旧码会失效\r\n您确定要继续吗？`,
					confirmText: '确定', //确定文本的文字
					cancelText: '取消', //确定文本的文字
					showCancel: true, //没有取消按钮的弹框
					success: function(res) {
						if (res.confirm) {
							that.qrCodeAppReset();
						} else if (res.cancel) {}
					}
				});
			},
			qrCodeWxComplete(res) {
				// console.log("[qrCodeWxComplete] res", res);
				this.$refs.qrCodeWx.toTempFilePath({
					success: (res) => {
						// console.log(res);
						this.imgQrCodeWx = res.tempFilePath;
					}
				});
			},
			qrCodeAppComplete(res) {
				// console.log("[qrCodeAppComplete] res", res);
				this.$refs.qrCodeApp.toTempFilePath({
					success: (res) => {
						// console.log(res);
						this.imgQrCodeApp = res.tempFilePath;
					}
				});
			}
		}
	}
</script>

<style scoped>
	.top {
		height: 170px;
		padding-top: 16px;
		flex-shrink: 0;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}

	.main {
		margin-bottom: 60px;
		overflow: scroll;
	}

	.compBox {
		width: 76%;
		margin-top: 20px;
	}

	.compName {
		width: 90%;
		font-size: 19px;
		font-weight: 500;
		text-align: center;
	}

	.comp_time {
		margin-top: 8px;
		font-size: 12px;
		font-weight: 400;
		color: #808080;
	}

	.introduce {
		width: 100%;
		margin-top: 12px;
		margin-bottom: 10px;
		align-items: flex-start;
		justify-content: space-around;
	}

	.introduce-title {
		color: #333333;
		font-size: 15px;
		line-height: 30px;
		font-family: Source Han Sans CN;
	}

	.introduce-content {
		color: #333333;
		font-size: 14px;
		line-height: 23px;
		font-family: Source Han Sans CN;
	}

	.activityRules {
		width: 100%;
		margin-top: 5px;
		margin-bottom: 10px;
		padding: 10px 15px;
		align-items: flex-start;
		justify-content: space-around;
		border-radius: 9px;
		background: #EBEBEB;
	}

	.activityRules-title {
		color: #333333;
		font-size: 14px;
		line-height: 25px;
		font-weight: 500;
		font-family: Source Han Sans CN;
	}

	.activityRules-content {
		color: #333333;
		font-size: 13px;
		line-height: 23px;
		font-family: Source Han Sans CN;
	}
	
	.actButtonBox {
		width: 80%;
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.actButton {
		height: 30px;
		background: #FFB40B;
		font-size: 14px;
		font-weight: 400;
		line-height: 30px;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 40px;
		background-color: #ffffff;
		border-top: #E5E5E5 solid 1px;
	}

	.bottom-button {
		width: 90px;
		height: 30px;
		color: #ffffff;
		background: #2e85ec;
		font-size: 14px;
		font-weight: 400;
		line-height: 30px;
	}

	.qrImgBox {
		width: 90%;
	}

	.qrCode {
		visibility: hidden;
	}

	.imgQrCode {
		width: 120px;
		height: 120px;
		margin-top: 20px;
		margin-bottom: 6px;
		border: 2px solid;
	}

	.qrMemo {
		font-size: 12px;
		line-height: 18px;
	}

	.qrcodeBox {
		height: 0px;
		overflow: hidden;
	}
</style>