huangjinming/CounterFireGames
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

巡回赛排行榜

Browse Source
This commit is contained in:
yuyongdong 2024-10-28 19:50:17 +08:00
parent 56d5190740
commit 05102dfa05
5 changed files with 138 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/ranking/none01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

10
src/components/assets/assetsHeader.vue
View File

@ -7,9 +7,9 @@
<img v-else src="@/assets/img/marketplace/0000.png" alt="Dynamic Image" />
</div>
<div class="assets-user-name">
<div class="vip" @click="isBindVip">
<!-- <div class="vip" @click="isBindVip">
<img :src="stakingVipImgList[vipInfo.level].img" alt />
</div>
</div> -->
<div class="adderss">
<img :src="icon_pass" alt />
{{ localWalletStore.showAddress ? localWalletStore.showAddress : 'User Address' }}
@ -63,9 +63,9 @@
<span v-else>0</span>
</p>
</div>
<div class="staking-btn" @click="toStaking('/staking')">Stake</div>
<!-- <div class="staking-btn" @click="toStaking('/staking')">Stake</div> -->
</li>
<li>
<!-- <li>
<div class="img">
<div>
<img src="@/assets/img/staking/esCEC.png" alt />
@ -79,7 +79,7 @@
</p>
</div>
<div class="staking-btn" @click="toStaking('/conversion')">Vest</div>
</li>
</li> -->
</div>
<div class="right">
<div class="tips">

4
src/configs/priceCalculate.js
View File

