新增充值

src/components/assets/assetsHeader.vue

@@ -1,21 +1,34 @@
 <template>
   <div class="mkt-header">
+    <div class="header-content">
       <div class="assets-user">
         <div class="assets-user-img" :style="{background: bgCor[bgCorFloor]}">
           <img v-if="localWalletStore.showAddress" :src="imageUrl" alt="Dynamic Image">
           <img v-else src="@/assets/img/marketplace/0000.png" alt="Dynamic Image">
         </div>
         <div class="assets-user-name">
-        <div>{{ localWalletStore.showAddress ? localWalletStore.showAddress : 'User Address' }}</div>
+          <div class="adderss">{{ localWalletStore.showAddress ? localWalletStore.showAddress : 'User Address' }}</div>
-        <div class="total">
+          <div class="email">
-          <p>Total Contribution Credits:&nbsp; <span>{{ contributionPointTotal }}</span></p>
+            <p>Total Contribution Credits:</p>
-          <img src="@/assets/img/marketplace/totalContribution.png" alt="">
+          </div>
-          <img class="icon" @click="conLogDialogVisible = true" src="@/assets/img/marketplace/History.png" alt="">
+          <div class="name">
+            <p>Player name:&nbsp;&nbsp; <span>{{ contributionPoint }}</span></p>
+          </div>
+          <div class="recharge">
+            <div class="recharge-left">
+              <li>
+                <div class="recharge-img">
+                  <img src="@/assets/img/marketplace/icon_diamond.png" alt="">
+                </div>
+                <span>0</span>
+              </li>
+              <li>
+                <div class="recharge-btn" @click="rechargeListDialogVisible = true">Top up</div>
+              </li>
+            </div>
+            <div class="recharge-right">
+              <img class="icon" @click="rechargeLogDialogVisible = true" src="@/assets/img/marketplace/History.png" alt="">
             </div>
-        <div class="day">
-          <p>Daily Expected:&nbsp;&nbsp; <span>+{{ contributionPoint }}/d</span></p>
-          <img src="@/assets/img/marketplace/totalContribution.png" alt="">
-          <img class="icon" @click="rulesDialogVisible = true" src="@/assets/img/marketplace/Description.png" alt="">
           </div>
         </div>
         <div>
@@ -23,9 +36,18 @@
       </div>
       <div class="uaw-listing">
         <div class="uaw-listing-content">
-        <div class="left">&nbsp;</div>
+          <div class="left">
             <div class="img">
               <img src="@/assets/img/marketplace/CECIcon.png" alt="">
+            </div>
+              <div class="uaw-cec-amount">
+              <p>
+                CEC: 
+                <br>
+                <span v-if="cecInfo?.total != 0">{{ priceCalculated(BigInt(cecInfo?.total),18).toString().match(/^\d+(?:\.\d{0,2})?/)[0] }}</span>
+                <span v-else>0</span>
+              </p>
+            </div>
           </div>
           <div class="right">
             <div class="tips">
@@ -39,13 +61,25 @@
             </div>
           </div>
         </div>
-      <div class="uaw-cec-amount">
+        <div class="expected-content">
-        <p>
+          <div class="total">
-          CEC: 
+            <p>Total Contribution Credits:&nbsp; </p>
-          <span v-if="cecInfo?.total != 0">{{ priceCalculated(BigInt(cecInfo?.total),18).toString().match(/^\d+(?:\.\d{0,2})?/)[0] }}</span>
+            <div>
-          <span v-else>0</span>
+              <span>{{ contributionPointTotal }}</span>
-        </p>
+              <img src="@/assets/img/marketplace/totalContribution.png" alt="">
+              <img class="icon" @click="conLogDialogVisible = true" src="@/assets/img/marketplace/History.png" alt="">
             </div>
