feat: ui update

miniprogram/pages/order/order.ts

@@ -2,6 +2,7 @@ import { request } from '../../utils/request'
 import { PagedResult, OrderItem } from '../../types/models'
 import { fenToYuan, formatDateTime, formatCountdown } from '../../utils/format'
 import { normalizePaged, mergePaged, hasMorePaged } from '../../utils/paged'
+import { navScroll } from '../../utils/nav'
 import { logger } from '../../utils/logger'
 
 // 日志模块名
@@ -17,7 +18,14 @@ const STATUS_FILTERS = [
 ]
 
 const STATUS_TEXT: Record<number, string> = { 1: '待支付', 2: '已支付', 3: '已取消', 4: '已过期', 5: '已退款' }
-const STATUS_TYPE: Record<number, string> = { 1: 'orange', 2: 'green', 3: 'gray', 4: 'gray', 5: 'blue' }
+// 零彩色状态语义：待支付 = 实心黑；已支付/已退款 = 描边；已取消/已过期 = 降透明
+const STATUS_CLS: Record<number, string> = {
+  1: 'pill--ink',
+  2: 'pill--line',
+  3: 'pill--dim',
+  4: 'pill--dim',
+  5: 'pill--line pill--dim',
+}
 
 Page({
   data: {
@@ -29,8 +37,28 @@ Page({
     page: 1,
     pageSize: 20,
     hasMore: true,
+    // 滚动收缩：由 utils/nav.ts 的共享 handler 驱动
+    navScrolled: false,
+    // 取消订单确认
+    cancelVisible: false,
+    cancelOrderNo: '',
+    cancelButtons: [
+      { text: '再想想', value: '' },
+      { text: '确认取消', value: 'ok', type: 'main' },
+    ],
+    // 退款申请（抽屉 + 原因输入）
+    refundVisible: false,
+    refundOrderNo: '',
+    refundReason: '',
+    refundSubmitting: false,
   },
 
+  // scroll-view 滚动 → 导航收缩为玻璃小标题
+  onNavScroll: navScroll,
+
+  // 抽屉内容点击不穿透到遮罩
+  noop() {},
+
   onShow() {
     this.refresh()
     this.startCountdown()
@@ -103,7 +131,7 @@ Page({
         const list = raw.map((it) => ({
           ...it,
           _statusText: STATUS_TEXT[it.order_status] || '',
-          _statusType: STATUS_TYPE[it.order_status] || 'gray',
+          _statusCls: STATUS_CLS[it.order_status] || 'pill--line',
           _amount: fenToYuan(it.pay_amount),
           _time: formatDateTime(it.created_at),
           _orderTail: `…${it.order_no.slice(-4)}`,
@@ -137,21 +165,24 @@ Page({
 
   onCancel(e: WechatMiniprogram.TouchEvent) {
     const orderNo = e.currentTarget.dataset.no as string
-    wx.showModal({
-      title: '取消订单',
-      content: '确认取消该订单？',
-      success: (res) => {
-        if (!res.confirm) return
-        request({ url: `/order/${orderNo}/cancel`, method: 'POST' })
-          .then(() => {
-            logger.info(LOG, '取消订单成功, orderNo=', orderNo)
-            wx.showToast({ title: '已取消', icon: 'success' })
-            this.refresh()
-          })
-          .catch((e: any) => logger.warn(LOG, '取消订单失败, orderNo=', orderNo, 'code=', e && e.code))
-      },
-      fail: (e) => logger.warn(LOG, '取消订单弹窗失败, err=', e && e.errMsg),
-    })
+    this.setData({ cancelVisible: true, cancelOrderNo: orderNo })
+  },
+
+  onCancelCancel() {
+    this.setData({ cancelVisible: false })
+  },
+
+  onCancelConfirm(ev: WechatMiniprogram.CustomEvent) {
+    const orderNo = this.data.cancelOrderNo
+    this.setData({ cancelVisible: false })
+    if (ev.detail.value !== 'ok' || !orderNo) return
+    request({ url: `/order/${orderNo}/cancel`, method: 'POST' })
+      .then(() => {
+        logger.info(LOG, '取消订单成功, orderNo=', orderNo)
+        wx.showToast({ title: '已取消', icon: 'success' })
+        this.refresh()
+      })
+      .catch((err: any) => logger.warn(LOG, '取消订单失败, orderNo=', orderNo, 'code=', err && err.code))
   },
 
   onPay() {
@@ -160,27 +191,37 @@ Page({
 
   onRefund(e: WechatMiniprogram.TouchEvent) {
     const orderNo = e.currentTarget.dataset.no as string
-    wx.showModal({
-      title: '申请退款',
-      editable: true,
-      placeholderText: '请填写退款原因',
-      success: (res) => {
-        if (!res.confirm) return
-        const reason = (res.content || '').trim()
-        if (!reason) {
-          wx.showToast({ title: '请填写退款原因', icon: 'none' })
-          return
-        }
-        request({ url: '/order/refund', method: 'POST', data: { order_no: orderNo, reason } })
-          .then(() => {
-            logger.info(LOG, '退款申请提交成功, orderNo=', orderNo)
-            wx.showToast({ title: '退款申请已提交，等待审核', icon: 'none' })
-            this.refresh()
-          })
-          .catch((e: any) => logger.warn(LOG, '退款申请失败, orderNo=', orderNo, 'code=', e && e.code))
-      },
-      fail: (e) => logger.warn(LOG, '退款弹窗失败, err=', e && e.errMsg),
-    })
+    this.setData({ refundVisible: true, refundOrderNo: orderNo, refundReason: '' })
+  },
+
+  onRefundClose() {
+    this.setData({ refundVisible: false })
+  },
+
+  onRefundInput(e: WechatMiniprogram.Input) {
+    this.setData({ refundReason: e.detail.value })
+  },
+
+  onRefundSubmit() {
+    if (this.data.refundSubmitting) return
+    const orderNo = this.data.refundOrderNo
+    const reason = (this.data.refundReason || '').trim()
+    if (!reason) {
+      wx.showToast({ title: '请填写退款原因', icon: 'none' })
+      return
+    }
+    this.setData({ refundSubmitting: true })
+    request({ url: '/order/refund', method: 'POST', data: { order_no: orderNo, reason } })
+      .then(() => {
+        logger.info(LOG, '退款申请提交成功, orderNo=', orderNo)
+        wx.showToast({ title: '退款申请已提交，等待审核', icon: 'none' })
+        this.setData({ refundVisible: false, refundSubmitting: false })
+        this.refresh()
+      })
+      .catch((err: any) => {
+        logger.warn(LOG, '退款申请失败, orderNo=', orderNo, 'code=', err && err.code)
+        this.setData({ refundSubmitting: false })
+      })
   },
 
   onGoMall() {