webs/power_leasing/src/views/account/productDetail.vue

<template>
  <div class="account-product-detail">
    <div class="header">
      <el-button type="text" @click="handleBack">返回</el-button>
      <h2 class="title">商品详情</h2>
    </div>

    <!-- 基础信息，采用工单详情的两列表单风格 -->
    <el-card shadow="never" class="detail-card">
      <el-form :model="product" label-width="90px" class="detail-form" size="small">
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="商品ID">
              <el-input :value="product && product.id" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="店铺ID">
              <el-input :value="product && product.shopId" disabled />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="名称">
              <el-input :value="product && product.name" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="币种">
              <el-input :value="product && product.coin" disabled />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="算法">
              <el-input :value="product && product.algorithm" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="价格范围">
              <el-input :value="product && product.priceRange" disabled />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="类型">
              <el-input :value="product && (product.type === 1 ? '算力套餐' : '挖矿机器')" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态">
              <el-input :value="product && (product.state === 1 ? '下架' : '上架')" disabled />
            </el-form-item>
          </el-col>

          <!-- <el-col :span="24">
            <el-form-item label="图片">
              <div class="image-row">
                <el-image v-if="product && product.image" :src="product.image" fit="cover" class="cover" />
                <span v-else class="placeholder">暂无图片</span>
              </div>
            </el-form-item>
          </el-col> -->

          <el-col :span="24">
            <el-form-item label="描述">
              <el-input type="textarea" :rows="3" :value="product && product.description" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 机器组合信息，模拟“处理记录”块状区域 -->
    <el-card shadow="never" class="detail-card"  v-loading="updateLoading">
      <div slot="header" class="section-title">机器组合</div>
      <div v-if="machineList && machineList.length">
        <el-table :data="machineList" border stripe style="width: 100%">
          <el-table-column prop="user" label="挖矿账户" min-width="80" />
          <el-table-column prop="id" label="矿机ID" min-width="60" />
          <el-table-column prop="miner" label="机器编号" min-width="100" />
          <el-table-column label="实际算力" width="100">
            <template slot="header">
              <el-tooltip content="实际算力为该机器在本矿池过去24H的平均算力" effect="dark" placement="top">
                <i class="el-icon-question label-help" aria-label="帮助" tabindex="0"></i>
              </el-tooltip>
              <span>实际算力</span>
            </template>
            <template slot-scope="scope">{{ scope.row.computingPower }} {{ scope.row.unit || '' }}</template>
          </el-table-column>
          <el-table-column label="理论算力" min-width="140">
            <template #default="scope">
              <el-input
                v-model="scope.row.theoryPower"
                size="small"
                inputmode="decimal"
                :disabled="isRowDisabled(scope.row)"
                @input="handleTheoryPowerInput(scope.$index)"
                @blur="handleTheoryPowerBlur(scope.$index)"
                :class="{ 'changed-input': isCellChanged(scope.row, 'theoryPower') }"
                style="max-width: 260px;"
              >
                <template slot="append">{{ scope.row.unit || '' }}</template>
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="功耗(kw/h)" min-width="140">
            <template #default="scope">
              <el-input
                v-model="scope.row.powerDissipation"
                size="small"
                inputmode="decimal"
                :disabled="isRowDisabled(scope.row)"
                @input="handleNumericCell(scope.$index, 'powerDissipation')"
                @blur="handlePowerDissipationBlur(scope.$index)"
                :class="{ 'changed-input': isCellChanged(scope.row, 'powerDissipation') }"
                style="max-width: 260px;"
              >
                <template slot="append">kw/h</template>
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="型号" min-width="140">
            <template #default="scope">
              <el-input
                v-model="scope.row.type"
                size="small"
                placeholder="矿机型号"
                :maxlength="20"
                :disabled="isRowDisabled(scope.row)"
                @input="handleTypeCell(scope.$index)"
                :class="{ 'changed-input': isCellChanged(scope.row, 'type') }"
                style="max-width: 180px;"
              />
            </template>
          </el-table-column>
          <el-table-column label="售价(USDT)" min-width="140">
            <template slot="header">
              <el-tooltip effect="dark" placement="top">
                <div slot="content">
                  卖家最终收款金额 = 机器售价 × 波动率<br/>
                  波动率规则：<br/>
                  1）0% - 5%（包含5%）：波动率 = 1（按售价结算）<br/>
                  2）5%以上：波动率 = 实际算力 / 理论算力，且不会超过 1,即最终结算时不会超过机器售价
                </div>
                <i class="el-icon-question label-help" aria-label="帮助" tabindex="0"></i>
              </el-tooltip>
              <span>售价(USDT)</span>
            </template>
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.price"
                size="small"
                inputmode="decimal"
                :disabled="isRowDisabled(scope.row)"
                @input="handleNumericCell(scope.$index, 'price')"
                @blur="handlePriceBlur(scope.$index)"
                :class="{ 'changed-input': isCellChanged(scope.row, 'price') }"
                style="max-width: 260px;"
              >
                <template slot="append">USDT</template>
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="最大租赁天数(天)" min-width="140">
            <template #default="scope">
              <el-input
                v-model="scope.row.maxLeaseDays"
                size="small"
                inputmode="numeric"
                :disabled="isRowDisabled(scope.row)"
                @input="handleMaxLeaseDaysInput(scope.$index)"
                @blur="handleMaxLeaseDaysBlur(scope.$index)"
                :class="{ 'changed-input': isCellChanged(scope.row, 'maxLeaseDays') }"
                style="max-width: 260px;"
              >
                <template slot="append">天</template>
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="上下架" min-width="140">
            <template #default="scope">
              <el-switch
                v-model="scope.row.state"
                :active-value="0"
                :inactive-value="1"
                active-text="上架"
                inactive-text="下架"
                :disabled="isRowDisabled(scope.row)"
                @change="handleStateChange(scope.$index)"
              />
            </template>
          </el-table-column>
          <el-table-column label="售出状态" min-width="100">
            <template #default="scope">
              <el-tag :type="scope.row.saleState === 0 ? 'info' : (scope.row.saleState === 1 ? 'danger' : 'warning')">
                {{ scope.row.saleState === 0 ? '未售出' : (scope.row.saleState === 1 ? '已售出' : '售出中') }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" min-width="120">
            <template #default="scope">
              <el-button type="text" size="small" style="color:#f56c6c" :disabled="isRowDisabled(scope.row)" @click="handleDeleteMachine(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-else class="empty-text">暂无组合数据</div>
    </el-card>
    <div class="actions" v-if="machineList && machineList.length">
      <el-button type="primary" @click="handleOpenConfirm">提交修改机器</el-button>
    </div>
    
    <!-- 提交确认弹窗 -->
    <el-dialog
      title="确认提交修改"
      :visible.sync="confirmVisible"
      width="520px"
    >
      <div>
        <p>请仔细确认已选择机器机器组合里的机器价格及相关参数定义。</p>
        <p>机器修改上架后，一经售出，在机器出售期间不能修改价格及机器参数。</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="confirmVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmitMachines">确认提交修改</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getMachineInfoById } from '../../api/products'
