feat

lxf

2025-04-18 66a33e936d39ec4db7fdffed5d646e044ccc43e9

 src/page/home.vue

@@ -1,612 +1,764 @@
<template>
  <div class="home no_touch">
    <!--    //头部组件-->
    <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
   <div class="home no_touch">
      <!--    //头部组件-->
      <div class="px-32">
         <ex-header :unread_num="`${unreadMsg_num}`"></ex-header>
         <ioe-swiper />
         <van-notice-bar style="margin-top: 5px;" 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-50 h-56" src="../assets/image/diqiu.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>
    </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'">{{
            </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>
      </div>
      <div class=" contRound" style="border-top-left-radius: 30px;border-top-right-radius: 30px;">
         <div class="double">
            <div class="double_box_left" @click="$router.push('/recharge/rechargeList')">
               <div class="double_box_left_left">
                  <div class="double_box_left_left_txt">{{$t('充值')}}</div>
                  <div class="double_box_left_left_titlle">{{$t('去充值')}}</div>
               </div>
               <div class="double_box_left_right">
                  <img class="double_box_left_right_img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA6CAYAAAAA0F95AAAAAXNSR0IArs4c6QAABDtJREFUaEPlW89LHFcc/7w3z/qDBPTUm3FIA0IgWUGlBxvXPyBk/oCCa7CXXprQSyCQ9iL00jbJofRgyR566yGG5JxIEki7Kyo5SbB51ptQcKC6E+rOvPLGHavr/NqZ1X3jPNiDvu978/183vfnm12CnA+SZfxV/k8RYJMAio2PhLPIgJkRvXcjDrZMEbDCraE9iBsEtAg4RYD0+4MkpgCdGtc/Wo0iQWkCVrjo37N3Dap1TQrYRjBgX5iLY3rvVKYIkIDr2CkIRzMIpZOAKEQBCJtn6BkY0YkZJtNxC5B+LKBdJSDGPuAgs05AhUaNscHuJ0oREN+PEwBuWiIc8WD8Yt+tjhLg+TEILVBKbghgKD20eDsQYGNU79VPlYCjfkyuHkpP8bRusxQD9LCU2JYYUOE7BYBOnogfpyRE2PbM+CfnykHbJCLA9WPbLiZMTykhtbacAOVRvXcmFQHSrG27VnQIKZ62H7cG10+amGN6z0DLBASUmen16cAOAtpIUFV44AJutIY1raIfp+XMdsTtTy/23fe1D/nPN9wa6gJenGaKSguqxfWBZbFrAZX3u2VC6HSLm2ZInJgM3bpfWewSUOWWyBCaZKrW61Njl84vNi8m0vwZwJPtmp1VQWVxwwJq22FNyN8mMP9Mw+YWUPuQqHRQiilBsOBo7Pbaz2TDRfPH+90yDYgBEvy9X7QzAbzpFEybsRGXgN957ZYG8qPfMT38jWL5HVXqBNuozKJLQFgcKM2xNj5Pua3MA4de4hb3qwPOOAE4IKDyZ+0+oeSr5jPKDQFL67uG0Ojj3BKwwrf76+jZzi0BjYrwRfMNTm5cwK0HuPUtBb45bAW5IqDKLfmKSVpBbsaRunY/DnTztt7NK07lscK+yq1jcUBxDKnUO0ZAWFmc6kmKLj5GQIX/WyCwVxTVt+1q+fa2Vf5/e3ySNyUqNNa+Ohxuj3OVBj37qqzvlIimPZJ/55KAw2VxLgmQJ++1x7klwGuPc0uAVxbnlgAvDuSWAK89Ls0x2SCd2RFai8j2+OYcO9Ied4qJ4UEB45qDwY8F+nqAtb8IXr+Vn/0b66j5IL1DCZBxoDTHOt4eG585Lni/sfByn4Cw+YVXwdf6kdXo5dm9k6yGIw1q4oqD2ev+4CMXNwS++1VzLcZvKE/Anc9tDF9IdwYSvCQhkwSU79bjHnSgXO0D8OX3/i94lLeAn76uu0Ev7QhK58oTkHsXkP4vSUgz5p/Sg3TZvI/yFuClOJkKfdNgI8WFzXupMpNB0FNapsOJK8LNCDKobW4RyPzupbeo+USFkFzU6TogjenHWZsJF4gDJKlMHALkC9OA3+Ykfaw666IJ+GLvOQQif3ujDqT4mgg4TyIJGC5ZQxpjywACv3Ac/5EKSQqYtt34klSUWi4JXewHCBhRsi3ORx5Ai/tFiwuYIFi162xmrUw2/gPrka3M/j7biAAAAABJRU5ErkJggg=="/>
               </div>
               <div class="double_box_icon">NEW</div>
            </div>
            <div class="double_box_left" @click="$router.push('/customerService')">
               <div class="double_box_left_left">
                  <div class="double_box_left_left_txt">{{$t('联系客服')}}</div>
                  <div class="double_box_left_left_titlle">{{$t('在线客服')}}</div>
               </div>
               <div class="double_box_left_right">
                  <img class="double_box_left_right_img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAAA+CAYAAABzwahEAAAAAXNSR0IArs4c6QAABThJREFUaEPtW99rI3UQn9ndnOZUqP+AzYrCgQe20Nxz4z9g/AualBPEl7bgm2C+eRB8kdYHwYfedQvia1t804cGEcSm0CCc9uG4Td+FC9g21SY79psmubSX3f3+2jSF7OvOzHc+M/Od78zsdxHG6CkwfwrQWrCI5glgBgAyXfVqCFAnxO2N0vSmCZXRhBATMgrMzyPgBgBMxcirAyLTNcBYAF9kR6sEtCxjQERkj0vTZRmeQdobB75YPioREVMBgIBrj9n0ihqvCpchngLzC93wVpZIQB95zN2WFXCjHi+yuj+QwGR179E3CMj1mNuQEXBjwE14uweUgFY85q7dCuCLrL5FAHkZZcNoCWjHY66ULCmPV/1/5hHuLAAE/JztnrFYQ6AatIOduXdeE95rRVY/gMuz2sRT32AZV0aQEPDf/GbGAeBn7HyUcF5k2AC5WTddj1OiyOoURyPzfoNlhLD0ZMYS7/nHMwjWLgDGFRZdmdggsHIP3Du1KMXHGvilp+lAHHTfng0HaDbK84Yyem/B2gbLzMpESKTH9/2m/2Ivy4jt0FaybjoXxjW2yW3/6UmebGtLGu4gQ6uVy777RmWYjALzlxFwVUt+P8CwIFu7h3p879mJh2gt6CiGAN6cmy6GAJ9CQF7ACOaOUE2kMzqXFAq86p/yva113PAsP+emQ4+ZbkemF1Uo7+0Y4E0jx03WTUfmkYsefA0Bl1Qii4DKHnMVG5yQFav+aIDz5QvMZwhYkgFPQN9c1OdSreyg/FBvaGb07hpUy7p3hY6Zbu3OwfemLmF24E1JUaUjEwL++7MTz0owuYWh4gYAwA+5AbBb0hIArwRrgFgBCjZlO7Fha0UktyYvT3dlwu8lWtvKZ996ZUdLRkLMkYmn6jc58Mj6PEyvuIyeEB5hsZHA1UtWajiAkSWrsIYJESbQpFCDIMg9cF+PbFISwiMsNhY4l8Q9nwLYFajbKw5AUaQtFdYwIUIh4L219/2TfECQR8T3e1Ud38sAVoUg2My66aF1eUK6a4mVAq66UmaZpu4et5aQJ0qiDCDGndVKSyFBgxBqiLTdslM7h99h6EAkUeD3Pmlm7JYTO7lRQinCROi1U3Z5mAESA37/4/+WIEBGqN19iUCMomkE0C7/tf7qlSlsIsDvPzwvXXQ4Ss2DLsowfq7Pn+up/ienocAPfJo6h+YCgjWPQDMC2by/3k97Fvzws6Wsv/d5K5K38KWjLDuA9krP8y8Bv5y88K+WosPFF3r83QD44pENp2fqgZQkcABotB1nlu/5KxpW/bNVkPxqOWj+9R8t+PUPdW9zWQkD50tUnqyncn3g1aN/SxAEyvuSe/uzb9XDsGfAEQCHVMt5swN87+lxAW2bHzvKj+7eHiVwgqDcAW5i6PDV9zYcHqnv7VEC5+GOJrzNlf70awdOz5QDps84ilAHxDpW/bMtAJL60jgMns4xMyhvJMD5eNnEGJkrbgq4fsyISUBT09QJcDGDh1KNMNTNzM9NeXwCPCQmTBl47Pb4xOMTj1+1wCTUNU+PyR7XNKCxym2S3CbJbZLcOhaYZHXNpDT2Wf36DaSixnh50Fa8H3+uMkq+bnBTIajpSGF27nHlWw+Dq9w64Oq3HpLJtsIu0yTsjEUvwfN7peqzt1vm8QP9eXDX8u89PH9u4F6qph8F2QkLJoEbyRWCqquTEfpPHjlvGwN+r9DM2I7D/zPRvY2sDiqOk9Bvt+0PDr1rHw3j+OLec/BWyllFkvq7yMhl4UjdECpI8Mtxy1mre9j5P+1/nAE6rJiQ0OYAAAAASUVORK5CYII="/>
               </div>
               <div class="double_box_icon" style="background: linear-gradient(135deg,#f44327,#fa932b);">HOT</div>
            </div>
         </div>
         <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>
      <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>
              </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>
    <van-popup v-model="item.showPopUp" style="border-radius:10px;" :close-on-click-overlay="false"
      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>
        <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('我知道了') }}
        </van-button>
      </div>
    </van-popup>
  </div>
         </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>
                     </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>
