272 lines
7.4 KiB
Vue
272 lines
7.4 KiB
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>
|
|
|