|
|
@@ -1,910 +1,935 @@
|
|
|
-<!--
|
|
|
-[模板] 样式2 - 排名总览
|
|
|
-http://localhost:5173/card/#/pages/tpl/style2/rankOverview
|
|
|
-https://oss-mbh5.colormaprun.com/card/#/pages/tpl/style2/rankOverview
|
|
|
- -->
|
|
|
-<template>
|
|
|
- <view class="body">
|
|
|
- <view v-if="pageReady" class="content uni-column">
|
|
|
- <view class="uni-column page-top">
|
|
|
- <my-topbar :mcName="mcName" class="topbar-color"
|
|
|
- @btnBackClick="btnBack" @btnInfoClick="btnInfo"></my-topbar>
|
|
|
-
|
|
|
- <view class="topcontent uni-column uni-jcsa">
|
|
|
- <view class="logo"></view>
|
|
|
- <text v-if="configParam.subTitle.length > 0" class="top-acttime">{{configParam.subTitle}}</text>
|
|
|
- <text v-else class="top-acttime">{{fmtMcTime2(beginSecond, endSecond)}}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view v-if="configParam.midType == 0" class="midType0 uni-column">
|
|
|
- <view class="mid-0 uni-row uni-jcc">
|
|
|
- <view class="mid-0-select">
|
|
|
- <e-select v-model="ocaId" :options="mapList" :search="false" :inputClick="true"
|
|
|
- maxHeight="300px" :clearable="false" @change="eSelectChange"></e-select>
|
|
|
- </view>
|
|
|
- <text v-if="cardConfigData.popupHelpList.length > 0" class="mid-0-help" @click="btnHelp">帮助</text>
|
|
|
- </view>
|
|
|
- <view class="midType0-mid-1 uni-row uni-jcc">
|
|
|
- <view class="uni-row">
|
|
|
- <image v-if="cardConfigData.popupWarnList.length > 0" class="mid-1-yellowCard" mode="aspectFit"
|
|
|
- @click="btnWarn" src="/static/common/card_yellow.gif"></image>
|
|
|
- <text class="mid-1-text">{{nickName}}</text>
|
|
|
- </view>
|
|
|
- <!-- <text class="mid-1-text">{{coiName}}</text> -->
|
|
|
- <text class="mid-1-text" style="color: #aaaaaa; margin-left: 20px;" v-if="mcState==1 && allowMcSignUp"
|
|
|
- @click="btnReGroup">修改</text>
|
|
|
- </view>
|
|
|
- <view class="mid-2 uni-row uni-jcsa">
|
|
|
- <view class="uni-column">
|
|
|
- <text class="mid-2-value">{{regionTotalNum}}</text>
|
|
|
- <text class="mid-2-text">场次</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="mid-line"></view>
|
|
|
- <view class="uni-column">
|
|
|
- <text class="mid-2-value">{{regionTotalCp}}</text>
|
|
|
- <text class="mid-2-text">打点数</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="mid-line"></view>
|
|
|
- <view class="uni-column">
|
|
|
- <text class="mid-2-value">{{regionTotalCpRankNum}}</text>
|
|
|
- <text class="mid-2-text">个人排名</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view v-if="configParam.midType == 1" class="midType1 uni-column">
|
|
|
- <view class="mid-0 uni-row uni-jcc">
|
|
|
- <view class="mid-0-select">
|
|
|
- <e-select v-model="ocaId" :options="mapList" :search="false" :inputClick="true"
|
|
|
- maxHeight="300px" :clearable="false" @change="eSelectChange"></e-select>
|
|
|
- </view>
|
|
|
- <view class="mid-0-right uni-row uni-jcsa">
|
|
|
- <text class="" style="" v-if="mcState==1 && allowMcSignUp"
|
|
|
- @click="btnReGroup">修改</text>
|
|
|
- <text v-if="cardConfigData.popupHelpList.length > 0" class="" @click="btnHelp">帮助</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="midType1-mid-1 uni-row uni-jcse">
|
|
|
- <view class="uni-row">
|
|
|
- <image v-if="cardConfigData.popupWarnList.length > 0" class="mid-1-yellowCard" mode="aspectFit"
|
|
|
- @click="btnWarn" src="/static/common/card_yellow.gif"></image>
|
|
|
- <text class="mid-1-name">{{nickName}}</text>
|
|
|
- </view>
|
|
|
- <!-- <text class="mid-1-name">{{coiName}}</text> -->
|
|
|
- <text class="uni-nowrap">场次：{{regionTotalNum}}</text>
|
|
|
- </view>
|
|
|
- <view class="mid-2 uni-row uni-jcsa">
|
|
|
- <view class="uni-column">
|
|
|
- <text class="mid-2-value" style="color: #ff0045;">{{regionTotalSysPoint}}</text>
|
|
|
- <text class="mid-2-text">百味豆</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="mid-line"></view>
|
|
|
-
|
|
|
- <view class="uni-column">
|
|
|
- <text class="mid-2-value">{{fmtDistanct(regionTotalDictance)}}</text>
|
|
|
- <text class="mid-2-text">里程 km</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="mid-line"></view>
|
|
|
- <view class="uni-column">
|
|
|
- <text class="mid-2-value">{{regionTotalCp}}</text>
|
|
|
- <text class="mid-2-text">打点数</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="mid-line"></view>
|
|
|
-
|
|
|
- <view class="uni-column">
|
|
|
- <text class="mid-2-value">{{fmtPace(regionFastPace)}}</text>
|
|
|
- <text class="mid-2-text">最快配速</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="main uni-column">
|
|
|
- <text class="main-title">选择比赛路线</text>
|
|
|
- <my-pathList :style="pathListStyle.style" :pathList="pathList"
|
|
|
- :selectedPath="ocaId" :mcState="mcState" :showLine="pathListStyle.showLine"
|
|
|
- @onPathClick="onPathClick"></my-pathList>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="bottom uni-column">
|
|
|
- <button class="btnStartGame bgcolor-main" @click="btnStartGame">开始比赛</button>
|
|
|
- </view>
|
|
|
-
|
|
|
- <my-popup ref="mypopup" :config="cardConfigData.popupRuleConfig" :dataList="cardConfigData.popupRuleList" :acttime="acttime"></my-popup>
|
|
|
- <my-popup ref="mypopupHelp" :config="cardConfigData.popupHelpConfig" :dataList="cardConfigData.popupHelpList"></my-popup>
|
|
|
- <my-popup ref="mypopupWarn" :config="cardConfigData.popupWarnConfig" :dataList="cardConfigData.popupWarnList"></my-popup>
|
|
|
- <!-- <my-popup-map ref="mypopupmap" :point="navPoint"></my-popup-map> -->
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import tools from '/common/tools';
|
|
|
- import cardfunc from '../../../common/cardfunc';
|
|
|
- import { localCardConfig } from "./cardconfig/test.js";
|
|
|
- import {
|
|
|
- token,
|
|
|
- apiMapListQuery,
|
|
|
- apiMatchRsDetailQuery,
|
|
|
- apiIsAllowMcSignUp,
|
|
|
- checkResCode
|
|
|
- } from '/common/api';
|
|
|
-
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- cardConfigData: cardfunc.cardConfigData,
|
|
|
- pageReady: false,
|
|
|
- pageName: "rankOverview",
|
|
|
- firstEnterKey: 'firstEnter-tpl-style2',
|
|
|
- rankKey: "rank-tpl-style2",
|
|
|
- mapKey: "rank-tpl-style2-map",
|
|
|
- queryObj: {},
|
|
|
- queryString: "",
|
|
|
- token: "",
|
|
|
-
|
|
|
- ecId: 0, // 卡片id
|
|
|
- mcId: 0, // 赛事id
|
|
|
- mcType: 0, // 赛事类型 1 普通活动 2 线下赛 3 线上赛
|
|
|
- mcName: "", // 赛事名称
|
|
|
- coiName: "", // 已报名单位名称
|
|
|
- acttime: "", // 活动时间
|
|
|
- beginSecond: null, // 活动或赛事开始时间戳，单位秒
|
|
|
- endSecond: null, // 活动或赛事结束时间戳，单位秒
|
|
|
- ocaId: 0, // 关联id，带入到App活动详情页面
|
|
|
- nickName: "", // 昵称
|
|
|
-
|
|
|
- totalNum: null, // 总场次
|
|
|
- totalDistanct: null, // 总距离,单位米
|
|
|
- totalDistanctRankNum: null, // 总距离排名
|
|
|
- totalCp: null, // 总打点数
|
|
|
- totalCpRankNum: null, // 总打点数排名
|
|
|
- totalSysPoint: null, // 总百味豆
|
|
|
- totalSysPointRankNum: null, // 总百味豆排名
|
|
|
- fastPace: null, // 个人最快配速
|
|
|
- fastPaceRankNum: null, // 个人最快配速排名
|
|
|
- regionTotalNum: null, // 地图内总场次
|
|
|
- regionTotalCp: null, // 地图内打点数
|
|
|
- regionTotalCpRankNum: null, // 地图内个人打点排名
|
|
|
- regionTotalSysPoint: null, // 地图内积分(百味豆)
|
|
|
- regionTotalDictance: null, // 地图内里程(单位米)
|
|
|
- regionFastPace: null, // 地图内最快配速
|
|
|
- ocaRs: [], // 卡片对应活动集合
|
|
|
-
|
|
|
- mapList: [], // 地图列表
|
|
|
-
|
|
|
- interval: null,
|
|
|
- mcState: 0, // 赛事/活动状态 0: 未开始 1: 进行中 2: 已结束
|
|
|
- allowMcSignUp: false, // 是否允许重新分组
|
|
|
- pathList: {},
|
|
|
- pathListStyle: {},
|
|
|
- navPoint: {},
|
|
|
- configParam: {
|
|
|
- subTitle: "",
|
|
|
- midType: 0
|
|
|
- },
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- pathListLen() {
|
|
|
- return Object.keys(this.pathList).length;
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad(query) { // 类型非必填，可自动推导
|
|
|
- // uni.showLoading({
|
|
|
- // title: '加载中'
|
|
|
- // });
|
|
|
-
|
|
|
- // console.log("query:", query);
|
|
|
- this.queryObj = query;
|
|
|
- this.queryString = tools.objectToQueryString(this.queryObj);
|
|
|
- // console.log(queryString);
|
|
|
- this.token = query["token"] ?? token;
|
|
|
- this.ecId = query["id"] ?? 0;
|
|
|
-
|
|
|
- this.firstEnterKey += "-" + this.ecId;
|
|
|
- console.log("firstEnterKey:", this.firstEnterKey);
|
|
|
-
|
|
|
- this.rankKey += "-" + this.ecId;
|
|
|
- console.log("rankKey:", this.rankKey);
|
|
|
-
|
|
|
- this.mapKey += "-" + this.ecId;
|
|
|
- console.log("mapKey:", this.mapKey);
|
|
|
-
|
|
|
- const mapValue = uni.getStorageSync(this.mapKey);
|
|
|
- if (mapValue) {
|
|
|
- console.log("mapValue:", mapValue);
|
|
|
- this.ocaId = mapValue;
|
|
|
- }
|
|
|
-
|
|
|
- cardfunc.init(this, this.token, this.ecId);
|
|
|
- cardfunc.getCardConfig(this.cardConfigQueryCallback, localCardConfig);
|
|
|
- },
|
|
|
- // 页面初次渲染完成，此时组件已挂载完成，DOM 树($el)已可用
|
|
|
- onReady() {
|
|
|
- // this.dealFirstEnter();
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- },
|
|
|
- onUnload() {
|
|
|
- this.clear();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- dealNotice(rank) {
|
|
|
- // console.log('[dealFirstEnter]');
|
|
|
- let that = this;
|
|
|
- uni.getStorage({
|
|
|
- key: that.rankKey,
|
|
|
- success: (res) => {
|
|
|
- // console.log('[getStorage]', that.rankKey, res.data);
|
|
|
- const oldRank = res.data;
|
|
|
- if (oldRank != rank) {
|
|
|
- // that.notice = true;
|
|
|
- that.setRankValue(rank);
|
|
|
- }
|
|
|
- },
|
|
|
- fail: (e) => {
|
|
|
- console.log('[getStorage] fail', that.rankKey, e);
|
|
|
- // that.notice = false;
|
|
|
- that.setRankValue(rank);
|
|
|
- },
|
|
|
- })
|
|
|
- },
|
|
|
- setRankValue(data) {
|
|
|
- let that = this;
|
|
|
- uni.setStorage({
|
|
|
- key: that.rankKey,
|
|
|
- data: data,
|
|
|
- success: () => {
|
|
|
- console.log('[setStorage] success', that.rankKey, data);
|
|
|
- },
|
|
|
- fail: (e) => {
|
|
|
- console.log('[setStorage] fail', that.rankKey, e);
|
|
|
- },
|
|
|
- })
|
|
|
- },
|
|
|
- dealFirstEnter() {
|
|
|
- // console.log('[dealFirstEnter]');
|
|
|
- let that = this;
|
|
|
- uni.getStorage({
|
|
|
- key: that.firstEnterKey,
|
|
|
- success: (res) => {
|
|
|
- console.log('[getStorage]', that.firstEnterKey, res.data);
|
|
|
- },
|
|
|
- fail: (e) => {
|
|
|
- console.log('[getStorage] fail', that.firstEnterKey, e);
|
|
|
- that.btnInfo();
|
|
|
- that.setFirstEnterValue(true);
|
|
|
- },
|
|
|
- })
|
|
|
- },
|
|
|
- setFirstEnterValue(data) {
|
|
|
- let that = this;
|
|
|
- uni.setStorage({
|
|
|
- key: that.firstEnterKey,
|
|
|
- data: data,
|
|
|
- success: () => {
|
|
|
- console.log('[setStorage] success', that.firstEnterKey, data);
|
|
|
- },
|
|
|
- fail: (e) => {
|
|
|
- console.log('[setStorage] fail', that.firstEnterKey, e);
|
|
|
- },
|
|
|
- })
|
|
|
- },
|
|
|
- clear() {
|
|
|
- if (this.interval != null) {
|
|
|
- clearInterval(this.interval);
|
|
|
- this.interval = null;
|
|
|
- }
|
|
|
- },
|
|
|
- cardConfigQueryCallback(cardconfig) {
|
|
|
- this.loadConfig(cardconfig);
|
|
|
- this.matchRsDetailQuery();
|
|
|
- cardfunc.warnMessageQuery();
|
|
|
- setTimeout(this.dealFirstEnter, 500);
|
|
|
- },
|
|
|
- loadConfig(cardconfig) {
|
|
|
- cardconfig = cardfunc.parseCardConfig(cardconfig);
|
|
|
- // console.log("[loadCardConfig] cardconfig:", cardconfig);
|
|
|
-
|
|
|
- // 加载卡片通用配置
|
|
|
- if (cardconfig.common != undefined) {
|
|
|
- cardfunc.loadCardCommonConfig(cardconfig.common);
|
|
|
- }
|
|
|
-
|
|
|
- // -------- 加载当前页面的配置 --------
|
|
|
-
|
|
|
- const config = cardfunc.parseCardConfig(cardconfig[this.pageName]);
|
|
|
- // console.log("[loadConfig] config_page:", config);
if (config == undefined || config == null) {
|
|
|
- this.pageReady = true;
return;
}
|
|
|
-
|
|
|
- // 加载CSS样式
|
|
|
- const css = config.css;
|
|
|
- if (css != undefined && css.length > 0) {
|
|
|
- tools.loadCssCode(css);
|
|
|
- }
|
|
|
-
|
|
|
- // 加载比赛路线数据
|
|
|
- const pathList = config.pathList;
|
|
|
- // console.log("[loadConfig] pathList:", pathList);
|
|
|
- if (pathList != undefined) {
|
|
|
- this.pathList = pathList;
|
|
|
- }
|
|
|
-
|
|
|
- // 加载比赛路线样式
|
|
|
- const pathListStyle = config.pathListStyle;
|
|
|
- // console.log("[loadConfig] pathList:", pathList);
|
|
|
- if (pathListStyle != undefined) {
|
|
|
- this.pathListStyle = pathListStyle;
|
|
|
- }
|
|
|
-
|
|
|
- // 加载页面参数
|
|
|
- const param = config.param;
|
|
|
- if (param != undefined) {
|
|
|
- if (param.subTitle != undefined && param.subTitle.length > 0) {
|
|
|
- this.configParam.subTitle = param.subTitle;
|
|
|
- }
|
|
|
- if (param.midType != undefined && param.midType >= 0) {
|
|
|
- this.configParam.midType = param.midType;
|
|
|
- }
|
|
|
- }
|
|
|
- // console.log("[loadConfig] param:", this.configParam);
|
|
|
-
|
|
|
- this.pageReady = true;
|
|
|
- // uni.hideLoading();
|
|
|
- },
|
|
|
- // 获取倒计时
|
|
|
- getCountdown() {
|
|
|
- // console.log(this.endSecond)
|
|
|
- if (this.endSecond > 0) {
|
|
|
- const now = Date.now() / 1000;
|
|
|
- const dif = this.endSecond - now;
|
|
|
- // const dif = 3600*24 - 60;
|
|
|
- if (dif > 0) {
|
|
|
- this.countdown = '距结束 ' + tools.convertSecondsToDHM(dif);
|
|
|
- } else {
|
|
|
- this.countdown = "活动已结束";
|
|
|
- }
|
|
|
- // this.countdown = tools.convertSecondsToHMS(dif);
|
|
|
- } else {
|
|
|
- this.countdown = "距结束 --天--小时";
|
|
|
- }
|
|
|
- },
|
|
|
- // 格式化 距离
|
|
|
- fmtDistanct(val) {
|
|
|
- if (val >= 0) {
|
|
|
- return Math.round(val * 100 / 1000) / 100;
|
|
|
- } else {
|
|
|
- return '--';
|
|
|
- }
|
|
|
- /* if (val < 1000)
|
|
|
- return Math.round(val * 10 / 1000) / 10;
|
|
|
- else
|
|
|
- return Math.round(val / 1000); */
|
|
|
- },
|
|
|
- // 格式化 配速
|
|
|
- fmtPace(val) {
|
|
|
- if (val >= 0) {
|
|
|
- return tools.convertSecondsToHMS(val, 2);
|
|
|
- } else {
|
|
|
- return '--';
|
|
|
- }
|
|
|
- },
|
|
|
- fmtMcTime(timestamp) {
|
|
|
- return tools.fmtMcTime(timestamp);
|
|
|
- },
|
|
|
- // 获取活动时间
|
|
|
- getActtime() {
|
|
|
- this.acttime = tools.getActtime(this.beginSecond, this.endSecond);
|
|
|
- },
|
|
|
- fmtMcTime2(timestamp1, timestamp2) {
|
|
|
- return tools.fmtMcTime2(timestamp1, timestamp2);
|
|
|
- },
|
|
|
- // 卡片对应地图列表详情查询
|
|
|
- mapListQuery() {
|
|
|
- uni.request({
|
|
|
- url: apiMapListQuery,
|
|
|
- header: {
|
|
|
- "Content-Type": "application/x-www-form-urlencoded",
|
|
|
- "token": this.token,
|
|
|
- },
|
|
|
- method: "POST",
|
|
|
- data: {
|
|
|
- mcId: this.mcId
|
|
|
- },
|
|
|
- success: (res) => {
|
|
|
- // console.log("mapListQuery", res);
|
|
|
- if (res.data.code == 0) {
|
|
|
- const data = res.data.data;
|
|
|
- this.mapList = data;
|
|
|
-
|
|
|
- let mapItems = [];
|
|
|
- for (var i = 0; i < data.length; i++) {
|
|
|
- let map = {};
|
|
|
- map.text = data[i].mapName;
|
|
|
- map.value = data[i].ocaId;
|
|
|
- mapItems.push(map);
|
|
|
- if (i == 0 && this.ocaId == 0) {
|
|
|
- this.ocaId = data[i].ocaId;
|
|
|
- this.matchRsDetailQuery();
|
|
|
- uni.setStorageSync(this.mapKey, this.ocaId);
|
|
|
- }
|
|
|
- }
|
|
|
- this.mapList = mapItems;
|
|
|
- // console.log("mapList", this.mapList);
|
|
|
- }
|
|
|
- },
|
|
|
- fail: (err) => {
|
|
|
- console.log("mapListQuery err", err);
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
- // 卡片对应线上赛多个活动查询
|
|
|
- matchRsDetailQuery() {
|
|
|
- uni.request({
|
|
|
- url: apiMatchRsDetailQuery,
|
|
|
- header: {
|
|
|
- "Content-Type": "application/x-www-form-urlencoded",
|
|
|
- "token": this.token,
|
|
|
- },
|
|
|
- method: "POST",
|
|
|
- data: {
|
|
|
- ecId: this.ecId,
|
|
|
- ocaId: this.ocaId
|
|
|
- },
|
|
|
- success: (res) => {
|
|
|
- // console.log("matchRsDetailQuery", res);
|
|
|
- if (checkResCode(res)) {
|
|
|
- const data = res.data.data;
|
|
|
- this.mcType = data.mcType;
|
|
|
- this.mcId = data.mcId;
|
|
|
- this.mcName = data.mcName;
|
|
|
- this.coiName = data.coiName;
|
|
|
- this.beginSecond = data.beginSecond;
|
|
|
- this.endSecond = data.endSecond;
|
|
|
- this.nickName = data.nickName;
|
|
|
- this.totalNum = data.totalNum;
|
|
|
- this.totalDistanct = data.totalDistanct;
|
|
|
- this.totalDistanctRankNum = data.totalDistanctRankNum;
|
|
|
- this.totalCp = data.totalCp;
|
|
|
- this.totalCpRankNum = data.totalCpRankNum;
|
|
|
- this.totalSysPoint = data.totalSysPoint;
|
|
|
- this.totalSysPointRankNum = data.totalSysPointRankNum;
|
|
|
- this.fastPace = data.fastPace;
|
|
|
- this.fastPaceRankNum = data.fastPaceRankNum;
|
|
|
- this.regionTotalNum = data.regionTotalNum;
|
|
|
- this.regionTotalCp = data.regionTotalCp;
|
|
|
- this.regionTotalCpRankNum = data.regionTotalCpRankNum;
|
|
|
- this.regionTotalSysPoint = data.regionTotalSysPoint;
|
|
|
- this.regionTotalDictance = data.regionTotalDictance;
|
|
|
- this.regionFastPace = data.regionFastPace;
|
|
|
- this.ocaRs = data.ocaRs;
|
|
|
-
|
|
|
- this.mcState = tools.checkMcState(this.beginSecond, this.endSecond);
|
|
|
-
|
|
|
- const rank = JSON.stringify(data);
|
|
|
- this.dealNotice(rank);
|
|
|
-
|
|
|
- this.getCountdown();
|
|
|
- this.getActtime();
|
|
|
-
|
|
|
- this.isAllowMcSignUp();
|
|
|
- this.mapListQuery();
|
|
|
-
|
|
|
- this.clear();
|
|
|
- this.interval = setInterval(this.getCountdown, 60000);
|
|
|
- }
|
|
|
- },
|
|
|
- fail: (err) => {
|
|
|
- console.log("matchRsDetailQuery err", err)
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
- // 是否允许重新分组（报名）
|
|
|
- isAllowMcSignUp() {
|
|
|
- uni.request({
|
|
|
- url: apiIsAllowMcSignUp,
|
|
|
- header: {
|
|
|
- "Content-Type": "application/x-www-form-urlencoded",
|
|
|
- "token": this.token,
|
|
|
- },
|
|
|
- method: "POST",
|
|
|
- data: {
|
|
|
- ecId: this.ecId
|
|
|
- },
|
|
|
- success: (res) => {
|
|
|
- // console.log("isAllowMcSignUp", res)
|
|
|
- if (res.data.code == 0) {
|
|
|
- const data = res.data.data;
|
|
|
- this.allowMcSignUp = data.allowSignUp;
|
|
|
- }
|
|
|
- },
|
|
|
- fail: (err) => {
|
|
|
- console.log("isAllowMcSignUp err", err)
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
- btnBack() {
|
|
|
- // const url = `action://to_home/`;
|
|
|
- const url = "/pages/tpl/style2/rankList?" + this.queryString;
|
|
|
- tools.appAction(url, "uni.navigateTo");
|
|
|
- },
|
|
|
- btnInfo() {
|
|
|
- // console.log(this.$refs.mypopup);
|
|
|
- this.$refs.mypopup.popupOpen();
|
|
|
- },
|
|
|
- btnHelp() {
|
|
|
- this.$refs.mypopupHelp.popupOpen();
|
|
|
- },
|
|
|
- btnWarn() {
|
|
|
- this.$refs.mypopupWarn.popupOpen();
|
|
|
- },
|
|
|
- btnReGroup() {
|
|
|
- this.queryObj.from = "rankOverview";
|
|
|
- this.queryString = tools.objectToQueryString(this.queryObj);
|
|
|
-
|
|
|
- const url = '/pages/tpl/style2/signup?' + this.queryString;
|
|
|
- tools.appAction(url, "uni.navigateTo");
|
|
|
- },
|
|
|
- onOverviewClick(ovtype) {
|
|
|
- this.queryObj.ovtype = ovtype;
|
|
|
- this.queryString = tools.objectToQueryString(this.queryObj);
|
|
|
-
|
|
|
- const url = "/pages/tpl/style2/rankList?" + this.queryString;
|
|
|
- tools.appAction(url, "uni.navigateTo");
|
|
|
- },
|
|
|
- eSelectChange(data) {
|
|
|
- // console.log("eSelectChange:", data);
|
|
|
- this.ocaId = data.value;
|
|
|
- this.matchRsDetailQuery();
|
|
|
- uni.setStorageSync(this.mapKey, this.ocaId);
|
|
|
- },
|
|
|
- onPathClick(data) {
|
|
|
- console.log("onPathClick:", data);
|
|
|
- if (this.ocaId != data.path.ocaId) {
|
|
|
- this.ocaId = data.path.ocaId;
|
|
|
- this.matchRsDetailQuery();
|
|
|
- uni.setStorageSync(this.mapKey, data.path.ocaId);
|
|
|
- }
|
|
|
- },
|
|
|
- btnStartGame() {
|
|
|
- // 赛事/活动状态 0: 未开始 1: 进行中 2: 已结束
|
|
|
- if (this.mcState == 1) {
|
|
|
- const url = `action://to_detail/?id=${this.ocaId}&matchType=${this.mcType}`;
|
|
|
- tools.appAction(url);
|
|
|
- } else if (this.mcState == 0) {
|
|
|
- uni.showToast({
|
|
|
- title: '比赛尚未开始',
|
|
|
- icon: 'none',
|
|
|
- duration: 3000
|
|
|
- });
|
|
|
- } else if (this.mcState == 2) {
|
|
|
- uni.showToast({
|
|
|
- title: '比赛已结束',
|
|
|
- icon: 'none',
|
|
|
- duration: 3000
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
- .content {
|
|
|
- width: 100vw;
|
|
|
- min-height: 100vh;
|
|
|
- overflow-x: scroll;
|
|
|
- }
|
|
|
-
|
|
|
- .page-top {
|
|
|
- position: relative;
|
|
|
- z-index: 10;
|
|
|
- width: 100%;
|
|
|
- height: 270px;
|
|
|
- padding-top: 36px;
|
|
|
- justify-content: space-between;
|
|
|
- background-image: url("/static/backgroud/top_bg_egg2.png");
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position-x: center;
|
|
|
- background-position-y: center;
|
|
|
- background-size: cover;
|
|
|
- /* background-size: 100% 100%; */
|
|
|
- }
|
|
|
-
|
|
|
- .topbar-color {
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
-
|
|
|
- .topcontent {
|
|
|
- height: 90%;
|
|
|
- margin-bottom: 50px;
|
|
|
- }
|
|
|
-
|
|
|
- .logo {
|
|
|
- width: 80px;
|
|
|
- height: 80px;
|
|
|
- margin-top: 10px;
|
|
|
- /* background-image: url('/static/logo/sddx.png'); */
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position-x: center;
|
|
|
- background-position-y: center;
|
|
|
- background-size: contain;
|
|
|
- }
|
|
|
-
|
|
|
- .top-acttime {
|
|
|
- display: none;
|
|
|
- text-shadow: 3px 3px 0px #640008;
|
|
|
- font-family: YouSheBiaoTiHei;
|
|
|
- /* font-family: Arial, Helvetica, sans-serif; */
|
|
|
- font-weight: bold;
|
|
|
- color: #ffee0b;
|
|
|
- font-size: 26px;
|
|
|
- }
|
|
|
-
|
|
|
- .topbtm {
|
|
|
- width: 100%;
|
|
|
- /* height: 60rpx; */
|
|
|
- margin-bottom: 40px;
|
|
|
- justify-content: space-evenly;
|
|
|
- }
|
|
|
-
|
|
|
- .topbtm-name {
|
|
|
- /* width: 320rpx; */
|
|
|
- /* height: 28px; */
|
|
|
- padding: 5px 12px;
|
|
|
- background-color: #9fda39;
|
|
|
- border-radius: 5px;
|
|
|
- /* backdrop-filter: blur(30px); */
|
|
|
- text-align: center;
|
|
|
- font-weight: 500;
|
|
|
- color: #497400;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- .midType0 {
|
|
|
- width: 90%;
|
|
|
- height: 150px;
|
|
|
- position: relative;
|
|
|
- z-index: 20;
|
|
|
- margin-top: -40px;
|
|
|
- background: #ffffff;
|
|
|
- border-radius: 9px;
|
|
|
- box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.13);
|
|
|
- font-family: Source Han Sans CN;
|
|
|
- }
|
|
|
-
|
|
|
- .midType1 {
|
|
|
- width: 90%;
|
|
|
- /* height: 112px; */
|
|
|
- height: 150px;
|
|
|
- position: relative;
|
|
|
- z-index: 20;
|
|
|
- margin-top: -70px;
|
|
|
- background: #ffffff;
|
|
|
- border-radius: 9px;
|
|
|
- box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.13);
|
|
|
- font-family: Source Han Sans CN;
|
|
|
- }
|
|
|
-
|
|
|
- .mid-0 {
|
|
|
- width: 90%;
|
|
|
- margin: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .mid-0-select {
|
|
|
- width: 60%;
|
|
|
- font-weight: 500;
|
|
|
- color: #8e8e8e;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- .mid-0-help {
|
|
|
- position: absolute;
|
|
|
- right: 30px;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 500;
|
|
|
- color: #992900;
|
|
|
- }
|
|
|
-
|
|
|
- .mid-0-right {
|
|
|
- position: absolute;
|
|
|
- width: 60px;
|
|
|
- /* background-color: #81cd00; */
|
|
|
- right: 10px;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 500;
|
|
|
- color: #992900;
|
|
|
- }
|
|
|
-
|
|
|
- .midType0-mid-1 {
|
|
|
- width: 90%;
|
|
|
- margin-bottom: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .midType1-select {
|
|
|
- /* width: 46%; */
|
|
|
- min-width: 46%;
|
|
|
- max-width: 50%;
|
|
|
- margin: 0 5px;
|
|
|
- font-weight: 500;
|
|
|
- color: #8e8e8e;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- .midType1-mid-1 {
|
|
|
- width: 90%;
|
|
|
- margin-bottom: 12px;
|
|
|
- font-weight: 500;
|
|
|
- color: #8e8e8e;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- .mid-1-yellowCard {
|
|
|
- width: 15px;
|
|
|
- height: 20px;
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .mid-1-name {
|
|
|
- max-width: 360rpx;
|
|
|
- white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
-
|
|
|
- .mid-1-text {
|
|
|
- /* min-width: 60px; */
|
|
|
- font-weight: 500;
|
|
|
- color: #9a300e;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .mid-2 {
|
|
|
- width: 92%;
|
|
|
- /* margin: 0 10px; */
|
|
|
- }
|
|
|
-
|
|
|
- .mid-2-value {
|
|
|
- font-weight: 900;
|
|
|
- font-size: 22px;
|
|
|
- line-height: 25px;
|
|
|
- }
|
|
|
-
|
|
|
- .mid-2-text {
|
|
|
- color: #989898;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .mid-line {
|
|
|
- width: 0px;
|
|
|
- height: 40px;
|
|
|
- border: 1px solid;
|
|
|
- border-color: #e6e6e6;
|
|
|
- }
|
|
|
-
|
|
|
- .overview-1 {
|
|
|
- width: 111px;
|
|
|
- height: 54px;
|
|
|
- background: #ffb40b;
|
|
|
- border-radius: 50%;
|
|
|
- box-shadow: 3px 3px 0px rgba(140, 140, 140, 1);
|
|
|
- pointer-events: auto;
|
|
|
- }
|
|
|
-
|
|
|
- .overview-2 {
|
|
|
- margin-top: -43px;
|
|
|
- color: #ffffff;
|
|
|
- font-size: 18px;
|
|
|
- pointer-events: auto;
|
|
|
- }
|
|
|
-
|
|
|
- .overview-3 {
|
|
|
- width: 111px;
|
|
|
- height: 54px;
|
|
|
- background: #f39509;
|
|
|
- border-radius: 50%;
|
|
|
- box-shadow: 3px 3px 0px rgba(140, 140, 140, 1);
|
|
|
- pointer-events: auto;
|
|
|
- }
|
|
|
-
|
|
|
- .overview-4 {
|
|
|
- width: 111px;
|
|
|
- height: 54px;
|
|
|
- background: #81cd00;
|
|
|
- border-radius: 50%;
|
|
|
- box-shadow: 3px 3px 0px rgba(140, 140, 140, 1);
|
|
|
- pointer-events: auto;
|
|
|
- }
|
|
|
-
|
|
|
- .overview-5 {
|
|
|
- width: 111px;
|
|
|
- height: 54px;
|
|
|
- background: #64cbb0;
|
|
|
- border-radius: 50%;
|
|
|
- box-shadow: 3px 3px 0px rgba(140, 140, 140, 1);
|
|
|
- pointer-events: auto;
|
|
|
- }
|
|
|
-
|
|
|
- .ovline1 {
|
|
|
- margin-top: 9px;
|
|
|
- color: #ffffff;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .ovline2 {
|
|
|
- color: #ffffff;
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- .main {
|
|
|
- width: 100%;
|
|
|
- margin-top: 20px;
|
|
|
- margin-bottom: 20px;
|
|
|
- /* height: 70vh; */
|
|
|
- justify-content: space-around;
|
|
|
- /* justify-content: space-between; */
|
|
|
- }
|
|
|
-
|
|
|
- .main-title {
|
|
|
- margin-bottom: 10px;
|
|
|
- font-weight: 550;
|
|
|
- color: #333333;
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- .bottom {
|
|
|
- width: 100%;
|
|
|
- flex-grow: 1;
|
|
|
- justify-content: flex-end;
|
|
|
- }
|
|
|
-
|
|
|
- .btnStartGame {
|
|
|
- width: 70%;
|
|
|
- height: 80rpx;
|
|
|
- /* margin-top: 50rpx; */
|
|
|
- margin-bottom: 20rpx;
|
|
|
- /* font-weight: bold; */
|
|
|
- color: white;
|
|
|
- font-size: 32rpx;
|
|
|
- line-height: 80rpx;
|
|
|
- border-radius: 27px;
|
|
|
- background-color: #2e85ec;
|
|
|
- }
|
|
|
-
|
|
|
- /deep/ .e-select {
|
|
|
- /* width: 60%; */
|
|
|
- height: 60rpx;
|
|
|
- background: #2e85ec;
|
|
|
- color: #ffffff;
|
|
|
- border-radius: 18px;
|
|
|
- justify-content: space-around;
|
|
|
-
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 500;
|
|
|
- line-height: 60rpx;
|
|
|
- text-align: center;
|
|
|
- border: none !important;
|
|
|
- }
|
|
|
-
|
|
|
- /deep/ .e-select-input-text {
|
|
|
- color: inherit !important;
|
|
|
- }
|
|
|
-
|
|
|
- /deep/ .e-select-selector-item {
|
|
|
- color: #818181;
|
|
|
- }
|
|
|
-
|
|
|
- /deep/ .uni-icons {
|
|
|
- color: inherit !important;
|
|
|
- }
|
|
|
-
|
|
|
- /deep/ .e-select-icon {
|
|
|
- width: 26px !important;
|
|
|
- }
|
|
|
+<!--
|
|
|
+[模板] 样式2 - 排名总览
|
|
|
+http://localhost:5173/card/#/pages/tpl/style2/rankOverview
|
|
|
+https://oss-mbh5.colormaprun.com/card/#/pages/tpl/style2/rankOverview
|
|
|
+ -->
|
|
|
+<template>
|
|
|
+ <view class="body">
|
|
|
+ <view v-if="pageReady" class="content uni-column">
|
|
|
+ <view class="uni-column page-top">
|
|
|
+ <my-topbar :mcName="mcName" class="topbar-color" @btnBackClick="btnBack"
|
|
|
+ @btnInfoClick="btnInfo"></my-topbar>
|
|
|
+
|
|
|
+ <view class="topcontent uni-column uni-jcsa">
|
|
|
+ <view class="logo"></view>
|
|
|
+ <text v-if="configParam.subTitle.length > 0" class="top-acttime">{{configParam.subTitle}}</text>
|
|
|
+ <text v-else class="top-acttime">{{fmtMcTime2(beginSecond, endSecond)}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="configParam.midType == 0" class="midType0 uni-column">
|
|
|
+ <view class="mid-0 uni-row uni-jcc">
|
|
|
+ <view class="mid-0-select">
|
|
|
+ <e-select v-model="ocaId" :options="mapList" :search="false" :inputClick="true"
|
|
|
+ maxHeight="300px" :clearable="false" @change="eSelectChange"></e-select>
|
|
|
+ </view>
|
|
|
+ <text v-if="cardConfigData.popupHelpList.length > 0" class="mid-0-help" @click="btnHelp">帮助</text>
|
|
|
+ </view>
|
|
|
+ <view class="midType0-mid-1 uni-row uni-jcc">
|
|
|
+ <view class="uni-row">
|
|
|
+ <image v-if="cardConfigData.popupWarnList.length > 0" class="mid-1-yellowCard" mode="aspectFit"
|
|
|
+ @click="btnWarn" src="/static/common/card_yellow.gif"></image>
|
|
|
+ <text class="mid-1-text">{{nickName}}</text>
|
|
|
+ </view>
|
|
|
+ <!-- <text class="mid-1-text">{{coiName}}</text> -->
|
|
|
+ <text class="mid-1-text" style="color: #aaaaaa; margin-left: 20px;"
|
|
|
+ v-if="mcState==1 && allowMcSignUp" @click="btnReGroup">修改</text>
|
|
|
+ </view>
|
|
|
+ <view class="mid-2 uni-row uni-jcsa">
|
|
|
+ <view class="uni-column">
|
|
|
+ <text class="mid-2-value">{{regionTotalNum}}</text>
|
|
|
+ <text class="mid-2-text">场次</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="mid-line"></view>
|
|
|
+ <view class="uni-column">
|
|
|
+ <text class="mid-2-value">{{regionTotalCp}}</text>
|
|
|
+ <text class="mid-2-text">打点数</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="mid-line"></view>
|
|
|
+ <view class="uni-column">
|
|
|
+ <text class="mid-2-value">{{regionTotalCpRankNum}}</text>
|
|
|
+ <text class="mid-2-text">个人排名</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view v-if="configParam.midType == 1" class="midType1 uni-column">
|
|
|
+ <view class="mid-0 uni-row uni-jcc">
|
|
|
+ <view class="mid-0-select">
|
|
|
+ <e-select v-model="ocaId" :options="mapList" :search="false" :inputClick="true"
|
|
|
+ maxHeight="300px" :clearable="false" @change="eSelectChange"></e-select>
|
|
|
+ </view>
|
|
|
+ <view class="mid-0-right uni-row uni-jcsa">
|
|
|
+ <text class="" style="" v-if="mcState==1 && allowMcSignUp" @click="btnReGroup">修改</text>
|
|
|
+ <text v-if="cardConfigData.popupHelpList.length > 0" class="" @click="btnHelp">帮助</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="midType1-mid-1 uni-row uni-jcse">
|
|
|
+ <view class="uni-row">
|
|
|
+ <image v-if="cardConfigData.popupWarnList.length > 0" class="mid-1-yellowCard" mode="aspectFit"
|
|
|
+ @click="btnWarn" src="/static/common/card_yellow.gif"></image>
|
|
|
+ <text class="mid-1-name">{{nickName}}</text>
|
|
|
+ </view>
|
|
|
+ <!-- <text class="mid-1-name">{{coiName}}</text> -->
|
|
|
+ <text class="uni-nowrap">场次：{{regionTotalNum}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="mid-2 uni-row uni-jcsa">
|
|
|
+ <view class="uni-column">
|
|
|
+ <text class="mid-2-value" style="color: #ff0045;">{{regionTotalSysPoint}}</text>
|
|
|
+ <text class="mid-2-text">百味豆</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="mid-line"></view>
|
|
|
+
|
|
|
+ <view class="uni-column">
|
|
|
+ <text class="mid-2-value">{{fmtDistanct(regionTotalDictance)}}</text>
|
|
|
+ <text class="mid-2-text">里程 km</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="mid-line"></view>
|
|
|
+ <view class="uni-column">
|
|
|
+ <text class="mid-2-value">{{regionTotalCp}}</text>
|
|
|
+ <text class="mid-2-text">打点数</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="mid-line"></view>
|
|
|
+
|
|
|
+ <view class="uni-column">
|
|
|
+ <text class="mid-2-value">{{fmtPace(regionFastPace)}}</text>
|
|
|
+ <text class="mid-2-text">最快配速</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="main uni-column">
|
|
|
+ <text class="main-title">选择比赛路线</text>
|
|
|
+ <my-pathList ref="myPathList" :style="pathListStyle.style" :pathList="pathList" :selectedPath="ocaId"
|
|
|
+ :mcState="mcState" :showLine="pathListStyle.showLine" :isNewUser="isNewUser"
|
|
|
+ @onNewUserPathClick="onNewUserPathClick" @onPathClick="onPathClick"></my-pathList>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="bottom uni-column">
|
|
|
+ <button class="btnStartGame bgcolor-main" @click="btnStartGame">开始比赛</button>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <my-popup ref="mypopup" :config="cardConfigData.popupRuleConfig" :dataList="cardConfigData.popupRuleList"
|
|
|
+ :acttime="acttime"></my-popup>
|
|
|
+ <my-popup ref="mypopupHelp" :config="cardConfigData.popupHelpConfig"
|
|
|
+ :dataList="cardConfigData.popupHelpList"></my-popup>
|
|
|
+ <my-popup ref="mypopupWarn" :config="cardConfigData.popupWarnConfig"
|
|
|
+ :dataList="cardConfigData.popupWarnList"></my-popup>
|
|
|
+ <my-guide ref="myGuide" @popup-close="onGuideClose"></my-guide>
|
|
|
+ <!-- <my-popup-map ref="mypopupmap" :point="navPoint"></my-popup-map> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import tools from '/common/tools';
|
|
|
+ import cardfunc from '../../../common/cardfunc';
|
|
|
+ import {
|
|
|
+ localCardConfig
|
|
|
+ } from "./cardconfig/test.js";
|
|
|
+ import {
|
|
|
+ token,
|
|
|
+ apiMapListQuery,
|
|
|
+ apiMatchRsDetailQuery,
|
|
|
+ apiIsAllowMcSignUp,
|
|
|
+ checkResCode
|
|
|
+ } from '/common/api';
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ cardConfigData: cardfunc.cardConfigData,
|
|
|
+ pageReady: false,
|
|
|
+ pageName: "rankOverview",
|
|
|
+ firstEnterKey: 'firstEnter-tpl-style2',
|
|
|
+ rankKey: "rank-tpl-style2",
|
|
|
+ mapKey: "rank-tpl-style2-map",
|
|
|
+ queryObj: {},
|
|
|
+ queryString: "",
|
|
|
+ token: "",
|
|
|
+ isNewUser: false,
|
|
|
+
|
|
|
+ ecId: 0, // 卡片id
|
|
|
+ mcId: 0, // 赛事id
|
|
|
+ mcType: 0, // 赛事类型 1 普通活动 2 线下赛 3 线上赛
|
|
|
+ mcName: "", // 赛事名称
|
|
|
+ coiName: "", // 已报名单位名称
|
|
|
+ acttime: "", // 活动时间
|
|
|
+ beginSecond: null, // 活动或赛事开始时间戳，单位秒
|
|
|
+ endSecond: null, // 活动或赛事结束时间戳，单位秒
|
|
|
+ ocaId: 0, // 关联id，带入到App活动详情页面
|
|
|
+ nickName: "", // 昵称
|
|
|
+
|
|
|
+ totalNum: null, // 总场次
|
|
|
+ totalDistanct: null, // 总距离,单位米
|
|
|
+ totalDistanctRankNum: null, // 总距离排名
|
|
|
+ totalCp: null, // 总打点数
|
|
|
+ totalCpRankNum: null, // 总打点数排名
|
|
|
+ totalSysPoint: null, // 总百味豆
|
|
|
+ totalSysPointRankNum: null, // 总百味豆排名
|
|
|
+ fastPace: null, // 个人最快配速
|
|
|
+ fastPaceRankNum: null, // 个人最快配速排名
|
|
|
+ regionTotalNum: null, // 地图内总场次
|
|
|
+ regionTotalCp: null, // 地图内打点数
|
|
|
+ regionTotalCpRankNum: null, // 地图内个人打点排名
|
|
|
+ regionTotalSysPoint: null, // 地图内积分(百味豆)
|
|
|
+ regionTotalDictance: null, // 地图内里程(单位米)
|
|
|
+ regionFastPace: null, // 地图内最快配速
|
|
|
+ ocaRs: [], // 卡片对应活动集合
|
|
|
+
|
|
|
+ mapList: [], // 地图列表
|
|
|
+
|
|
|
+ interval: null,
|
|
|
+ mcState: 0, // 赛事/活动状态 0: 未开始 1: 进行中 2: 已结束
|
|
|
+ allowMcSignUp: false, // 是否允许重新分组
|
|
|
+ pathList: {},
|
|
|
+ pathListStyle: {},
|
|
|
+ selectedPath: null,
|
|
|
+ navPoint: {},
|
|
|
+ configParam: {
|
|
|
+ subTitle: "",
|
|
|
+ midType: 0
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ pathListLen() {
|
|
|
+ return Object.keys(this.pathList).length;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(query) { // 类型非必填，可自动推导
|
|
|
+ // uni.showLoading({
|
|
|
+ // title: '加载中'
|
|
|
+ // });
|
|
|
+
|
|
|
+ // console.log("query:", query);
|
|
|
+ this.queryObj = query;
|
|
|
+ this.queryString = tools.objectToQueryString(this.queryObj);
|
|
|
+ // console.log(queryString);
|
|
|
+ this.token = query["token"] ?? token;
|
|
|
+ this.ecId = query["id"] ?? 0;
|
|
|
+
|
|
|
+ this.firstEnterKey += "-" + this.ecId;
|
|
|
+ console.log("firstEnterKey:", this.firstEnterKey);
|
|
|
+
|
|
|
+ this.rankKey += "-" + this.ecId;
|
|
|
+ console.log("rankKey:", this.rankKey);
|
|
|
+
|
|
|
+ this.mapKey += "-" + this.ecId;
|
|
|
+ console.log("mapKey:", this.mapKey);
|
|
|
+
|
|
|
+ const mapValue = uni.getStorageSync(this.mapKey);
|
|
|
+ if (mapValue) {
|
|
|
+ console.log("mapValue:", mapValue);
|
|
|
+ this.ocaId = mapValue;
|
|
|
+ }
|
|
|
+
|
|
|
+ cardfunc.init(this, this.token, this.ecId);
|
|
|
+ cardfunc.getCardConfig(this.cardConfigQueryCallback, localCardConfig);
|
|
|
+ cardfunc.isNewUserQuery(this.isNewUserQueryCallback);
|
|
|
+ },
|
|
|
+ // 页面初次渲染完成，此时组件已挂载完成，DOM 树($el)已可用
|
|
|
+ onReady() {
|
|
|
+ // this.dealFirstEnter();
|
|
|
+ },
|
|
|
+ onShow() {},
|
|
|
+ onUnload() {
|
|
|
+ this.clear();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ dealNotice(rank) {
|
|
|
+ // console.log('[dealFirstEnter]');
|
|
|
+ let that = this;
|
|
|
+ uni.getStorage({
|
|
|
+ key: that.rankKey,
|
|
|
+ success: (res) => {
|
|
|
+ // console.log('[getStorage]', that.rankKey, res.data);
|
|
|
+ const oldRank = res.data;
|
|
|
+ if (oldRank != rank) {
|
|
|
+ // that.notice = true;
|
|
|
+ that.setRankValue(rank);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: (e) => {
|
|
|
+ console.log('[getStorage] fail', that.rankKey, e);
|
|
|
+ // that.notice = false;
|
|
|
+ that.setRankValue(rank);
|
|
|
+ },
|
|
|
+ })
|
|
|
+ },
|
|
|
+ setRankValue(data) {
|
|
|
+ let that = this;
|
|
|
+ uni.setStorage({
|
|
|
+ key: that.rankKey,
|
|
|
+ data: data,
|
|
|
+ success: () => {
|
|
|
+ console.log('[setStorage] success', that.rankKey, data);
|
|
|
+ },
|
|
|
+ fail: (e) => {
|
|
|
+ console.log('[setStorage] fail', that.rankKey, e);
|
|
|
+ },
|
|
|
+ })
|
|
|
+ },
|
|
|
+ dealFirstEnter() {
|
|
|
+ // console.log('[dealFirstEnter]');
|
|
|
+ let that = this;
|
|
|
+ uni.getStorage({
|
|
|
+ key: that.firstEnterKey,
|
|
|
+ success: (res) => {
|
|
|
+ console.log('[getStorage]', that.firstEnterKey, res.data);
|
|
|
+ },
|
|
|
+ fail: (e) => {
|
|
|
+ console.log('[getStorage] fail', that.firstEnterKey, e);
|
|
|
+ that.btnInfo();
|
|
|
+ that.setFirstEnterValue(true);
|
|
|
+ },
|
|
|
+ })
|
|
|
+ },
|
|
|
+ setFirstEnterValue(data) {
|
|
|
+ let that = this;
|
|
|
+ uni.setStorage({
|
|
|
+ key: that.firstEnterKey,
|
|
|
+ data: data,
|
|
|
+ success: () => {
|
|
|
+ console.log('[setStorage] success', that.firstEnterKey, data);
|
|
|
+ },
|
|
|
+ fail: (e) => {
|
|
|
+ console.log('[setStorage] fail', that.firstEnterKey, e);
|
|
|
+ },
|
|
|
+ })
|
|
|
+ },
|
|
|
+ clear() {
|
|
|
+ if (this.interval != null) {
|
|
|
+ clearInterval(this.interval);
|
|
|
+ this.interval = null;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ cardConfigQueryCallback(cardconfig) {
|
|
|
+ this.loadConfig(cardconfig);
|
|
|
+ this.matchRsDetailQuery();
|
|
|
+ cardfunc.warnMessageQuery();
|
|
|
+ setTimeout(this.dealFirstEnter, 500);
|
|
|
+ },
|
|
|
+ isNewUserQueryCallback(isNewUser) {
|
|
|
+ this.isNewUser = isNewUser;
|
|
|
+ },
|
|
|
+ loadConfig(cardconfig) {
|
|
|
+ cardconfig = cardfunc.parseCardConfig(cardconfig);
|
|
|
+ // console.log("[loadCardConfig] cardconfig:", cardconfig);
|
|
|
+
|
|
|
+ // 加载卡片通用配置
|
|
|
+ if (cardconfig.common != undefined) {
|
|
|
+ cardfunc.loadCardCommonConfig(cardconfig.common);
|
|
|
+ }
|
|
|
+
|
|
|
+ // -------- 加载当前页面的配置 --------
|
|
|
+
|
|
|
+ const config = cardfunc.parseCardConfig(cardconfig[this.pageName]);
|
|
|
+ // console.log("[loadConfig] config_page:", config);
|
|
|
+ if (config == undefined || config == null) {
|
|
|
+ this.pageReady = true;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 加载CSS样式
|
|
|
+ const css = config.css;
|
|
|
+ if (css != undefined && css.length > 0) {
|
|
|
+ tools.loadCssCode(css);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 加载比赛路线数据
|
|
|
+ const pathList = config.pathList;
|
|
|
+ // console.log("[loadConfig] pathList:", pathList);
|
|
|
+ if (pathList != undefined) {
|
|
|
+ this.pathList = pathList;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 加载比赛路线样式
|
|
|
+ const pathListStyle = config.pathListStyle;
|
|
|
+ // console.log("[loadConfig] pathList:", pathList);
|
|
|
+ if (pathListStyle != undefined) {
|
|
|
+ this.pathListStyle = pathListStyle;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 加载页面参数
|
|
|
+ const param = config.param;
|
|
|
+ if (param != undefined) {
|
|
|
+ if (param.subTitle != undefined && param.subTitle.length > 0) {
|
|
|
+ this.configParam.subTitle = param.subTitle;
|
|
|
+ }
|
|
|
+ if (param.midType != undefined && param.midType >= 0) {
|
|
|
+ this.configParam.midType = param.midType;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // console.log("[loadConfig] param:", this.configParam);
|
|
|
+
|
|
|
+ this.pageReady = true;
|
|
|
+ // uni.hideLoading();
|
|
|
+ },
|
|
|
+ // 获取倒计时
|
|
|
+ getCountdown() {
|
|
|
+ // console.log(this.endSecond)
|
|
|
+ if (this.endSecond > 0) {
|
|
|
+ const now = Date.now() / 1000;
|
|
|
+ const dif = this.endSecond - now;
|
|
|
+ // const dif = 3600*24 - 60;
|
|
|
+ if (dif > 0) {
|
|
|
+ this.countdown = '距结束 ' + tools.convertSecondsToDHM(dif);
|
|
|
+ } else {
|
|
|
+ this.countdown = "活动已结束";
|
|
|
+ }
|
|
|
+ // this.countdown = tools.convertSecondsToHMS(dif);
|
|
|
+ } else {
|
|
|
+ this.countdown = "距结束 --天--小时";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 格式化 距离
|
|
|
+ fmtDistanct(val) {
|
|
|
+ if (val >= 0) {
|
|
|
+ return Math.round(val * 100 / 1000) / 100;
|
|
|
+ } else {
|
|
|
+ return '--';
|
|
|
+ }
|
|
|
+ /* if (val < 1000)
|
|
|
+ return Math.round(val * 10 / 1000) / 10;
|
|
|
+ else
|
|
|
+ return Math.round(val / 1000); */
|
|
|
+ },
|
|
|
+ // 格式化 配速
|
|
|
+ fmtPace(val) {
|
|
|
+ if (val >= 0) {
|
|
|
+ return tools.convertSecondsToHMS(val, 2);
|
|
|
+ } else {
|
|
|
+ return '--';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fmtMcTime(timestamp) {
|
|
|
+ return tools.fmtMcTime(timestamp);
|
|
|
+ },
|
|
|
+ // 获取活动时间
|
|
|
+ getActtime() {
|
|
|
+ this.acttime = tools.getActtime(this.beginSecond, this.endSecond);
|
|
|
+ },
|
|
|
+ fmtMcTime2(timestamp1, timestamp2) {
|
|
|
+ return tools.fmtMcTime2(timestamp1, timestamp2);
|
|
|
+ },
|
|
|
+ // 卡片对应地图列表详情查询
|
|
|
+ mapListQuery() {
|
|
|
+ uni.request({
|
|
|
+ url: apiMapListQuery,
|
|
|
+ header: {
|
|
|
+ "Content-Type": "application/x-www-form-urlencoded",
|
|
|
+ "token": this.token,
|
|
|
+ },
|
|
|
+ method: "POST",
|
|
|
+ data: {
|
|
|
+ mcId: this.mcId
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ // console.log("mapListQuery", res);
|
|
|
+ if (res.data.code == 0) {
|
|
|
+ const data = res.data.data;
|
|
|
+ this.mapList = data;
|
|
|
+
|
|
|
+ let mapItems = [];
|
|
|
+ for (var i = 0; i < data.length; i++) {
|
|
|
+ let map = {};
|
|
|
+ map.text = data[i].mapName;
|
|
|
+ map.value = data[i].ocaId;
|
|
|
+ mapItems.push(map);
|
|
|
+ if (i == 0 && this.ocaId == 0) {
|
|
|
+ this.ocaId = data[i].ocaId;
|
|
|
+ this.matchRsDetailQuery();
|
|
|
+ uni.setStorageSync(this.mapKey, this.ocaId);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.mapList = mapItems;
|
|
|
+ // console.log("mapList", this.mapList);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ console.log("mapListQuery err", err);
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 卡片对应线上赛多个活动查询
|
|
|
+ matchRsDetailQuery() {
|
|
|
+ uni.request({
|
|
|
+ url: apiMatchRsDetailQuery,
|
|
|
+ header: {
|
|
|
+ "Content-Type": "application/x-www-form-urlencoded",
|
|
|
+ "token": this.token,
|
|
|
+ },
|
|
|
+ method: "POST",
|
|
|
+ data: {
|
|
|
+ ecId: this.ecId,
|
|
|
+ ocaId: this.ocaId
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ // console.log("matchRsDetailQuery", res);
|
|
|
+ if (checkResCode(res)) {
|
|
|
+ const data = res.data.data;
|
|
|
+ this.mcType = data.mcType;
|
|
|
+ this.mcId = data.mcId;
|
|
|
+ this.mcName = data.mcName;
|
|
|
+ this.coiName = data.coiName;
|
|
|
+ this.beginSecond = data.beginSecond;
|
|
|
+ this.endSecond = data.endSecond;
|
|
|
+ this.nickName = data.nickName;
|
|
|
+ this.totalNum = data.totalNum;
|
|
|
+ this.totalDistanct = data.totalDistanct;
|
|
|
+ this.totalDistanctRankNum = data.totalDistanctRankNum;
|
|
|
+ this.totalCp = data.totalCp;
|
|
|
+ this.totalCpRankNum = data.totalCpRankNum;
|
|
|
+ this.totalSysPoint = data.totalSysPoint;
|
|
|
+ this.totalSysPointRankNum = data.totalSysPointRankNum;
|
|
|
+ this.fastPace = data.fastPace;
|
|
|
+ this.fastPaceRankNum = data.fastPaceRankNum;
|
|
|
+ this.regionTotalNum = data.regionTotalNum;
|
|
|
+ this.regionTotalCp = data.regionTotalCp;
|
|
|
+ this.regionTotalCpRankNum = data.regionTotalCpRankNum;
|
|
|
+ this.regionTotalSysPoint = data.regionTotalSysPoint;
|
|
|
+ this.regionTotalDictance = data.regionTotalDictance;
|
|
|
+ this.regionFastPace = data.regionFastPace;
|
|
|
+ this.ocaRs = data.ocaRs;
|
|
|
+
|
|
|
+ this.mcState = tools.checkMcState(this.beginSecond, this.endSecond);
|
|
|
+
|
|
|
+ const rank = JSON.stringify(data);
|
|
|
+ this.dealNotice(rank);
|
|
|
+
|
|
|
+ this.getCountdown();
|
|
|
+ this.getActtime();
|
|
|
+
|
|
|
+ this.isAllowMcSignUp();
|
|
|
+ this.mapListQuery();
|
|
|
+
|
|
|
+ this.clear();
|
|
|
+ this.interval = setInterval(this.getCountdown, 60000);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ console.log("matchRsDetailQuery err", err)
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 是否允许重新分组（报名）
|
|
|
+ isAllowMcSignUp() {
|
|
|
+ uni.request({
|
|
|
+ url: apiIsAllowMcSignUp,
|
|
|
+ header: {
|
|
|
+ "Content-Type": "application/x-www-form-urlencoded",
|
|
|
+ "token": this.token,
|
|
|
+ },
|
|
|
+ method: "POST",
|
|
|
+ data: {
|
|
|
+ ecId: this.ecId
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ // console.log("isAllowMcSignUp", res)
|
|
|
+ if (res.data.code == 0) {
|
|
|
+ const data = res.data.data;
|
|
|
+ this.allowMcSignUp = data.allowSignUp;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ console.log("isAllowMcSignUp err", err)
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ btnBack() {
|
|
|
+ // const url = `action://to_home/`;
|
|
|
+ const url = "/pages/tpl/style2/rankList?" + this.queryString;
|
|
|
+ tools.appAction(url, "uni.navigateTo");
|
|
|
+ },
|
|
|
+ btnInfo() {
|
|
|
+ // console.log(this.$refs.mypopup);
|
|
|
+ this.$refs.mypopup.popupOpen();
|
|
|
+ },
|
|
|
+ btnHelp() {
|
|
|
+ this.$refs.mypopupHelp.popupOpen();
|
|
|
+ },
|
|
|
+ btnWarn() {
|
|
|
+ this.$refs.mypopupWarn.popupOpen();
|
|
|
+ },
|
|
|
+ btnReGroup() {
|
|
|
+ this.queryObj.from = "rankOverview";
|
|
|
+ this.queryString = tools.objectToQueryString(this.queryObj);
|
|
|
+
|
|
|
+ const url = '/pages/tpl/style2/signup?' + this.queryString;
|
|
|
+ tools.appAction(url, "uni.navigateTo");
|
|
|
+ },
|
|
|
+ onOverviewClick(ovtype) {
|
|
|
+ this.queryObj.ovtype = ovtype;
|
|
|
+ this.queryString = tools.objectToQueryString(this.queryObj);
|
|
|
+
|
|
|
+ const url = "/pages/tpl/style2/rankList?" + this.queryString;
|
|
|
+ tools.appAction(url, "uni.navigateTo");
|
|
|
+ },
|
|
|
+ eSelectChange(data) {
|
|
|
+ // console.log("eSelectChange:", data);
|
|
|
+ this.ocaId = data.value;
|
|
|
+ this.matchRsDetailQuery();
|
|
|
+ uni.setStorageSync(this.mapKey, this.ocaId);
|
|
|
+ },
|
|
|
+ onNewUserPathClick(data) {
|
|
|
+ // console.log("onNewUserPathClick:", data);
|
|
|
+ this.selectedPath = data;
|
|
|
+ this.$refs.myGuide.popupOpen();
|
|
|
+ },
|
|
|
+ onPathClick(data) {
|
|
|
+ // console.log("onPathClick:", data);
|
|
|
+ if (this.ocaId != data.path.ocaId) {
|
|
|
+ this.ocaId = data.path.ocaId;
|
|
|
+ this.matchRsDetailQuery();
|
|
|
+ uni.setStorageSync(this.mapKey, data.path.ocaId);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onGuideClose() {
|
|
|
+ if (this.isNewUser && this.selectedPath != null) {
|
|
|
+ this.$refs.myPathList.to_detail(this.selectedPath);
|
|
|
+ this.selectedPath = null;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ btnStartGame() {
|
|
|
+ // 赛事/活动状态 0: 未开始 1: 进行中 2: 已结束
|
|
|
+ if (this.mcState == 1) {
|
|
|
+ const url = `action://to_detail/?id=${this.ocaId}&matchType=${this.mcType}`;
|
|
|
+ tools.appAction(url);
|
|
|
+ } else if (this.mcState == 0) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '比赛尚未开始',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 3000
|
|
|
+ });
|
|
|
+ } else if (this.mcState == 2) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '比赛已结束',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 3000
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .content {
|
|
|
+ width: 100vw;
|
|
|
+ min-height: 100vh;
|
|
|
+ overflow-x: scroll;
|
|
|
+ }
|
|
|
+
|
|
|
+ .page-top {
|
|
|
+ position: relative;
|
|
|
+ z-index: 10;
|
|
|
+ width: 100%;
|
|
|
+ height: 270px;
|
|
|
+ padding-top: 36px;
|
|
|
+ justify-content: space-between;
|
|
|
+ background-image: url("/static/backgroud/top_bg_egg2.png");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position-x: center;
|
|
|
+ background-position-y: center;
|
|
|
+ background-size: cover;
|
|
|
+ /* background-size: 100% 100%; */
|
|
|
+ }
|
|
|
+
|
|
|
+ .topbar-color {
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .topcontent {
|
|
|
+ height: 90%;
|
|
|
+ margin-bottom: 50px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo {
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ margin-top: 10px;
|
|
|
+ /* background-image: url('/static/logo/sddx.png'); */
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position-x: center;
|
|
|
+ background-position-y: center;
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-acttime {
|
|
|
+ display: none;
|
|
|
+ text-shadow: 3px 3px 0px #640008;
|
|
|
+ font-family: YouSheBiaoTiHei;
|
|
|
+ /* font-family: Arial, Helvetica, sans-serif; */
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffee0b;
|
|
|
+ font-size: 26px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .topbtm {
|
|
|
+ width: 100%;
|
|
|
+ /* height: 60rpx; */
|
|
|
+ margin-bottom: 40px;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ }
|
|
|
+
|
|
|
+ .topbtm-name {
|
|
|
+ /* width: 320rpx; */
|
|
|
+ /* height: 28px; */
|
|
|
+ padding: 5px 12px;
|
|
|
+ background-color: #9fda39;
|
|
|
+ border-radius: 5px;
|
|
|
+ /* backdrop-filter: blur(30px); */
|
|
|
+ text-align: center;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #497400;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .midType0 {
|
|
|
+ width: 90%;
|
|
|
+ height: 150px;
|
|
|
+ position: relative;
|
|
|
+ z-index: 20;
|
|
|
+ margin-top: -40px;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 9px;
|
|
|
+ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.13);
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ }
|
|
|
+
|
|
|
+ .midType1 {
|
|
|
+ width: 90%;
|
|
|
+ /* height: 112px; */
|
|
|
+ height: 150px;
|
|
|
+ position: relative;
|
|
|
+ z-index: 20;
|
|
|
+ margin-top: -70px;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 9px;
|
|
|
+ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.13);
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mid-0 {
|
|
|
+ width: 90%;
|
|
|
+ margin: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mid-0-select {
|
|
|
+ width: 60%;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #8e8e8e;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mid-0-help {
|
|
|
+ position: absolute;
|
|
|
+ right: 30px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #992900;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mid-0-right {
|
|
|
+ position: absolute;
|
|
|
+ width: 60px;
|
|
|
+ /* background-color: #81cd00; */
|
|
|
+ right: 10px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #992900;
|
|
|
+ }
|
|
|
+
|
|
|
+ .midType0-mid-1 {
|
|
|
+ width: 90%;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .midType1-select {
|
|
|
+ /* width: 46%; */
|
|
|
+ min-width: 46%;
|
|
|
+ max-width: 50%;
|
|
|
+ margin: 0 5px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #8e8e8e;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .midType1-mid-1 {
|
|
|
+ width: 90%;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #8e8e8e;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mid-1-yellowCard {
|
|
|
+ width: 15px;
|
|
|
+ height: 20px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mid-1-name {
|
|
|
+ max-width: 360rpx;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mid-1-text {
|
|
|
+ /* min-width: 60px; */
|
|
|
+ font-weight: 500;
|
|
|
+ color: #9a300e;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mid-2 {
|
|
|
+ width: 92%;
|
|
|
+ /* margin: 0 10px; */
|
|
|
+ }
|
|
|
+
|
|
|
+ .mid-2-value {
|
|
|
+ font-weight: 900;
|
|
|
+ font-size: 22px;
|
|
|
+ line-height: 25px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mid-2-text {
|
|
|
+ color: #989898;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mid-line {
|
|
|
+ width: 0px;
|
|
|
+ height: 40px;
|
|
|
+ border: 1px solid;
|
|
|
+ border-color: #e6e6e6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .overview-1 {
|
|
|
+ width: 111px;
|
|
|
+ height: 54px;
|
|
|
+ background: #ffb40b;
|
|
|
+ border-radius: 50%;
|
|
|
+ box-shadow: 3px 3px 0px rgba(140, 140, 140, 1);
|
|
|
+ pointer-events: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .overview-2 {
|
|
|
+ margin-top: -43px;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 18px;
|
|
|
+ pointer-events: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .overview-3 {
|
|
|
+ width: 111px;
|
|
|
+ height: 54px;
|
|
|
+ background: #f39509;
|
|
|
+ border-radius: 50%;
|
|
|
+ box-shadow: 3px 3px 0px rgba(140, 140, 140, 1);
|
|
|
+ pointer-events: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .overview-4 {
|
|
|
+ width: 111px;
|
|
|
+ height: 54px;
|
|
|
+ background: #81cd00;
|
|
|
+ border-radius: 50%;
|
|
|
+ box-shadow: 3px 3px 0px rgba(140, 140, 140, 1);
|
|
|
+ pointer-events: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .overview-5 {
|
|
|
+ width: 111px;
|
|
|
+ height: 54px;
|
|
|
+ background: #64cbb0;
|
|
|
+ border-radius: 50%;
|
|
|
+ box-shadow: 3px 3px 0px rgba(140, 140, 140, 1);
|
|
|
+ pointer-events: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ovline1 {
|
|
|
+ margin-top: 9px;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ovline2 {
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .main {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ /* height: 70vh; */
|
|
|
+ justify-content: space-around;
|
|
|
+ /* justify-content: space-between; */
|
|
|
+ }
|
|
|
+
|
|
|
+ .main-title {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-weight: 550;
|
|
|
+ color: #333333;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom {
|
|
|
+ width: 100%;
|
|
|
+ flex-grow: 1;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btnStartGame {
|
|
|
+ display: none;
|
|
|
+ width: 70%;
|
|
|
+ height: 80rpx;
|
|
|
+ /* margin-top: 50rpx; */
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ /* font-weight: bold; */
|
|
|
+ color: white;
|
|
|
+ font-size: 32rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ border-radius: 27px;
|
|
|
+ background-color: #2e85ec;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .e-select {
|
|
|
+ /* width: 60%; */
|
|
|
+ height: 60rpx;
|
|
|
+ background: #2e85ec;
|
|
|
+ color: #ffffff;
|
|
|
+ border-radius: 18px;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 60rpx;
|
|
|
+ text-align: center;
|
|
|
+ border: none !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .e-select-input-text {
|
|
|
+ color: inherit !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .e-select-selector-item {
|
|
|
+ color: #818181;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .uni-icons {
|
|
|
+ color: inherit !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .e-select-icon {
|
|
|
+ width: 26px !important;
|
|
|
+ }
|
|
|
</style>
|
