首页的 熱門幣種数据的渲染

dcc

2024-05-09 cb38e5c2945684b383a1d4cbfcaf9e646610fb9a

 src/components/contract-header/index.vue

@@ -1,241 +1,272 @@
<template>
    <!-- 永续合约，交割合约公共头部 -->
    <div>
        <div class="contract-header">
            <div class="pl-30 pr-30">
                <div class="flex justify-center pt-45 before">
                    <div class="flex items-center justify-center ">
                        <!-- <img :src="require(`@/assets/theme/${theme}/image/icon_back.png`)" class="w-35 h-35 back" alt=""
                            @click="$router.push(`/trendDetails/${symbol}`)"> -->
                        <img :src="require(`@/assets/theme/${theme}/image/convert.png`)" alt="convert-img" class="w-35 h-35"
                            @click="onSidebar">
                        <div class="flex pl-21 textColor" @click="onSidebar">
                            <div class="font-35">{{ symbol.toUpperCase() || '--' }}/USDT</div>
                            <div class="ml-15">{{ title }}</div>
                        </div>
                        <div class="pl-30 w-160" :class="{ 'text-green': range > 0, 'text-red': range <= 0 }">{{ range > 0 ?
                            '+' : '' }}{{ range || '--' }}%</div>
                        <!-- <img src="@/assets/image/kline.png" class="w-44 h-44 right" alt="" @click="$router.push(`/trendDetails/${symbol}`)"> -->
                    </div>
                    <!-- <div class="flex items-center">
                        <img src="../../assets/image/public/k-line.png" alt="line-img" class="w-38 h-35"
                            @click="jump" />
                    </div> -->
                </div>
                <div class="flex justify-between  pt-34">
                    <button class="tabBtn w-368 h-74 lh-74 border-none  rounded"
                        :class="selectIndex == 1 ? 'select-active' : 'no-select'" @click="changeTab(1)">
                        {{ $t('永续合约') }}</button>
                    <button class="tabBtn w-368 h-74 lh-74 border-none  rounded"
                        :class="selectIndex == 2 ? 'select-active' : 'no-select'" @click="changeTab(2)">
                        {{ $t('交割合约') }}</button>
                </div>
  <!-- 永续合约，交割合约公共头部 -->
  <div>
    <div class="contract-header">
      <div class="pl-30 pr-30">
        <div class="flex justify-between pt-64 pb-64">
          <div class="flex justify-between items-center">
            <div class="w-30 h-30" @click="$router.push('/')">
              <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAhCAYAAADZPosTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGXSURBVHgBrdZNTsJAFAfw92asbj0CR4AbyAnUEwAbDSsl6gKNocYUEhXqxhDQBDiBegK4gRyBrTu3QDrPGTQsYNqZKfxXpY/80mnn4yFsED/s7e/RvKCupxh9+pXyBCFlGmE7Q4INATDzf2syY16OQ4poMJV9HkXfDBwThC9ZDbaM05AVhsIbqqfRlOWQo7w1aINZfxRbTP0wvsN6660gsS8bTAVNGJDox5TXsEQwESMYz7gnsdLPakk75Eare5YG04L11muNCJ7TYGugwoDI1/0RgT5MmMqODSbvD6qXp0WwCNpg15bYArx/6hxxxPdtYCqMEWS1FsDIFVuAAsRIV5Dv4qDR7ITgCt5elUck6E5XJMDzoNntgUOWKyV47PjIsKaHoX9zcVICF9CEgpqHbLdkmodraznxSRHGc0ye3NrNYRM0drcJmu0iAu/Fo9Hx6taVCJpQcN0P06J2Z8qDPFO43Zlif+pZom7nshH1cs69TUwb8hdBFedWpKqGxUReTp6Jrr7l7suhFYlDgfihup6iN1Cr5xeGRwOFSSu2JAAAAABJRU5ErkJggg=="
                   alt="" class="w-14 h-27"></div>
            <div
                class="wallet-background w-202 h-65 lh-50 ml-30 flex items-center pl-13 pr-22 rounded">
              <img
                  src="data:image/png;base64,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"
                  alt="" class="w-30 h-30">
              <div class="font-25 pl-14">{{total}}</div>
            </div>
          </div>
          <div>
            <button class="bg-blue text-white w-150 h-50 lh-50 border-none mr-17 rounded" @click="$router.push('/recharge/rechargeList')"> {{$t('充币')}}
            </button>
            <button class="bg-dark-grey text-white w-150 h-50 lh-50 border-none rounded" @click="$router.push('/withdraw/withdrawPage')"> {{$t('提币')}}</button>
          </div>
        </div>
        <!-- 左侧边弹出菜单 -->
        <van-popup class="popup" round v-model="show" close-icon-position="top-left" position="left" @closed="onClose">
            <div class="pl-42 border-b-color pt-48 pb-48">
                <div class="textColor">
                    <span class="font-bold font-45 mr-12">{{ title }} {{ $t('合约') }}</span>
                    <span class="font-30">/ USDT</span>
                </div>
        <div class="flex justify-center before">
          <div class="flex items-center justify-center ">
            <!-- <img :src="require(`@/assets/theme/${theme}/image/icon_back.png`)" class="w-35 h-35 back" alt=""
                @click="$router.push(`/trendDetails/${symbol}`)"> -->
            <img :src="require(`@/assets/theme/${theme}/image/convert.png`)" alt="convert-img" class="w-35 h-35"
                 @click="onSidebar">
            <div class="flex pl-21 textColor" @click="onSidebar">
              <div class="font-35">{{ symbol.toUpperCase() || '--' }}/USDT</div>
              <div class="ml-15">{{ title }}</div>
            </div>
            <div class="pl-42 pr-40">
                <div class="flex justify-between mb-42 mt-53">
                    <div class="flex items-center text-grey">
                        <div class="mr-12">{{ $t('名称') }}</div>
                    </div>
                    <div class="flex text-grey">
                        <div class="flex items-center">
                            <div class="">{{ $t('最新价格') }}</div>
                        </div>
                        <div class="flex items-center">
                            <div class="mr-12">/24H{{ $t('涨跌') }}</div>
                        </div>
                    </div>
                </div>
                <div class="flex justify-between mb-50" v-for="item in list" :key="item.name" @click="onRoute(item)">
                    <div>
                        <div class="textColor">{{ item.name }}</div>
                        <div class="text-grey mt-10">{{ selectIndex == 1 ? $t('永续') : $t('交割') }}</div>
                    </div>
                    <div class="text-right">
                        <div class="textColor">{{ item.close }}</div>
                        <div class="mt-10" :class="item.change_ratio > 0 ? 'text-green' : 'text-red'">
                            {{ item.change_ratio || (item.change_ratio === 0 ? 0 : '--') }}%
                        </div>
                    </div>
                </div>
            <div class="pl-30 w-160" :class="{ 'text-green': range > 0, 'text-red': range <= 0 }">{{
                range > 0 ?
                    '+' : ''
              }}{{ range || '--' }}%
            </div>
        </van-popup>
            <!-- <img src="@/assets/image/kline.png" class="w-44 h-44 right" alt="" @click="$router.push(`/trendDetails/${symbol}`)"> -->
          </div>
          <!-- <div class="flex items-center">
              <img src="../../assets/image/public/k-line.png" alt="line-img" class="w-38 h-35"
                  @click="jump" />
          </div> -->
        </div>
        <div class="flex justify-between  pt-34">
          <button class="tabBtn w-368 h-74 lh-74 border-none  rounded"
                  :class="selectIndex == 1 ? 'select-active' : 'no-select'" @click="changeTab(1)">
            {{ $t('永续合约') }}
          </button>
          <button class="tabBtn w-368 h-74 lh-74 border-none  rounded"
                  :class="selectIndex == 2 ? 'select-active' : 'no-select'" @click="changeTab(2)">
            {{ $t('交割合约') }}
          </button>
        </div>
      </div>
    </div>
    <!-- 左侧边弹出菜单 -->
    <van-popup class="popup" round v-model="show" close-icon-position="top-left" position="left" @closed="onClose">
      <div class="pl-42 border-b-color pt-48 pb-48">
        <div class="textColor">
          <span class="font-bold font-45 mr-12">{{ title }} {{ $t('合约') }}</span>
          <span class="font-30">/ USDT</span>
        </div>
      </div>
      <div class="pl-42 pr-40">
        <div class="flex justify-between mb-42 mt-53">
          <div class="flex items-center text-grey">
            <div class="mr-12">{{ $t('名称') }}</div>
          </div>
          <div class="flex text-grey">
            <div class="flex items-center">
              <div class="">{{ $t('最新价格') }}</div>
            </div>
            <div class="flex items-center">
              <div class="mr-12">/24H{{ $t('涨跌') }}</div>
            </div>
          </div>
        </div>
        <div class="flex justify-between mb-50" v-for="item in list" :key="item.name" @click="onRoute(item)">
          <div>
            <div class="textColor">{{ item.name }}</div>
            <div class="text-grey mt-10">{{ selectIndex == 1 ? $t('永续') : $t('交割') }}</div>
          </div>
          <div class="text-right">
            <div class="textColor">{{ item.close }}</div>
            <div class="mt-10" :class="item.change_ratio > 0 ? 'text-green' : 'text-red'">
              {{ item.change_ratio || (item.change_ratio === 0 ? 0 : '--') }}%
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Popup } from "vant";
import { mapGetters } from "vuex";
import { _getHomeList } from "@/API/home.api";
import { setStorage } from '@/utils/utis'
export default {
    name: "contractHeader",
    props: {
        backFunc: {
            type: Function,
            default: null
        },
        balance: { // 余额
            type: [String, Number],
            default: 0.00
        },
        // title:{
        //     type:String,
        //     default:''
        // },
        symbol: {
            type: String,
            default: ''
        },
        range: {
            type: String,
            defalult: ''
        },
        selectIndex: {
            type: [String, Number],
            defalult: ''
        },
    },
    components: {
        [Popup.name]: Popup,
    },
    computed: {
        ...mapGetters({
            coinList: 'home/coinList',
            theme: 'home/theme'
        }),
        title() {
            return [this.$t('永续'), this.$t('交割')][this.selectIndex - 1]
        }
    },
    data() {
        return {
            //   selectIndex2:this.selectIndex,
            show: false,
            timeout: null,
            // title: '',
            list: [
                // { name:"BTC/USDT",close:"22042.28",change_ratio:"2.21"},
                // { name:"XTZ/USDT",close:"1.568",change_ratio:"-7.1"},
                // { name:"ADA/USDT",close:"0.493085",change_ratio:"-4.08"},
            ]
        }
    },
    created() {
        // this.coins = this.coinList.map(item => item.symbol)
        // console.log('this.coins', this.coins)
    },
    methods: {
        onRoute(item) {
            if (this.$route.params.symbol !== item.symbol) {
                this.$router.push(`/perpetualContract/${item.symbol}`)
                this.$emit('update-coin', item.symbol)
                setStorage('symbol', item.symbol)
                this.onClose()
                this.$forceUpdate()
            }
            this.show = false
        },
        onSidebar() { // 侧边栏打开
            console.log(this.userInfo)
            this.coins = this.coinList.map(item => item.symbol)
            this.show = true
            this.fetchList()
        },
        fetchList() { // 获取行情
            _getHomeList(this.coins.join(',')).then(list => {
                // console.log(list)
                this.list = list
                if (this.timeout) {
                    clearTimeout(this.timeout)
                    this.timeout = null
                }
                this.timeout = setTimeout(() => {
                    this.fetchList()
                }, 1000)
            })
        },
        onClose() {
            if (this.timeout) {
                clearTimeout(this.timeout)
                this.timeout = null
            }
        },
        jump() {
            this.$router.push(`/trendDetails/${this.symbol}`)
        },
        changeTab(index) {
            this.$emit('tab', index)
            // this.selectIndex2 = index;
        },
import {Popup} from "vant";
import {mapGetters} from "vuex";
import {_getHomeList} from "@/API/home.api";
import {getStorage, setStorage} from '@/utils/utis'

export default {
  name: "contractHeader",
  props: {
    backFunc: {
      type: Function,
      default: null
    },
    balance: { // 余额
      type: [String, Number],
      default: 0.00
    },
    // title:{
    //     type:String,
    //     default:''
    // },
    symbol: {
      type: String,
      default: ''
    },
    range: {
      type: String,
      defalult: ''
    },
    selectIndex: {
      type: [String, Number],
      defalult: ''
    },
  },
  components: {
    [Popup.name]: Popup,
  },
  computed: {
    ...mapGetters({
      coinList: 'home/coinList',
      theme: 'home/theme'
    }),
    title() {
      return [this.$t('永续'), this.$t('交割')][this.selectIndex - 1]
    }
  },
  data() {
    return {
      //   selectIndex2:this.selectIndex,
      show: false,
      timeout: null,
      total: Number(getStorage('funds').total).toFixed(2) || '--',
      // title: '',
      list: [
        // { name:"BTC/USDT",close:"22042.28",change_ratio:"2.21"},
        // { name:"XTZ/USDT",close:"1.568",change_ratio:"-7.1"},
        // { name:"ADA/USDT",close:"0.493085",change_ratio:"-4.08"},
      ]
    }
  },
  created() {
    // this.coins = this.coinList.map(item => item.symbol)
    // console.log('this.coins', this.coins)

  },
  methods: {
    onRoute(item) {
      if (this.$route.params.symbol !== item.symbol) {
        this.$router.push(`/perpetualContract/${item.symbol}`)
        this.$emit('update-coin', item.symbol)
        setStorage('symbol', item.symbol)
        this.onClose()
        this.$forceUpdate()
      }
      this.show = false
    },
    onSidebar() { // 侧边栏打开
      console.log(this.userInfo)
      this.coins = this.coinList.map(item => item.symbol)
      this.show = true
      this.fetchList()
    },
    fetchList() { // 获取行情
      _getHomeList(this.coins.join(',')).then(list => {
        // console.log(list)
        this.list = list
        if (this.timeout) {
          clearTimeout(this.timeout)
          this.timeout = null
        }
        this.timeout = setTimeout(() => {
          this.fetchList()
        }, 1000)
      })
    },
    onClose() {
      if (this.timeout) {
        clearTimeout(this.timeout)
        this.timeout = null
      }
    },
    jump() {
      this.$router.push(`/trendDetails/${this.symbol}`)
    },
    changeTab(index) {
      this.$emit('tab', index)
      // this.selectIndex2 = index;
    },

  }
}

</script>

<style lang="scss" scoped>
.before {
    position: relative;
  position: relative;

    .back {
        position: absolute;
        left: 0;
    }
  .back {
    position: absolute;
    left: 0;
  }

    .right {
        position: absolute;
        right: 0;
    }
  .right {
    position: absolute;
    right: 0;
  }
}


.wallet-background {
    background-color: #E8E8E8;
  background-color: #E8E8E8;
}

.tabBtn {
    // border-radius: 8px;
    border: 1px solid #909090;
    color: #868D9A;
    background: transparent;
  // border-radius: 8px;
  border: 1px solid #909090;
  color: #868D9A;
  background: transparent;
}

.select-active {
    background-color: transparent;
  background-color: transparent;

    color: white !important;
  color: white !important;

    @include themify() {
        background: themed("color_main");
    }
  @include themify() {
    background: themed("color_main");
  }

    border: none;
  border: none;
}

.no-select {}
.no-select {
}

// 弹出层样式
.popup {
    height: 100%;
    width: 670px;
  height: 100%;
  width: 670px;

    @include themify() {
        background: themed("main_background");
    }
  @include themify() {
    background: themed("main_background");
  }
}

.border-b-color {
    @include themify() {
        border-bottom: 1px solid themed("border_color");
    }
  @include themify() {
    border-bottom: 1px solid themed("border_color");
  }
}
.w-202 {
  width: 12.625rem;
}
</style>