+          </div>
+          <div class="day">
+            <p>Daily Expected:&nbsp;&nbsp;</p>
+            <div>
+              <span>+{{ contributionPoint }}/d</span>
+              <img src="@/assets/img/marketplace/totalContribution.png" alt="">
+              <img class="icon" @click="rulesDialogVisible = true" src="@/assets/img/marketplace/Description.png" alt="">
+            </div>
+          </div>
+        </div>
+        
         <div class="btn">
           <!-- <span class="yes" v-if="cecInfo?.stages[0]?.unlocked || cecInfo?.stages[1]?.unlocked" @click="confirmDialogVisible = false">Collection</span>
           <span class="no" v-else @click="confirmCec">Collection</span> -->
@@ -303,13 +337,83 @@
         </div>
       </div>
     </div>
+    <div ref="rechargeListModal">
+      <a-modal :class="'rechargeListModal'" :getContainer="() => $refs.rechargeListModal" v-model:open="rechargeListDialogVisible" :closable="false" :footer="null" :maskClosable="false">
+        <div class="title">Diamond Top up</div>
+        <div class="closable" @click="rechargeListDialogVisible = false">
+          <img src="@/assets/img/marketplace/Close_counter.png" alt="">
+        </div>
+        <p>Diamonds are centralized assets that can be used in the game</p>
+        <div class="content">
+          <div class="item activity" v-for="(item, index) in rechargeList" :key="index" @click="selectItem(item)">
+            <div class="item-img">
+              <img src="@/assets/img/marketplace/1001.png" alt="">
+            </div>
+            <div v-if="index != 5" class="item-amount">×{{ item.diamond }}</div>
+            <div v-else class="item-amount item-amount-input">
+              <span @click="rechargeDecrease">-</span>
+              <!-- <span>0</span> -->
+              <input type="text" placeholder="0" v-model="brickworkAmount">
+              <span @click="rechargeIncrease">+</span>
+            </div>
+          </div>
+        </div>
+        <div class="conform-btn" @click="conformBtn">
+          <span>{{ confirmRecharge?.price }}</span>
+          <img src="@/assets/img/marketplace/icon_USDT.png" alt="">
+        </div>
+      </a-modal>
+    </div>
+    <div ref="rechargeLogModal">
+      <a-modal :class="'rechargeLogModal'" :getContainer="() => $refs.rechargeLogModal" v-model:open="rechargeLogDialogVisible" :closable="false" :footer="null" :maskClosable="false">
+        <div class="log-title">Staking Contribution Credits Record</div>
+        <div class="closable" @click="rechargeLogDialogVisible = false">
+          <img src="@/assets/img/marketplace/Close_counter.png" alt="">
+        </div>
+        <div class="log-content">
+          <div class="log-header">
+            <!-- <li>
+              Event
+            </li> -->
+            <li>
+              Date
+            </li>
+            <li>
+              Reward
+            </li>
+          </div>
+          <div class="log-body">
+            <div v-if="contributionList == undefined || contributionList.length <= 0" class="no-data">
+              <div>
+                <img src="@/assets/img/marketplace/Empty_state.png" alt="">
+              </div>
+              <p>No Data</p>
+            </div>
+            <div v-else class="pages" v-for="(item, index) in contributionList" :key="index">
+              <!-- <li>
+                <span>contributionList</span>
+              </li> -->
+              <li>
+                {{ timeFormat(item.date*1000) }}
+              </li>
+              <li class="cec-amount">
+                <!-- <span>{{  priceCalculated(BigInt(item.contribution_point),18).toString().match(/^\d+(?:\.\d{0,2})?/)[0]  }}</span> -->
+                <span>{{contributionLogs(item.contribution_point)}}</span>
+                <img src="@/assets/img/marketplace/totalContribution.png" alt="">
+              </li>
+            </div>
+          </div>
+        </div>
+      </a-modal>
+    </div>
+  </div>
 </template>
 
 <script setup>
