李凌
2025-10-15 7fc6bfe900790ec7c92bce85d5b20a95fbc06e65
src/views/homePage/index.vue
@@ -40,35 +40,107 @@
        <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="home_1 flex justify-around items-center">
      <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?myAssets.capital.toFixed(0):"*****" }}
         </div>
         <div style="font-size: 24px;font-weight: bold;color: black;margin-top: 3px">
           {{showMoney?myAssets.capital.toFixed(2).substring(myAssets.capital.toFixed(2).indexOf(".")):""}}
         </div>
       </div>
        <div style="background: black;color: white;padding: 4px 17px;border-radius: 90px;font-size: 14px">
          {{$t("充值")}}
        </div>
      </div>
      <div class="flex-centerY" style="font-size: 12px;color: #999;margin-top: 20px;">
        <div>
          {{$t("今日盈亏")}}
        </div>
        <div style="margin-left: 15px">
          {{showMoney? todayMoney.money_contract_profit_today:"****"}}
        </div>
        <div style="margin-left: 15px">
          {{showMoney?(Number(todayMoney.money_contract_profit_today+'')/(myAssets.capital==0?1:myAssets.capital)*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>{{ i.name }}</div>
        <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-notice-bar class="font-26 mt-10 index_notice" :scrollable="false" wrapable>
            <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 textColor">
                            <div>{{ item.startTime }}</div>
                            <div>{{ item.title }}</div>
                        </div>
                    </div>
        <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)">
<!--            <div class="flex justify-start items-center">-->
<!--              <img :src="item.imgUrl" style="width:100%" alt="" class="notice_img mr-5">-->
<!--&lt;!&ndash;              <div class="notice_content textColor">&ndash;&gt;-->
<!--&lt;!&ndash;                <div>{{ item.startTime }}</div>&ndash;&gt;-->
<!--&lt;!&ndash;                <div>{{ item.title }}</div>&ndash;&gt;-->
<!--&lt;!&ndash;              </div>&ndash;&gt;-->
<!--            </div>-->
            <img :src="item.imgUrl" alt="" class="notice_img mr-5" style="width:100%;height:100px;border-radius: 8px" >
                </van-swipe-item>
            </van-swipe>
        </van-notice-bar>
<!--      </van-notice-bar>-->
      <div class="flex-center" style="position:absolute;bottom:5px;left:0;;z-index:999;width: 100%">
        <div v-for="(i,index) in announceList">
          <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">
      <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>
@@ -87,7 +159,8 @@
            <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_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>
@@ -100,7 +173,8 @@
            <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_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>
@@ -112,7 +186,8 @@
            <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_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>
@@ -132,7 +207,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 {_getassets, _getContractBySymbolType, _getNewsList1, _getPopupNews} from '@/service/user.api'
import { useStore } from "vuex";
import { TIME_OUT, LOGO } from "@/config";
import { useUserStore } from '@/store/user';
@@ -147,6 +222,11 @@
const { t } = useI18n()
const router = useRouter()
const store = useStore();
const showMoney=ref(true)
const myAssets=ref({})
  _getassets().then(res => {
    myAssets.value = res
  })
const tabbers = [
    // { key: 1, name: t('跟单'), icon: new URL('@/assets/imgs/home/home_1.png', import.meta.url) },
@@ -160,17 +240,72 @@
    // { 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/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')
const todayMoney=ref({
  money_contract_profit_today:0
})
// tab切换
const tab = ref(1)
const current = ref(0)
const tabList = [
    { name: t('永续合约'), key: 1 },
    { name: t('现货'), key: 2 },
@@ -178,6 +313,9 @@
// 获取公告数据
const announceList = ref([])
_getContractBySymbolType().then(data => {
  todayMoney.value = data
})
_getNewsList1({
    language: useI18n().locale.value,
}).then(res => {