1

李

2026-06-03 4f9044ae2a9f2db03bbb916bc5f6dfd12916361d

 src/views/cryptos/financialManagement/fundHome.vue

@@ -1,68 +1,59 @@
<template>
  <div id="fundHome">
    <div class="fundHome">
      <assets-head :title="$t('基金理财')"></assets-head>
      <div class="box-border px-8 mt-10">
        <div class="flex justify-between text-grey relative">
          <div class="flex flex-col">
            <span class="text-grey text-30">{{ $t('托管金额') }}（USDT）</span>
            <span class="text-66 mt-5 font-bold textColor">{{ statiscis.amount_sum }}</span>
          </div>
        </div>
        <div class="flex mt-11 justify-between text-26 mb-2">
          <div class="flex flex-col ">
            <div class="text-grey text-26">{{ $t('预计日收益') }}（USDT）</div>
            <div class="mt-4 mb-2  text-36 textColor">{{ statiscis.today_profit }}</div>
          </div>
          <div class="flex flex-col">
            <div class="text-grey text-26">{{ $t('累计收益') }}（USDT）</div>
            <div class="mt-4 mb-2 text-36 textColor">{{ statiscis.aready_profit }}</div>
          </div>
          <div class="flex flex-col">
            <div class="text-grey text-26">{{ $t('托管订单') }}（USDT）</div>
            <div class="mt-4 mb-2 text-36 textColor">{{ statiscis.order_sum }}</div>
          </div>
  <div id="fundHome" class="fund-home-page">
    <!-- 头部：左侧标题 AI理财，右侧图标跳转托管订单 -->
    <div class="page-header">
      <h1 class="header-title">{{ $t('AI理财') }}</h1>
      <div class="header-right" @click="$router.push('/cryptos/fund-orders')">
        <div class="order-icon">
          <span class="line"></span>
          <span class="line"></span>
          <span class="line"></span>
        </div>
      </div>
      <div class="flex justify-between box-border px-8 mt-10">
        <div @click="$router.push('/cryptos/funds?tab=3&index=0&type=cryptos')"
          class="greyBg textColor w-96 py-3 rounded-md text-center text-28 mr-5 active">{{ $t('托管订单') }}
        </div>
        <div @click="$router.push('/cryptos/fund-rule')"
          class="greyBg text-grey w-96 py-3 rounded-md text-center text-28">
          {{ $t('规则') }}</div>
      </div>
      <div class="px-8 mt-10 pb-20">
        <div v-for="(item, index) in list" :key="index"
          class="card flex justify-between items-center relative rounded-md borderColor financialBackground ">
          <div class="title absolute px-4 py-2 text-26 text-white bg-green top-0 left-22">{{ $t('日收益率')
          }} <span class="ml-2">{{ item.daily_rate }}%</span></div>
          <div class="flex justify-center items-center">
            <img class="w-32 h-32 mr-5" :src="item.img" alt="">
            <div class="flex flex-col items-start">
              <span class="text-36 font-semibold textColor">
                <template v-if="$i18n.locale === 'CN'">
                  {{ item.name_cn }}
                </template>
                <template v-else-if="$i18n.locale === 'zh-CN'">
                  {{ item.name }}
                </template>
                <template v-else>
                  {{ item.name_en }}
                </template>
              </span>
              <span class="text-26 mt-6 mb-4 textColor">{{ $t('限额') }} {{ item.investment_min + ' ~ ' +
                item.investment_max }}
                USDT</span>
              <span class="text-26 textColor">{{ $t('周期') }} {{ item.cycle }} {{ $t('天') }}</span>
            </div>
    </div>

    <!-- 轮播图：简体/繁体用原图，其他语言用 _e 图 -->
    <div class="banner-swipe">
      <van-swipe class="banner-swipe__wrap" :autoplay="4000" indicator-color="#92D1FF">
        <van-swipe-item>
          <img :src="bannerImgs[0]" alt="" class="banner-img" />
        </van-swipe-item>
        <van-swipe-item>
          <img :src="bannerImgs[1]" alt="" class="banner-img" />
        </van-swipe-item>
        <van-swipe-item>
          <img :src="bannerImgs[2]" alt="" class="banner-img" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 理财产品卡片列表 -->
    <div class="product-list">
      <div v-for="(item, index) in list" :key="index" class="product-card">
        <div class="card-top">
          <div class="card-title-row">
            <img class="product-icon" :src="item.img" alt="" />
            <span class="product-name textColor">
              <template v-if="$i18n.locale === 'CN'">{{ item.name_cn }}</template>
              <template v-else-if="$i18n.locale === 'zh-CN'">{{ item.name }}</template>
              <template v-else>{{ item.name_en }}</template>
            </span>
          </div>
          <div @click="$router.push({
            path: '/cryptos/fund-buy',
            query: {
              ...item
            }
          })" class="active py-4 px-8 text-30 font-semibold rounded-md">{{ $t('立即买入') }}</div>
          <div class="cycle-tag">{{ item.cycle }}{{ $t('天') }}</div>
        </div>

        <div class="card-body">
          <div class="info-row">
            <span class="label textColor1">{{ $t('收益率') }}</span>
            <span class="value textColor">{{ item.daily_rate }}%</span>
          </div>
          <div class="info-row">
            <span class="label textColor1">{{ $t('认购价格') }}</span>
            <span class="value textColor">{{ item.investment_min }}-{{ item.investment_max }} USD</span>
          </div>
        </div>
        <div class="join-btn" @click="$router.push({ path: '/cryptos/fund-buy', query: { ...item } })">
          {{ $t('立即参与') }}
        </div>
      </div>
    </div>
