添加缓存

lxf

2025-07-16 f96f952d95930e1295051c1bfe348dd324ebf878

 src/views/news/index.vue

@@ -39,14 +39,16 @@
          <div class="font-bold block text-18">{{ item.name }}</div>
          <div class="font-bold block text-20">{{ item.ask }}</div>
          <div class="w-full h-50">
            <div id="DOGEUSDT" class="w-full h-full"
              style="user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
              <!-- 图表容器保持不变 -->
            <div id="DOGEUSDT" class="w-full h-full relative overflow-hidden"
              style="user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);margin: 0 10px;">
              <!-- 添加进度条动画 -->
              <div class="absolute top-10 left-0 h-1 bg-blue-500 progress-bar-animation" :style="{ width: '80%' }">
              </div>
            </div>
          </div>
          <div class="flex justify-between">
            <div class="py-2 px-8 rounded-full text-13 font-medium bg-white">{{item.change_ratio}}</div>
            <span class="text-18">→</span>
            <div class="py-2 px-8 rounded-full text-13 font-medium bg-white">{{ item.change_ratio }}</div>
            <span class="text-18" :class="index % 2 === 1 ? 'c2c_color' : ''">→</span>
          </div>
        </div>
      </div>
@@ -61,32 +63,33 @@
      <div class="w-40 h-40 rounded-full flex items-center justify-center">
        <img class="w-33 h-33" src="@/assets/a.jpg" draggable="false">
      </div>
      <div class="text-center">{{t('理財')}}</div>
      <div class="text-center">{{ t('理财') }}</div>
    </div>
    <div class="flex-1 flex flex-col items-center" @click="goToPage('/cryptos/trade/btcusdt')">
    <div class="flex-1 flex flex-col items-center" @click="goToPage('/cryptos/trade/USDSGD')">
      <div class="w-40 h-40 rounded-full flex items-center justify-center">
        <img class="w-33 h-33" src="@/assets/c.jpg" draggable="false">
      </div>
      <div class="text-center">{{t('币币交易')}}</div>
      <div class="text-center">{{ t('外汇交易') }}</div>
    </div>
    <div class="flex-1 flex flex-col items-center" @click="goToPage('/cryptos/perpetualContract/btcusdt?type=cryptos&selectIndex=2')">
    <div class="flex-1 flex flex-col items-center" @click="goToPage('/cryptos/perpetualContract/USDSGD?selectIndex=2')">
      <div class="w-40 h-40 rounded-full flex items-center justify-center">
        <img class="w-33 h-33" src="@/assets/c.jpg" draggable="false">
      </div>
      <div class="text-center">{{t('交割合约')}}</div>
      <div class="text-center">{{ t('货币兑换') }}</div>
    </div>
    <div class="flex-1 flex flex-col items-center" @click="copyInviteLink">
    <!-- <div class="flex-1 flex flex-col items-center" @click="copyInviteLink">
      <div class="w-40 h-40 rounded-full flex items-center justify-center">
        <img class="w-33 h-33" src="@/assets/d.jpg" draggable="false">
      </div>
      <div class="text-center">{{t('邀请好友')}}</div>
    </div>
      <div class="text-center">{{ t('邀请好友') }}</div>
    </div> -->
  </div>

  <!-- 新手指南部分 -->
  <div class="mt-20 mx-17 h-50 rounded-5 bg-#d8f0dd font-500 flex items-center justify-between text-16 px-15" @click="goToExplanation">
    <span>{{t('新手')}}</span>
    <div class="i-material-symbols:arrow-right-alt-rounded text-20"></div>
  <div class="mt-20 mx-17 h-50 rounded-5 bg-#d8f0dd font-500 flex items-center justify-between text-16 px-15"
    @click="goToExplanation">
    <span>{{ t('新手') }}</span>
    <div class="text-20">→</div>
  </div>


