webs/power_leasing/src/views/account/purchased.vue

<template>
  <div class="account-purchased">
    <div class="toolbar">
      <div class="left-area">
        <h2 class="page-title">已购商品</h2>
      </div>
      <!-- <div class="right-area">
        <el-input
          v-model="searchKeyword"
          placeholder="输入币种或算法后搜索（可留空）"
          size="small"
          clearable
          class="mr-12"
          style="width: 280px"
          @keyup.enter.native="handleSearch"
          @clear="handleClear"
        />
        <el-button type="primary" size="small" @click="handleSearch"
          >搜索</el-button
        >
        <el-button size="small" class="ml-8" @click="handleReset"
          >重置</el-button
        >
      </div> -->
    </div>

    <el-table
      :data="tableData"
      v-loading="loading"
      border
      stripe
      style="width: 100%"
    >
      <el-table-column prop="userId" label="用户" width="180" />

      <el-table-column prop="productMachineId" label="机器ID" width="80" />
      <!-- <el-table-column
        prop="purchasedComputingPower"
        label="购买算力"
        min-width="120"
       
      /> -->

      <el-table-column prop="type" label="类型" width="100">
        <template #default="scope">
          <el-tag :type="scope.row.type === 1 ? 'success' : 'info'">
            {{ scope.row.type === 1 ? "算力套餐" : "挖矿机器" }}
          </el-tag>
        </template>
      </el-table-column>

      <!-- <el-table-column prop="currentIncome" label="当前收入" min-width="120" />
      <el-table-column
        prop="currentUsdtIncome"
        label="当前USDT收入"
        min-width="140"
      /> -->
      <el-table-column
        prop="estimatedEndIncome"
        label="预计总收益"
        min-width="140"
      >
        <template #default="scope">
          <span class="value strong">
            <el-tooltip
              v-if="formatAmount(scope.row.estimatedEndIncome, scope.row.coin || 'USDT').truncated"
              :content="formatAmount(scope.row.estimatedEndIncome, scope.row.coin || 'USDT').full"
              placement="top"
            >
              <span>
                {{ formatAmount(scope.row.estimatedEndIncome, scope.row.coin || 'USDT').text }}
                <i class="el-icon-more amount-more"></i>
              </span>
            </el-tooltip>
            <span v-else>{{ formatAmount(scope.row.estimatedEndIncome, scope.row.coin || 'USDT').text }}</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="estimatedEndUsdtIncome"
        label="预计USDT总收益"
        min-width="160"
      >
        <template #default="scope">
          <span class="value strong">
            <el-tooltip
              v-if="formatAmount(scope.row.estimatedEndUsdtIncome, 'USDT').truncated"
              :content="formatAmount(scope.row.estimatedEndUsdtIncome, 'USDT').full"
              placement="top"
            >
              <span>
                {{ formatAmount(scope.row.estimatedEndUsdtIncome, 'USDT').text }}
                <i class="el-icon-more amount-more"></i>
              </span>
            </el-tooltip>
            <span v-else>{{ formatAmount(scope.row.estimatedEndUsdtIncome, 'USDT').text }}</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="startTime" label="开始时间" min-width="160" >
      <template #default="scope">
          <span>{{ formatDateTime(scope.row.startTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="endTime" label="结束时间" min-width="160" >
        <template #default="scope">
          <span>{{ formatDateTime(scope.row.endTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template #default="scope">
          <el-tag :type="scope.row.status === 0 ? 'success' : 'info'">
            {{ scope.row.status === 0 ? "运行中" : "已过期" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="120">
        <template #default="scope">
          <el-button type="text" size="small" @click="handleView(scope.row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :current-page.sync="pagination.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size.sync="pagination.pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getOwnedList } from "../../api/products";
import { coinList } from "../../utils/coinList";
import { truncateAmountByCoin } from "../../utils/amount";

export default {
  name: "AccountPurchased",
  data() {
    return {
      loading: false,
      searchKeyword: "",
      tableData: [],
      pagination: {
        pageNum: 1,
        pageSize: 10,
      
      },
      coins: coinList || [],
      total:0,
      currentPage:1,
    };
  },
  created() {
    this.fetchTableData(this.pagination);
  },
  methods: {
    formatAmount(value, coin) {
      return truncateAmountByCoin(value, coin);
    },
    async fetchTableData(params) {
      this.loading = true;
      try {
        const res = await getOwnedList(params);
        if (res && (res.code === 0 || res.code === 200)) {
          this.tableData = res.rows;
          this.total = res.total;
        }
      } catch (e) {
        console.error("获取已购商品失败", e);
    
      } finally {
        this.loading = false;
      }
    },
    handleSearch() {
      this.pagination.pageNum = 1;
      this.fetchTableData();
    },
    handleReset() {
      this.searchKeyword = "";
      this.pagination.pageNum = 1;
      this.pagination.pageSize = 10;
      this.fetchTableData(this.pagination);
    },
    handleClear() {
      this.searchKeyword = "";
      this.pagination.pageNum = 1;
      this.fetchTableData(this.pagination);
    },
    handleSizeChange(size) {
      this.pagination.pageSize = size;
      this.pagination.pageNum = 1;
      this.fetchTableData(this.pagination);
    },
    handleCurrentChange(page) {
      this.pagination.pageNum = page;
      this.fetchTableData(this.pagination);
    },
    handleView(row) {
      // 跳转到已购商品详情页面
      this.$router.push({
        name: 'PurchasedDetail',
        params: { id: row.id }
      })
    },
    formatDateTime(value) {
      if (!value) return '—'
      try {
        const str = String(value)
        return str.includes('T') ? str.replace('T', ' ') : str
      } catch (e) {
        return String(value)
      }
    }
  },
};
</script>

<style scoped>
.account-purchased {
  padding: 4px;
}
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.left-area {
  display: flex;
  align-items: center;
}
.right-area {
  display: flex;
  align-items: center;
}
.page-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}
.mr-12 {
  margin-right: 12px;
}
.ml-8 {
  margin-left: 8px;
}
.thumb {
  width: 72px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
}
.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
.amount-more { font-size: 12px; color: #94a3b8; margin-left: 4px; }
</style>