lizixuan/webs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

每周更新

Browse Source
This commit is contained in:
yaoqin
2025-12-12 15:33:23 +08:00
parent cbefb964d4
commit 5945ab5588
11 changed files with 2172 additions and 908 deletions
Download Patch File Download Diff File Expand all files Collapse all files

421
power_leasing/src/views/account/purchasedMachineConfig.vue Normal file
View File

@@ -0,0 +1,421 @@
<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 type="expand" width="46">
<template #default="scope">
<div class="expand-content">
<div class="expand-row" v-if="scope.row.walletAddress">
<div class="expand-label">钱包地址：</div>
<div class="expand-value">
<span class="mono-ellipsis" style="font-family: monospace;">{{ scope.row.walletAddress }}</span>
<el-button
type="text"
size="mini"
icon="el-icon-document-copy"
@click="handleCopy(scope.row.walletAddress, '钱包地址')"
class="copy-btn"
>
复制
</el-button>
</div>
</div>
<div class="expand-row" v-if="scope.row.poolUrl">
<div class="expand-label">矿池地址：</div>
<div class="expand-value">
<span class="mono-ellipsis">{{ scope.row.poolUrl }}</span>
<el-button
type="text"
size="mini"
icon="el-icon-document-copy"
@click="handleCopy(scope.row.poolUrl, '矿池地址')"
class="copy-btn"
>
复制
</el-button>
</div>
</div>
<div class="expand-row" v-if="scope.row.watchUrl">
<div class="expand-label">挖矿信息页面地址：</div>
<div class="expand-value">
<span class="mono-ellipsis">{{ scope.row.watchUrl }}</span>
<el-button
type="text"
size="mini"
icon="el-icon-document-copy"
@click="handleCopy(scope.row.watchUrl, '挖矿信息页面地址')"
class="copy-btn"
>
复制
</el-button>
</div>
</div>
<div v-if="!scope.row.walletAddress && !scope.row.poolUrl && !scope.row.watchUrl" class="expand-empty">
暂无地址信息
</div>
</div>
</template>
</el-table-column>
<!-- <el-table-column prop="id" label="ID" width="80" /> -->
<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="poolUser" label="矿池用户" min-width="140">
<template #default="scope">
<span>{{ scope.row.poolUser || '—' }}</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="140">
<template #default="scope">
<el-tag :type="getStatusType(scope.row.status)">
{{ getStatusText(scope.row.status) }}
</el-tag>
</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.$message({
message: '获取已购矿机配置失败，请重试',
type: 'error',
showClose: true
})
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 {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;
}
/* 展开内容样式 */
.expand-content {
padding: 16px;
background-color: #fafafa;
}
.expand-row {
display: flex;
align-items: flex-start;
margin-bottom: 16px;
padding: 12px;
background-color: #fff;
border-radius: 4px;
border: 1px solid #e4e7ed;
}
.expand-row:last-child {
margin-bottom: 0;
}
.expand-label {
min-width: 100px;
font-weight: 600;
color: #606266;
margin-right: 12px;
flex-shrink: 0;
}
.expand-value {
flex: 1;
display: flex;
align-items: flex-start;
gap: 8px;
flex-wrap: wrap;
}
.expand-value .mono-ellipsis {
font-family: monospace;
color: #303133;
line-height: 1.5;
word-break: break-all;
flex: 0 1 auto;
margin-right: 8px;
}
.copy-btn {
flex-shrink: 0;
padding: 0 8px;
color: #409eff;
}
.copy-btn:hover {
color: #66b1ff;
}
.expand-empty {
padding: 20px;
text-align: center;
color: #909399;
font-size: 14px;
}
/* 钱包地址和URL格式化显示样式 */
.mono-ellipsis {
font-family: monospace;
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
}
</style>