372 lines
9.7 KiB
Vue
372 lines
9.7 KiB
Vue
<template>
|
||
<div class="account-purchased-machine-config">
|
||
<div class="toolbar">
|
||
<div class="left-area">
|
||
<h2 class="page-title">挖矿信息</h2>
|
||
</div>
|
||
</div>
|
||
|
||
<el-table
|
||
:data="tableData"
|
||
v-loading="loading"
|
||
border
|
||
stripe
|
||
style="width: 100%"
|
||
:header-cell-style="{ textAlign: 'left' }"
|
||
:cell-style="{ textAlign: 'left' }"
|
||
>
|
||
<el-table-column prop="coin" label="币种" width="100">
|
||
<template #default="scope">
|
||
<span>{{ scope.row.coin || '—' }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column prop="algorithm" label="算法" min-width="120">
|
||
<template #default="scope">
|
||
<span>{{ scope.row.algorithm || '—' }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column prop="pool" label="矿池" min-width="140">
|
||
<template #default="scope">
|
||
<span>{{ scope.row.pool || '—' }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column prop="walletAddress" label="钱包地址" min-width="200">
|
||
<template #default="scope">
|
||
<div class="address-cell">
|
||
<span v-if="scope.row.walletAddress" class="mono-ellipsis" style="font-family: monospace;">{{ scope.row.walletAddress }}</span>
|
||
<span v-else>—</span>
|
||
<el-button
|
||
v-if="scope.row.walletAddress"
|
||
type="text"
|
||
size="mini"
|
||
icon="el-icon-document-copy"
|
||
@click="handleCopy(scope.row.walletAddress, '钱包地址')"
|
||
class="copy-btn"
|
||
>
|
||
复制
|
||
</el-button>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column prop="poolUrl" label="矿池地址" min-width="200">
|
||
<template #default="scope">
|
||
<div class="address-cell">
|
||
<span v-if="scope.row.poolUrl" class="mono-ellipsis">{{ scope.row.poolUrl }}</span>
|
||
<span v-else>—</span>
|
||
<el-button
|
||
v-if="scope.row.poolUrl"
|
||
type="text"
|
||
size="mini"
|
||
icon="el-icon-document-copy"
|
||
@click="handleCopy(scope.row.poolUrl, '矿池地址')"
|
||
class="copy-btn"
|
||
>
|
||
复制
|
||
</el-button>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="操作" width="120" fixed="right">
|
||
<template #default="scope">
|
||
<el-button
|
||
type="text"
|
||
size="mini"
|
||
@click="handleViewDetail(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 { getPurchasedItems } from '../../api/order'
|
||
|
||
/**
|
||
* 已购矿机配置页面
|
||
* - 展示已购买矿机的配置信息
|
||
* - 支持分页查询
|
||
*/
|
||
export default {
|
||
name: 'AccountPurchasedMachineConfig',
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
tableData: [],
|
||
pagination: {
|
||
pageNum: 1,
|
||
pageSize: 10
|
||
},
|
||
total: 0,
|
||
totalPage: 0
|
||
}
|
||
},
|
||
created() {
|
||
this.fetchTableData()
|
||
},
|
||
methods: {
|
||
/**
|
||
* 获取已购矿机配置列表
|
||
*/
|
||
async fetchTableData() {
|
||
this.loading = true
|
||
try {
|
||
const params = {
|
||
pageNum: this.pagination.pageNum,
|
||
pageSize: this.pagination.pageSize
|
||
}
|
||
const res = await getPurchasedItems(params)
|
||
if (res && (res.code === 0 || res.code === 200)) {
|
||
this.tableData = Array.isArray(res.rows) ? res.rows : []
|
||
this.total = Number(res.total || 0)
|
||
this.totalPage = Number(res.totalPage || 0)
|
||
} else {
|
||
this.tableData = []
|
||
this.total = 0
|
||
this.totalPage = 0
|
||
}
|
||
} catch (e) {
|
||
console.error('获取已购矿机配置失败', e)
|
||
|
||
this.tableData = []
|
||
this.total = 0
|
||
this.totalPage = 0
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
},
|
||
/**
|
||
* 处理分页大小变化
|
||
* @param {number} size - 新的分页大小
|
||
*/
|
||
handleSizeChange(size) {
|
||
this.pagination.pageSize = size
|
||
this.pagination.pageNum = 1
|
||
this.fetchTableData()
|
||
},
|
||
/**
|
||
* 处理当前页变化
|
||
* @param {number} page - 新的页码
|
||
*/
|
||
handleCurrentChange(page) {
|
||
this.pagination.pageNum = page
|
||
this.fetchTableData()
|
||
},
|
||
/**
|
||
* 格式化日期时间
|
||
* @param {string|number} value - 日期时间值
|
||
* @returns {string} 格式化后的日期时间字符串
|
||
*/
|
||
formatDateTime(value) {
|
||
if (!value) return '—'
|
||
try {
|
||
const str = String(value)
|
||
return str.includes('T') ? str.replace('T', ' ') : str
|
||
} catch (e) {
|
||
return String(value)
|
||
}
|
||
},
|
||
/**
|
||
* 复制文本到剪贴板
|
||
* @param {string} text - 需要复制的内容
|
||
* @param {string} label - 语义标签，用于提示文案
|
||
*/
|
||
async handleCopy(text, label = '内容') {
|
||
if (!text) {
|
||
this.$message({
|
||
message: `${label}为空，无法复制`,
|
||
type: 'warning',
|
||
showClose: true
|
||
})
|
||
return
|
||
}
|
||
|
||
try {
|
||
const value = String(text).trim()
|
||
if (navigator && navigator.clipboard && navigator.clipboard.writeText) {
|
||
await navigator.clipboard.writeText(value)
|
||
this.$message({
|
||
message: `${label}已复制到剪贴板`,
|
||
type: 'success',
|
||
showClose: true
|
||
})
|
||
} else {
|
||
// 备用复制方法
|
||
const textArea = document.createElement('textarea')
|
||
textArea.value = value
|
||
textArea.style.position = 'fixed'
|
||
textArea.style.left = '-9999px'
|
||
document.body.appendChild(textArea)
|
||
textArea.focus()
|
||
textArea.select()
|
||
try {
|
||
document.execCommand('copy')
|
||
this.$message({
|
||
message: `${label}已复制到剪贴板`,
|
||
type: 'success',
|
||
showClose: true
|
||
})
|
||
} catch (err) {
|
||
this.$message({
|
||
message: '复制失败，请手动复制',
|
||
type: 'error',
|
||
showClose: true
|
||
})
|
||
}
|
||
document.body.removeChild(textArea)
|
||
}
|
||
} catch (e) {
|
||
console.error('复制失败', e)
|
||
this.$message({
|
||
message: '复制失败，请手动复制',
|
||
type: 'error',
|
||
showClose: true
|
||
})
|
||
}
|
||
},
|
||
/**
|
||
* 查看详情
|
||
* @param {Object} row - 行数据
|
||
*/
|
||
handleViewDetail(row) {
|
||
console.log('查看详情，行数据:', row) // 调试用
|
||
// 跳转到详情页面，传递行数据的ID
|
||
const id = row.id || row.productMachineId || row.machineId
|
||
console.log('提取的ID:', id) // 调试用
|
||
if (id) {
|
||
try {
|
||
this.$router.push({
|
||
name: 'purchasedMachineDetail',
|
||
params: { id: id }
|
||
})
|
||
} catch (e) {
|
||
console.error('路由跳转失败:', e)
|
||
this.$message.error('跳转失败，请稍后重试')
|
||
}
|
||
} else {
|
||
console.warn('行数据中缺少ID字段:', row) // 调试用
|
||
this.$message.warning('无法获取详情，缺少ID信息')
|
||
}
|
||
},
|
||
/**
|
||
* 获取状态文本
|
||
* @param {number|boolean} status - 状态值
|
||
* @returns {string} 状态文本
|
||
*/
|
||
getStatusText(status) {
|
||
const statusNum = Number(status)
|
||
if (statusNum === 0) return '租约已到期'
|
||
if (statusNum === 1) return '挖矿中'
|
||
if (statusNum === 2) return '卖家矿机启动中'
|
||
// 兼容旧数据（boolean类型）
|
||
if (status === true) return '挖矿中'
|
||
return '未知状态'
|
||
},
|
||
/**
|
||
* 获取状态标签类型
|
||
* @param {number|boolean} status - 状态值
|
||
* @returns {string} el-tag 的类型
|
||
*/
|
||
getStatusType(status) {
|
||
const statusNum = Number(status)
|
||
if (statusNum === 0) return 'info' // 租约已到期 - 灰色
|
||
if (statusNum === 1) return 'success' // 挖矿中 - 绿色
|
||
if (statusNum === 2) return 'warning' // 卖家矿机启动中 - 黄色
|
||
// 兼容旧数据（boolean类型）
|
||
if (status === true) return 'success'
|
||
return 'info'
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.account-purchased-machine-config {
|
||
padding: 4px;
|
||
}
|
||
|
||
.toolbar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.left-area {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.page-title {
|
||
margin: 0;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #2c3e50;
|
||
}
|
||
|
||
.pagination {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
/* 地址单元格样式 */
|
||
.address-cell {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.address-cell .mono-ellipsis {
|
||
font-family: monospace;
|
||
color: #303133;
|
||
line-height: 1.5;
|
||
word-break: break-all;
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.copy-btn {
|
||
flex-shrink: 0;
|
||
padding: 0 8px;
|
||
color: #409eff;
|
||
}
|
||
|
||
.copy-btn:hover {
|
||
color: #66b1ff;
|
||
}
|
||
|
||
/* 钱包地址和URL格式化显示样式 */
|
||
.mono-ellipsis {
|
||
font-family: monospace;
|
||
display: inline-block;
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
vertical-align: middle;
|
||
}
|
||
</style>
|
||
|