@ -39,6 +39,10 @@ export const sliceAddress = (address) => {
export const timeFormat = (value) => {
return moment(value).format('YYYY-MM-DD HH:mm:ss')
}
export const rankTimeFormat = (value) => {
if(value == 0) return '-'
return moment(value).format('MM.DD')
}
export const timeReward = (value) => {
return moment(Number(value)*1000).format('MM.DD')
}

12
src/utils/marketplace.js
View File

@ -256,3 +256,15 @@ export const apiCircuitRewardHistory = async (data) => {
const url = `${KingSome}/webapp/index.php?c=OutAppCircuit&a=getCircuitRewardHistory`
return httpGet(url,data)
}
// 巡回赛周赛
export const apiCircuitRanking = async (data) => {
const url = `${API_BASE}/api/circuit_ranking`
return httpGet(url,data)
}
// 巡回赛总赛
export const apiPhaseRanking = async (data) => {
const url = `${API_BASE}/api/circuit_phase_ranking`
return httpGet(url,data)
}

205
src/views/rankingView.vue
View File

@ -57,7 +57,8 @@
</div>
<div class="mint-body-left-contribute">
<li>
<h6>{{ Number(0) == 0 ? '-' : 100 }}</h6>
<h6 v-if="scoreIndex == 0">{{ rankingCircuitInfo.score == 0 ? '-' : rankingCircuitInfo.score }}</h6>
<h6 v-else>{{ rankingPhaseInfo.score == 0 ? '-' : rankingPhaseInfo.score }}</h6>
<div>
<img src="@/assets/img/ranking/Circuit_point.png" alt />
</div>
@ -66,12 +67,11 @@
<div class="mint-body-left-my-pro">
<div>My Ranking</div>
<div>
<img src="@/assets/img/ranking/Icon_history.png" alt />
<span>History</span>
</div>
</div>
<div class="mint-body-left-cec">
<h3>10</h3>
<h3 v-if="scoreIndex == 0">{{ rankingCircuitInfo.ranking == 0 ? '-' : rankingCircuitInfo.ranking }}</h3>
<h3 v-else>{{ rankingPhaseInfo.ranking == 0 ? '-' : rankingPhaseInfo.ranking }}</h3>
</div>
</div>
</div>
@ -88,29 +88,34 @@
</div>
<div class="right-time">
<p>The current phase</p>
<div>
<h3>10.1</h3>
<div v-if="scoreIndex == 0">
<h3>{{ rankTimeFormat(rankingCircuitInfo.start_time) }}</h3>
<h3>-</h3>
<h3>10.10</h3>
<h3>{{ rankingCircuitInfo.end_time == 0 ? '-' : timeReward(rankingCircuitInfo.end_time) }}</h3>
</div>
<div v-else>
<h3>{{ rankTimeFormat(rankingPhaseInfo.start_time) }}</h3>
<h3>-</h3>
<h3>{{ rankingPhaseInfo.end_time == 0 ? '-' : timeReward(rankingPhaseInfo.end_time) }}</h3>
</div>
</div>
</div>
<div class="mint-body-right-btm">
<div class="content">
<div v-if="rankingTableData.length == 0" class="ranking-content-right-list-no">
<div class="content" v-if="scoreIndex == 0">
<div v-if="rankingCircuitList.length == 0" class="ranking-content-right-list-no">
<div>
<p>None</p>
</div>
</div>
<div v-else class="ranking-content-right-list">
<li v-for="(item, index) in rankingTableData" :key="index">
<li v-for="(item, index) in rankingCircuitList" :key="index">
<div class="left">
<div class="left-left">
<div class="rank">
<img v-if="item.rank == 1" src="@/assets/img/ranking/Ranking1.png" alt />
<img v-else-if="item.rank == 2" src="@/assets/img/ranking/Ranking2.png" alt />
<img v-else-if="item.rank == 3" src="@/assets/img/ranking/Ranking3.png" alt />
<span v-else>{{ item.rank }}</span>
<img v-if="item.ranking == 1" src="@/assets/img/ranking/Ranking1.png" alt />
<img v-else-if="item.ranking == 2" src="@/assets/img/ranking/Ranking2.png" alt />
<img v-else-if="item.ranking == 3" src="@/assets/img/ranking/Ranking3.png" alt />
<span v-else>{{ item.ranking }}</span>
</div>
</div>
<div class="left-right">
@ -121,14 +126,49 @@
</div>
<div class="user-name">
<div class="label">Username</div>
<div class="name">{{ item.nickname }}</div>
<div class="name">{{ item.name }}</div>
</div>
</div>
</div>
<div class="right">
<div class="label" v-if="pointsIndex == 0">Points</div>
<div class="label" v-else>Gems</div>
<div class="records">{{ item.score }} (<span>+0</span>) </div>
<div class="label">Points</div>
<div class="records">{{ item.score }} (<span>+{{ item.score_boost }}</span>) </div>
</div>
</li>
</div>
</div>
<div class="content" v-if="scoreIndex == 1">
<div v-if="rankingPhaseList.length == 0" class="ranking-content-right-list-no">
<div>
<p>None</p>
</div>
</div>
<div v-else class="ranking-content-right-list">
<li v-for="(item, index) in rankingPhaseList" :key="index">
<div class="left">
<div class="left-left">
<div class="rank">
<img v-if="item.ranking == 1" src="@/assets/img/ranking/Ranking1.png" alt />
<img v-else-if="item.ranking == 2" src="@/assets/img/ranking/Ranking2.png" alt />
<img v-else-if="item.ranking == 3" src="@/assets/img/ranking/Ranking3.png" alt />
<span v-else>{{ item.ranking }}</span>
</div>
</div>
<div class="left-right">
<div class="user-img">
<!-- <UserImg :imgSrc="item.avatar" /> -->
<!-- <img v-if="imgSrc" :src="imgSrc" alt="" :onerror="defalutUrl"> -->
<img src="@/assets/img/ranking/head_default.jpg" alt />
</div>
<div class="user-name">
<div class="label">Username</div>
<div class="name">{{ item.name }}</div>
</div>
</div>
</div>
<div class="right">
<div class="label">Points</div>
<div class="records">{{ item.score }} (<span>+{{ item.score_boost }}</span>) </div>
</div>
</li>
</div>
@ -168,8 +208,8 @@
<script setup>
import {ref, watch, computed, onMounted} from "vue";
import {BlockChain} from "@/components/chain/BlockChain";
import {apiCecActivity} from "@/utils/marketplace";
import {contributionLogs} from "@/configs/priceCalculate";
import { apiCircuitRanking, apiPhaseRanking } from "@/utils/marketplace";
import {rankTimeFormat, timeReward} from "@/configs/priceCalculate";
import {walletStore} from "@/store/wallet";
import {useMarketplaceStore} from "@/store/marketplace";
const localWalletStore = walletStore();
@ -181,62 +221,6 @@ const router = useRouter();
const scoreList = ref(["Total score", "Weekly score"]);
const scoreIndex = ref(0);
const rankingIndex = ref(0);
const rankingTableData = ref([
{
rank: 1,
avatar: 0,
nickname: "aa",
score: 0,
},
{
rank: 2,
avatar: 0,
nickname: "aa",
score: 0,
},
{
rank: 3,
avatar: 0,
nickname: "aa",
score: 0,
},
{
rank: 0,
avatar: 0,
nickname: "aa",
score: 0,
},
{
rank: 0,
avatar: 0,
nickname: "aa",
score: 0,
},
{
rank: 0,
avatar: 0,
nickname: "aa",
score: 0,
},
{
rank: 0,
avatar: 0,
nickname: "aa",
score: 0,
},
{
rank: 0,
avatar: 0,
nickname: "aa",
score: 0,
},
{
rank: 0,
avatar: 0,
nickname: "aa",
score: 0,
},
]);
const checkTable = (index) => {
scoreIndex.value = index;
};
@ -291,9 +275,53 @@ const toTwitter = () => {
window.open(`${url}${params}`, "_blank");
};
const mintInit = async () => {};
// 巡回赛信息
const rankingCircuitInfo = ref({
start_time: 0, //开始时间
end_time: 0, //开始时间
ranking: 0, //排名
score: 0, //积分
})
const rankingCircuitList = ref([])
onMounted(() => {});
const rankingPhaseInfo = ref({
start_time: 0, //开始时间
end_time: 0, //开始时间
ranking: 0, //排名
score: 0, //积分
})
const rankingPhaseList = ref([])
const getCircuitRanking = async () => {
const data = {
address: localWalletStore.address
}
const { errcode, info, rank_list } = await apiCircuitRanking(data)
if(errcode != 0) return
rankingCircuitList.value = rank_list
rankingCircuitInfo.value = info
}
const getPhaseRanking = async () => {
const data = {
address: localWalletStore.address
}
const { errcode, info, rank_list } = await apiPhaseRanking(data)
if(errcode != 0) return
rankingPhaseList.value = rank_list
rankingPhaseInfo.value = info
}
const mintInit = async () => {
if(localWalletStore.walletType == 3) {
await getCircuitRanking()
await getPhaseRanking()
}
};
onMounted(() => {
mintInit()
});
</script>
<style lang="scss" scoped>
@ -470,8 +498,8 @@ onMounted(() => {});
display: flex;
align-items: center;
div {
width: 392px;
height: 151px;
width: 573px;
height: 333px;
img {
width: 100%;
height: 100%;
@ -481,8 +509,8 @@ onMounted(() => {});
.mint-body-left-content {
width: 241px;
height: 303px;
margin-top: 31px;
background: #2c2635;
margin-top: -50px;
background: #241e30;
border-radius: 40px;
text-align: left;
.mint-body-left-table {
@ -552,14 +580,15 @@ onMounted(() => {});
}
}
.mint-body-left-my-pro {
display: flex;
justify-content: space-evenly;
// display: flex;
// justify-content: space-evenly;
// align-items: center;
font-family: "Poppins";
font-weight: 600;
font-size: 16px;
color: #fff;
margin-top: 20px;
margin-left: 30px;
div {
display: flex;
align-items: center;
@ -727,13 +756,13 @@ onMounted(() => {});
.right {
line-height: 1.4;
.label {
text-align: left;
text-align: right;
color: #979797;
font-size: 14px;
}
.records {
font-size: 14px;
text-align: left;
text-align: right;
span {
color: #a8ff00;
}
@ -762,11 +791,11 @@ onMounted(() => {});
transform: translate(-50%, -50%);
width: 200px;
height: 140px;
background: url("./../../assets/box/none01.png") no-repeat;
background: url("@/assets/img/ranking/none01.png") no-repeat;
background-size: 100% 100%;
p {
position: absolute;
bottom: 8%;
bottom: 2%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 14px;