优化

ghsApp/src/admin/billing/forwardResult.vue

@@ -157,11 +157,15 @@ export default {
       }
     },
 
-    /** 金额保留两位小数展示 */
+    /**
+     * 金额展示：最多两位小数，去掉末尾多余的 0（如 10.00→10、10.50→10.5）
+     * @param {Number|String} val 金额
+     * @returns {String}
+     */
     formatMoney(val) {
       const n = parseFloat(val)
-      if (isNaN(n)) return '0.00'
-      return n.toFixed(2)
+      if (isNaN(n)) return '0'
+      return String(parseFloat(n.toFixed(2)))
     },
 
     /**
@@ -241,7 +245,8 @@ export default {
       const ctx = uni.createCanvasContext('forwardPosterCanvas', this)
       const w = that.canvasW
       const h = that.canvasH
-      const headerH = 130
+      // 顶部蓝区上下各收 4upx（画布宽 360 ≈ 750 设计宽一半，4upx≈2px）
+      const headerH = 126
       const padX = 24
       const contentW = w - padX * 2
 
@@ -254,15 +259,16 @@ export default {
       ctx.setFillStyle('#ffffff')
       ctx.setTextAlign('center')
       ctx.setFontSize(26)
-      ctx.fillText('退款凭证', w / 2, 48)
+      ctx.fillText('退款凭证', w / 2, 46)
       ctx.setFontSize(22)
       const nameText = that.customName || '客户'
-      ctx.fillText(nameText.length > 14 ? nameText.substr(0, 14) + '…' : nameText, w / 2, 88)
+      ctx.fillText(nameText.length > 14 ? nameText.substr(0, 14) + '…' : nameText, w / 2, 86)
 
       // 退款金额（红色大号）
       ctx.setFillStyle('#e02020')
       ctx.setFontSize(44)
-      ctx.fillText('¥' + that.formatMoney(that.amount), w / 2, 168)
+      // 金额距顶再下移 4upx（≈2px），与蓝区收紧后的间距对齐
+      ctx.fillText('¥' + that.formatMoney(that.amount), w / 2, 180)
 
       ctx.setFillStyle('#333333')
       ctx.setFontSize(22)
@@ -275,22 +281,23 @@ export default {
       const rowGap = 36
 
       ctx.setTextAlign('left')
-      that.drawInfoRow(ctx, '最新余额', '¥' + that.formatMoney(that.customBalance), labelX, valueX, rowY, false)
+      // 最新余额数字用主题蓝，突出返充后的可用余额
+      that.drawInfoRow(ctx, '最新余额', '¥' + that.formatMoney(that.customBalance), labelX, valueX, rowY, false, '#3385ff')
       rowY += rowGap
 
-      // 冲销单号：标签与单号同一行，单号字号自适应
+      // 冲销单号：标签左、单号右对齐；单号过长时缩小字号保证同一行完整展示
       ctx.setFillStyle('#666666')
       ctx.setFontSize(20)
       ctx.setTextAlign('left')
-      ctx.fillText('冲销单号', labelX, rowY)
+      ctx.fillText('退款单号', labelX, rowY)
       const snText = that.forwardSn || '-'
-      const snStartX = labelX + 88
-      const snMaxW = valueX - snStartX
+      // 标签约占 88px，右侧留给单号；右对齐贴 valueX，与余额/日期一致
+      const snMaxW = valueX - (labelX + 88)
       ctx.setFillStyle('#333333')
-      ctx.setTextAlign('left')
       const snSize = that.fitSnFontSize(ctx, snText, snMaxW, 16)
       ctx.setFontSize(snSize)
-      ctx.fillText(snText, snStartX, rowY)
+      ctx.setTextAlign('right')
+      ctx.fillText(snText, valueX, rowY)
       rowY += rowGap
 
       const dateStr = dayjs().format('YYYY-MM-DD HH:mm')
@@ -345,13 +352,14 @@ export default {
      * @param {Number} valueX 值右边界 x
      * @param {Number} y 基线 y
      * @param {Boolean} valueSmall 值是否用小号字（16）
+     * @param {String} [valueColor='#333333'] 右侧数值颜色（如余额高亮蓝）
      */
-    drawInfoRow(ctx, label, value, labelX, valueX, y, valueSmall) {
+    drawInfoRow(ctx, label, value, labelX, valueX, y, valueSmall, valueColor) {
       ctx.setFillStyle('#666666')
       ctx.setFontSize(20)
       ctx.setTextAlign('left')
       ctx.fillText(label, labelX, y)
-      ctx.setFillStyle('#333333')
+      ctx.setFillStyle(valueColor || '#333333')
       ctx.setFontSize(valueSmall ? 16 : 20)
       ctx.setTextAlign('right')
       ctx.fillText(value, valueX, y)