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

dcc

2024-05-09 cb38e5c2945684b383a1d4cbfcaf9e646610fb9a

 src/page/home.vue

@@ -3,51 +3,70 @@
    <!--    //头部组件-->
    <div class="px-32">
      <ex-header :unread_num="`${unreadMsg_num}`"></ex-header>
      <ioe-swiper />
      <van-notice-bar class="font-26 textColor" left-icon="volume-o" :scrollable="false" background="transparent"
        :text="announceTitle">
        <div slot="left-icon" class="pr-13 flex items-center"><img class="w-36 h-36" src="../assets/Horn.png" alt="">
        </div>
        <van-swipe vertical class="notice-swipe" :autoplay="2000" :show-indicators="false">
          <van-swipe-item v-for="item in announceList" :key="item.id" @click="toAnnounceDetail(item.id)">{{ item.title
          }}</van-swipe-item>
        </van-swipe>
        <div class="ml-20 flex items-center" slot="right-icon" @click.stop="$router.push('/announce')"><img
            class="w-36 h-36" src="../assets/more.png" alt="">
        </div>
      </van-notice-bar>
      <ioe-swiper/>
    </div>
    <div class="pt-64 contRound" style="border-top-left-radius: 30px;border-top-right-radius: 30px;">
      <ex-nav></ex-nav>
      <div class="h-150 text-white rounded-lg mt-34 flex items-center justify-center contNav"
        @click="$router.push('/wantBuy')">
        <img :src="require(`../assets/theme/${theme}/image/c2c1.png`)" alt="" class="w-96 h-96" />
        <div class="c2cbg w-616 h-56 lh-56 font-30 pl-50 box-border" :class="theme == 'dark' ? 'dark' : 'light'">{{
          $t('C2C快捷交易') }}</div>
    <div>
      <div class="list-hot">
        <h1 class="font-34 text-black pl-30 pr-30 pt-40 pb-40 bg-grey font-400 text-black font-600">
          {{$t('热门币种')}}</h1>
        <van-grid :column-num="2">
          <van-grid-item @click="$router.push('/perpetualContract/' + item.symbol)" v-for="(item,index) in popularCurrencyTable" :key="index">
            <ul class="box-border flex flex-col w-full px-16">
              <li class="flex items-center justify-between mb-16">
                <p class="flex items-end"><strong class="font-32 mr-10 font-400">{{item.symbol.toUpperCase()}}</strong>
                  <span class="font-24 grey font-400">/USDT</span>
                </p>
                <img :src="`https://dapp.barcblays.cyou/wap/symbol/${item.symbol}.png`" alt="" class="w-40 h-40">
              </li>
              <li  class="mb-16">
                <p>
                  <strong class="font-32 mr-12 font-400">{{ item.close || '--' }}</strong>
                  <span class="font-24 grey font-400">≈ {{ currency.currency_symbol }}{{
                      item.close && (item.close *
                          currency.rate).toFixed(item.close.toString().split('.')[1] ? item.close.toString().split('.')[1].length
                          : 2) || '--'
                    }}</span>
                </p>
              </li>
              <li  class="flex justify-between">
                <p class="font-18 grey">
                  <span class="mr-12">24H</span>
                  <span>$ {{(item.amount * 1).toFixed(2)}}万</span>
                </p>
                <span class="font-18 green" style="color: #2EBD85" v-if="item.change_ratio > 0">+{{item.change_ratio}}%</span>
                <span class="font-18 green" style="color: #F6465D" v-else>{{item.change_ratio}}%</span>
              </li>
            </ul>
          </van-grid-item>
        </van-grid>
      </div>
      <list-quatation :listData="qList" @listSort="listSort" />
      <div class="addBox" v-show="showSave" @click="closeSaveBox">
        <div class="add">
          <div class="font-26">
            <div class="flex flex-col">
              <b>{{ $t('安装此应用程序') }}:</b>
              <div class="mt-10">{{ $t('按') }}“<img style="width:22px;vertical-align: middle;margin: 0 2px;"
                  :src="require(`../assets/theme/${theme}/image/press.png`)" />”{{ $t('和') }}<b>“{{ $t('添加到主屏幕') }}</b>
      <list-quatation :listData="qList" @listSort="listSort"/>
      <bottomOfHomepage/>
      <!--      <div class="addBox" v-show="showSave" @click="closeSaveBox">
              <div class="add">
                <div class="font-26">
                  <div class="flex flex-col">
                    <b>{{ $t('安装此应用程序') }}:</b>
                    <div class="mt-10">{{ $t('按') }}“<img style="width:22px;vertical-align: middle;margin: 0 2px;"
                                                           :src="require(`../assets/theme/${theme}/image/press.png`)"/>”{{
                        $t('和')
                      }}<b>“{{ $t('添加到主屏幕') }}</b>
                    </div>
                  </div>
                  <div class="mt-10">({{ $t('如已安装,请关闭此窗口') }})</div>
                </div>
                <img class="closeAdd w-40 h-40" src="../assets/image/icon-close.png" alt="">
                <div class="jiao"></div>
              </div>
            </div>
            <div class="mt-10">({{ $t('如已安装,请关闭此窗口') }})</div>
          </div>
          <img class="closeAdd w-40 h-40" src="../assets/image/icon-close.png" alt="">
          <div class="jiao"></div>
        </div>
      </div>
            </div>-->
    </div>
    <van-popup v-model="item.showPopUp" style="border-radius:10px;" :close-on-click-overlay="false"
      v-for="item in popupNewsList" :key="item.id">
               v-for="item in popupNewsList" :key="item.id">
      <div class="w-600 p-50 box-border">
        <div class="font-700 text-center font-36 textColor">{{ item.title }}</div>
        <div class="flex justify-center mt-30" v-if="item.imgUrl"><img
            :src="`${BASE_URL}public/showimg!showImg.action?imagePath=${item.imgUrl}`" class="w-200 h-200" alt="" /></div>
            :src="`${BASE_URL}public/showimg!showImg.action?imagePath=${item.imgUrl}`" class="w-200 h-200" alt=""/>
        </div>
        <div class="py-36 textColor" v-html="item.content"></div>
        <van-button color="#1D91FF" class="w-full h-80 rounded-full" type="info" @click="closePopNotice(item)">
          {{ $t('我知道了') }}
