1

jhzh

2025-04-01 4d2ee4be461972f828b71fd7753f472297c44fb6

 src/page/assetsCenter/index.vue

@@ -1,157 +1,375 @@
<template>
  <div class="pb-120 assetsCenter" >
<!--    <div class="flex justify-between px-52 pt-31  box-border">-->
<!--      <div class="flex-1 items-center text-center textColor1" v-for="(item, index) in typeList " :key="'type' + index"-->
<!--        @click="onTabs(index)">-->
<!--        <div class="font-32  text-center lh-53">{{ item.type }}</div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <div class="flex mx-52 mt-17">-->
<!--      <span class="flex-1 border-b-color " :class="{ active_color: tab === 0 }"></span>-->
<!--      <span class="flex-1 border-b-color" :class="{ active_color: tab === 1 }"></span>-->
<!--      <span class="flex-1 border-b-color" :class="{ active_color: tab === 2 }"></span>-->
<!--      <span class="flex-1 border-b-color" :class="{ active_color: tab === 3 }"></span>-->
<!--    </div>-->
    <over-view :funds="funds" ></over-view>
    <as-sets :funds="funds" ></as-sets>
<!--    <contract  :funds="funds" :index="index"></contract>-->
<!--    <financial :funds="funds" :index="index" ></financial>-->
   <div class="pb-120 assetsCenter">
      <div class="flex justify-between px-52 pt-31 pb-31 box-border">
         <div class="flex items-center text-center textColor1" style="flex-direction: column;width: 50%;"
            v-for="(item, index) in typeList " :key="'type' + index" @click="onTabs(index)">
            <div class="font-32  text-center lh-53">{{ item.type }}</div>
            <div v-if="index == tab"
               style="width: 20px;background-color: #1976D2;height: 4px;display: flex;justify-content: center;align-items: center;">
            </div>
         </div>
      </div>
      <div v-if="tab==0">
         <over-view :funds="funds"></over-view>
         <as-sets :funds="funds"></as-sets>
      </div>
      <div v-if="tab==1">
         <div class="" style="background:rgb(25, 118, 210);padding: 15px">
            <div class="flex justify-between text-white relative">
               <div class="flex">
                  <span class="text-white font-40">{{ $t('总资产') }}</span>
                  <div @click.stop="changeEyes">
                     <img :src="require('../../assets/image/assets-center/eye-open1.png')" style="height: 26px"
                        v-show="!eyetel" />
                     <img :src="require('../../assets/image/assets-center/eye-close1.png')" style="height: 26px"
                        v-show="eyetel" />
                  </div>
               </div>
               <div class="right-clock" @click="goRouter('/exchange/exchangeHistory')">
                  <img :src="require('../../assets/image/assets-center/Subtract.png')" class="w-44 h-38" />
               </div>
            </div>
            <div style="margin-top: 10px;color: white">
               {{$t("总资产估值")}}
            </div>
            <div class="font-700 font-50 mt-18 text-white" v-if="!eyetel">
               {{ fundsdata.totalMoney}}
            </div>

  </div>
            <div class="font-70 font-66 mt-18 textColor" v-else>********</div>
         </div>
         <div class="pl-33 pr-33 btn-box flex justify-between"
            style="border-bottom: #f0f0f0 1px solid;padding: 12px 10px;margin-top: 0">
            <div class="font-25  button" @click="goRouter('/recharge/rechargeList')">
               <div class="word-wrap">
                  <!--          <img :src="require(`@/assets/theme/${theme}/image/assets/up.png`)" alt="">-->
                  <span> {{ $t('充币') }}</span>
               </div>
            </div>
            <div class="ont-25  button" @click="goRouter('/withdraw/withdrawPage')">
               <div class="word-wrap">
                  <!--          <img :src="require(`@/assets/theme/${theme}/image/assets/down.png`)" alt="">-->
                  <span>{{ $t('提币') }}</span>
               </div>
            </div>
            <div class="font-25 button" @click="goRouter('/transfer')">
               <div class="word-wrap">
                  <!--          <img :src="require(`@/assets/theme/${theme}/image/assets/l_r.png`)" alt="">-->
                  <span>{{ $t('划转') }}</span>
               </div>
            </div>
         </div>
         <div
            style="display: flex;margin-bottom: 0px;flex-direction: column;border-bottom: 2px solid rgb(241, 241, 241); padding: 10px;">
            <div style="margin: 20px;color: rgba(25, 118, 210, 0.8);font-size: 18px;font-weight: bold;">USDT</div>
            <div style="display: flex;justify-content: space-between;margin: 0 20px 20px 20px;">
               <div style="display: flex;justify-content: space-between;flex-direction: column;">
                  <div class="text-grey" style="font-weight: normal">{{ $t('可用') }}</div>
                  <div class="textColor" style="font-weight: normal;font-size: 16px;color: #999999">
                     {{fundsdata.usdtMoney}}
                  </div>
               </div>
               <div style="display: flex;justify-content: space-between;flex-direction: column;">
                  <div class="text-grey" style="font-weight: normal">{{ $t('锁仓') }}</div>
                  <div class="textColor" style="font-weight: normal;font-size: 16px;color: #999999">
                     0.00
                  </div>
               </div>
               <div style="display: flex;justify-content: space-between;flex-direction: column;">
                  <div class="text-grey" style="font-weight: normal">{{ $t('冻结') }}</div>
                  <div class="textColor" style="font-weight: normal;font-size: 16px;color: #999999">
                     0.00
                  </div>
               </div>
            </div>
         </div>
         <div
            style="display: flex;margin-bottom: 0px;flex-direction: column;border-bottom: 2px solid rgb(241, 241, 241); padding: 10px;">
            <div style="margin: 20px;color: rgba(25, 118, 210, 0.8);font-size: 18px;font-weight: bold;">ETH</div>
            <div style="display: flex;justify-content: space-between;margin: 0 20px 20px 20px;">
               <div style="display: flex;justify-content: space-between;flex-direction: column;">
                  <div class="text-grey" style="font-weight: normal">{{ $t('可用') }}</div>
                  <div class="textColor" style="font-weight: normal;font-size: 16px;color: #999999">
                     {{fundsdata.ethMoney}}
                  </div>
               </div>
               <div style="display: flex;justify-content: space-between;flex-direction: column;">
                  <div class="text-grey" style="font-weight: normal">{{ $t('锁仓') }}</div>
                  <div class="textColor" style="font-weight: normal;font-size: 16px;color: #999999">
                     0.00
                  </div>
               </div>
               <div style="display: flex;justify-content: space-between;flex-direction: column;">
                  <div class="text-grey" style="font-weight: normal">{{ $t('冻结') }}</div>
                  <div class="textColor" style="font-weight: normal;font-size: 16px;color: #999999">
                     0.00
                  </div>
               </div>
            </div>
         </div>
         <div
            style="display: flex;margin-bottom: 0px;flex-direction: column;border-bottom: 2px solid rgb(241, 241, 241); padding: 10px;">
            <div style="margin: 20px;color: rgba(25, 118, 210, 0.8);font-size: 18px;font-weight: bold;">BTC</div>
            <div style="display: flex;justify-content: space-between;margin: 0 20px 20px 20px;">
               <div style="display: flex;justify-content: space-between;flex-direction: column;">
                  <div class="text-grey" style="font-weight: normal">{{ $t('可用') }}</div>
                  <div class="textColor" style="font-weight: normal;font-size: 16px;color: #999999">
                     {{fundsdata.btcMoney}}
                  </div>
               </div>
               <div style="display: flex;justify-content: space-between;flex-direction: column;">
                  <div class="text-grey" style="font-weight: normal">{{ $t('锁仓') }}</div>
                  <div class="textColor" style="font-weight: normal;font-size: 16px;color: #999999">
                     0.00
                  </div>
               </div>
               <div style="display: flex;justify-content: space-between;flex-direction: column;">
                  <div class="text-grey" style="font-weight: normal">{{ $t('冻结') }}</div>
                  <div class="textColor" style="font-weight: normal;font-size: 16px;color: #999999">
                     0.00
                  </div>
               </div>
            </div>
         </div>
      </div>



   </div>