import { getMachineListForUpdate,updateMachine,deleteMachine } from '../../api/machine'

export default {
  name: 'AccountProductDetail',
  data() {
    return {
      loading: false,
      product: null,
      ranges: [],
      machineList: [],
      productId:null,
      confirmVisible: false,
      // 机器“上下架状态”快照，用于失败回滚：key 为机器 id，value 为提交前的 state
      stateSnapshot: {},
      // 可编辑字段快照（用于变更高亮）
      fieldSnapshot: {},
      updateLoading:false,
    }
  },






  created() {
    this.productId= Number(this.$route.params.id)
    if (this.productId) {
      this.fetchDetail({ id:this.productId })
      this.fetchMachineList({ id:this.productId })
    }





  },
  methods: {
    /**
     * 判断行是否不可编辑（已售出则禁用）
     * @param {Object} row - 当前行数据
     * @returns {boolean}
     */
    isRowDisabled(row) {
      if (!row) return false
      return Number(row.saleState) === 1
    },
    handleOpenConfirm() {
      if (!this.machineList || !this.machineList.length) {
        this.$message.warning('没有可提交的数据')
        return
      }
      this.confirmVisible = true
    },
    async fetchDetail(params) {
      this.loading = true
      try {
        const res = await getMachineInfoById(params)
        const data = res?.data || {}
        this.product = data
        this.ranges = Array.isArray(data.productMachineRangeList) ? data.productMachineRangeList : []
      } catch (e) {
        console.error('获取商品详情失败', e)
        console.log('获取商品详情失败')
      } finally {
        this.loading = false
      }
    },
    async fetchMachineList(params) {
      const res = await getMachineListForUpdate(params)
    
   
      if (res && res.code === 200) {
        this.machineList =res.rows
        this.refreshStateSnapshot()
        this.refreshFieldSnapshot()
      }


   
    },
    /**
     * 刷新状态快照：以当前列表为准记录每条机器的 state
     * @returns {void}
     */
    refreshStateSnapshot() {
      const snapshot = {}
      const list = Array.isArray(this.machineList) ? this.machineList : []
      for (let i = 0; i < list.length; i += 1) {
        const row = list[i]
        if (row && typeof row.id !== 'undefined') {
          snapshot[row.id] = row.state
        }
      }
      this.stateSnapshot = snapshot
    },

    /**
     * 刷新可编辑字段快照，用于“变更高亮”对比
     * @returns {void}
     */
    refreshFieldSnapshot() {
      const snapshot = {}
      const list = Array.isArray(this.machineList) ? this.machineList : []
      for (let i = 0; i < list.length; i += 1) {
        const row = list[i]
        if (!row || typeof row.id === 'undefined') continue
        snapshot[row.id] = {
          theoryPower: String(row.theoryPower ?? ''),
          powerDissipation: String(row.powerDissipation ?? ''),
          type: String(row.type ?? ''),
          price: String(row.price ?? ''),
          maxLeaseDays: String(row.maxLeaseDays ?? ''),
        }
      }
      this.fieldSnapshot = snapshot
    },

    /**
     * 判断单元格是否被修改（与快照对比）
     * @param {Object} row
     * @param {string} key
     * @returns {boolean}
     */
    isCellChanged(row, key) {
      if (!row || typeof row.id === 'undefined') return false
      const snap = this.fieldSnapshot[row.id] || {}
      const current = String(row[key] ?? '')
      const original = String(snap[key] ?? '')
      return current !== original
    },

    /**
     * 回滚上下架状态：当提交失败时将每行的 state 恢复为提交前
     * @returns {void}
     */
    restoreStateSnapshot() {
      if (!this.machineList || !this.machineList.length) return
      for (let i = 0; i < this.machineList.length; i += 1) {
        const currentRow = this.machineList[i]
        if (!currentRow || typeof currentRow.id === 'undefined') continue
        const prevState = this.stateSnapshot[currentRow.id]
        if (typeof prevState !== 'undefined') {
          this.$set(this.machineList[i], 'state', prevState)
        }
      }
    },

    /**
     * 提交机器修改；失败或异常时回滚上下架状态
     * @param {Array} params - 要更新的机器列表 payload
     * @returns {Promise<void>}
     */
    async updateMachineList(params) {
      this.updateLoading = true
      try {
        const res = await updateMachine(params)
        if (res && res.code === 200) {
          this.$message.success('更新成功')
          // 成功后刷新列表（并在列表刷新后更新快照）
          this.fetchMachineList({ id:this.productId })
        } else {
        
          // 失败回滚上下架状态
          this.restoreStateSnapshot()
        }
      } catch (e) {
      
        // 异常回滚上下架状态
        this.restoreStateSnapshot()
      }

      this.updateLoading = false
    },
    async deleteMachine(params) {
      const res = await deleteMachine(params)
      if (res && res.code === 200) {
        this.$message.success('删除成功')
        this.fetchMachineList({ id:this.productId })
      }
    },
    handleTheoryPowerInput(index) {
      const rowItem = this.machineList && this.machineList[index]
      if (!rowItem || this.isRowDisabled(rowItem)) return
      // 输入阶段限制：整数最多6位，小数最多4位；允许结尾小数点
      let v = String(this.machineList[index].theoryPower ?? '')
      v = v.replace(/[^0-9.]/g, '')
      const firstDot = v.indexOf('.')
      if (firstDot !== -1) {
        v = v.slice(0, firstDot + 1) + v.slice(firstDot + 1).replace(/\./g, '')
      }
      const endsWithDot = v.endsWith('.')
      const parts = v.split('.')
      let intPart = parts[0] || ''
      let decPart = parts[1] || ''
      if (intPart.length > 6) { intPart = intPart.slice(0, 6) }
      if (decPart) { decPart = decPart.slice(0, 4) }
      v = decPart.length ? `${intPart}.${decPart}` : (endsWithDot ? `${intPart}.` : intPart)
      this.$set(this.machineList, index, { ...this.machineList[index], theoryPower: v })
    },
    handleNumericCell(index, key) {
      const rowItem = this.machineList && this.machineList[index]
      if (!rowItem || this.isRowDisabled(rowItem)) return
      // 输入阶段限制：
      // - 功耗：6 位整数 + 4 位小数
      // - 价格：12 位整数 + 2 位小数
      // - 其他：保持原逻辑（6 位小数）
      let v = String(this.machineList[index][key] ?? '')
      v = v.replace(/[^0-9.]/g, '')
      const firstDot = v.indexOf('.')
      if (firstDot !== -1) {
        v = v.slice(0, firstDot + 1) + v.slice(firstDot + 1).replace(/\./g, '')
      }
      if (key === 'powerDissipation') {
        const endsWithDot = v.endsWith('.')
        const parts = v.split('.')
        let intPart = parts[0] || ''
        let decPart = parts[1] || ''
        if (intPart.length > 6) { intPart = intPart.slice(0, 6) }
        if (decPart) { decPart = decPart.slice(0, 4) }
        v = decPart.length ? `${intPart}.${decPart}` : (endsWithDot ? `${intPart}.` : intPart)
      } else if (key === 'price') {
        const endsWithDot = v.endsWith('.')
        const parts = v.split('.')
        let intPart = parts[0] || ''
        let decPart = parts[1] || ''
        if (intPart.length > 12) { intPart = intPart.slice(0, 12) }
        if (decPart) { decPart = decPart.slice(0, 2) }
        v = decPart.length ? `${intPart}.${decPart}` : (endsWithDot ? `${intPart}.` : intPart)
      } else {
        if (firstDot !== -1) {
          const [i, d] = v.split('.')
          v = i + '.' + (d ? d.slice(0, 6) : '')
        }
      }
      const row = { ...this.machineList[index], [key]: v }
      this.$set(this.machineList, index, row)
    },
    handlePriceBlur(index) {
      const raw = String(this.machineList[index].price ?? '')
      const pattern = /^\d{1,12}(\.\d{1,2})?$/
      if (!raw || Number(raw) <= 0 || !pattern.test(raw)) {
        this.$message.warning('单价必须大于0，整数最多12位，小数最多2位')
        const row = { ...this.machineList[index], price: '' }
        this.$set(this.machineList, index, row)
      }
    },
    handleMaxLeaseDaysInput(index) {
      const rowItem = this.machineList && this.machineList[index]
      if (!rowItem || this.isRowDisabled(rowItem)) return
      let v = String(this.machineList[index].maxLeaseDays ?? '')
      v = v.replace(/\D/g, '')
      if (v.length > 3) v = v.slice(0, 3)
      const row = { ...this.machineList[index], maxLeaseDays: v }
      this.$set(this.machineList, index, row)
    },
    handleMaxLeaseDaysBlur(index) {
      const raw = String(this.machineList[index].maxLeaseDays ?? '')
      if (!/^\d{1,3}$/.test(raw)) {
        this.$message.warning('最大租赁天数需为 1-365 的整数')
        const row = { ...this.machineList[index], maxLeaseDays: '' }
        this.$set(this.machineList, index, row)
        return
      }
      const n = Number(raw)
      if (!Number.isInteger(n) || n < 1 || n > 365) {
        this.$message.warning('最大租赁天数需为 1-365 的整数')
        const row = { ...this.machineList[index], maxLeaseDays: '' }
        this.$set(this.machineList, index, row)
      }
    },
    handleTheoryPowerBlur(index) {
      const raw = String(this.machineList[index].theoryPower ?? '')
      const pattern = /^\d{1,6}(\.\d{1,4})?$/
      if (!raw || Number(raw) <= 0 || !pattern.test(raw)) {
        this.$message.warning('理论算力必须大于0')
        const row = { ...this.machineList[index], theoryPower: '' }
        this.$set(this.machineList, index, row)
      }
    },
    handlePowerDissipationBlur(index) {
      const raw = String(this.machineList[index].powerDissipation ?? '')
      const pattern = /^\d{1,6}(\.\d{1,4})?$/
      if (!raw || Number(raw) <= 0 || !pattern.test(raw)) {
        this.$message.warning('功耗必须大于0')
        const row = { ...this.machineList[index], powerDissipation: '' }
        this.$set(this.machineList, index, row)
      }
    },
    handleTypeCell(index) {
      const rowItem = this.machineList && this.machineList[index]
      if (!rowItem || this.isRowDisabled(rowItem)) return
      const row = { ...this.machineList[index], type: this.machineList[index].type }
      this.$set(this.machineList, index, row)
    },
    handleStateChange(index) {
      const rowItem = this.machineList && this.machineList[index]
      if (!rowItem || this.isRowDisabled(rowItem)) return
      const row = { ...this.machineList[index], state: this.machineList[index].state }
      this.$set(this.machineList, index, row)
    },
    async handleDeleteMachine(row) {
      if (!row || !row.id) return
      if (this.isRowDisabled(row)) {
        this.$message.warning('该矿机已售出，无法删除')
        return
      }
      try {
        await this.$confirm('确定删除该矿机吗？删除后不可恢复', '提示', {
          confirmButtonText: '删除',
          cancelButtonText: '取消',
          type: 'warning'
        })
        const res = await deleteMachine({ id: row.id })
        if (res && res.code === 200) {
          this.$message.success('删除成功')
          this.fetchMachineList({ id: this.productId })
        } 
      } catch (e) {
        // 用户取消
      }
    },
    async handleSubmitMachines() {
      if (!this.machineList || !this.machineList.length) {
        this.$message.warning('没有可提交的数据')
        return
      }
      try {
        // 提交前强校验：理论算力、功耗、单价必须填写且格式正确（全部行都校验）
        const powerPattern = /^\d{1,6}(\.\d{1,4})?$/
        const pricePattern = /^\d{1,12}(\.\d{1,2})?$/
        const isOnlySpaces = (v) => typeof v === 'string' && v.trim().length === 0 && v.length > 0
        for (let i = 0; i < this.machineList.length; i += 1) {
          const row = this.machineList[i]
          const rowLabel = row && (row.miner || row.id || i + 1)
          const theoryRaw = String(row.theoryPower ?? '')
          const priceRaw = String(row.price ?? '')
          const typeRaw = String(row.type ?? '')
          const dissRaw = String(row.powerDissipation ?? '')
          const daysRaw = String(row.maxLeaseDays ?? '')

          if (!theoryRaw || Number(theoryRaw) <= 0 || !powerPattern.test(theoryRaw)) {
            this.$message.warning(`第${i + 1}行(机器:${rowLabel}) 理论算力必须大于0，整数最多6位，小数最多4位`)
            return
          }
          if (!dissRaw || Number(dissRaw) <= 0 || !powerPattern.test(dissRaw)) {
            this.$message.warning(`第${i + 1}行(机器:${rowLabel}) 功耗必须大于0，整数最多6位，小数最多4位`)
            return
          }
          if (!priceRaw || Number(priceRaw) <= 0 || !pricePattern.test(priceRaw)) {
            this.$message.warning(`第${i + 1}行(机器:${rowLabel}) 单价必须大于0，整数最多12位，小数最多2位`)
            return
          }
          if (!/^\d{1,3}$/.test(daysRaw) || !Number.isInteger(Number(daysRaw)) || Number(daysRaw) < 1 || Number(daysRaw) > 365) {
            this.$message.warning(`第${i + 1}行(机器:${rowLabel}) 最大租赁天数需为 1-365 的整数`)
            return
          }
          // 型号允许为空，但如果填写则不能全空格
          if (typeRaw && isOnlySpaces(typeRaw)) {
            this.$message.warning(`第${i + 1}行(机器:${rowLabel}) 型号不能全是空格`)
            return
          }
        }

        const payload = this.machineList.map(m => ({
          id: m.id,
          powerDissipation: Number(m.powerDissipation ?? 0),
          price: Number(m.price ?? 0),
          state: Number(m.state ?? 0),
          theoryPower: Number(m.theoryPower ?? 0),
          type: m.type || '',
          maxLeaseDays: Number(m.maxLeaseDays ?? 0),
          unit: m.unit || ''
        }))

        // 关闭外层确认弹窗，直接提交
        this.confirmVisible = false

        console.log(payload, 'payload');
        await this.updateMachineList(payload)
      } catch (e) {
        // 异常处理
      }
    },
    handleBack() {
      this.$router.back()
    }
  }
}
</script>

