矿机租赁系统代码更新

power_leasing/src/views/account/purchased.vue

@@ -0,0 +1,234 @@
+<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="120"
+      />
+      <el-table-column
+        prop="estimatedEndUsdtIncome"
+        label="预计USDT总收益"
+        min-width="160"
+      />
+      <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";
+
+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: {
+    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;
+}
+</style>
+