@@ -97,20 +100,18 @@

  <div class="mt-20">
    <div class="flex items-end justify-between px-17">
      <span class="block text-22 font-medium">{{t('news')}}</span>
      <span class="block text-22 font-medium">{{ t('news') }}</span>
    </div>
    <div class="px-17 mt-10">
      <!-- 新闻条目1 -->
      <div class="rounded-5 overflow-hidden mb-10" v-for="(t , i) in list" :key="t.dataId" >
        <div class="bg-#f5f7f9 py-12 px-15 " @click="openOriginUrl(t.originUrl)">
      <div class="rounded-5 overflow-hidden mb-10" v-for="(t) in list" :key="t.dataId">
        <div class="bg-#f5f7f9 py-12 px-15 ">
          <div class="flex" style="border-bottom: 1px solid rgb(209, 209, 209);">
            <div class="text-12 h-70 flex-1 line3">{{ t.description }}</div>
            <!-- <img class="w-90 h-55 flex-none rounded-10 ml-10"
              :src="t.img"
              draggable="false"> -->
            <div class="text-12 h-70 flex-1 line3">{{ t.title }}</div>
            <img class="w-90 h-55 flex-none rounded-10 ml-10" :src="t.imgUrl" draggable="false">
          </div>
          <div class="mt-5 text-10 text-#8c8c8c flex justify-between">
            <span>{{t.createTime}}</span>
            <span>{{ t.createTime }}</span>
            <!-- <div>全球股市</div> -->
          </div>
        </div>
@@ -119,14 +120,16 @@
    </div>
  </div>
</template>
    

<script setup>
import { ref, onMounted } from 'vue';
import { ref, onMounted, onUnmounted } from 'vue';
import { _getInformationList } from '@/service/etf.api'
import {_getHomeList} from '@/service/cryptos.api'
import { _getHomeList } from '@/service/cryptos.api'
import { showToast } from 'vant'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import { _getCoinList } from '@/service/quotes.api'
import { setStorage } from '@/utils/index'
const router = useRouter()

const { t } = useI18n()
@@ -144,6 +147,10 @@
  console.log('user', user)
  username.value = user.userInfo?.username || ''
  usercode.value = user.userInfo?.usercode || ''

  // 如果本地没有 coins，拉取接口
  const quotesData = await _getCoinList()
  setStorage('qoutes', { coins: quotesData }) // 存到本地
})

const goToExplanation = () => {
@@ -154,7 +161,14 @@
  goToPage('/customerService')
}
const goToPage = (path) => {
  router.push(path)
  if (path == '/mining') {
    showToast({
      message: 'Stay tuned',
      position: 'bottom',
    })
  } else {
    router.push(path)
  }
}

const getInformationList = () => {
@@ -163,11 +177,38 @@
  })
}


const getHomeList = () => {
  _getHomeList().then(data => {
    hotItems.value = data.slice(0, 3) // 取前3条数据
  const intervalId = ref(null)
  if (intervalId.value) {
    clearInterval(intervalId.value)
  }

  const fetchData = () => {
    _getHomeList().then(data => {
      hotItems.value = data.slice(0, 3) // 取前3条数据
    })
  }

  // 立即执行一次
  fetchData()

  intervalId.value = setInterval(fetchData, 1000)

  onUnmounted(() => {
    if (intervalId.value) {
      clearInterval(intervalId.value)
    }
  })

  router.beforeEach((to, from, next) => {
    if (from.path === '/news/index') {
      clearInterval(intervalId.value)
    }
    next()
  })
}


// 添加跳转方法
const openOriginUrl = (url) => {
@@ -175,7 +216,7 @@
}

const copyInviteLink = () => {
  const inviteLink = 'https://www.thinkmarketga.com/#/pages/register?c=' + usercode.value // 替换为你的实际邀请链接
  const inviteLink = 'https://www.thinkmarketga.com/#/pages/register?c=' + usercode.value // 邀请链接
  navigator.clipboard.writeText(inviteLink)
    .then(() => {
      // 可以添加提示，比如使用Toast组件
@@ -190,11 +231,29 @@
<style lang="scss" scoped>
@import '@/assets/css/deepseek_css_20250625_30ff932.css';

.line3{
.line3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.progress-bar-animation {
  animation: progress 1.5s ease-in-out forwards;
  transform-origin: left;
}

@keyframes progress {
  // 0% {
  //   transform: scaleX(0);
  // }
  // 100% {
  //   transform: scaleX(1);
  // }
}

.c2c_color {
  color: #fff;
}
</style>