blame | history | patch | commit | commitdiff | ignore whitespace
1
李凌
8 days ago 349c48e168b9f2580334422228acde7d1b21bede 
 src/views/homePage/index.vue


@@ -1,7 +1,7 @@


<template>


    <div class="home_page">


    <div class="home_page mainBackground textColor">




        <Head></Head>


        <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>


@@ -10,9 +10,13 @@


            <van-swipe-item><img src="@/assets/imgs/home/Slider-4.jpg" alt=""></van-swipe-item>


        </van-swipe> -->




        <video autoplay loop muted playsinline class="home_logo">


        <van-swipe v-if="bannerList.length" class="home_logo" :autoplay="3000" indicator-color="white">


            <van-swipe-item v-for="(item, index) in bannerList" :key="index">


                <img :src="item.image" alt="" @click="onBannerClick(item.url)" class="banner-img" />


            </van-swipe-item>


        </van-swipe>


        <video v-else autoplay loop muted playsinline class="home_logo">


            <source src="@/assets/video/home_1.mp4" type="video/mp4">


            您的浏览器不支持 video 标签。


        </video>




        <!-- <div class="text-center font-bold mt-8 logo_text">{{ $t('复制财富，從此刻開始') }}</div>


@@ -33,7 +37,7 @@


        </div>




        <!-- 新闻 -->


        <!-- <van-notice-bar class="font-26 mt-10 index_notice" background="#fafbfc" :scrollable="false" wrapable


        <!-- <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)">


@@ -80,8 +84,21 @@


</div> -->




        <div id="cryptos" class="pt-10">


            <list-quatation :listData="qList" :tabShow="false" :tabActive="2" />


            <list-quatation :listData="qList" :tabShow="false" :tabActive="0" />


        </div>




        <van-popup v-model:show="item.showPopUp" style="border-radius:10px;" :close-on-click-overlay="false"


            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>




@@ -92,7 +109,7 @@


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 { _getNewsList1, _getPopupNews, _getBanner } from '@/service/user.api'


import { useStore } from "vuex";


import { TIME_OUT, customerServiceUrl } from "@/config";


import { useUserStore } from '@/store/user';


@@ -102,38 +119,81 @@


    setStorage('symbol', 'btcusdt');


}


const userStore = useUserStore()


const { t } = useI18n()


const { t, locale } = useI18n()


const router = useRouter()


const store = useStore();


const customer_service_url = ref(customerServiceUrl) // 客服链接,有值的话就会跳转到客服外链




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: 5, name: t('AI Quant'), icon: new URL('@/assets/imgs/home/home_5.png', import.meta.url), path: '/trade/index?selectIndex=2' },


    { key: 6, name: t('现货'), icon: new URL('@/assets/imgs/home/home_7.png', import.meta.url), path: '/cryptos/trade/btcusdt' },


    { key: 2, name: t('recharge'), 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: 9, name: t('闪兑'), icon: new URL('@/assets/imgs/home/home_8.png', import.meta.url), path: '/cryptos/exchangePage' },


    // { key: 16, name: t('理财'), icon: new URL('@/assets/imgs/home/home_1.png', import.meta.url), path: '/cryptos/fm-home' },


    { key: 18, name: t('助力贷'), icon: new URL('@/assets/imgs/home/home_1.png', import.meta.url), path: '/cryptos/loan' },


    // { key: 10, name: t('更多'), icon: new URL('@/assets/imgs/home/home_9.png', import.meta.url) },




    { key: 11, name: "STO", icon: new URL('@/assets/imgs/home/home_1.png', import.meta.url), path: '/ICO/ico' },


    // { key: 11, name: "STO", icon: new URL('@/assets/imgs/home/home_1.png', import.meta.url), path: '/ICO/ico' },


    // { 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: t('矿机'), icon: new URL('@/assets/imgs/home/home_1.png', import.meta.url), path: '/cryptos/machine' },


]




// 获取公告数据


// 首页轮播（后台横幅管理 model=top 配置）


const bannerList = ref([])


const getBannerLanguage = () => {


    if (locale.value === 'en-US') return 'en'


    if (locale.value.indexOf('CN') >= 0) return 'CN'


    return locale.value


}


const fetchBannerList = () => {


    _getBanner({ model: 'top', language: getBannerLanguage() }).then(res => {


        bannerList.value = Array.isArray(res) ? res : []


    }).catch(() => {


        bannerList.value = []


    })


}


fetchBannerList()




const onBannerClick = (url) => {


    if (!url) return


    if (url.startsWith('http://') || url.startsWith('https://')) {


        window.open(url, '_blank')


    } else {


        router.push(url)


    }


}




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) => {


@@ -146,9 +206,16 @@


const toPage = (path) => {


    if (!path) return




    // 如果路径包含 "http"，则作为外链跳转


    if (path && (path.startsWith('http://') || path.startsWith('https://'))) {


        window.open(path, '_blank');


        return;


    }




    if (path == '/customerService') {


        if (customer_service_url.value) {


            window.location.href = customer_service_url.value;


        // 客服链接,有值的话就会跳转到客服外链


        if (customerServiceUrl()) {


            window.location.href = customerServiceUrl();


        } else {


            router.push(path)


        }


@@ -171,6 +238,8 @@




//#region 行情数据----------------------------------------


let qList = ref([])


let qListCope = ref([]) // 备份数据


let key = ref('') // 搜索关键词


let timeout = ref(null)


const coinArr = computed(() => store.getters['home/coinArr']);




@@ -181,7 +250,16 @@


    if (!(list instanceof Array)) {


        return


    }


    qList.value = list;




    // 通过关键字进行筛选


    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)


@@ -191,6 +269,20 @@


    }, 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) {


@@ -202,15 +294,20 @@


</script>




<style lang="scss">


@import '@/assets/theme/index.scss';




.home_page {


    background: $white;


    // background: $white;


    min-height: 100vh;


    width: 100%;


    padding: 1rem 1rem 10rem 1rem;


    // $log-c: #282828;


    $tab-c: #343434;


    $tab-c: #888;


    $inp-c: #999;


    $crd-b: #f7f7f7;


    .popup_news{


        font-size: 1.8rem;


    }




    .index_notice {


        height: 100px;


@@ -227,8 +324,14 @@


        }




        .notice_content {


            @include themify() {


                color: themed("text_color");


            }




            &>div:first-child {


                color: $text_color1;


                @include themify() {


                    color: themed("text_color1");


                }


            }


        }


    }


@@ -238,8 +341,9 @@


        margin: 2rem auto 1rem;


        border-radius: 1rem;




        img {


        img, .banner-img {


            width: 100%;


            border-radius: 1rem;


        }


    }