|
|
@@ -0,0 +1,436 @@
|
|
|
+<!--
|
|
|
+成就
|
|
|
+http://localhost:5173/card/#/pages/achievement/index
|
|
|
+https://oss-mbh5.colormaprun.com/card/#/pages/achievement/index
|
|
|
+ -->
|
|
|
+<template>
|
|
|
+ <view class="body">
|
|
|
+ <view class="content uni-column">
|
|
|
+ <view class="topbar uni-row">
|
|
|
+ <view></view>
|
|
|
+ <text>成就</text>
|
|
|
+ <text style="color: rgba(46, 133, 236, 1);"><!-- 完成 --></text>
|
|
|
+ </view>
|
|
|
+ <view class="tab uni-row">
|
|
|
+ <text :class="tabCurrent == 0 ? 'tab-active' : 'tab-unactive'" @click="tabCurrent=0">挑战</text>
|
|
|
+ <text :class="tabCurrent == 1 ? 'tab-active' : 'tab-unactive'" @click="tabCurrent=1">活动</text>
|
|
|
+ </view>
|
|
|
+ <view class="main">
|
|
|
+
|
|
|
+ <view v-if="tabCurrent == 0">
|
|
|
+ <view class="norecord" v-if="challengeRs == null || challengeRs.length == 0">暂无记录</view>
|
|
|
+ <view class="uni-column" v-for="(item, index) in challengeRs" :key="index">
|
|
|
+ <text class="year">{{item.year}}</text>
|
|
|
+ <view class="list uni-row">
|
|
|
+ <view class="item uni-column" v-for="(item2, index2) in item.monthRs" :key="index2">
|
|
|
+ <view class="item-cup" :style="getCupStyle('cup', item2.month)">
|
|
|
+ <view class="item-cup-gray" :style="getCupStyle('cup-gray', item2.month, getCupProgress(item2.targetNum, item2.realNum))"></view>
|
|
|
+ </view>
|
|
|
+ <view class="item-title uni-row">
|
|
|
+ <text class="item-title-month">{{item2.month}}月</text>
|
|
|
+ <view class="item-title-divide"></view>
|
|
|
+ <text class="item-title-progress">{{item2.realNum}}/{{item2.targetNum}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view v-if="tabCurrent == 1">
|
|
|
+ <view class="norecord" v-if="activityRs == null || activityRs.length == 0">暂无记录</view>
|
|
|
+ <view class="uni-column" v-for="(item, index) in activityRs" :key="index">
|
|
|
+ <text class="year">{{item.year}}</text>
|
|
|
+ <view class="list uni-row">
|
|
|
+ <view class="item item-bg uni-column" v-for="(item2, index2) in item.aiRs" :key="index2">
|
|
|
+ <view class="item-medal" :style="getMedalStyle(item2.iconUrl)"></view>
|
|
|
+ <view class="item-title uni-column">
|
|
|
+ <view class="item-title-ainame">{{item2.aiName}}</view>
|
|
|
+ <view class="item-title-aitime">{{fmtTime(item2.aiTime)}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <my-popup ref="mypopup" :dataList="popupDataList" @popup-close="onPopupClose"></my-popup>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import tools from '../../common/tools';
|
|
|
+ import {
|
|
|
+ token,
|
|
|
+ apiMonthlyChallengeQuery,
|
|
|
+ apiAchievementQuery,
|
|
|
+ apiUnReadMessageQuery,
|
|
|
+ apiReadMessage,
|
|
|
+ checkResCode
|
|
|
+ } from '../../common/api';
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ queryString: "",
|
|
|
+ token: "",
|
|
|
+ tokenValid: false,
|
|
|
+
|
|
|
+ challengeRs: [], // 挑战成就集合
|
|
|
+ activityRs: [], // 活动成就集合
|
|
|
+ unReadMessageRs: [], // 未读消息列表
|
|
|
+ mqIdListStr: "", // 已读消息id列表 逗号分隔
|
|
|
+
|
|
|
+ tabCurrent: 0,
|
|
|
+ popupDataList: [],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ onLoad(event) { // 类型非必填，可自动推导
|
|
|
+ // console.log(event);
|
|
|
+ this.queryString = tools.objectToQueryString(event);
|
|
|
+ // console.log(queryString);
|
|
|
+ this.token = event["token"] ?? token;
|
|
|
+
|
|
|
+ this.getMonthlyChallengeQuery();
|
|
|
+ this.getAchievementQuery();
|
|
|
+ this.getUnReadMessageQuery();
|
|
|
+ },
|
|
|
+ // 页面初次渲染完成，此时组件已挂载完成，DOM 树($el)已可用
|
|
|
+ onReady() {},
|
|
|
+ onUnload() {},
|
|
|
+ methods: {
|
|
|
+ getCupProgress(targetNum, realNum) {
|
|
|
+ let cupProgress = 100;
|
|
|
+ if (targetNum > 0 && realNum > 0) {
|
|
|
+ if (realNum < targetNum) {
|
|
|
+ const progress = realNum / targetNum * 100;
|
|
|
+ cupProgress = 100 - progress;
|
|
|
+ } else {
|
|
|
+ cupProgress = 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // console.log("cupProgress:", cupProgress);
|
|
|
+ return cupProgress;
|
|
|
+ },
|
|
|
+ getCupStyle(type, month, cupProgress = 0) {
|
|
|
+ if (!(month > 0)) {
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+
|
|
|
+ let group = 1;
|
|
|
+ if (type == 'cup') {
|
|
|
+ return `background-image: url("static/cup/${group}/${month}.png")`;
|
|
|
+ } else if (type == 'cup-gray') {
|
|
|
+ return `background-image: url("static/cup/${group}/${month}h.png"); height:${cupProgress}% ;`;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getMedalStyle(bgurl) {
|
|
|
+ return `background-image: url("${bgurl}")`;
|
|
|
+ },
|
|
|
+ fmtTime(timestamp) {
|
|
|
+ return tools.timestampToTime(timestamp * 1000, 2);
|
|
|
+ },
|
|
|
+ // 玩家所有月挑战记录查询
|
|
|
+ getMonthlyChallengeQuery() {
|
|
|
+ uni.request({
|
|
|
+ url: apiMonthlyChallengeQuery,
|
|
|
+ header: {
|
|
|
+ "Content-Type": "application/x-www-form-urlencoded",
|
|
|
+ "token": this.token,
|
|
|
+ },
|
|
|
+ method: "POST",
|
|
|
+ data: {},
|
|
|
+ success: (res) => {
|
|
|
+ // console.log("getMonthlyChallengeQuery", res);
|
|
|
+
|
|
|
+ if (checkResCode(res)) {
|
|
|
+ if (res.statusCode == 401) { // 未登录
|
|
|
+ this.tokenValid = false;
|
|
|
+ } else {
|
|
|
+ this.tokenValid = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.challengeRs = res.data.data;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ console.log("getMonthlyChallengeQuery err", err)
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 玩家活动成就查询
|
|
|
+ getAchievementQuery() {
|
|
|
+ uni.request({
|
|
|
+ url: apiAchievementQuery,
|
|
|
+ header: {
|
|
|
+ "Content-Type": "application/x-www-form-urlencoded",
|
|
|
+ "token": this.token,
|
|
|
+ },
|
|
|
+ method: "POST",
|
|
|
+ data: {},
|
|
|
+ success: (res) => {
|
|
|
+ console.log("getAchievementQuery", res);
|
|
|
+
|
|
|
+ if (checkResCode(res)) {
|
|
|
+ if (res.statusCode == 401) { // 未登录
|
|
|
+ this.tokenValid = false;
|
|
|
+ } else {
|
|
|
+ this.tokenValid = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.activityRs = res.data.data;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ console.log("getAchievementQuery err", err);
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 未读消息列表查询
|
|
|
+ getUnReadMessageQuery() {
|
|
|
+ uni.request({
|
|
|
+ url: apiUnReadMessageQuery,
|
|
|
+ header: {
|
|
|
+ "Content-Type": "application/x-www-form-urlencoded",
|
|
|
+ "token": this.token,
|
|
|
+ },
|
|
|
+ method: "POST",
|
|
|
+ data: {},
|
|
|
+ success: (res) => {
|
|
|
+ // console.log("getUnReadMessageQuery", res);
|
|
|
+
|
|
|
+ if (checkResCode(res)) {
|
|
|
+ if (res.statusCode == 401) { // 未登录
|
|
|
+ this.tokenValid = false;
|
|
|
+ } else {
|
|
|
+ this.tokenValid = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.unReadMessageRs = res.data.data;
|
|
|
+ this.mqIdListStr = "";
|
|
|
+ for (var i = 0; i < this.unReadMessageRs.length; i++) {
|
|
|
+ let popupData = {
|
|
|
+ type: 3,
|
|
|
+ data: {}
|
|
|
+ };
|
|
|
+ if (this.unReadMessageRs[i].mqType == 1) { // 消息类型 1: 成就
|
|
|
+ popupData.data.title = "恭喜";
|
|
|
+ }
|
|
|
+ popupData.data.img = this.unReadMessageRs[i].iconUrl;
|
|
|
+ popupData.data.content = "恭喜获得成就 \r\n" + this.unReadMessageRs[i].aiName;
|
|
|
+ this.popupDataList.push(popupData)
|
|
|
+
|
|
|
+ this.mqIdListStr += this.unReadMessageRs[i].mqId;
|
|
|
+ if (i < this.unReadMessageRs.length-1) {
|
|
|
+ this.mqIdListStr += ",";
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.popupDataList.length > 0) {
|
|
|
+ this.$refs.mypopup.popupOpen();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ console.log("getUnReadMessageQuery err", err);
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 标记消息已读
|
|
|
+ readMessage() {
|
|
|
+ uni.request({
|
|
|
+ url: apiReadMessage,
|
|
|
+ header: {
|
|
|
+ "Content-Type": "application/x-www-form-urlencoded",
|
|
|
+ "token": this.token,
|
|
|
+ },
|
|
|
+ method: "POST",
|
|
|
+ data: {
|
|
|
+ "mqIdListStr": this.mqIdListStr
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ // console.log("readMessage", res);
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ console.log("readMessage err", err);
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onPopupClose() {
|
|
|
+ console.log("onPopupClose");
|
|
|
+ this.readMessage();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .content {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ justify-content: flex-start;
|
|
|
+ }
|
|
|
+
|
|
|
+ .topbar {
|
|
|
+ width: 90%;
|
|
|
+ margin-top: 70rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-weight: 550;
|
|
|
+ color: #333333;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab {
|
|
|
+ width: 90%;
|
|
|
+ height: 60rpx;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ background: #e7ecef;
|
|
|
+ border-radius: 18px;
|
|
|
+ justify-content: space-around;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-active {
|
|
|
+ width: 50%;
|
|
|
+ height: 60rpx;
|
|
|
+ background: #2e85ec;
|
|
|
+ border-radius: 18px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 60rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-unactive {
|
|
|
+ width: 50%;
|
|
|
+ height: 60rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #818181;
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 60rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .main {
|
|
|
+ width: 90%;
|
|
|
+ padding-top: 30rpx;
|
|
|
+ padding-bottom: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .norecord {
|
|
|
+ font-weight: 500;
|
|
|
+ color: #818181;
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 80vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ .year {
|
|
|
+ width: 100%;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ text-align: left;
|
|
|
+ font-weight: 550;
|
|
|
+ color: #818181;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list {
|
|
|
+ width: 100%;
|
|
|
+ padding-bottom: 10rpx;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item {
|
|
|
+ width: 31%;
|
|
|
+ margin: 20rpx 5rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-bg {
|
|
|
+ background: #e7ecef;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-cup {
|
|
|
+ width: 28vw;
|
|
|
+ height: 28vw;
|
|
|
+ /* background: #e7ecef; */
|
|
|
+ border-radius: 5px;
|
|
|
+ background-image: url("/static/cup/1/004.png");
|
|
|
+ background-position-x: center;
|
|
|
+ /* background-position-y: center; */
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% auto;
|
|
|
+ /* background-clip: padding-box; */
|
|
|
+
|
|
|
+ mask-image: url('/static/backgroud/mask.png');
|
|
|
+ mask-size: 100%;
|
|
|
+ mask-repeat: no-repeat;
|
|
|
+ mask-clip: padding-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-cup-gray {
|
|
|
+ width: 100%;
|
|
|
+ /* height: 60%; */
|
|
|
+ background-image: url("/static/cup/1/004h.png");
|
|
|
+ background-position-x: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% auto;
|
|
|
+ overflow: hidden;
|
|
|
+ /* filter: grayscale(1); */
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-medal {
|
|
|
+ width: 20vw;
|
|
|
+ height: 20vw;
|
|
|
+ margin-top: 25rpx;
|
|
|
+ background-position-x: center;
|
|
|
+ /* background-position-y: center; */
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-title {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-title-month {
|
|
|
+ color: #333333;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 550;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-title-divide {
|
|
|
+ width: 4px;
|
|
|
+ height: 14px;
|
|
|
+ margin: 0 12rpx;
|
|
|
+ background: #c6c6c6;
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-title-progress {
|
|
|
+ color: #818181;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-title-ainame {
|
|
|
+ margin-top: 12rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-title-aitime {
|
|
|
+ margin-top: 12rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ color: #818181;
|
|
|
+ font-size: 11px;
|
|
|
+ }
|
|
|
+</style>
|