@@ -70,79 +61,215 @@
</template>

<script>
import assetsHead from '@/components/Transform/assets-head/index.vue';
import { Swipe, SwipeItem } from 'vant'
import { financeStatics, getfinacialProductsList } from "@/service/financialManagement.api.js";
import banner1 from '@/assets/image/fund/banner1.jpg'
import banner2 from '@/assets/image/fund/banner2.jpg'
import banner3 from '@/assets/image/fund/banner3.jpg'
import banner1E from '@/assets/image/fund/banner1_e.jpg'
import banner2E from '@/assets/image/fund/banner2_e.jpg'
import banner3E from '@/assets/image/fund/banner3_e.jpg'

export default {
  name: "fundHome",
  components: {
    assetsHead,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem
  },
  data() {
    return {
      statiscis: {},
      list: []
      list: [],
      bannerImgsZh: [banner1, banner2, banner3],
      bannerImgsEn: [banner1E, banner2E, banner3E]
    }
  },
  methods: {
  computed: {
    // 简体中文(zh-CN)或繁体(CN)用原图，其他语言用 _e 图
    bannerImgs() {
      const locale = this.$i18n?.locale || ''
      const isZh = locale === 'zh-CN' || locale === 'CN'
      return isZh ? this.bannerImgsZh : this.bannerImgsEn
    }
  },
  activated() {
    getfinacialProductsList().then(res => {
      //console.log('理财列表', res)
      this.list = res
      this.list = res || []
    })
    financeStatics().then(res => {
      //console.log('理财统计', res)
      this.statiscis = res
      this.statiscis = res || {}
    })
  },
  created() {
    getfinacialProductsList().then(res => {
      //console.log('理财列表',res)
      this.list = res
      this.list = res || []
    })
    financeStatics().then(res => {
      //console.log('理财统计',res)
      this.statiscis = res
      this.statiscis = res || {}
    })
  }
}
</script>

<style lang="scss" scoped>
#fundHome {
@import '@/assets/css/variable.scss';

  .fundHome {
    width: 100%;
    box-sizing: border-box;
  }
.fund-home-page {
  min-height: 100vh;
  background: $main_background;
  padding-bottom: 4rem;
  box-sizing: border-box;
}

  .active {
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 8.8rem;
  padding: 0 2.4rem;
  background: #fff;
  box-sizing: border-box;

  .header-title {
    font-size: 3.4rem;
    font-weight: 700;
    color: $text_color;

    // @include themify() {
    //   background: themed("btn_main") !important;
    // }

    // @include themify() {
    //   border-color: themed("btn_main") !important;
    // }

    margin: 0;
  }

  .title {
    border-radius: 0 0 8px 8px;
  .header-right {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .card {
    padding: 80px 22px 22px 22px;
    margin-bottom: 32px;
  .order-icon {
    width: 3.2rem;
    height: 3.2rem;
    border: 0.15rem solid $text_color1;
    border-radius: 0.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;

    .line {
      display: block;
      width: 1.6rem;
      height: 0.12rem;
      background: $text_color1;
      border-radius: 0.06rem;
    }
  }
}

.banner-swipe {
  margin: 2rem 2.4rem;
  border-radius: 1.2rem;
  overflow: hidden;
}

.banner-swipe__wrap {
  border-radius: 1.2rem;
}

.banner-swipe__wrap :deep(.van-swipe-item) {
  width: 100%;
}

.banner-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.product-list {
  padding: 0 2.4rem 4rem;
}

.product-card {
  background: #fff;
  border-radius: 1.2rem;
  padding: 2.2rem 2rem 2rem;
  margin-bottom: 2rem;
  box-shadow: 0rem .8rem 3.2rem 0rem rgba(0, 0, 0, .16);
  border: 0.1rem solid $border_color;
  box-sizing: border-box;
}

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.card-title-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.product-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 0.8rem;
  object-fit: cover;
}

.product-name {
  font-size: 2.4rem;
  font-weight: 600;
}

.cycle-tag {
  background: #0cc38d;
  color: #fff;
  font-size: 1.4rem;
  padding: 0.6rem 4rem;
  border-radius: .8rem;
}

.card-body {
  margin-bottom: 2rem;
  border-top: solid 1px #f3f3f3;
  margin-top: 2.4rem;
  padding-top: 2.4rem;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  font-size: 2.2rem;

  .label {
    color: $text_color1;
  }

  .active {
    color: $white;
    background: $btn_main;
    border-color: $btn_main;
  .value {
    color: $text_color;
  }
}

.join-btn {
  width: 100%;
  height: 6rem;
  line-height: 6rem;
  text-align: center;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #fff;
  font-size: 2.2rem;
  font-weight: 500;
  border-radius: 1rem;
  cursor: pointer;
  border: none;
  box-sizing: border-box;
}
</style>