修改vip

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="vipDialogVisible = true">
+          <div class="vip" @click="isBindVip">
             <!-- <img src="@/assets/img/staking/VIP5.png" alt=""> -->
-            <img :src="stakingVipImgList[0].img" alt="">
+            <img :src="stakingVipImgList[vipInfo.level].img" alt="">
           </div>
           <div class="adderss">
             <img :src="icon_pass" alt="">
@@ -491,7 +491,7 @@
         </div>
       </a-modal>
     </div>
-    <VipDialog :vipDialogVisible="vipDialogVisible" @handleClose="vipHandleClose" @vipDialogCli="toStaking('/staking')" />
+    <VipDialog :vipDialogVisible="vipDialogVisible" @handleClose="vipHandleClose" :vipInfo="vipInfo" @vipDialogCli="toStaking('/staking')" />
     <LoadingDialog :loadingDialogVisible="loadingDialogVisible" />
   </div>
 </template>
@@ -503,7 +503,7 @@ import ConfirmDialog from "@/components/Dialogs/confirmDialog.vue";
 import VipDialog from "@/components/staking/vipDialog.vue";
 import LoadingDialog from "@/components/Dialogs/loadingDialog.vue"
 import {createModal} from "@/utils/model.util";
-import { apiCecInfo, apiExpected, apiUserData, apiContribution, apiRechargeGoods, apiRechargeHistory, apiDiamondHistory, apiGameLog, apiSwitch } from "@/utils/marketplace"
+import { apiCecInfo, apiExpected, apiUserData, apiContribution, apiRechargeGoods, apiRechargeHistory, apiDiamondHistory, apiGameLog, apiSwitch, apiVipInfo, apiBindPassport, apiVipDetails } from "@/utils/marketplace"
 import { priceCalculated, timeFormat, contributionLogs, sliceAddress } from "@/configs/priceCalculate"
 import { rechargeImgList, stakingVipImgList } from "@/configs/cenImg"
 import { icon_usdc, icon_pass } from "@/configs/configchain"
