From cb38e5c2945684b383a1d4cbfcaf9e646610fb9a Mon Sep 17 00:00:00 2001
From: dcc <dcc@163.com>
Date: Thu, 09 May 2024 17:02:14 +0800
Subject: [PATCH] 首页的 熱門幣種数据的渲染
---
src/page/home.vue | 144 +++++++++++++++++++++++++++++++-----------------
1 files changed, 93 insertions(+), 51 deletions(-)
diff --git a/src/page/home.vue b/src/page/home.vue
index eb88661..b9716d2 100644
--- a/src/page/home.vue
+++ b/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;
--
Gitblit v1.9.3