|
|
@@ -0,0 +1,317 @@
|
|
|
+<!--
|
|
|
+http://localhost:5173/custom/#/pages/guoqing/challenge/index?actId=18&matchType=3&pagetype=challenge_result&distance=1320&status=success&name=天生我材必有用&cal=13500100&duration=3600&accuracy=50&syscount=25
|
|
|
+https://oss-mbh5.colormaprun.com/custom/#/pages/guoqing/challenge/index?pagetype=challenge_result&distance=1320&status=success&name=天生我材必有用&cal=13500100&duration=3600&accuracy=50&syscount=25
|
|
|
+ -->
|
|
|
+<template>
|
|
|
+ <view class="body">
|
|
|
+ <view class="content">
|
|
|
+ <view class="top">
|
|
|
+ <!-- <image class="logo" mode="aspectFit" src="/static/guoqing/logo.webp"></image>
|
|
|
+ <text class="gameName"></text> -->
|
|
|
+ </view>
|
|
|
+ <view class="main">
|
|
|
+ <view class="main-content">
|
|
|
+ <view class="rank">
|
|
|
+ <view class="statistic">
|
|
|
+ <text class="statistic-title">打点数：</text>
|
|
|
+ <view class="statistic-right">
|
|
|
+ <text class="statistic-value">{{syscount}}</text><text class="statistic-unit">个</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="statistic">
|
|
|
+ <text class="statistic-title">里程：</text>
|
|
|
+ <view class="statistic-right">
|
|
|
+ <text class="statistic-value">{{distanceKm}}</text><text
|
|
|
+ class="statistic-unit">Km</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="statistic">
|
|
|
+ <text class="statistic-title">脑力值：</text>
|
|
|
+ <view class="statistic-right">
|
|
|
+ <text class="statistic-value">{{accuracy}}</text><text class="statistic-unit">%</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="statistic">
|
|
|
+ <text class="statistic-title">总用时：</text>
|
|
|
+ <view class="statistic-right">
|
|
|
+ <text class="statistic-value">{{durationMin}}</text><text
|
|
|
+ class="statistic-unit">min</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <text class="name">{{nameSub}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="btnRankList" @click="btnRankList">点击查看排行榜</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <my-fab></my-fab>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import tools from '/common/tools';
|
|
|
+ import {
|
|
|
+ token,
|
|
|
+ apiCardUrlQuery,
|
|
|
+ checkResCode
|
|
|
+ } from '/common/api';
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ token: "",
|
|
|
+ matchType: 0, // 游戏类型 1 普通活动 2 线下赛 3 线上赛
|
|
|
+ ecId: 0, // 卡片id
|
|
|
+
|
|
|
+ status: "", // success: 挑战成功, ok: 挑战完成(没在规定时间完成，但打了所有点), fail: 挑战结束
|
|
|
+ name: "", // 用户名
|
|
|
+ duration: 0, // 总用时，秒
|
|
|
+ distance: 0, // 总里程，米
|
|
|
+ cal: 0, // 卡路里，卡 int
|
|
|
+ accuracy: 0, // 脑力值百分比
|
|
|
+ syscount: 0, // 点数
|
|
|
+
|
|
|
+ actId: 0, // 活动或关联id
|
|
|
+ urlRs: [], // Url集合
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ nameSub() {
|
|
|
+ // const maxlen = 8;
|
|
|
+ const nameLen = tools.calStrLen(this.name);
|
|
|
+ console.log('nameLen', nameLen);
|
|
|
+ if (nameLen <= 10) {
|
|
|
+ return '选手: ' + this.name;
|
|
|
+ }
|
|
|
+ // else if (nameLen >= maxlen) {
|
|
|
+ // return this.name.substring(0,maxlen-1) + '...';
|
|
|
+ // }
|
|
|
+ else {
|
|
|
+ return this.name;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ durationMin() {
|
|
|
+ return Math.round(this.duration * 10 / 60) / 10;
|
|
|
+ },
|
|
|
+ distanceKm() {
|
|
|
+ return Math.round(this.distance * 10 / 1000) / 10;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(event) { // 类型非必填，可自动推导
|
|
|
+ console.log('[challenge result] onLoad');
|
|
|
+
|
|
|
+ this.token = event["token"] ?? token;
|
|
|
+ this.actId = event["id"] ?? 0;
|
|
|
+ this.matchType = event["matchType"] ?? 0;
|
|
|
+
|
|
|
+ this.status = event["status"] ?? "";
|
|
|
+ this.name = event["name"] ?? "";
|
|
|
+ this.duration = event["duration"] ?? 0;
|
|
|
+ this.distance = event["distance"] ?? 0;
|
|
|
+ this.cal = event["cal"] ?? 0;
|
|
|
+ this.accuracy = event["accuracy"] ?? 0;
|
|
|
+ this.syscount = event["syscount"] ?? 0;
|
|
|
+
|
|
|
+ // console.log("event:", JSON.stringify(event));
|
|
|
+ // uni.showToast({
|
|
|
+ // title: 'event：' + JSON.stringify(event),
|
|
|
+ // icon: 'none',
|
|
|
+ // duration: 10000
|
|
|
+ // });
|
|
|
+
|
|
|
+ this.cardUrlQuery();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 根据游戏id查询卡片信息
|
|
|
+ cardUrlQuery() {
|
|
|
+ uni.request({
|
|
|
+ url: apiCardUrlQuery,
|
|
|
+ header: {
|
|
|
+ "Content-Type": "application/x-www-form-urlencoded",
|
|
|
+ "token": this.token,
|
|
|
+ },
|
|
|
+ method: "POST",
|
|
|
+ data: {
|
|
|
+ actId: this.actId,
|
|
|
+ matchType: this.matchType
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ // console.log("cardUrlQuery", res);
|
|
|
+ if (res.data.code == 0) {
|
|
|
+ const data = res.data.data;
|
|
|
+ this.ecId = data.ecId;
|
|
|
+ this.urlRs = data.urlRs;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ console.log("cardUrlQuery err", err);
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ btnRankList() {
|
|
|
+ // console.log("urlRs", this.urlRs);
|
|
|
+ // const rankListUrl = this.urlRs.find(item => item.name === 'rankListUrl');
|
|
|
+ const rankListUrl = this.urlRs.rankListUrl;
|
|
|
+ // console.log("rankListUrl", rankListUrl);
|
|
|
+ if (rankListUrl != null) {
|
|
|
+ let url = "";
|
|
|
+ if (rankListUrl.indexOf('?') !== -1) {
|
|
|
+ url = rankListUrl + '&token=' + this.token + '&id=' + this.ecId;
|
|
|
+ } else {
|
|
|
+ url = rankListUrl + '?token=' + this.token + '&id=' + this.ecId;
|
|
|
+ }
|
|
|
+ console.log("url", url);
|
|
|
+ // uni.navigateTo({
|
|
|
+ // url: url
|
|
|
+ // });
|
|
|
+ window.location.href = url;
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ // title: '网址错误：' + rankListUrl,
|
|
|
+ title: '请升级APP到最新版才能查看排行榜',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 3000
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+ .body {
|
|
|
+ /* background-color: #8d2117; */
|
|
|
+ background-image: url("/static/guoqing/challenge/success_bg.png");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position-x: center;
|
|
|
+ background-position-y: center;
|
|
|
+ background-size: cover;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ width: 750rpx;
|
|
|
+ min-height: 100vh;
|
|
|
+ /* margin: 0 auto; */
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top {
|
|
|
+ width: 100%;
|
|
|
+ /* height: 600rpx; */
|
|
|
+ padding-top: 100rpx;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo {
|
|
|
+ width: 210rpx;
|
|
|
+ height: 210rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gameName {
|
|
|
+ padding-top: 30rpx;
|
|
|
+ padding-bottom: 30rpx;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 50rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .main {
|
|
|
+ width: 100%;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .main-content {
|
|
|
+ /* margin-top: 25rpx; */
|
|
|
+ /* margin-bottom: 60rpx; */
|
|
|
+ width: 100%;
|
|
|
+ height: 830rpx;
|
|
|
+ /* background-image: url("/static/shanda/challenge/rank_bg.webp"); */
|
|
|
+ background-image: url("/static/guoqing/challenge/rank_bg.png");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position-x: center;
|
|
|
+ background-position-y: top;
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rank {
|
|
|
+ width: 380rpx;
|
|
|
+ /* height: 500rpx; */
|
|
|
+ margin-left: 180rpx;
|
|
|
+ margin-top: 146rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ width: 330rpx;
|
|
|
+ /* 确保文本在一行内显示 */
|
|
|
+ white-space: nowrap;
|
|
|
+ /* 超出容器部分的文本隐藏起来 */
|
|
|
+ overflow: hidden;
|
|
|
+ /* 使用省略号表示被截断的文本 */
|
|
|
+ /* text-overflow: ellipsis; */
|
|
|
+ text-align: center;
|
|
|
+ margin-left: 250rpx;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .statistic {
|
|
|
+ height: 112rpx;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .statistic-right {
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: baseline;
|
|
|
+ }
|
|
|
+
|
|
|
+ .statistic-title {
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 46rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .statistic-value {
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-size: 56rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .statistic-unit {
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ padding-left: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btnRankList {
|
|
|
+ /* opacity: 30%; */
|
|
|
+ width: 194px;
|
|
|
+ height: 40px;
|
|
|
+ margin-bottom: 80rpx;
|
|
|
+ background: #AB0505;
|
|
|
+ border-radius: 18px;
|
|
|
+ align-items: center;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 40px;
|
|
|
+ opacity: 0.51;
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|
