1

李凌

2026-06-05 349c48e168b9f2580334422228acde7d1b21bede

 src/components/Transform/assetsCenter/financialList.vue

@@ -1,58 +1,73 @@
<template>
  <div class="cryptos">
    <div class="w-762 h-220 mt-37 box-border px-22 py-34 rounded-lg  contBackground"
      v-for="(item, index) in list" :key="index">
      <div class="flex justify-between" @click="handleGoOrderDetail(item)">
        <div class="flex ">
          <img v-if="type==0" :src="item.img ? item.img : '../../page/financialManagement/images/fund5.png'"
            alt="" class="w-154 h-154 mr-35" />
          <img v-else :src="item.img ? item.img : '../../page/financialManagement/images/machine_fpga.png'"
            alt="" class="w-154 h-154 mr-35" />
          <div>
            <div class="font-26 font-700 font-6 textColor" v-if="type==0">
              {{ $i18n.locale === 'CN'  ? item.financeName_cn :  $i18n.locale === 'zh-CN'?item.financeName : item.financeName_en }}
            </div>
            <div class="font-26 font-700 font-6 textColor" v-else>
              {{ $i18n.locale === 'CN' ?   item.miner_name_cn : $i18n.locale === 'zh-CN' ? item.miner_name : item.miner_name_en }}
            </div>
            <!-- <div v-if="tapIndex === 1" class="font-35 font-6">体验矿机3天</div> -->
            <div class="font-26 font-4 cl-33 mt-25 mb-16 textColor1">{{$t('数量')}}
              <span class="ml-10 mr-10 textColor">{{item.amount}}</span>{{ item.buyCurrency? item.buyCurrency.toUpperCase() :'USDT' }}</div>
            <div class="font-26 font-4 cl-33 textColor1">{{$t('周期')}}&nbsp;<span class="textColor">{{ item.cycle == 0 ? $t('无限期') : item.cycle+ $t('天')}}</span>
            </div>
  <div class="order-list">
    <div
      class="order-card contBackground"
      v-for="(item, index) in list"
      :key="index"
      @click="handleGoOrderDetail(item)"
    >
      <div class="order-card-main">
        <img
          v-if="type == 0"
          :src="item.img ? item.img : '../../page/financialManagement/images/fund5.png'"
          alt=""
          class="order-thumb"
        />
        <img
          v-else
          :src="item.img ? item.img : '../../page/financialManagement/images/machine_fpga.png'"
          alt=""
          class="order-thumb"
        />
        <div class="order-info">
          <div class="order-name textColor" v-if="type == 0">
            {{ $i18n.locale === 'CN' ? item.financeName_cn : ($i18n.locale === 'zh-CN' ? item.financeName : item.financeName_en) }}
          </div>
          <div class="order-name textColor" v-else>
            {{ $i18n.locale === 'CN' ? item.miner_name_cn : ($i18n.locale === 'zh-CN' ? item.miner_name : item.miner_name_en) }}
          </div>
          <div class="order-meta textColor1">
            {{ $t('数量') }}
            <span class="textColor">{{ item.amount }}</span>
            {{ item.buyCurrency ? item.buyCurrency.toUpperCase() : 'USDT' }}
          </div>
          <div class="order-meta textColor1">
            {{ type == 0 ? $t('周期') : (isMinerTest(item.test) ? $t('周期') : $t('可解锁周期')) }}
            <span class="textColor">
              {{ item.cycle == 0 ? $t('无限期') : item.cycle + (type == 0 || isMinerTest(item.test) ? $t('天') : $t('分钟')) }}
            </span>
          </div>
        </div>
        <div class="flex justify-center align-center text-center h-152 lh-152">
          <div class="mr-24 flex flex-col justify-center items-center">
            <span class="h-52 lh-52 font-44" :class="item.profit / 1 >= 0 ? 'text-green' : 'text-red'">{{(item.profit /
            1).toFixed(2)}}</span>
            <span class="w-162 h-32 lh-32 font-26 mt-16 textColor">{{$t('累计收益')}}({{ item.outputCurrency? item.outputCurrency.toUpperCase() : 'USDT'}})</span>
          </div>
          <div class="h-152 lh-152">
            <van-icon class="textColor" name="arrow" />
          </div>
      </div>
      <div class="order-profit">
        <div class="profit-num" :class="item.profit / 1 >= 0 ? 'text-green' : 'text-red'">
          {{ (item.profit / 1).toFixed(2) }}
        </div>
        <div class="profit-label textColor">
          {{ $t('累计收益') }}({{ item.outputCurrency ? item.outputCurrency.toUpperCase() : 'USDT' }})
        </div>
        <van-icon class="order-arrow textColor" name="arrow" />
      </div>
    </div>
  </div>
</template>

<script>
import { Icon } from 'vant';
import { Icon } from 'vant'
import { isMinerTest } from '@/utils/index.js'

export default {
  name: "financialList",
  props: ['list', 'btnShow', 'goBack', 'type'], // orderShow 点击跳转到订单详情的时候是否展示赎回按钮,goBack表示订单详情返回一层
  components :{
    [Icon.name]:Icon,
  },
  mounted(){
    console.log(this.type)
  name: 'financialList',
  props: ['list', 'btnShow', 'goBack', 'type'],
  components: {
    [Icon.name]: Icon
  },
  methods: {
    isMinerTest,
    handleGoOrderDetail(item) {
      if (this.type === 0) {
        this.$router.push({
          path: '/financialOrder',
          path: '/cryptos/financialOrder',
          query: {
            order_no: item.order_no,
            showBtn: this.btnShow,
@@ -62,7 +77,7 @@
        })
      } else {
        this.$router.push({
          path: '/miningMachineOrder',
          path: '/cryptos/miningMachineOrder',
          query: {
            order_no: item.order_no,
            showBtn: this.btnShow,
@@ -70,11 +85,84 @@
          }
        })
      }
    },
    }
  }
}
</script>

<style scoped>
<style scoped lang="scss">
.order-list {
  padding: 0 32px 24px;
}

.order-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 24px;
  padding: 28px 24px;
  border-radius: 20px;
}

.order-card-main {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.order-thumb {
  width: 120px;
  height: 120px;
  margin-right: 24px;
  flex-shrink: 0;
  object-fit: contain;
}

.order-info {
  flex: 1;
  min-width: 0;
}

.order-name {
  font-size: 34px;
  font-weight: 600;
  line-height: 1.35;
  word-break: break-word;
}

.order-meta {
  margin-top: 16px;
  font-size: 30px;
  line-height: 1.4;
}

.order-profit {
  position: relative;
  flex-shrink: 0;
  padding-right: 36px;
  text-align: center;
}

.profit-num {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.2;
}

.profit-label {
  margin-top: 12px;
  font-size: 26px;
  line-height: 1.3;
  max-width: 180px;
}

.order-arrow {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 32px;
}
</style>