矿机租赁系统代码更新

power_leasing/src/views/account/productDetail.vue

@@ -0,0 +1,591 @@
+<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="实时算力">
+            <template #default="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 #default="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-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 ?? ''),
+        }
+      }
+      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)
+      }
+    },
+    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 ?? '')
+
+          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 (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 || '',
+          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; }
+
+
+</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;
+}
+</style>
+