1
jhzh
2025-04-01 4d2ee4be461972f828b71fd7753f472297c44fb6
1
6 files modified
570 ■■■■■ changed files
src/API/assets.js 10 ●●●●● patch | view | raw | blame | history
src/components/assetsCenter/assets.vue 30 ●●●●● patch | view | raw | blame | history
src/components/assetsCenter/overview.vue 25 ●●●●● patch | view | raw | blame | history
src/page/assetsCenter/index.vue 498 ●●●● patch | view | raw | blame | history
src/page/transfer.vue 2 ●●● patch | view | raw | blame | history
src/request/http.js 5 ●●●●● patch | view | raw | blame | history
src/API/assets.js
@@ -16,5 +16,13 @@
        isLoading: false
    }, params)
};
const GetWalletzj = () => {
    return httpJson({
        url: "api/walletGrther!get.action",
        method: "get",
        isLoading: false
    })
};
export default { GetAllAssets, GetWallet }
export default { GetAllAssets, GetWallet , GetWalletzj }
src/components/assetsCenter/assets.vue
@@ -53,38 +53,9 @@
           style="margin-bottom: 0;border-bottom: #f1f1f1 2px solid;padding: 10px" :key="index">
        <div class="flex justify-between">
          <div class="flex items-center">
            <!--            <img :src="item.symbol-->
            <!--              ? `${HOST_URL}/symbol/${item.symbol}.png`-->
            <!--              : require('@/assets/loading-default.png')-->
            <!--              " class="w-72 h-72 rounded-full" />-->
            <div class="symbol-name " style="color: rgb(25, 118, 210,0.8);font-size:18px;font-weight: bold">
              {{ item.symbol.toUpperCase() }}
              <!--              /USDT-->
            </div>
          </div>
          <div class="flex-col font-30 text-right" v-if="!eyetel">
            <!--            <div class="textColor" v-if="item.symbol == 'btc'">-->
            <!--              {{ item.volume.toFixed(8) || '0.0' }}-->
            <!--            </div>-->
            <!--            <div class="textColor" v-else-if="item.symbol == 'eth'">-->
            <!--              {{ item.volume.toFixed(8) || '0.0' }}-->
            <!--            </div>-->
            <!--            <div class="textColor" v-else-if="item.symbol == 'usdt'">-->
            <!--              {{ item.volume.toFixed(2) || '0.0' }}-->
            <!--            </div>-->
            <!--            <div class="textColor" v-else>-->
            <!--              {{ item.volume.toFixed(8) || '0.0' }}-->
            <!--            </div>-->
            <!--            <div class="text-grey font-30 font-400 mb-0">-->
            <!--              ≈{{ currency.currency_symbol }}-->
            <!--              {{ item.usdt ? item.usdt.toFixed(2) : '0.0' }}-->
            <!--            </div>-->
          </div>
          <div class="flex-col font-30 text-right" v-else>
            <!--            <div class="textColor">******** USDT</div>-->
            <!--            <div class="text-grey">-->
            <!--              ≈{{ currency.currency_symbol }} ********-->
            <!--            </div>-->
          </div>
        </div>
        <div class="flex justify-between mt-40" style="margin: 15px 10px 0 10px;font-weight: normal">
@@ -213,7 +184,6 @@
    compare(p, type) {
      //这是比较函数
      return function (m, n) {
        console.log(m);
        var a = m[p];
        var b = n[p];
        if (a == b) {
src/components/assetsCenter/overview.vue
@@ -25,18 +25,28 @@
      <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="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="withdrawBtn">
        <div class="word-wrap">
<!--          <img :src="require(`@/assets/theme/${theme}/image/assets/down.png`)" alt="">-->
          <span>{{ $t('提币') }}</span>
        </div>
      </div>
      </div> -->
      <div class="font-25 button" @click="goRouter('/financialHistory?type=0')">
        <div class="word-wrap">
          <!--          <img :src="require(`@/assets/theme/${theme}/image/assets/l_r.png`)" alt="">-->
          <span>{{ $t('货币理财') }}</span>
        </div>
      </div>
      <div class="font-25 button" @click="goRouter('/financialHistory?type=1')">
        <div class="word-wrap">
          <!--          <img :src="require(`@/assets/theme/${theme}/image/assets/l_r.png`)" alt="">-->
          <span>{{ $t('矿池理财') }}</span>
        </div>
      </div>
      <div class="font-25 button" @click="goRouter('/exchange/exchangePage')">
        <div class="word-wrap">
<!--          <img :src="require(`@/assets/theme/${theme}/image/assets/l_r.png`)" alt="">-->
@@ -44,26 +54,23 @@
        </div>
      </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="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('/financialHistory?type=0')">
        <div class="word-wrap">
          <!--          <img :src="require(`@/assets/theme/${theme}/image/assets/l_r.png`)" alt="">-->
          <span>{{ $t('货币理财') }}</span>
        </div>
      </div>
      <div class="font-25 button" @click="goRouter('/financialHistory?type=1')">
        <div class="word-wrap">
          <!--          <img :src="require(`@/assets/theme/${theme}/image/assets/l_r.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> -->
    <!--       <div class="divider-line"></div>-->
    <div style="border-bottom: #f1f1f1 1px solid">
<!--      <div class="assets-content-title font-35 titleColor">{{ $t('投资组合') }}</div>-->
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>
src/page/transfer.vue
@@ -81,7 +81,7 @@
                fromTo:1,
                typeindex:0,
                amount:'',
                bzlist:['USDT','BTC','ETH','USDC'],
                bzlist:['USDT','BTC','ETH'],
                usdcMoney:'',
                toptitle:this.$t('资金')+this.$t('账户'),
                buttitle:this.$t('交易')+this.$t('账户'),
src/request/http.js
@@ -89,11 +89,6 @@
const createAxios = (axiosType, { url, method, isLoading }, params) => {
  const axios = axiosType(isLoading);
  if (method.toLocaleLowerCase() === "get") {
    // var token;
    // if(local.get('token')){
    //     token=local.get('token')
    //     console.log('token',token)
    // }
    return axios.request({
      url,
      params: params ? params : {},