<template>
|
<div class="home_page mainBackground textColor">
|
|
<Head @search="onSearch"></Head>
|
<!-- <div class="home_logo flex justify-center"><img src="@/assets/imgs/home/home_logo.png" alt=""></div> -->
|
|
<!-- <van-swipe class="home_logo" :autoplay="3000" indicator-color="white">
|
<van-swipe-item><img src="@/assets/imgs/home/Slider-1.jpg" alt=""></van-swipe-item>
|
<van-swipe-item><img src="@/assets/imgs/home/Slider-2.jpg" alt=""></van-swipe-item>
|
<van-swipe-item><img src="@/assets/imgs/home/Slider-3.jpg" alt=""></van-swipe-item>
|
</van-swipe> -->
|
|
<!-- <video autoplay loop muted playsinline class="home_logo">
|
<source src="@/assets/video/home_1.mp4" type="video/mp4">
|
</video> -->
|
|
<!-- <div class="text-center font-bold mt-8 logo_text">{{ $t('复制财富，從此刻開始') }}</div>
|
<div class="text-center mt-2 logo_text_small">{{ $t('超6000種熱門交易類別，立即註冊领取5000USDT') }}!</div> -->
|
|
|
<div class="login_buts flex justify-between pl-10 pr-10 pt-10"
|
v-if="!(userStore.userInfo && userStore.userInfo.token)">
|
<div class="login_but_z text-center" @click="toPage('/register')">{{ $t('register') }}</div>
|
<div class="login_but_d text-center" @click="toPage('/login')">{{ $t('登录') }}</div>
|
</div>
|
|
<div class="home_grid flex justify-start flex-wrap">
|
<div class="grid_item pt-10" v-for="value in tabbers" :key="value.key" @click="toPage(value.path)">
|
<div class="grid_item_img flex justify-center"><img :src="value.icon" alt=""></div>
|
<div class="text-center mt-2">{{ value.name }}</div>
|
</div>
|
</div>
|
|
<!-- 新闻 -->
|
<van-notice-bar class="font-26 mt-10 index_notice" background="#333" :scrollable="false" wrapable
|
color="#333333">
|
<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.uuid)">
|
<div class="flex justify-start items-center">
|
<img :src="item.imgUrl" alt="" class="notice_img mr-5">
|
<div class="notice_content">
|
<div>{{ item.startTime }}</div>
|
<div>{{ item.title }}</div>
|
</div>
|
</div>
|
</van-swipe-item>
|
</van-swipe>
|
</van-notice-bar>
|
|
<!-- <div class="flex justify-between mt-10">
|
<van-swipe class="home_swipe_1" :autoplay="2000">
|
<van-swipe-item v-for="value in swipe1" :key="value.key" class="flex justify-center items-center">
|
<img :src="value.img" alt="" class="swipe-item-img">
|
</van-swipe-item>
|
<template #indicator="{ active, total }">
|
<div class="custom-indicator"><span>{{ active + 1 }}</span>/{{ total }}</div>
|
</template>
|
</van-swipe>
|
|
<div style="width:24rem">
|
<van-swipe class="home_swipe_2" :autoplay="2000">
|
<van-swipe-item v-for="value in swipe2" :key="value.key" class="flex justify-center items-center">
|
<img :src="value.img" alt="" class="swipe-item-img">
|
</van-swipe-item>
|
<template #indicator="{ active, total }">
|
<div class="custom-indicator flex justify-center items-center">
|
<div v-for="value in total" :key="value" class="ml-1"
|
:class="active + 1 === value ? 'active' : ''">
|
</div>
|
</div>
|
</template>
|
</van-swipe>
|
|
<div class="purchase mt-7 font-bold flex justify-between items-center">
|
{{ $t('购买加密货币') }}
|
<van-icon name="arrow" />
|
</div>
|
</div>
|
</div> -->
|
|
<div id="cryptos" class="pt-10">
|
<list-quatation :listData="qList" :tabShow="false" :tabActive="2" />
|
</div>
|
|
<van-popup v-model:show="item.showPopUp" style="border-radius:10px;"
|
v-for="item in popupNewsList" :key="item.id">
|
<div class="w-350 p-20 box-border popup_news">
|
<div class="font-700 text-center font-28 textColor">{{ item.title }}</div>
|
<div class="flex justify-center mt-30" v-if="item.imgUrl"><img :src="`${item.imgUrl}`"
|
class="w-200 h-200" alt="" /></div>
|
<div class="py-10 textColor content-title" v-html="item.content"></div>
|
<van-button color="#1194F7" class="w-full h-40 rounded-full" type="info" @click="closePopNotice(item)">
|
{{ $t('我知道了') }}
|
</van-button>
|
</div>
|
</van-popup>
|
</div>
|
</template>
|
|
<script setup>
|
import Head from './components/head.vue'
|
import { useI18n } from "vue-i18n";
|
import { ref, computed, onBeforeUnmount } from 'vue';
|
import { useRouter } from 'vue-router';
|
import ListQuatation from "@/components/Transform/list-quotation/index.vue";
|
import { _getHomeList } from '@/service/cryptos.api'
|
import { _getNewsList1, _getPopupNews } from '@/service/user.api'
|
import { useStore } from "vuex";
|
import { TIME_OUT, customerServiceUrl } from "@/config";
|
import { useUserStore } from '@/store/user';
|
import { setStorage, getStorage } from '@/utils/index.js';
|
let catchSymbol = getStorage('symbol')
|
if (!catchSymbol) {
|
setStorage('symbol', 'btcusdt');
|
}
|
const userStore = useUserStore()
|
const { t } = useI18n()
|
const router = useRouter()
|
const store = useStore();
|
|
const tabbers = [
|
// { key: 1, name: t('跟单'), icon: new URL('@/assets/imgs/home/home_1.png', import.meta.url) },
|
// { key: 3, name: `C2C ${t('交易')}`, icon: new URL('@/assets/imgs/home/home_3.png', import.meta.url) },
|
// { key: 4, name: t('邀请好友'), icon: new URL('@/assets/imgs/home/home_4.png', import.meta.url) },
|
// { key: 5, name: t('合约'), icon: new URL('@/assets/imgs/home/home_5.png', import.meta.url), path: '/trade/index' },
|
// { key: 6, name: t('现货'), icon: new URL('@/assets/imgs/home/home_5.png', import.meta.url), path: '/cryptos/trade/btcusdt' },
|
{ key: 2, name: t('储值'), icon: new URL('@/assets/imgs/home/home_2.png', import.meta.url), path: '/cryptos/recharge/rechargeList?isForeign=true' },
|
// { key: 7, name: t('提现'), icon: new URL('@/assets/imgs/home/home_6.png', import.meta.url), path: '/exchange/withdraw-usdt' }
|
{ key: 7, name: t('提现'), icon: new URL('@/assets/imgs/home/home_6.png', import.meta.url), path: '/cryptos/Withdraw/withdrawPage' },
|
// { key: 8, name: t('卡券中心'), icon: new URL('@/assets/imgs/home/home_7.png', import.meta.url) },
|
// { key: 9, name: t('闪兑'), icon: new URL('@/assets/imgs/home/home_8.png', import.meta.url), path: '/cryptos/exchangePage' },
|
// { key: 9, name: t('划转'), icon: new URL('@/assets/imgs/home/home_8.png', import.meta.url), path: '/my/transfer' },
|
// { key: 10, name: t('更多'), icon: new URL('@/assets/imgs/home/home_9.png', import.meta.url) },
|
// { key: 12, name: "C2C", icon: new URL('@/assets/imgs/home/home_1.png', import.meta.url), path: '/wantBuy' },
|
// { key: 13, name: t('质押'), icon: new URL('@/assets/imgs/home/home_1.png', import.meta.url), path: '' },
|
{ key: 14, name: t('onLineService'), icon: new URL('@/assets/imgs/home/home_10.png', import.meta.url), path: '/customerService' },
|
// { key: 15, name: 'DXCM PDF', icon: new URL('@/assets/imgs/home/home_1.png', import.meta.url), path: 'https://www.dexm-whitepaper.com/' },
|
{ key: 11, name: "ICO", icon: new URL('@/assets/imgs/home/home_1.png', import.meta.url), path: '/ICO/ico' },
|
]
|
|
// 获取公告数据
|
const announceList = ref([])
|
_getNewsList1({
|
language: useI18n().locale.value,
|
}).then(res => {
|
announceList.value = res
|
})
|
|
// 获取弹出新闻
|
const popupNewsList = ref([])
|
_getPopupNews({
|
language: useI18n().locale.value,
|
}).then(res => {
|
if (res && res.length > 0) {
|
let list = res
|
list.forEach(item => {
|
item.showPopUp = true
|
})
|
popupNewsList.value = list
|
}
|
})
|
// 关闭弹窗新闻
|
const closePopNotice = (item) => {
|
item.showPopUp = false
|
}
|
|
// 跳转公告详情
|
const toAnnounceDetail = (announceId) => {
|
if (announceId) {
|
router.push({ path: '/cryptos/AnnounceDetail', query: { id: announceId } })
|
}
|
}
|
|
// 跳转页面
|
const toPage = (path) => {
|
if (!path) return
|
|
// 如果路径包含 "http"，则作为外链跳转
|
if (path && (path.startsWith('http://') || path.startsWith('https://'))) {
|
window.open(path, '_blank');
|
return;
|
}
|
|
if (path == '/customerService') {
|
// 客服链接,有值的话就会跳转到客服外链
|
if (customerServiceUrl()) {
|
window.location.href = customerServiceUrl();
|
} else {
|
router.push(path)
|
}
|
} else {
|
router.push(path)
|
}
|
}
|
|
// 轮播图数据
|
const swipe1 = ref([
|
{ key: 1, img: new URL('@/assets/imgs/home/home_1.png', import.meta.url) },
|
{ key: 2, img: new URL('@/assets/imgs/home/home_2.png', import.meta.url) },
|
{ key: 3, img: new URL('@/assets/imgs/home/home_3.png', import.meta.url) },
|
])
|
const swipe2 = ref([
|
{ key: 1, img: new URL('@/assets/imgs/home/home_1.png', import.meta.url) },
|
{ key: 2, img: new URL('@/assets/imgs/home/home_2.png', import.meta.url) },
|
{ key: 3, img: new URL('@/assets/imgs/home/home_3.png', import.meta.url) },
|
])
|
|
//#region 行情数据----------------------------------------
|
let qList = ref([])
|
let qListCope = ref([]) // 备份数据
|
let key = ref('') // 搜索关键词
|
let timeout = ref(null)
|
const coinArr = computed(() => store.getters['home/coinArr']);
|
|
const fetchQList = async () => { // 获取行情
|
const list = await _getHomeList(coinArr.value.join(',')).catch(() => {
|
})
|
|
if (!(list instanceof Array)) {
|
return
|
}
|
|
// 通过关键字进行筛选
|
if (key.value) {
|
qList.value = list.filter(item => {
|
return item.symbol_data.toLowerCase().includes(key.value.toLowerCase()) || item.name.toLowerCase().includes(key.value.toLowerCase())
|
})
|
} else {
|
qList.value = list
|
}
|
qListCope.value = list; // 备份数据
|
|
if (timeout.value) {
|
clearTimeout(timeout.value)
|
}
|
timeout.value = setTimeout(async () => {
|
await fetchQList()
|
}, TIME_OUT)
|
}
|
fetchQList()
|
|
// 搜索
|
const onSearch = (val) => {
|
key.value = val
|
|
if (!val) {
|
qList.value = qListCope.value
|
return
|
}
|
let newList = qListCope.value.filter(item => {
|
return item.symbol_data.toLowerCase().includes(val.toLowerCase()) || item.name.toLowerCase().includes(val.toLowerCase())
|
})
|
qList.value = newList
|
}
|
|
onBeforeUnmount(() => {
|
if (timeout.value) {
|
clearTimeout(timeout.value)
|
}
|
})
|
//#endregion----------------------------------------------
|
|
</script>
|
|
<style lang="scss">
|
@import '@/assets/theme/index.scss';
|
|
.home_page {
|
// background: $white;
|
min-height: 100vh;
|
width: 100%;
|
padding: 1rem 1rem 10rem 1rem;
|
// $log-c: #282828;
|
$tab-c: #888;
|
$inp-c: #999;
|
$crd-b: #f7f7f7;
|
.js_title{
|
font-size: 2rem;
|
text-align: center;
|
background: linear-gradient(to right, #87CEEB, #1E90FF, #0000CD);
|
-webkit-background-clip: text;
|
background-clip: text;
|
-webkit-text-fill-color: transparent;
|
color: transparent;
|
}
|
.js_content{
|
font-size: 1.6rem;
|
text-align: center;
|
}
|
|
.popup_news{
|
font-size: 1.8rem;
|
}
|
|
.index_notice {
|
height: 100px;
|
border-radius: 10px;
|
|
.notice-swipe {
|
height: 82px;
|
}
|
|
.notice_img {
|
height: 80px;
|
width: 100px;
|
// background-color: $icon-bg;
|
}
|
|
.notice_content {
|
@include themify() {
|
color: themed("text_color");
|
}
|
|
&>div:first-child {
|
@include themify() {
|
color: themed("text_color1");
|
}
|
}
|
}
|
}
|
|
.home_logo {
|
width: 48rem;
|
margin: 2rem auto 1rem;
|
border-radius: 1rem;
|
|
img {
|
width: 100%;
|
}
|
}
|
|
.logo_text {
|
color: $log-c;
|
font-size: 2rem;
|
}
|
|
.logo_text_small {
|
color: $inp-c;
|
font-size: 1.5rem;
|
}
|
|
.login_buts {
|
width: 100%;
|
|
&>div {
|
width: 21rem;
|
height: 5rem;
|
line-height: 5rem;
|
border-radius: 2.5rem;
|
font-size: 1.8rem;
|
color: $log-c;
|
}
|
|
.login_but_z {
|
background: $crd-b;
|
}
|
|
.login_but_d {
|
background: $bg_yellow;
|
}
|
}
|
|
.home_grid {
|
width: 100%;
|
|
.grid_item {
|
width: 25%;
|
color: $tab-c;
|
font-size: 1.6rem;
|
|
.grid_item_img {
|
width: 100%;
|
|
img {
|
width: 6.3rem;
|
}
|
}
|
}
|
}
|
|
|
.home_swipe_1,
|
.home_swipe_2 {
|
width: 24rem;
|
border-radius: 1rem;
|
}
|
|
.home_swipe_1 {
|
.van-swipe-item {
|
height: 23rem;
|
background-color: $crd-b;
|
|
.swipe-item-img {
|
width: 100%;
|
}
|
}
|
|
.custom-indicator {
|
position: absolute;
|
left: 5px;
|
bottom: 5px;
|
padding: 2px 5px;
|
font-size: 1.8rem;
|
background: rgba(255, 255, 255, 0.5);
|
color: $inp-c;
|
|
span {
|
color: $log-c;
|
}
|
}
|
}
|
|
.home_swipe_2 {
|
.van-swipe-item {
|
height: 15rem;
|
background-color: $crd-b;
|
|
.swipe-item-img {
|
width: 100%;
|
}
|
}
|
|
.custom-indicator {
|
position: absolute;
|
right: 5px;
|
top: 1rem;
|
padding: 2px 5px;
|
|
div {
|
background: $inp-c;
|
width: 0.6rem;
|
height: 0.6rem;
|
border-radius: 0.3rem;
|
transition: 0.3s all;
|
}
|
|
.active {
|
background: $bg_yellow;
|
width: 2rem;
|
}
|
}
|
}
|
|
.purchase {
|
color: $log-c;
|
background: $crd-b;
|
border-radius: 1rem;
|
padding: 1.6rem 1.6rem 2rem 1.6rem;
|
font-size: 2rem;
|
}
|
}
|
</style>
|
