style(ux): 依据UIUX规范4.2节深度打磨大神端4位核销码九宫格键盘与身份确认卡及订单空状态引导

pwuniapp/common/icons.js

@@ -185,5 +185,21 @@ export const ICONS = {
       <rect x="6" y="4" width="4" height="16"></rect>
       <rect x="14" y="4" width="4" height="16"></rect>
     </svg>
+  `),
+
+  deleteKey: svgToUri(`
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#CBD5E1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M21 4H8l-7 8 7 8h13a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z"></path>
+      <line x1="18" y1="9" x2="12" y2="15"></line>
+      <line x1="12" y1="9" x2="18" y2="15"></line>
+    </svg>
+  `),
+
+  clearKey: svgToUri(`
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#CBD5E1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <circle cx="12" cy="12" r="10"></circle>
+      <line x1="15" y1="9" x2="9" y2="15"></line>
+      <line x1="9" y1="9" x2="15" y2="15"></line>
+    </svg>
   `)
 };

pwuniapp/pages/expert/workspace.vue

@@ -39,7 +39,7 @@
       </view>
     </view>
 
-    <!-- 核心亮点功能：4 位数字门票现场核销中心 -->
+    <!-- 核心亮点功能：4 位数字门票现场核销中心 (严格依 UIUX 规范 4.2 落地) -->
     <view class="verify-section-card">
       <view class="sec-head">
         <view class="title-wrap">
@@ -50,22 +50,80 @@
       </view>
 
       <view class="verify-box">
-        <text class="input-tips">输入参与人出示的 4 位纯数字核销码完成入队签到：</text>
+        <text class="input-tips">输入参与人出示的 4 位门票码完成入队签到：</text>
-        <view class="code-input-row">
+
-          <input
+        <!-- 4位独立方块卡槽 PIN Code -->
-            class="code-input"
+        <view class="pin-slots-wrap" :class="{ shake: isCodeError }">
-            type="number"
+          <view
-            maxlength="4"
+            v-for="i in 4"
-            v-model="inputCode"
+            :key="i"
-            placeholder="输入4位数字 (如: 8392)"
+            class="pin-slot"
-            placeholder-class="ph"
+            :class="{
-          />
+              filled: inputDigits.length >= i,
-          <button class="btn-verify btn-active" @click="handleVerifyCode">
+              active: inputDigits.length === i - 1,
-            验证核销
+              error: isCodeError
-          </button>
+            }"
+          >
+            <text class="pin-char">{{ inputDigits[i - 1] || '' }}</text>
+            <view class="cursor-line" v-if="inputDigits.length === i - 1"></view>
+          </view>
         </view>
+
+        <!-- 自定义九宫格大按键数字键盘 (触控热区 >= 88rpx，无原生键盘遮挡) -->
+        <view class="keypad-grid">
+          <view v-for="num in [1, 2, 3, 4, 5, 6, 7, 8, 9]" :key="num" class="key-btn btn-active" @click="pressKey(num)">
+            <text class="key-num">{{ num }}</text>
+          </view>
+          <view class="key-btn action-key btn-active" @click="clearCode">
+            <image class="key-svg" :src="ICONS.clearKey" mode="aspectFit" />
+            <text class="action-text">清空</text>
+          </view>
+          <view class="key-btn btn-active" @click="pressKey(0)">
+            <text class="key-num">0</text>
+          </view>
+          <view class="key-btn action-key btn-active" @click="backspace">
+            <image class="key-svg" :src="ICONS.deleteKey" mode="aspectFit" />
+            <text class="action-text">删除</text>
+          </view>
+        </view>
+
         <view class="quick-demo" @click="fillDemoCode">
-          <text>点击快速填入演示门票码 [8392]</text>
+          <text>点击自动填入演示码 [8392] 并触发核销</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 参与人身份核验确认卡弹窗 (Modal) -->
+    <view class="verify-modal-mask" v-if="showConfirmModal" @click.self="showConfirmModal = false">
+      <view class="verify-modal-content">
+        <view class="modal-header">
+          <text class="modal-title">参与人身份核验确认</text>
+          <view class="badge-ready">门票有效</view>
+        </view>
+
+        <view class="participant-card">
+          <image class="part-avatar" :src="verifiedParticipant.avatar" mode="aspectFill" />
+          <view class="part-info">
+            <view class="part-name-row">
+              <text class="part-name">{{ verifiedParticipant.nickname }}</text>
+              <text class="part-tag">VIP 黄金玩家</text>
+            </view>
+            <text class="part-activity">活动：{{ verifiedParticipant.activityTitle }}</text>
+            <view class="part-code-row">
+              <text class="label">核销码：</text>
+              <text class="code-val highlight">{{ verifiedParticipant.code }}</text>
+            </view>
+          </view>
+        </view>
+
+        <view class="verify-fee-box">
+          <text class="fee-k">已付 AA 分摊款：</text>
+          <text class="fee-v">¥{{ verifiedParticipant.fee }}</text>
+        </view>
+
+        <view class="modal-actions">
+          <button class="btn-cancel btn-active" @click="showConfirmModal = false">取消</button>
+          <button class="btn-confirm-checkin btn-active" @click="confirmCheckin">确认核销签到</button>
         </view>
       </view>
     </view>
@@ -151,7 +209,17 @@ import { EXPERTS_LIST } from '@/common/mock.js';
 const expert = ref(EXPERTS_LIST[0]);
 const isReceivingOrders = ref(true);
 const todayIncome = ref(175);
-const inputCode = ref('');
+const inputDigits = ref([]);
+const isCodeError = ref(false);
+const showConfirmModal = ref(false);
+
+const verifiedParticipant = ref({
+  nickname: '电竞萌新小可爱',
+  avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150&h=150&fit=crop',
+  activityTitle: 'AA制五排王者百星车队',
+  code: '8392',
+  fee: '25.00'
+});
 
 const poolOrders = ref([
   {
@@ -190,36 +258,58 @@ const toggleReceivingStatus = () => {
   });
 };
 
-const fillDemoCode = () => {
+const pressKey = (num) => {
-  inputCode.value = '8392';
+  if (inputDigits.value.length >= 4) return;
+  inputDigits.value.push(num);
+  if (inputDigits.value.length === 4) {
+    verifyInputCode();
+  }
 };
 
-const handleVerifyCode = () => {
+const backspace = () => {
-  if (inputCode.value.trim() === '8392') {
+  if (inputDigits.value.length > 0) {
-    uni.showModal({
+    inputDigits.value.pop();
-      title: '门票核销成功！',
+    isCodeError.value = false;
-      content: '【AA制五排王者百星车队】门票 [8392] 已核销确认！参与者已成功入队，分摊款 ¥25.00 已释放打入您的收益账户。',
-      showCancel: false,
-      confirmText: '完成',
-      confirmColor: '#10B981',
-      success: () => {
-        todayIncome.value += 25;
-        inputCode.value = '';
-      }
-    });
-  } else if (inputCode.value.length === 4) {
-    uni.showToast({
-      title: `核销码 [${inputCode.value}] 无效或已被核销`,
-      icon: 'none'
-    });
-  } else {
-    uni.showToast({
-      title: '请输入合法的 4 位纯数字门票码',
-      icon: 'none'
-    });
   }
 };
 
+const clearCode = () => {
+  inputDigits.value = [];
+  isCodeError.value = false;
+};
+
+const fillDemoCode = () => {
+  inputDigits.value = [8, 3, 9, 2];
+  verifyInputCode();
+};
+
+const verifyInputCode = () => {
+  const codeStr = inputDigits.value.join('');
+  if (codeStr === '8392') {
+    isCodeError.value = false;
+    showConfirmModal.value = true;
+  } else {
+    isCodeError.value = true;
+    uni.showToast({
+      title: `核销码 [${codeStr}] 无效或已被核销`,
+      icon: 'none'
+    });
+    setTimeout(() => {
+      isCodeError.value = false;
+    }, 800);
+  }
+};
+
+const confirmCheckin = () => {
+  showConfirmModal.value = false;
+  todayIncome.value += 25;
+  inputDigits.value = [];
+  uni.showToast({
+    title: '核销成功！¥25已释放到账',
+    icon: 'success'
+  });
+};
+
 const grabOrder = (order) => {
   uni.showToast({
     title: `抢单成功！已接单 ¥${order.price}`,
@@ -443,48 +533,303 @@ const switchBackToPlayer = () => {
       margin-bottom: 16rpx;
     }
 
-    .code-input-row {
+    .pin-slots-wrap {
       display: flex;
-      gap: 16rpx;
+      justify-content: center;
+      gap: 20rpx;
+      margin: 20rpx 0 28rpx;
 
-      .code-input {
+      &.shake {
-        flex: 1;
+        animation: errorShake 0.4s ease-in-out;
-        height: 80rpx;
-        background: #0A0F1D;
-        border: 2rpx solid #10B981;
-        border-radius: 16rpx;
-        color: #10B981;
-        font-size: 36rpx;
-        font-weight: 700;
-        text-align: center;
-        letter-spacing: 6rpx;
-        font-family: 'Courier New', Courier, monospace;
-        font-variant-numeric: tabular-nums;
       }
 
-      .btn-verify {
+      .pin-slot {
-        background: linear-gradient(135deg, #10B981 0%, #059669 100%);
+        width: 104rpx;
-        color: #FFF;
+        height: 116rpx;
-        font-size: 26rpx;
+        background: #0A0F1D;
-        font-weight: 700;
+        border: 2rpx solid rgba(255, 255, 255, 0.12);
+        border-radius: 18rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        transition: all 0.2s ease;
+
+        &.filled {
+          border-color: rgba(16, 185, 129, 0.6);
+          background: rgba(16, 185, 129, 0.08);
+        }
+
+        &.active {
+          border-color: #10B981;
+          box-shadow: 0 0 16rpx rgba(16, 185, 129, 0.4);
+        }
+
+        &.error {
+          border-color: #EF4444;
+          background: rgba(239, 68, 68, 0.1);
+          color: #EF4444;
+        }
+
+        .pin-char {
+          font-size: 46rpx;
+          font-weight: 800;
+          color: #10B981;
+          font-family: 'Courier New', Courier, monospace;
+          font-variant-numeric: tabular-nums;
+        }
+
+        .cursor-line {
+          width: 4rpx;
+          height: 48rpx;
+          background: #10B981;
+          border-radius: 2rpx;
+          animation: cursorBlink 1s infinite;
+        }
+      }
+    }
+
+    .keypad-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 16rpx;
+
+      .key-btn {
+        height: 96rpx;
+        background: rgba(255, 255, 255, 0.04);
+        border: 1px solid rgba(255, 255, 255, 0.08);
         border-radius: 16rpx;
-        height: 80rpx;
+        display: flex;
-        line-height: 80rpx;
+        flex-direction: column;
-        padding: 0 32rpx;
+        align-items: center;
-        margin: 0;
+        justify-content: center;
-        box-shadow: 0 4rpx 16rpx rgba(16, 185, 129, 0.4);
+
+        .key-num {
+          font-size: 38rpx;
+          font-weight: 700;
+          color: #F8FAFC;
+          font-family: 'Courier New', Courier, monospace;
+        }
+
+        &.action-key {
+          background: rgba(255, 255, 255, 0.02);
+
+          .key-svg {
+            width: 32rpx;
+            height: 32rpx;
+          }
+
+          .action-text {
+            font-size: 18rpx;
+            color: #94A3B8;
+            margin-top: 4rpx;
+          }
+        }
       }
     }
 
     .quick-demo {
-      margin-top: 14rpx;
+      margin-top: 20rpx;
-      text-align: right;
+      text-align: center;
-      font-size: 20rpx;
+      font-size: 22rpx;
       color: #818CF8;
+      padding: 10rpx;
+      background: rgba(99, 102, 241, 0.1);
+      border: 1px dashed rgba(99, 102, 241, 0.3);
+      border-radius: 12rpx;
     }
   }
 }
 
+/* 参与人身份核验确认卡弹窗样式 */
+.verify-modal-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.75);
+  backdrop-filter: blur(8px);
+  display: flex;
+  align-items: flex-end;
+  z-index: 999;
+  animation: fadeIn 0.2s ease-out;
+
+  .verify-modal-content {
+    width: 100%;
+    background: #151D30;
+    border-top: 2rpx solid rgba(16, 185, 129, 0.45);
+    border-radius: 36rpx 36rpx 0 0;
+    padding: 36rpx 32rpx calc(40rpx + env(safe-area-inset-bottom));
+    box-shadow: 0 -12rpx 40rpx rgba(0, 0, 0, 0.6);
+    animation: slideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+
+    .modal-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 28rpx;
+
+      .modal-title {
+        font-size: 30rpx;
+        font-weight: 700;
+        color: #F8FAFC;
+      }
+
+      .badge-ready {
+        font-size: 20rpx;
+        background: rgba(16, 185, 129, 0.15);
+        border: 1px solid rgba(16, 185, 129, 0.35);
+        color: #10B981;
+        padding: 4rpx 14rpx;
+        border-radius: 8rpx;
+        font-weight: 600;
+      }
+    }
+
+    .participant-card {
+      background: rgba(255, 255, 255, 0.03);
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      border-radius: 20rpx;
+      padding: 24rpx;
+      display: flex;
+      align-items: center;
+      margin-bottom: 20rpx;
+
+      .part-avatar {
+        width: 100rpx;
+        height: 100rpx;
+        border-radius: 50rpx;
+        border: 2rpx solid #10B981;
+        margin-right: 20rpx;
+      }
+
+      .part-info {
+        flex: 1;
+
+        .part-name-row {
+          display: flex;
+          align-items: center;
+          gap: 12rpx;
+          margin-bottom: 8rpx;
+
+          .part-name {
+            font-size: 28rpx;
+            font-weight: 700;
+            color: #FFF;
+          }
+
+          .part-tag {
+            font-size: 18rpx;
+            background: linear-gradient(135deg, #F59E0B, #D97706);
+            color: #FFF;
+            padding: 2rpx 10rpx;
+            border-radius: 6rpx;
+          }
+        }
+
+        .part-activity {
+          font-size: 22rpx;
+          color: #94A3B8;
+          display: block;
+          margin-bottom: 8rpx;
+        }
+
+        .part-code-row {
+          display: flex;
+          align-items: center;
+          gap: 8rpx;
+
+          .label {
+            font-size: 20rpx;
+            color: #64748B;
+          }
+
+          .code-val {
+            font-size: 28rpx;
+            font-weight: 800;
+            color: #10B981;
+            letter-spacing: 2rpx;
+            font-family: 'Courier New', Courier, monospace;
+          }
+        }
+      }
+    }
+
+    .verify-fee-box {
+      background: rgba(16, 185, 129, 0.08);
+      border: 1px solid rgba(16, 185, 129, 0.2);
+      border-radius: 16rpx;
+      padding: 20rpx 24rpx;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 32rpx;
+
+      .fee-k {
+        font-size: 24rpx;
+        color: #94A3B8;
+      }
+
+      .fee-v {
+        font-size: 34rpx;
+        font-weight: 800;
+        color: #10B981;
+        font-variant-numeric: tabular-nums;
+      }
+    }
+
+    .modal-actions {
+      display: flex;
+      gap: 20rpx;
+
+      .btn-cancel {
+        flex: 1;
+        background: rgba(255, 255, 255, 0.08);
+        border: 1px solid rgba(255, 255, 255, 0.12);
+        color: #94A3B8;
+        font-size: 26rpx;
+        height: 84rpx;
+        line-height: 84rpx;
+        border-radius: 20rpx;
+      }
+
+      .btn-confirm-checkin {
+        flex: 2;
+        background: linear-gradient(135deg, #10B981 0%, #059669 100%);
+        color: #FFF;
+        font-size: 28rpx;
+        font-weight: 700;
+        height: 84rpx;
+        line-height: 84rpx;
+        border-radius: 20rpx;
+        box-shadow: 0 4rpx 20rpx rgba(16, 185, 129, 0.4);
+      }
+    }
+  }
+}
+
+@keyframes cursorBlink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+
+@keyframes errorShake {
+  0%, 100% { transform: translateX(0); }
+  20%, 60% { transform: translateX(-10rpx); }
+  40%, 80% { transform: translateX(10rpx); }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideUp {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}
+
 .section-card {
   background-color: #151D30;
   border-radius: 24rpx;

pwuniapp/pages/order/list.vue

@@ -69,6 +69,7 @@
       <view v-if="filteredOrders.length === 0" class="empty-state">
         <image class="empty-svg" :src="ICONS.orderList" mode="aspectFit" />
         <text class="empty-text">暂无此类订单</text>
+        <button class="empty-btn btn-active" @click="goToExplore">前往发现大厅寻找大神</button>
       </view>
     </view>
   </view>
@@ -84,6 +85,7 @@ const tabs = [
   { key: 'IN_SERVICE', name: '进行中' },
   { key: 'PENDING_PAY', name: '待付款' },
   { key: 'COMPLETED', name: '已完成' },
+  { key: 'REFUNDING', name: '退款/售后' },
 ];
 
 const currentTab = ref('ALL');
@@ -98,6 +100,12 @@ const switchTab = (tabKey) => {
   currentTab.value = tabKey;
 };
 
+const goToExplore = () => {
+  uni.switchTab({
+    url: '/pages/index/index'
+  });
+};
+
 const getStatusText = (status) => {
   const map = {
     PENDING_PAY: '待付款',
@@ -411,6 +419,20 @@ const rateExpert = (id) => {
       color: #64748B;
       font-size: 26rpx;
     }
+
+    .empty-btn {
+      margin: 32rpx auto 0;
+      background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
+      color: #FFF;
+      font-size: 26rpx;
+      font-weight: 700;
+      height: 72rpx;
+      line-height: 72rpx;
+      padding: 0 40rpx;
+      border-radius: 36rpx;
+      width: fit-content;
+      box-shadow: 0 4rpx 16rpx rgba(99, 102, 241, 0.35);
+    }
   }
 }
 </style>