<!--       <van-popup v-model="item.showPopUp" style="border-radius:10px;" :close-on-click-overlay="false"
         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>
            <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('我知道了') }}
            </van-button>
         </div>
      </van-popup> -->
<!--       <van-popup
        v-model="isshow"
        style="border-radius: 10px"
		
      >
        <div class="w-600 p-50 box-border">
          <div class="font-700 text-center font-36 textColor">
            提示
          </div>
          <div class="flex justify-center " >
          </div>
          <div class="py-36 textColor" >此项目均为吉星科技出品认准技术✈️号：
            <div >商务2:@jixingkj05</div>
            <div >商务3:@jixingkj06</div>
            <div>非我司认准均为骗子，禁止盗用我司演示，谨防受骗上当！</div>
         </div>
		
          <van-button
            color="#1D91FF"
            class="w-full h-80 rounded-full"
            type="info"
           @click="closeclick"
          >
            {{ $t("我知道了") }}
          </van-button>
        </div>
      </van-popup> -->
   </div>
</template>
<script>
import { Popup, Swipe, SwipeItem } 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 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";
export default {
  name: "HomePage",
  components: {
    IoeSwiper,
    ListQuatation,
    ExHeader,
    ExNav,
    [Popup.name]: Popup,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
  },
  // async created() {
  //   // this.init();
  //   // this.checkingMesk();
  //   // this.connectWallet()
  //   // await this.fetchQList()
  // },
  computed: {
    ...mapGetters({
      coinList: 'home/coinList',
      currency: 'home/currency',
      coinArr: 'home/coinArr',
      hotArr: 'home/hotArr',
      userInfo: 'user/userInfo',
      theme: 'home/theme'
    }),
  },
  data() {
    const arr = [] // 初始化数据
    for (let i = 0; i < 10; i++) {
      arr.push({ id: i })
    }
    return {
      currentSwitch: 1,
      switchBtns: ['ETL', '数字货币', '外汇', '期权'],
      BASE_URL,
      account: "",
      hList: arr.slice(0, 3), // 热门
      qList: arr, // 行情列表
      active: 0,
      timeout: null,
      loading: true,
      announceTitle: '',
      announceId: '',
      announceList: [],
      socket: null,
      showSave: false,
      unreadMsg_timer: null,
      unreadMsg_num: '',
      popupNewsList: [],
      sortVal: 0
   import {
      Popup,
      Swipe,
      SwipeItem
   } 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 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";
   export default {
      name: "HomePage",
      components: {
         IoeSwiper,
         ListQuatation,
         ExHeader,
         ExNav,
         [Popup.name]: Popup,
         [Swipe.name]: Swipe,
         [SwipeItem.name]: SwipeItem,
      },
      // async created() {
      //   // this.init();
      //   // this.checkingMesk();
      //   // this.connectWallet()
      //   // await this.fetchQList()
      // },
      computed: {
         ...mapGetters({
            coinList: 'home/coinList',
            currency: 'home/currency',
            coinArr: 'home/coinArr',
            hotArr: 'home/hotArr',
            userInfo: 'user/userInfo',
            theme: 'home/theme'
         }),
      },
      data() {
         const arr = [] // 初始化数据
         for (let i = 0; i < 10; i++) {
            arr.push({
               id: i
            })
         }
         return {
            isshow:true,
            currentSwitch: 1,
            switchBtns: ['ETL', '数字货币', '外汇', '期权'],
            BASE_URL,
            account: "",
            hList: arr.slice(0, 3), // 热门
            qList: arr, // 行情列表
            active: 0,
            timeout: null,
            loading: true,
            announceTitle: '',
            announceId: '',
            announceList: [],
            socket: null,
            showSave: false,
            unreadMsg_timer: null,
            unreadMsg_num: '',
            popupNewsList: [],
            sortVal: 0

    }
  },
  methods: {
    ...mapActions('home', [SET_COIN_LIST]),
    fetchUnread() { // 获取未读
      _getUnreadMsg().then(unread_num => {
        this.unreadMsg_num = (unread_num * 1 > 0) ? unread_num * 1 : '';
        //console.log('\n *** \n'+unread_num*1+'\n *** \n')
      })
    },
    listSort(val) {
      this.sortVal = val
    },
    async fetchQList() { // 获取行情
      const list = await _getHomeList(this.coinArr.join(',')).catch(() => {
        this.timeout = setTimeout(() => {
          this.fetchQList()
        }, 1000)
      })
      if (!(list instanceof Array)) {
        return
      }
      this.loading = false
      // this.qList = list.slice(0,10);
      this.qList = list;
      this.hList = list.filter(item => this.hotArr.includes(item.symbol));
      //排序
      if (this.sortVal == 1) {
        this.qList = this.qList.sort(this.sortLetterList("symbol"))
      }
      if (this.sortVal == 2) {
        this.qList = this.qList.sort(this.sortLetterTwoList("symbol"))
      }
      if (this.sortVal == 3) {
        this.qList = this.qList.sort(this.orderListAsc("close", "ask"))
      }
      if (this.sortVal == 4) {
        this.qList = this.qList.sort(this.orderListAsc("close"))
      }
      if (this.sortVal == 5) {
        this.qList = this.qList.sort(this.orderListAsc("change_ratio"))
      }
      if (this.sortVal == 6) {
        this.qList = this.qList.sort(this.orderListAsc("change_ratio", "ask"))
      }
         }
      },
      methods: {
         ...mapActions('home', [SET_COIN_LIST]),
         fetchUnread() { // 获取未读
            _getUnreadMsg().then(unread_num => {
               this.unreadMsg_num = (unread_num * 1 > 0) ? unread_num * 1 : '';
               //console.log('\n *** \n'+unread_num*1+'\n *** \n')
            })
         },
         closeclick(){
            this.isshow = false
         },
         listSort(val) {
            this.sortVal = val
         },
         async fetchQList() { // 获取行情
            const list = await _getHomeList(this.coinArr.join(',')).catch(() => {
               this.timeout = setTimeout(() => {
                  this.fetchQList()
               }, 1000)
            })
            if (!(list instanceof Array)) {
               return
            }
            this.loading = false
            // this.qList = list.slice(0,10);
            this.qList = list;
            this.hList = list.filter(item => this.hotArr.includes(item.symbol));
            //排序
            if (this.sortVal == 1) {
               this.qList = this.qList.sort(this.sortLetterList("symbol"))
            }
            if (this.sortVal == 2) {
               this.qList = this.qList.sort(this.sortLetterTwoList("symbol"))
            }
            if (this.sortVal == 3) {
               this.qList = this.qList.sort(this.orderListAsc("close", "ask"))
            }
            if (this.sortVal == 4) {
               this.qList = this.qList.sort(this.orderListAsc("close"))
            }
            if (this.sortVal == 5) {
               this.qList = this.qList.sort(this.orderListAsc("change_ratio"))
            }
            if (this.sortVal == 6) {
               this.qList = this.qList.sort(this.orderListAsc("change_ratio", "ask"))
            }

      if (this.hList.length == 4) {
        this.hList.pop()
      }
      if (this.timeout) {
        clearTimeout(this.timeout)
      }
      this.timeout = setTimeout(async () => {
        console.log('fetchQList')
        await this.fetchQList()
      }, TIME_OUT)
    },
    //字母排序
    sortLetterList(propertyName) {
      return function sortList(object1, object2) {
        const value1 = object1[propertyName];
        const value2 = object2[propertyName];
        if (value2 < value1) {
          return 1;
        }
        if (value2 > value1) {
          return -1;
        }
        return 0;
      };
    },
    sortLetterTwoList(propertyName) {
      return function sortList(object1, object2) {
        const value1 = object1[propertyName];
        const value2 = object2[propertyName];
        if (value2 > value1) {
          return 1;
        }
        if (value2 < value1) {
          return -1;
        }
        return 0;
      };
    },
    //数字排序
    orderListAsc(filed, type = "asc") {
      return (a, b) => {
        if (type == "asc") return parseFloat(a[filed]) > parseFloat(b[filed]) ? 1 : -1;
        return parseFloat(a[filed]) > parseFloat(b[filed]) ? -1 : 1;
      };
    },
    getNews() {
      Axios._getNewsList1({
        language: this.$i18n.locale,
      }).then(res => {
        this.announceList = res.data
      })
    },
    getPopupNews() {
      Axios._getPopupNews({
        token: this.userInfo.token,
        language: this.$i18n.locale,
      }).then(res => {
        if (res.data.length) {
          if (!getStorage('popNotice')) {
            let list = res.data
            list.forEach(item => {
              item.showPopUp = true
            })
            this.popupNewsList = list
          }
        }
      })
    },
    closePopNotice(item) {
      item.showPopUp = false
      setStorage('popNotice', true)
    },
    toAnnounceDetail(announceId) {
      if (announceId) {
        this.$router.push({ name: 'AnnounceDetail', query: { id: announceId } })
      }
    },
    getIsSave() {
      var issafariBrowser = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
      if (issafariBrowser) {
        if (getStorage(`${this.TITLE}addtoClosed`)) {
          this.showSave = false;
        } else {
          this.showSave = true
        }
      } else {
        this.showSave = false
      }
      var isFull = window.navigator.standalone;
      if (isFull) {
        this.showSave = false
      }
    },
    closeSaveBox() {
      setStorage(`${this.TITLE}addtoClosed`, 1)
      this.showSave = false
    },
    onClickLeft() { },
    onClickRight() { },
    startTimeout() {
      this.clearTimeout()
      this.fetchQList()
    },
    clearTimeout() {
      if (this.timeout) {
        clearTimeout(this.timeout)
        this.timeout = null
      }
    },
  },
  async created() {
    this.getIsSave();
    this.getNews();
    this.getPopupNews()
    await this.SET_COIN_LIST()
    this.startTimeout()
  },
  async activated() {
    this.getNews()
    this.getPopupNews()
    await this.SET_COIN_LIST()
    this.startTimeout()
    if (this.userInfo.token) {
      this.fetchUnread()
      this.unreadMsg_timer = setInterval(() => { this.fetchUnread() }, 5000);
    } else {
      this.unreadMsg_num = ''
    }
  },
  deactivated() {
    this.clearTimeout()
    if (this.unreadMsg_timer) {
      clearInterval(this.unreadMsg_timer);
      this.unreadMsg_timer = null;
    }
  },
  beforeDestroy() {
    this.clearTimeout()
    if (this.unreadMsg_timer) {
      clearInterval(this.unreadMsg_timer);
      this.unreadMsg_timer = null;
    }
  },
};
            if (this.hList.length == 4) {
               this.hList.pop()
            }
            if (this.timeout) {
               clearTimeout(this.timeout)
            }
            this.timeout = setTimeout(async () => {
               console.log('fetchQList')
               await this.fetchQList()
            }, TIME_OUT)
         },
         //字母排序
         sortLetterList(propertyName) {
            return function sortList(object1, object2) {
               const value1 = object1[propertyName];
               const value2 = object2[propertyName];
               if (value2 < value1) {
                  return 1;
               }
               if (value2 > value1) {
                  return -1;
               }
               return 0;
            };
         },
         sortLetterTwoList(propertyName) {
            return function sortList(object1, object2) {
               const value1 = object1[propertyName];
               const value2 = object2[propertyName];
               if (value2 > value1) {
                  return 1;
               }
               if (value2 < value1) {
                  return -1;
               }
               return 0;
            };
         },
         //数字排序
         orderListAsc(filed, type = "asc") {
            return (a, b) => {
               if (type == "asc") return parseFloat(a[filed]) > parseFloat(b[filed]) ? 1 : -1;
               return parseFloat(a[filed]) > parseFloat(b[filed]) ? -1 : 1;
            };
         },
         getNews() {
            Axios._getNewsList1({
               language: this.$i18n.locale,
            }).then(res => {
               this.announceList = res.data
               this.isshow = true
            })
         },
         getPopupNews() {
            Axios._getPopupNews({
               token: this.userInfo.token,
               language: this.$i18n.locale,
            }).then(res => {
               if (res.data.length) {
                  if (!getStorage('popNotice')) {
                     let list = res.data
                     list.forEach(item => {
                        item.showPopUp = true
                     })
                     this.popupNewsList = list
                  }
               }
            })
         },
         closePopNotice(item) {
            item.showPopUp = false
            setStorage('popNotice', true)
         },
         toAnnounceDetail(announceId) {
            if (announceId) {
               this.$router.push({
                  name: 'AnnounceDetail',
                  query: {
                     id: announceId
                  }
               })
            }
         },
         getIsSave() {
            var issafariBrowser = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
            if (issafariBrowser) {
               if (getStorage(`${this.TITLE}addtoClosed`)) {
                  this.showSave = false;
               } else {
                  this.showSave = true
               }
            } else {
               this.showSave = false
            }
            var isFull = window.navigator.standalone;
            if (isFull) {
               this.showSave = false
            }
         },
         closeSaveBox() {
            setStorage(`${this.TITLE}addtoClosed`, 1)
            this.showSave = false
         },
         onClickLeft() {},
         onClickRight() {},
         startTimeout() {
            this.clearTimeout()
            this.fetchQList()
         },
         clearTimeout() {
            if (this.timeout) {
               clearTimeout(this.timeout)
               this.timeout = null
            }
         },
      },
      async created() {
         this.getIsSave();
         this.getNews();
         this.getPopupNews()
         await this.SET_COIN_LIST()
         this.startTimeout()
      },
      async activated() {
         this.getNews()
         this.getPopupNews()
         await this.SET_COIN_LIST()
         this.startTimeout()
         if (this.userInfo.token) {
            this.fetchUnread()
            this.unreadMsg_timer = setInterval(() => {
               this.fetchUnread()
            }, 5000);
         } else {
            this.unreadMsg_num = ''
         }
      },
      deactivated() {
         this.clearTimeout()
         if (this.unreadMsg_timer) {
            clearInterval(this.unreadMsg_timer);
            this.unreadMsg_timer = null;
         }
      },
      beforeDestroy() {
         this.clearTimeout()
         if (this.unreadMsg_timer) {
            clearInterval(this.unreadMsg_timer);
            this.unreadMsg_timer = null;
         }
      },
   };
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  box-sizing: border-box;
  padding: 0 0 108px;
   .double_box_icon{
          position: absolute;
          left: 80%;
          top: 0;
          width: 4.375rem;
          height: 1.625rem;
          background: #2b64fb;
          font-size: 1.125rem;
          font-family: PingFang TC;
          font-weight: 400;
          color: #fff;
          line-height: 1.625rem;
          text-align: center;
          border-bottom-left-radius: 50%;
          border-top-right-radius: .5625rem;
   }
   .double_box_left_right{
      margin-right: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
   }
   .double_box_left{
      display: flex;
      justify-content: space-between;
   }
   .double_box_left_left_txt{
          margin: 1.375rem 0 0 1.125rem;
          font-size: 1.75rem;
          font-family: PingFang TC;
          font-weight: 600;
          color: #000;
          line-height: .8125rem;
      }
      .double_box_left_left_titlle{
             font-size: 1.5rem;
             font-family: PingFang TC;
             font-weight: 400;
             color: #606664;
             line-height: 1.5;
         margin: 1.1875rem 1.125rem 0 1.125rem;
             display: flex;
             justify-content: space-between;
             align-items: center;
      }
   .double_box_left{
      box-sizing: border-box;
      display: flex;
      width: 22.8125rem;
      height: 8.625rem;
      border-radius: .5625rem .5625rem .5625rem .5625rem;
      border: 1px solid #f2f2f2;
      position: relative;
   }
   .double{
      // width: 100%;
      margin: 30px 30px 0  30px;
      display: flex;
      justify-content: space-between;
   }
   .double_box_left_right_img{
      width: 4rem;
      height: 3.625rem;
      margin-top: -.625rem;
   }
   .home {
      width: 100%;
      box-sizing: border-box;
      padding: 0 0 108px;

  @include themify() {
    background: themed("home_bg");
  }
      @include themify() {
         background: themed("home_bg");
      }

  ::v-deep .van-cell {
    @include themify() {
      background: themed("main_background");
    }
  }
      ::v-deep .van-cell {
         @include themify() {
            background: themed("main_background");
         }
      }

  ::v-deep .ex-tabs .active {
    color: #fff;
  }
}
      ::v-deep .ex-tabs .active {
         color: #fff;
      }
   }

