webs/power_leasing/src/views/account/purchasedMachineConfig.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>