</template>

<script>
   import AsSets from "@/components/assetsCenter/assets"
   import OverView from "@/components/assetsCenter/overview"
   import Contract from "@/components/assetsCenter/contract"
   import Financial from "@/components/assetsCenter/financial"
   import Axios from "@/API/assets"
   export default {
      name: "assets-index",
      components: {
         AsSets,
         OverView,
         Contract,
         Financial
      },
      data() {
         return {
            type: 'left', //left 从左往右 right 从有王座
            list: [],
            eyetel: false,
            timer: null,
            zjlist: [],
            tab: 1,
            index: 0, // 每个组件的二级tab
            funds: {},
            fundsdata: {},
            typeList: [{
                  type: this.$t('交易账户'),
               },
               {
                  type: this.$t('资金账户'),
               },
            ]
         }
      },
      methods: {
         goRouter(parmas) {
           if (parmas === '/exchange/exchangeHistory') {
             this.$router.push({ path: parmas, query: { type: 0 } })
           } else {
             this.$router.push(parmas);
           }
         },
         changeEyes() {
            this.eyetel = !this.eyetel;
         },
         onTabs(val) {
            console.log('111',val);
            this.tab = val
         },
         getAssetszj() {
            Axios.GetWalletzj().then((res) => {
               this.fundsdata = res.data
            })

import AsSets from "@/components/assetsCenter/assets"
import OverView from "@/components/assetsCenter/overview"
import Contract from "@/components/assetsCenter/contract"
import Financial from "@/components/assetsCenter/financial"
import Axios from "@/API/assets"
export default {
  name: "assets-index",
  components: {
    AsSets,
    OverView,
    Contract,
    Financial
  },
  data() {
    return {
      type: 'left', //left 从左往右 right 从有王座
      list: [],
      timer: null,
      tab: 0,
      index: 0, // 每个组件的二级tab
      funds: {},
      typeList: [
        {
          type: this.$t('总览'),
        },
        {
          type: this.$t('现货账户'),
        },
        {
          type: this.$t('合约'),

        },
        {
          type: this.$t('理财'),
        },
      ]
    }
  },
  methods: {
    onTabs(val) {
      if (this.tab < val) {
        this.type = 'right'
      } else {
        this.type = 'left'
      }
      console.log(val)
      this.tab = val
    },
    getAssets() {
      Axios.GetAllAssets().then((res) => {
        const { code, data } = res
        if (code) {
          //console.log('总资产数据',data)
          this.funds = data
        }
      })
    },
  },
  created() {
    this.getAssets()
    this.timer = setInterval(() => {
      this.getAssets()
    }, 5000)
    if (Object.hasOwnProperty.call(this.$route.query, 'tab')) {
      this.tab = this.$route.query.tab / 1
      this.index = this.$route.query.index ? this.$route.query.index * 1 : 0
    }
  },
  activated() {
    clearInterval(this.timer)
    this.timer = setInterval(() => {
      this.getAssets()
    }, 5000)
    this.index = 0
  },
  deactivated() {
    clearInterval(this.timer)
    this.timer = null
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.timer = null
  }
}
         },
         getAssets() {
            Axios.GetAllAssets().then((res) => {
               const {
                  code,
                  data
               } = res
               if (code) {
                  //console.log('总资产数据',data)
                  this.funds = data
               }
            })
         },
      },
      created() {
         this.getAssets()
         this.getAssetszj()
         this.timer = setInterval(() => {
            this.getAssets()
         }, 5000)
         if (Object.hasOwnProperty.call(this.$route.query, 'tab')) {
            this.tab = this.$route.query.tab / 1
            this.index = this.$route.query.index ? this.$route.query.index * 1 : 0
         }
      },
      activated() {
         clearInterval(this.timer)
         this.timer = setInterval(() => {
            this.getAssets()
         }, 5000)
         this.index = 0
      },
      deactivated() {
         clearInterval(this.timer)
         this.timer = null
      },
      beforeDestroy() {
         clearInterval(this.timer)
         this.timer = null
      }
   }
