巡回赛排行榜

src/components/assets/assetsHeader.vue

@@ -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">

src/configs/priceCalculate.js

@@ -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')
 }

src/utils/marketplace.js

@@ -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)
+}

src/views/rankingView.vue

@@ -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>
+              <div v-if="scoreIndex == 0">
-                <h3>10.1</h3>
+                <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 class="content" v-if="scoreIndex == 0">
-              <div v-if="rankingTableData.length == 0" class="ranking-content-right-list-no">
+              <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-if="item.ranking == 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.ranking == 2" src="@/assets/img/ranking/Ranking2.png" alt />
-                        <img v-else-if="item.rank == 3" src="@/assets/img/ranking/Ranking3.png" alt />
+                        <img v-else-if="item.ranking == 3" src="@/assets/img/ranking/Ranking3.png" alt />
-                        <span v-else>{{ item.rank }}</span>
+                        <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">Points</div>
-                    <div class="label" v-else>Gems</div>
+                    <div class="records">{{ item.score }} (<span>+{{ item.score_boost }}</span>) </div>
-                    <div class="records">{{ item.score }} (<span>+0</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 { apiCircuitRanking, apiPhaseRanking } from "@/utils/marketplace";
-import {contributionLogs} from "@/configs/priceCalculate";
+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;
+            width: 573px;
-            height: 151px;
+            height: 333px;
             img {
               width: 100%;
               height: 100%;
@@ -481,8 +509,8 @@ onMounted(() => {});
         .mint-body-left-content {
           width: 241px;
           height: 303px;
-          margin-top: 31px;
+          margin-top: -50px;
-          background: #2c2635;
+          background: #241e30;
           border-radius: 40px;
           text-align: left;
           .mint-body-left-table {
@@ -552,14 +580,15 @@ onMounted(() => {});
             }
           }
           .mint-body-left-my-pro {
-            display: flex;
+            // display: flex;
-            justify-content: space-evenly;
+            // 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;