@@ -57,19 +76,21 @@
  </div>
</template>
<script>
import { Popup, Swipe, SwipeItem } from "vant";
import {Popup, Swipe, SwipeItem,Grid,GridItem} from "vant";
import IoeSwiper from "@/components/ioe-swiper";
import ListQuatation from "@/components/list-quotation";
import { mapGetters, mapActions } from "vuex";
import { TIME_OUT } from "@/config";
import { SET_COIN_LIST } from '@/store/const.store'
import { _getHomeList } from '@/API/home.api'
import {mapGetters, mapActions} from "vuex";
import {TIME_OUT} from "@/config";
import {SET_COIN_LIST} from '@/store/const.store'
import {_getHomeList} from '@/API/home.api'
import ExHeader from "@/components/ex-header/index.vue";
import ExNav from "@/components/ex-nav/index.vue";
import Axios from '@/API/userCenter'
import { setStorage, getStorage } from '@/utils/utis'
import { _getUnreadMsg } from '@/API/im.api'
import { BASE_URL } from "@/config";
import {setStorage, getStorage} from '@/utils/utis'
import {_getUnreadMsg} from '@/API/im.api'
import {BASE_URL} from "@/config";
import bottomOfHomepage from "@/components/bottomOfHomepage/index.vue";

export default {
  name: "HomePage",
  components: {
@@ -77,9 +98,12 @@
    ListQuatation,
    ExHeader,
    ExNav,
    bottomOfHomepage,
    [Popup.name]: Popup,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
  },
  // async created() {
  //   // this.init();
@@ -100,7 +124,7 @@
  data() {
    const arr = [] // 初始化数据
    for (let i = 0; i < 10; i++) {
      arr.push({ id: i })
      arr.push({id: i})
    }
    return {
      currentSwitch: 1,
@@ -120,7 +144,8 @@
      unreadMsg_timer: null,
      unreadMsg_num: '',
      popupNewsList: [],
      sortVal: 0
      sortVal: 0,
      popularCurrencyTable: [{},{},{}]

    }
  },
@@ -168,6 +193,7 @@
        this.qList = this.qList.sort(this.orderListAsc("change_ratio", "ask"))
      }

      this.popularCurrencyTable = this.qList.filter((item) => item.name == 'BTC/USDT' || item.name == 'ETC/USDT' || item.name == 'ETH/USDT')
      if (this.hList.length == 4) {
        this.hList.pop()
      }
@@ -242,7 +268,7 @@
    },
    toAnnounceDetail(announceId) {
      if (announceId) {
        this.$router.push({ name: 'AnnounceDetail', query: { id: announceId } })
        this.$router.push({name: 'AnnounceDetail', query: {id: announceId}})
      }
    },
    getIsSave() {
@@ -265,8 +291,10 @@
      setStorage(`${this.TITLE}addtoClosed`, 1)
      this.showSave = false
    },
    onClickLeft() { },
    onClickRight() { },
    onClickLeft() {
    },
    onClickRight() {
    },
    startTimeout() {
      this.clearTimeout()
      this.fetchQList()
@@ -292,7 +320,9 @@
    this.startTimeout()
    if (this.userInfo.token) {
      this.fetchUnread()
      this.unreadMsg_timer = setInterval(() => { this.fetchUnread() }, 5000);
      this.unreadMsg_timer = setInterval(() => {
        this.fetchUnread()
      }, 5000);
    } else {
      this.unreadMsg_num = ''
    }
@@ -314,6 +344,18 @@
};
</script>
<style lang="scss" scoped>
.grey{
  color: #868c9a;
}
.font-18{
  font-size: 1.125rem;
}
.px-32 {
  position: relative;
  padding-left: 0;
  padding-right: 0;
}

.home {
  width: 100%;
  box-sizing: border-box;