.box {
  width: 100px;
  height: 100px;
  background: red;
  font-size: 25px;
}
   .box {
      width: 100px;
      height: 100px;
      background: red;
      font-size: 25px;
   }

.van-notice-bar {
  padding: 0;
}
   .van-notice-bar {
      padding: 0;
   }

.notice-swipe {
  height: 82px;
  line-height: 82px;
}
   .notice-swipe {
      height: 82px;
      line-height: 82px;
   }

.buyBox {
  background: #F6F6F6;
  width: 100%;
  height: 132px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 43px;
  padding-right: 40px;
  margin-bottom: 44px;
  box-sizing: border-box;
   .buyBox {
      background: #F6F6F6;
      width: 100%;
      height: 132px;
      border-radius: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 43px;
      padding-right: 40px;
      margin-bottom: 44px;
      box-sizing: border-box;

  .left {
    display: flex;
    align-items: center;
    flex: 1;
      .left {
         display: flex;
         align-items: center;
         flex: 1;

    .leftBox {
      width: 104px;
      height: 88px;
         .leftBox {
            width: 104px;
            height: 88px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
            img {
               width: 100%;
               height: 100%;
            }
         }
      }

  .leftCont {
    margin-left: 40px;
      .leftCont {
         margin-left: 40px;

    p {
      font-size: 30px;
      color: #21262F;
      font-weight: 600;
      line-height: 36px;
    }
         p {
            font-size: 30px;
            color: #21262F;
            font-weight: 600;
            line-height: 36px;
         }

    span {
      color: #868D9A;
      font-size: 22px;
      line-height: 30px;
    }
  }
         span {
            color: #868D9A;
            font-size: 22px;
            line-height: 30px;
         }
      }

  .right {
    width: 53px;
    height: 53px;
      .right {
         width: 53px;
         height: 53px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}
         img {
            width: 100%;
            height: 100%;
         }
      }
   }

.quickly {
  width: 100%;
  height: 144px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 32px;
   .quickly {
      width: 100%;
      height: 144px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 32px;

  .quickBox {
    width: 368px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 40px;
    padding-left: 16px;
      .quickBox {
         width: 368px;
         height: 100%;
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding-right: 40px;
         padding-left: 16px;

    .left {
      display: flex;
      align-items: center;
      flex: 1;
         .left {
            display: flex;
            align-items: center;
            flex: 1;

      .leftBox {
        width: 80px;
        height: 80px;
            .leftBox {
               width: 80px;
               height: 80px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
               img {
                  width: 100%;
                  height: 100%;
               }
            }
         }

    .leftCont {
      margin-left: 24px;
         .leftCont {
            margin-left: 24px;

      p {
        font-size: 24px;
            p {
               font-size: 24px;

        @include themify() {
          color: themed("text_color");
        }
               @include themify() {
                  color: themed("text_color");
               }

        font-weight: 600;
        line-height: 36px;
      }
    }
               font-weight: 600;
               line-height: 36px;
            }
         }

    .right {
      width: 48px;
      height: 48px;
         .right {
            width: 48px;
            height: 48px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
            img {
               width: 100%;
               height: 100%;
            }
         }
      }

  .chongbi {
    background: url('../assets/theme/light/image/chongb.png');
    background-size: cover;
      .chongbi {
         background: url('../assets/theme/light/image/chongb.png');
         background-size: cover;

    &.dark {
      background: url('../assets/theme/dark/image/chongb.png');
      background-size: cover;
    }
  }
         &.dark {
            background: url('../assets/theme/dark/image/chongb.png');
            background-size: cover;
         }
      }

  .tibi {
    background: url('../assets/theme/light/image/tib.png');
    background-size: cover;
      .tibi {
         background: url('../assets/theme/light/image/tib.png');
         background-size: cover;

    &.dark {
      background: url('../assets/theme/dark/image/tib.png');
      background-size: cover;
    }
  }
}
         &.dark {
            background: url('../assets/theme/dark/image/tib.png');
            background-size: cover;
         }
      }
   }

.addBox {
  border-radius: 10px;
  width: 540px;
  height: 200px;
  font-size: 15px;
   .addBox {
      border-radius: 10px;
      width: 540px;
      height: 200px;
      font-size: 15px;

  @include themify() {
    background: themed("text_color");
  }
      @include themify() {
         background: themed("text_color");
      }

  position: fixed;
  bottom: 70px;
  left: 50%;
  margin-left: -270px;
  z-index: 1000;
      position: fixed;
      bottom: 70px;
      left: 50%;
      margin-left: -270px;
      z-index: 1000;

  .add {
    padding: 30px;
    box-sizing: border-box;
    height: 100%;
    position: relative;
      .add {
         padding: 30px;
         box-sizing: border-box;
         height: 100%;
         position: relative;

    @include themify() {
      color: themed("main_background");
    }
         @include themify() {
            color: themed("main_background");
         }

    .closeAdd {
      position: absolute;
      right: 10px;
      top: 10px;
    }
         .closeAdd {
            position: absolute;
            right: 10px;
            top: 10px;
         }

    .jiao {
      position: absolute;
      bottom: -76px;
      width: 0;
      height: 0;
      left: 240px;
      border: 30px solid transparent;
         .jiao {
            position: absolute;
            bottom: -76px;
            width: 0;
            height: 0;
            left: 240px;
            border: 30px solid transparent;

      @include themify() {
        border-top: 50px solid themed("text_color");
      }
            @include themify() {
               border-top: 50px solid themed("text_color");
            }

    }
  }
         }
      }

}
   }

.c2cbg {
  background: url('../assets/theme/dark/image/c2c2.png') no-repeat;
  background-size: cover;
   .c2cbg {
      background: url('../assets/theme/dark/image/c2c2.png') no-repeat;
      background-size: cover;

  &.light {
    background: url('../assets/theme/light/image/c2c2.png') no-repeat;
    background-size: cover;
  }
}
      &.light {
         background: url('../assets/theme/light/image/c2c2.png') no-repeat;
         background-size: cover;
      }
   }

.van-notice-bar {
  height: 60px;
}
   .van-notice-bar {
      height: 60px;
   }

.notice-swipe {
  height: 60px;
  line-height: 60px;
}
   .notice-swipe {
      height: 60px;
      line-height: 60px;
   }

.home-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 48px;
  padding-top: 32px;
   .home-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 48px;
      padding-top: 32px;


  &-left {
    font-weight: 600;
    font-size: 36px;
    line-height: 28px;
    color: #FFFFFF;
    margin-left: 20px;
  }
      &-left {
         font-weight: 600;
         font-size: 36px;
         line-height: 28px;
         color: #FFFFFF;
         margin-left: 20px;
      }

  &-right {
    .img {
      width: 36px;
      height: auto;
      margin-right: 20px;
    }
  }
}
      &-right {
         .img {
            width: 36px;
            height: auto;
            margin-right: 20px;
         }
      }
   }

.home-switch {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFFFFF;
  margin-top: 32px;
  font-family: 'PingFang HK';
  height: 65px;
   .home-switch {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #FFFFFF;
      margin-top: 32px;
      font-family: 'PingFang HK';
      height: 65px;

  &-list {
    flex: 1;
    font-weight: 300;
    text-align: center;
    font-size: 20px;
    position: relative;
  }
      &-list {
         flex: 1;
         font-weight: 300;
         text-align: center;
         font-size: 20px;
         position: relative;
      }

  .active {
    font-weight: 600;
    font-size: 28px;
  }
      .active {
         font-weight: 600;
         font-size: 28px;
      }

  .triangle {
    position: absolute;
    bottom: -16px;
    left: 50%;
    width: 10px;
    transform: translatex(-50%);
  }
}
</style>
      .triangle {
         position: absolute;
         bottom: -16px;
         left: 50%;
         width: 10px;
         transform: translatex(-50%);
      }
   }
</style>