@@ -829,12 +829,48 @@ const getGameLog = async () => {
 
 // vip-------------------------------------start
 const vipDialogVisible = ref(false)
+const bindPassportAddress = ref()
+const vipInfo = ref({
+  level: 0,
+  curpoint: 0,
+  target: 0,
+})
 const vipHandleClose = () => {
   vipDialogVisible.value = false
 }
+const isBindVip = () => {
+  if(localWalletStore.token) {
+  //   alert('先登录')
+  // } else {
+    if(bindPassportAddress.value) {
+      vipDialogVisible.value = true
+    } else {
+      alert('没有绑定')
+    }
+  }
+}
 
 // 获取vip等级
+const getVipDetails = async () => {
+  let src = await apiVipDetails()
+  vipInfo.value = src.info
+}
 
+// 查看是否绑定账号
+const getIsBandVip = async () => {
+  let res = await apiVipInfo()
+  bindPassportAddress.value = res.info.bind_passport_address
+  console.log(res,'---------')
+}
+
+// 绑定VIP账号
+const bindVipAddress = async () => {
+  const data = {
+    passport_jwt: ''
+  }
+  let res = await apiBindPassport(data)
+  console.log(res)
+}
 
 const toStaking = (path) => {
   router.push(path);
@@ -845,6 +881,8 @@ const dataInfo = async () => {
   // const bc = new BlockChain()
   // isPassprotLogin.value = bc.passportLogined
   // console.log(isPassprotLogin.value)
+  await getVipDetails()
+  await getIsBandVip()
   await getMintSwitch()
   await getCecInfo()
   await getContribution()
@@ -884,7 +922,7 @@ watch(localWalletStore,() => {
 })
 
 onMounted(() => {
-  dataInfo()
+  // dataInfo()
 })
 
 </script>

src/components/staking/vipDialog.vue

@@ -16,10 +16,10 @@
         <div class="vip-top">
           <div class="vip-top-left">
             <div class="vip-logo">
-              <img src="@/assets/img/staking/VIP5.png" alt="">
+              <img :src="stakingVipImgList[props.vipInfo.level].img" alt="">
             </div>
             <div class="vip-info">
-              <h1>VIP 5</h1>
+              <h1>VIP {{ props.vipInfo.level == 0 ? '1' : props.vipInfo.level }}</h1>
               <p class="vip-status">VIP status is normal</p>
               <div class="vip-rules">
                 <span>VIP Points System</span>
@@ -41,8 +41,8 @@
           </div>
         </div>
         <div class="vip-bar">
-          <div class="vip-bar-amount"></div>
+          <div class="vip-bar-amount" :style="{width: `${bgCorWidth}%`}"></div>
-          <span>2501/3000</span>
+          <span>{{ props.vipInfo.curpoint }}/{{ props.vipInfo.target }}</span>
         </div>
         <div class="vip-swiper">
           <!--   :autoplay="{ delay: 3200, disableOnInteraction: true }"
@@ -51,7 +51,7 @@
             :modules="modules" 
             :slidesPerView="2"
             :loop="true"
-            :initialSlide="vipGrade"
+            :initialSlide="props.vipInfo.level"
             :centeredSlides="false"
             :navigation="navigation"
             @slideChange="onSlideChange"
@@ -59,7 +59,7 @@
           >
             <SwiperSlide v-for="(slide, index) in vipList" :key="index">
               <div
-                :class="vipGrade == index ? 'vip-card' : ''"
+                :class="props.vipInfo.level == index ? 'vip-card' : ''"
               >
               <div class="vip-tit">{{ slide.title }}</div>
               <p v-html="slide.text1"></p>
@@ -77,13 +77,15 @@
 </template>
 
 <script setup>
-import {ref} from "vue";
+import { ref, toRaw, computed} from "vue";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import { Pagination, Navigation, Autoplay } from "swiper/modules";
 import "swiper/css";
 import "swiper/css/pagination";
 import "swiper/css/navigation";
 
+import { stakingVipImgList } from "@/configs/cenImg"
+
 const modules = [Pagination, Navigation, Autoplay];
 const navigation = ref({
   nextEl: ".swiper-button-next",
@@ -95,11 +97,15 @@ const props = defineProps({
     type: Boolean,
     required: true,
   },
-  buyDataArr: {
+  vipInfo: {
-    type: Array,
+    type: Object,
     required: true,
   },
 });
+const bgCorWidth = computed(() => {
+  let nub = toRaw(props.vipInfo.curpoint) / toRaw(props.vipInfo.target) * 100
+  return nub
+})
 
 const vipGrade = ref(0);
 const vipList = ref([

src/configs/cenImg.js

@@ -80,18 +80,18 @@ export const stakingVipImgList = {
     img: new URL("@/assets/img/staking/VIP_none.png",import.meta.url).href
   },
   1: {
-    img: new URL("@/assets/img/marketplace/1002.png",import.meta.url).href
+    img: new URL("@/assets/img/staking/VIP1.png",import.meta.url).href
   },
   2: {
-    img: new URL("@/assets/img/marketplace/1003.png",import.meta.url).href
+    img: new URL("@/assets/img/staking/VIP2.png",import.meta.url).href
   },
   3: {
-    img: new URL("@/assets/img/marketplace/1004.png",import.meta.url).href
+    img: new URL("@/assets/img/staking/VIP3.png",import.meta.url).href
   },
   4: {
-    img: new URL("@/assets/img/marketplace/1005.png",import.meta.url).href
+    img: new URL("@/assets/img/staking/VIP4.png",import.meta.url).href
   },
   5: {
-    img: new URL("@/assets/img/marketplace/1006.png",import.meta.url).href
+    img: new URL("@/assets/img/staking/VIP5.png",import.meta.url).href
   }
 }

src/utils/marketplace.js

@@ -245,6 +245,12 @@ export const apiBindPassport = async (data) => {
   return httpPost(url, data)
 }
 
+// 获取vip等级
+export const apiVipDetails = async (data) => {
+  const url = `${API_BASE}/api/vip/details`
+  return httpGet(url)
+}
+
 // 拉力赛列表
 export const apiCircuitRewardHistory = async (data) => {
   const url = `${KingSome}/webapp/index.php?c=OutAppCircuit&a=getCircuitRewardHistory`