<style scoped>
.account-product-detail { padding: 8px; }
.header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.title { margin: 0; font-size: 18px; font-weight: 600; }
.detail-card { margin-bottom: 12px; }
.detail-form { padding: 4px 8px; }
.image-row { display: flex; align-items: center; min-height: 120px; }
.cover { width: 200px; height: 120px; object-fit: cover; border-radius: 4px; background: #f5f5f5; border: 1px solid #eee; }
.placeholder { color: #999; }
.section-title { font-weight: 600; }
.ranges-wrapper { display: grid; gap: 12px; }
.range-block { border: 1px solid #f0f0f0; background: #fcfcfc; border-radius: 6px; padding: 10px; }
.item { color: #444; line-height: 24px; }
.machines-box { margin-top: 8px; border-top: 1px dashed #e5e5e5; padding-top: 8px; }
.machine-row { display: flex; flex-wrap: wrap; gap: 8px; color: #555; line-height: 22px; }
.split { width: 8px; }
.empty-text { color: #909399; text-align: center; padding: 12px 0; }

.label-help { margin-left: 4px; color: #909399; cursor: help; }


</style>
<style>
 .el-input-group__append, .el-input-group__prepend{
  padding: 0 5px !important;
}

/* 变化高亮：为输入框外层添加红色边框，视觉醒目但不改变布局 */
.changed-input .el-input__inner,
.changed-input input.el-input__inner {
  border-color: #f56c6c !important;
}

.el-input.is-disabled .el-input__inner{
  color: #000 !important;
}

.el-textarea.is-disabled .el-textarea__inner{
  color: #000 !important;
}
</style>