-import { ref, watch, computed, onMounted } from "vue"
+import { ref, toRaw, watch, computed, onMounted } from "vue"
 import ConfirmDialog from "@/components/Dialogs/confirmDialog.vue";
 import {createModal} from "@/utils/model.util";
-import { apiCecInfo, apiExpected, apiUserData, apiContribution } from "@/utils/marketplace"
+import { apiCecInfo, apiExpected, apiUserData, apiContribution, apiRechargeGoods, apiRechargeHistory } from "@/utils/marketplace"
 import { priceCalculated, timeFormat, contributionLogs } from "@/configs/priceCalculate"
 import { useMarketplaceStore } from "@/store/marketplace"
 import {walletStore} from "@/store/wallet";
@@ -422,11 +526,66 @@ const getUserData = async () => {
   }
 }
 
+// 充值----------------------------------------stats
+const rechargeLogDialogVisible = ref(false)
+const rechargeListDialogVisible = ref(false)
+const rechargeList = ref()
+const confirmRecharge = ref()
+const brickworkAmount = ref(0)
+const priceAmount = ref(0)
+// 列表
+const getRechargeGoods = async () => {
+  const { errcode, errmsg, rows} = await apiRechargeGoods()
+  if(errcode == 0) {
+    rechargeList.value = rows
+    confirmRecharge.value = rows[0]
+  }
+}
+
+// selectItem 预选充值数量
+const selectItem = (data) => {
+  if(data.goods_id == 1006) {
+    confirmRecharge.value = {
+      currency: data.currency,
+      diamond: brickworkAmount.value,
+      goods_id: data.goods_id,
+      price: priceAmount.value
+    }
+  } else {
+    confirmRecharge.value = data
+  }
+}
+
+const rechargeDecrease = async () => {
+  if(brickworkAmount.value == 0) return false
+  brickworkAmount.value--
+  priceAmount.value--
+  toRaw(confirmRecharge.value).price = priceAmount.value
+}
+const rechargeIncrease = async () => {
+  brickworkAmount.value++
+  priceAmount.value++
+  toRaw(confirmRecharge.value).price = priceAmount.value
+}
+
+const conformBtn = () => {
+  console.log(toRaw(confirmRecharge.value))
+}
+
+const getRechargeHistory = async () => {
+  let address = localWalletStore.address
+  let res = await apiRechargeHistory(address)
+  console.log(res,'-----------------------------')
+}
+// 充值----------------------------------------end
+
 const dataInfo = async () => {
   await getCecInfo()
   await getContribution()
   await getExpected()
   await getUserData()
+  await getRechargeGoods()
+  // await getRechargeHistory()
 }
 
 watch(localWalletStore,() => {
@@ -467,6 +626,8 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .mkt-header {
+  width: 100%;
+  .header-content {
     width: 100%;
     display: flex;
     align-items: center;
@@ -474,7 +635,10 @@ onMounted(() => {
     padding-top: 168px;
     .assets-user {
       display: flex;
-    padding: 0 0 45px 77px;
+      height: 174px;
+      background: rgba(26,24,33, .5);
+      border-radius: 40px;
+      margin-left: 77px;
       .assets-user-img {
         width: 173.8px;
         height: 173.8px;
@@ -488,63 +652,88 @@ onMounted(() => {
       }
       .assets-user-name {
         font-family: 'Poppins';
+        color: #FFFFFF;
+        border-radius: 40px;
+        padding: 10px 20px;
+        .adderss {
           font-weight: bold;
           font-size: 30px;
-      color: #FFFFFF;
+        }
-      background: rgba(26,24,33, .5);
+        .email {
-      border-radius: 40px;
+          font-size: 20px;
-      padding: 20px;
+        }
-      >div {
+        .name {
-        display: flex;
+          font-size: 20px;
-        align-items: center;
-        margin-bottom: 5px;
-        p {
-          display: flex;
-          align-items: center;
           span {
-            color: #00DEFF;
+            font-weight: Bold;
-            font-size: 26px;
           }
         }
+        .recharge {
+          display: flex;
+          align-items: center;
+          width: 349px;
+          height: 36px;
+          margin-top: 10px;
+          .recharge-left {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            width: 349px;
+            height: 100%;
+            background: rgba(0,0,0,.5);
+            border-radius: 16px;
+            li {
+              display: flex;
+              align-items: center;
+              .recharge-img {
+                margin-right: 16px;
+                width: 36px;
+                height: 36px;
+                img {
+                  width: 100%;
+                  height: 100%;
                 }
-      .total {
+              }
+              span {
                 font-family: 'Poppins';
                 font-weight: bold;
-        font-size: 18px;
+                font-size: 20px;
-        img {
-          width: 27px;
-          height: 27px;
-          margin-left: 10px;
               }
-        .icon {
+              .recharge-btn {
-          width: 27px;
+                width: 100px;
-          height: 27px;
+                height: 36px;
+                text-align: center;
+                line-height: 36px;
+                font-size: 20px;
+                font-weight: bold;
+                font-family: "Poppins";
+                color: #000;
+                background: #ff917f;
+                border-radius: 16px;
                 cursor: pointer;
               }
             }
-      .day {
-        font-family: 'Poppins';
-        font-weight: 500;
-        font-size: 14px;
-        img {
-          width: 27px;
-          height: 27px;
-          margin-left: 10px;
           }
+          .recharge-right {
+            margin-left: 11px;
             .icon {
-          width: 27px;
+              width: 36px;
-          height: 27px;
+              height: 40px;
               cursor: pointer;
+              img {
+                width: 100%;
+                height: 100%;
+              }
+            }
           }
-        
         }
       }
     }
     .uaw-listing {
       color: #FFFFFF;
-    width: 380px;
+      width: 448px;
-    // height: 285px;
+      height: 279px;
-    height: 185px;
+      // height: 448px;
       margin-right: 77px;
       background: url('@/assets/img/marketplace/CEC_bg.png') no-repeat;
       background-size: 100% 100%;
@@ -559,13 +748,16 @@ onMounted(() => {
         .img {
           width: 119px;
           height: 115px;
+          margin-left: 23px;
+          margin-right: 25px;
           img {
             width: 100%;
             height: 100%;
           }
         }
         .left {
-        width: 39px;
+          // width: 39px;
+          display: flex;
         }
         .right {
           height: 100%;
@@ -617,9 +809,72 @@ onMounted(() => {
           }
         }
       }
+      .expected-content {
+        width: 416px;
+        margin: 0 auto;
+        font-family: 'Poppins';
+        font-weight: bold;
+        font-size: 30px;
+        color: #FFFFFF;
+        border-top: 2px solid #525482;
+        box-sizing: border-box;
+        padding-top: 14px;
+        padding-right: 10px;
+        >div {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          font-size: 16px;
+          margin-bottom: 5px;
+          font-family: 'Poppins';
+          p {
+            display: flex;
+            align-items: center;
+            
+          }
+          span {
+              color: #00DEFF;
+              font-size: 26px;
+            }
+        }
+        .total {
+          font-weight: bold;
+          div {
+            display: flex;
+            align-items: center;
+          }
+          img {
+            width: 27px;
+            height: 27px;
+            margin-left: 10px;
+          }
+          .icon {
+            width: 27px;
+            height: 27px;
+            cursor: pointer;
+          }
+        }
+        .day {
+          font-weight: 500;
+          div {
+            display: flex;
+            align-items: center;
+          }
+          img {
+            width: 27px;
+            height: 27px;
+            margin-left: 10px;
+          }
+          .icon {
+            width: 27px;
+            height: 27px;
+            cursor: pointer;
+          }
+        }
+      }
       .uaw-cec-amount {
         margin-top: 18px;
-      text-align: center;
+        // text-align: center;
         font-family: 'Poppins';
         font-weight: 400;
         font-size: 24px;
@@ -652,6 +907,8 @@ onMounted(() => {
         }
       }
     }
+  }
+  
   :deep(.conLogModal) {
     width: 1052px !important;
     height: 714px;
@@ -1251,5 +1508,117 @@ onMounted(() => {
       }
     }
   }
+  :deep(.rechargeLogModal) {
+
+  }
+  :deep(.rechargeListModal) {
+    width: 1219px !important;
+    height: 895px;
+    background: #1A1821;
+    box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
+    border-radius: 100px;
+    border: 1px solid #B966FF;
+    .ant-modal-content {
+      width: 100%;
+      padding: 0;
+      background: none;
+      color: #fff;
+      box-shadow: 0 0 0 0;
+      .ant-modal-body {
+        width: 100%;
+        text-align: center;
+
+        .title {
+          font-family: 'Anton';
+          font-weight: 400;
+          font-size: 48px;
+          margin-top: 25px;
+        }
+        .closable {
+          position: absolute;
+          top: -50px;
+          right: -50px;
+          cursor: pointer;
+        }
+        p {
+          font-family: 'Poppins';
+          font-weight: 400;
+          font-size: 20px;
+          color: #9950FD;
+        }
+        .content {
+          width: 100%;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-evenly;
+          clear: both;
+          margin-top: 7px;
+          .item {
+            width: 332px;
+            height: 258px;
+            border-radius: 40px;
+            background: #2d2738;
+            margin-top: 31px;
+            .item-img {
+              width: 312px;
+              height: 206px;
+              img {
+                width: 100%;
+                height: 100%;
+              }
+            }
+            .item-amount {
+              font-family: 'Poppins';
+              font-weight: bold;
+              font-size: 36px;
+              line-height: 1;
+            }
+            .item-amount-input {
+              width: 222px;
+              height: 42px;
+              display: flex;
+              align-items: center;
+              justify-content: space-evenly;
+              margin: 0 auto;
+              background: #1E1B26;
+              border-radius: 21px;
+              span {
+                cursor: pointer;
+              }
+              input {
+                color: #fff;
+                width: 100px;
+                height: 42px;
+                border: 0px;
+                text-align: center;
+              }
+            }
+          }
+        }
+        .conform-btn {
+          width: 427px;
+          height: 81px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: #FEC25D;
+          box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
+          border-radius: 30px;
+          margin: 0 auto;
+          margin-top: 56px;
+          font-family: 'Poppins';
+          font-weight: bold;
+          font-size: 36px;
+          color: #2D2738;
+          cursor: pointer;
+          img {
+            width: 54px;
+            height: 54px;
+            margin-left: 16px;
+          }
+        }
+      }
+    }
+  }
 }
 </style>

src/components/marketplace/mktContent.vue

@@ -365,6 +365,27 @@ const marketHandleScroll = () => {
 }
 
 onMounted(() => {
+  marketplaceList.getParamsData = {
+    page_size: 20,
+    cursor: '',
+    search: {
+      name: '',
+    },
+    filter: {
+      price_min: '',
+      price_max: '',
+      item_ids: [],
+      hero_ranks: [],
+    },
+    sort: {
+      fields: [
+        {
+          name: 'price', 
+          type: 0,
+        }
+      ]
+    }
+  }
   getHeroData()
   window.addEventListener("scroll", marketHandleScroll, true);
 })

src/utils/marketplace.js

@@ -165,3 +165,15 @@ export const apiContribution = async (account_address) => {
   const url = `${API_BASE}/api/activity/stacking/history/${account_address}`
   return httpGet(url, {})
 }
+
+// 充值列表
+export const apiRechargeGoods = async () => {
+  const url = `${API_BASE}/api/recharge/goods`
+  return httpGet(url, {})
+}
+
+// 充值记录
+export const apiRechargeHistory = async (account_address) => {
+  const url = `${API_BASE}/api/recharge/history/${net_id}/${account_address}`
+  return httpPost(url, {})
+}