<template>
|
|
<Head></Head>
|
<div class="home_page">
|
<!-- <Head></Head>
|
<div class="home_logo flex justify-center"><img src="@/assets/imgs/home/home_logo.png" alt=""></div>
|
<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="#fafbfc" :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 id="cryptos" class="pt-10">
|
<list-quatation :listData="qList" :tabShow="false" />
|
</div> -->
|
<van-notice-bar text="通知内容" left-icon="volume" color="orange" background="white" />
|
<div style="margin: 0 10px">
|
|
<div class="flex-centerY">
|
<div style="font-size: 16px;margin-right: 5px">
|
<van-icon v-if="showMoney" @click="showMoney = !showMoney" name="browsing-history" />
|
<van-icon v-else @click="showMoney = !showMoney" name="closed-eye" />
|
</div>
|
<div style="font-size: 14px;color: black">
|
{{ $t("总资产") }}(USD)
|
</div>
|
</div>
|
|
<div class="flex-centerY flex-position-between" style="margin-top: 15px">
|
<div class="flex flex-justify-between">
|
<div style="font-size: 33px;font-weight: bold;color: black">
|
{{ showMoney ? todayMoney.money_contract : "*****" }}
|
</div>
|
</div>
|
<div style="background: black;color: white;padding: 4px 17px;border-radius: 90px;font-size: 14px"
|
@click="toPage('/cryptos/recharge/rechargeList?isForeign=true')">
|
<!-- <div style="background: black;color: white;padding: 4px 17px;border-radius: 90px;font-size: 14px"
|
@click="toPage('/customerService')"> -->
|
{{ $t("充值") }}
|
</div>
|
</div>
|
<div class="flex-centerY" style="font-size: 12px;color: #999;margin-top: 20px;">
|
<div>
|
{{ $t("今日盈亏") }}
|
</div>
|
<div style="margin-left: 15px"
|
:style="todayMoney.money_contract_profit_today > 0 ? 'color: #0f0' : todayMoney.money_contract_profit_today < 0 ? 'color: #f00' : ''">
|
{{ showMoney ? todayMoney.money_contract_profit_today : "****" }}
|
</div>
|
<div style="margin-left: 15px"
|
:style="todayMoney.money_contract_profit_today > 0 ? 'color: #0f0' : todayMoney.money_contract_profit_today < 0 ? 'color: #f00' : ''">
|
{{ showMoney ? (Number(todayMoney.money_contract_profit_today + '') / (todayMoney.money_contract == 0 ? 1 :
|
todayMoney.money_contract) * 100).toFixed(2) + '%' : "****" }}
|
</div>
|
</div>
|
</div>
|
<div class="home_1 flex justify-around items-center" style="padding: 20px 0">
|
<div v-for="i in tabbers" :key="i.key" @click="toPage(i.path)">
|
<img :src="i.icon" v-if="storeS.state.vant.theme == 'light'">
|
<img :src="i.icon2" v-else>
|
<div style="font-size: 12px;color: #777">{{ i.name }}</div>
|
</div>
|
</div>
|
<div style="position: relative;margin: 10px 00px;border-radius: 12px;border: 1px #eee solid">
|
<!-- <van-notice-bar class="font-26 mt-10 index_notice" :scrollable="false" wrapable>-->
|
|
<van-swipe @change="current = $event" indicator-color="#999" class="notice-swipe" :autoplay="2000"
|
:show-indicators="false" style="border-radius: 8px;overflow: hidden">
|
<van-swipe-item v-for="item in announceList" style="border-radius: 8px;overflow: hidden;border: #eee 1px solid"
|
:key="item.id" @click="toAnnounceDetail(item.uuid)">
|
<img :src="item.imgUrl" alt="" class="notice_img mr-5" style="width:100%;height:100px;border-radius: 8px">
|
</van-swipe-item>
|
</van-swipe>
|
<div class="flex-center" style="position:absolute;bottom:5px;left:0;;z-index:999;width: 100%">
|
<div v-for="(i, index) in announceList" :key="index">
|
<div v-if="current != index" style="width:3px;height:3px;background:#bbb;margin-right:5px;border-radius: 3px">
|
</div>
|
<div v-else style="width:3px;height:3px;background:#333;;margin-right:5px;border-radius: 3px"></div>
|
</div>
|
</div>
|
</div>
|
<!-- <div style="margin: 15 0px;align-items: stretch" class="flex-centerY">-->
|
<!-- <div class="flex-centerY" style="flex: 1;margin-right: 20px;border: #eee 1px solid;border-radius: 12px;padding: 10px 10px">-->
|
<!-- <div style="flex: 1" class="flexY">-->
|
<!-- <div style="font-size: 14px;color: black;font-weight: bold">-->
|
<!-- {{$t("信贷")}}-->
|
<!-- </div>-->
|
<!-- <div style="font-size: 12px;color: #999;flex: 1">-->
|
<!-- {{$t("低利率，彈性強，助您持續擁有資金")}}-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- <div >-->
|
<!-- <img src="../../assets/img/img_4.png" style="width: 55px;height: 55px">-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- <div class="flex-centerY" style="flex: 1;border: #eee 1px solid;border-radius: 12px;padding: 10px 10px">-->
|
<!-- <div style="flex: 1;height: 100%" class="flexY">-->
|
<!-- <div style="font-size: 14px;color: black;font-weight: bold">-->
|
<!-- {{$t("OTC")}}-->
|
<!-- </div>-->
|
<!-- <div style="font-size: 12px;color: #999;;flex: 1">-->
|
<!-- {{$t("200+支付方式")}}-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- <div >-->
|
<!-- <img src="../../assets/img/img_5.png" style="width: 55px;height: 55px">-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<div class="tabs flex justify-start items-center textColor1">
|
<div v-for="i in tabList" :key="i" :class="i.key == tab ? 'textColor' : ''" @click="tab = i.key"
|
style="font-size: 16px;margin-top: 20px">
|
{{ i.name }}
|
</div>
|
</div>
|
<div id="cryptos">
|
<list-quatation :listData="qList" :tabShow="false" :tabActive="tab" />
|
</div>
|
|
<div class="home_2" @click="toPage('/quotes/index')">
|
{{ $t("更多") }}
|
<van-icon name="arrow-down" />
|
</div>
|
|
<div class="home_3 flex justify-start">
|
<img :src="LOGO" alt="">
|
<span>{{ $t('安全、便利、社交') }}</span>
|
</div>
|
|
<van-collapse v-model="activeName" accordion>
|
<van-collapse-item name="1" class="border_b">
|
<template #title>
|
<div class="flex justify-start items-center">
|
<img src="@/assets/imgs/home/home_23a.png" alt="" class="border_icon"
|
v-if="storeS.state.vant.theme == 'light'">
|
<img src="@/assets/imgs/home/home_23b.png" alt="" class="border_icon" v-else>
|
{{ $t('公司') }}
|
</div>
|
</template>
|
<div style="padding-left: 2.3rem;">
|
<p @click="toPage('/aboutUs')">{{ $t('关于我们') }}</p>
|
<p @click="toPage('/helpCenter')">{{ $t('帮助中心') }}</p>
|
</div>
|
</van-collapse-item>
|
<van-collapse-item name="2" class="border_b">
|
<template #title>
|
<div class="flex justify-start items-center">
|
<img src="@/assets/imgs/home/home_21a.png" alt="" class="border_icon"
|
v-if="storeS.state.vant.theme == 'light'">
|
<img src="@/assets/imgs/home/home_21b.png" alt="" class="border_icon" v-else>
|
{{ $t('法律') }}
|
</div>
|
</template>
|
<div style="padding-left: 2.3rem;">
|
<p @click="toPage('/TermsOfService')">{{ $t('serviceConf') }}</p>
|
</div>
|
</van-collapse-item>
|
<van-collapse-item name="3" class="border_b">
|
<template #title>
|
<div class="flex justify-start items-center">
|
<img src="@/assets/imgs/home/home_22a.png" alt="" class="border_icon"
|
v-if="storeS.state.vant.theme == 'light'">
|
<img src="@/assets/imgs/home/home_22b.png" alt="" class="border_icon" v-else>
|
{{ $t('支援') }}
|
</div>
|
</template>
|
<div style="padding-left: 2.3rem;">
|
<p @click="toPage('/customerService')">{{ $t('onLineService') }}</p>
|
</div>
|
</van-collapse-item>
|
</van-collapse>
|
</div>
|
</template>
|
|
<script setup>
|
import Head from './components/head.vue'
|
import { useI18n } from "vue-i18n";
|
import { ref, computed, onBeforeUnmount, onMounted } from 'vue';
|
import { useRouter } from 'vue-router';
|
import ListQuatation from "@/components/Transform/list-quotation/index.vue";
|
import { _getHomeList } from '@/service/cryptos.api'
|
import { _getassets, _getContractBySymbolType, _getNewsList1, _getPopupNews } from '@/service/user.api'
|
import { useStore } from "vuex";
|
import { TIME_OUT, LOGO } from "@/config";
|
import { useUserStore } from '@/store/user';
|
import { setStorage, getStorage } from '@/utils/index.js';
|
import storeS from '@/store/store'
|
|
let catchSymbol = getStorage('symbol')
|
if (!catchSymbol) {
|
setStorage('symbol', 'btcusdt');
|
}
|
const userStore = useUserStore()
|
const { t } = useI18n()
|
const router = useRouter()
|
const store = useStore();
|
const showMoney = ref(true)
|
|
const todayMoney = ref({
|
money_contract_profit_today: 0
|
})
|
|
// 获取资产信息
|
function getAllAssets() {
|
_getContractBySymbolType().then(data => {
|
todayMoney.value = data
|
})
|
}
|
// 轮询获取资产信息
|
let times1 = null;
|
getAllAssets();
|
times1 = setInterval(() => {
|
getAllAssets();
|
}, 4000)
|
// 停止获取资产计数器
|
function timeOut1() {
|
clearInterval(times1)
|
}
|
|
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' },/cryptos/Withdraw/withdrawPage
|
// { 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: 10, name: t('更多'), icon: new URL('@/assets/imgs/home/home_9.png', import.meta.url) },
|
|
// {
|
// key: 9,
|
// name: t('闪兑'),
|
// icon: new URL('@/assets/imgs/home/home_12a.png', import.meta.url),
|
// icon2: new URL('@/assets/imgs/home/home_12b.png', import.meta.url),
|
// path: '/cryptos/exchangePage'
|
// },
|
// {
|
// key: 11,
|
// name: "ICO",
|
// icon: new URL('@/assets/imgs/home/home_11a.png', import.meta.url),
|
// icon2: new URL('@/assets/imgs/home/home_11b.png', import.meta.url),
|
// path: '/ICO/ico'
|
// },
|
// {
|
// key: 12,
|
// name: "C2C",
|
// icon: new URL('@/assets/imgs/home/home_11a.png', import.meta.url),
|
// icon2: new URL('@/assets/imgs/home/home_11b.png', import.meta.url),
|
// path: '/wantBuy'
|
// },
|
// {
|
// key: 13,
|
// name: t('onLineService'),
|
// icon: new URL('@/assets/imgs/home/home_10a.png', import.meta.url),
|
// icon2: new URL('@/assets/imgs/home/home_10b.png', import.meta.url),
|
// path: '/customerService'
|
// },
|
// {
|
// key: 9,
|
// name: t('申购'),
|
// icon: new URL('@/assets/img/img.png', import.meta.url),
|
// icon2: new URL('@/assets/imgs/home/home_12b.png', import.meta.url),
|
// path: '/ICO/ico'
|
// },
|
{
|
key: 9,
|
name: t('C2C'),
|
icon: new URL('@/assets/img/img_1.png', import.meta.url),
|
icon2: new URL('@/assets/imgs/home/home_12b.png', import.meta.url),
|
path: '/wantBuy'
|
},
|
{
|
key: 9,
|
name: t('onLineService'),
|
icon: new URL('@/assets/img/img_3.png', import.meta.url),
|
icon2: new URL('@/assets/imgs/home/home_12b.png', import.meta.url),
|
path: '/customerService'
|
}, {
|
key: 9,
|
name: t('闪兑'),
|
icon: new URL('@/assets/img/img_2.png', import.meta.url),
|
icon2: new URL('@/assets/imgs/home/home_12b.png', import.meta.url),
|
path: '/cryptos/exchangePage'
|
},
|
]
|
|
// 手风琴选中
|
const activeName = ref('0')
|
|
// tab切换
|
const tab = ref(1)
|
const current = ref(0)
|
const tabList = [
|
{ name: t('永续合约'), key: 1 },
|
{ name: t('现货'), key: 2 },
|
]
|
|
// 获取公告数据
|
const announceList = ref([
|
{ imgUrl: new URL('@/assets/imgs/home/lbt_1.png', import.meta.url), id: 1, title: '公告标题1', content: '公告内容1', time: '2022-01-01' },
|
{ imgUrl: new URL('@/assets/imgs/home/lbt_2.png', import.meta.url), id: 2, title: '公告标题2', content: '公告内容2', time: '2022-01-01' },
|
{ imgUrl: new URL('@/assets/imgs/home/lbt_3.png', import.meta.url), id: 3, title: '公告标题3', content: '公告内容3', time: '2022-01-01' },
|
{ imgUrl: new URL('@/assets/imgs/home/lbt_4.png', import.meta.url), id: 4, title: '公告标题4', content: '公告内容4', time: '2022-01-01' },
|
{ imgUrl: new URL('@/assets/imgs/home/lbt_5.png', import.meta.url), id: 5, title: '公告标题5', content: '公告内容5', time: '2022-01-01' },
|
])
|
// _getNewsList1().then(res => {
|
// announceList.value = res
|
// })
|
|
// 跳转公告详情
|
const toAnnounceDetail = (announceId) => {
|
return
|
if (announceId) {
|
router.push({ path: '/cryptos/AnnounceDetail', query: { id: announceId } })
|
}
|
}
|
|
// 获取客服链接
|
const customer_service_url = ref(storeS.state.user.customer_service_url)
|
|
// 跳转页面
|
const toPage = (path) => {
|
if (!path) return
|
if (path == '/customerService') {
|
if (customer_service_url.value) {
|
window.location.href = customer_service_url.value;
|
} 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 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
|
}
|
qList.value = list.slice(0, 4);
|
|
if (timeout.value) {
|
clearTimeout(timeout.value)
|
}
|
timeout.value = setTimeout(async () => {
|
await fetchQList()
|
}, TIME_OUT)
|
}
|
fetchQList()
|
|
onBeforeUnmount(() => {
|
timeOut1()
|
if (timeout.value) {
|
clearTimeout(timeout.value)
|
}
|
})
|
//#endregion----------------------------------------------
|
|
|
</script>
|
|
<style lang="scss">
|
.home_page {
|
min-height: 100vh;
|
width: 100%;
|
padding: 1rem 1rem 10rem 1rem;
|
font-size: 1.4rem;
|
|
.home_1 {
|
padding-top: 2rem;
|
|
div {
|
text-align: center;
|
font-size: 1.4rem;
|
}
|
|
img {
|
width: 2.8rem;
|
margin: 0 auto .4rem;
|
}
|
}
|
|
.index_notice {
|
height: 100px;
|
border-radius: 10px;
|
margin-bottom: 2rem;
|
|
@include themify() {
|
background: themed("main_background");
|
border: themed("border_color") solid 1px;
|
}
|
|
.notice-swipe {
|
height: 82px;
|
}
|
|
.notice_img {
|
height: 80px;
|
width: 100px;
|
// background-color: $icon-bg;
|
}
|
|
.notice_content {
|
&>div:first-child {
|
color: $text_color1;
|
}
|
}
|
}
|
|
.tabs {
|
font-size: 1.8rem;
|
|
&>div {
|
margin-right: 2rem;
|
}
|
}
|
|
.home_2 {
|
font-size: 1.5rem;
|
text-align: center;
|
padding-bottom: 1.2rem;
|
margin: 1rem 0 1rem;
|
|
@include themify() {
|
border-bottom: themed("divi_line") solid 1px;
|
}
|
}
|
|
.home_3 {
|
padding: 1rem 0;
|
|
img {
|
height: 2rem;
|
margin-right: 1rem;
|
}
|
}
|
|
.border_b {
|
@include themify() {
|
border-bottom: themed("divi_line") solid 1px;
|
}
|
|
.van-collapse-item__title--expanded:after {
|
display: none;
|
}
|
|
.van-cell__title {
|
font-weight: 600;
|
}
|
|
.van-collapse-item__content {
|
padding-top: 0;
|
}
|
|
p {
|
font-size: 1.4rem;
|
}
|
|
.border_icon {
|
width: 1.5rem;
|
margin-right: 1rem;
|
}
|
}
|
|
// .home_logo {
|
// width: 100%;
|
|
// img {
|
// width: 22.5rem;
|
// }
|
// }
|
|
// .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>
|