</script>

<style lang="scss" scoped>
.assetsCenter {
  width: 100%;
  box-sizing: border-box;
}
   .tabBackground {
      background: white;
   }

.active_color {
  @include themify() {
    border-bottom: 5px solid themed("color_main") !important;
  }
   .button {
      border: 1px solid rgb(25, 118, 210);
      background: white !important;
      border-radius: 3px;
      height: 60px;
      color: rgb(25, 118, 210) !important;
   }

  border-radius: 2.208px;
}
   .right-clock {
      position: absolute;
      top: 0;
      right: -3px;
   }

.left-enter-active,
.left-leave-active,
.right-enter-active,
.right-leave-active {
  will-change: transform;
  transition: all 500ms;
}
   .total_wrap {
      margin-top: 44px;
   }

.left-leave-active,
.right-leave-active {
  display: none;
}
   .asset-title-box {
      margin: 40px 0;
   }

.left-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
   .btn-box {
      margin-top: 44px;
   }

.left-leave {
  opacity: 0;
  transform: translate3d(100%, 0, 0)
}
   .btn-box>div {
      width: 234px;
      padding: 20px 15px;
      box-sizing: border-box;
      text-align: center;
      border-radius: 8.8px;
      font-size: 26.5px;
      display: flex;
      justify-content: center;
      align-items: center;

.right-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
      .word-wrap {
         display: flex;
         align-items: center;
         justify-content: center;

.right-leave {
  opacity: 0;
  transform: translate3d(-100%, 0, 0)
}
</style>
         img {
            width: 40px;
            height: 40px;
            margin-right: 22px;
         }

         span {
            font-size: 26.5px;
         }
      }
   }

   .mr60 {
      margin-right: 60px;
   }

   .divider-line {
      border-bottom: 1px solid #E5E7ED;
      padding-bottom: 80px;
   }

   .assets-content-title {
      margin-top: 60px;
      margin-bottom: 55px;
   }

   .assets-list {
      margin-bottom: 35px;
   }

   .assets-list>div {
      display: flex;
   }

   .assets-list>div:nth-child(2) div:nth-child(1) {
      margin-bottom: 16px;
      font-size: 30px;
      font-weight: 700;
   }

   .symbol-name {
      margin-left: 17px;
      //margin-top:10px;
   }

   .assetsCenter {
      width: 100%;
      box-sizing: border-box;
   }

   .active_color {
      @include themify() {
         border-bottom: 5px solid themed("color_main") !important;
      }

      border-radius: 2.208px;
   }

   .left-enter-active,
   .left-leave-active,
   .right-enter-active,
   .right-leave-active {
      will-change: transform;
      transition: all 500ms;
   }

   .left-leave-active,
   .right-leave-active {
      display: none;
   }

   .left-enter {
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
   }

   .left-leave {
      opacity: 0;
      transform: translate3d(100%, 0, 0)
   }

   .right-enter {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
   }

   .right-leave {
      opacity: 0;
      transform: translate3d(-100%, 0, 0)
   }
</style>