diff --git a/pwuniapp/common/icons.js b/pwuniapp/common/icons.js
index 2516098..d1cdd97 100644
--- a/pwuniapp/common/icons.js
+++ b/pwuniapp/common/icons.js
@@ -185,5 +185,21 @@ export const ICONS = {
+ `),
+
+ deleteKey: svgToUri(`
+
+ `),
+
+ clearKey: svgToUri(`
+
`)
};
diff --git a/pwuniapp/pages/expert/workspace.vue b/pwuniapp/pages/expert/workspace.vue
index 7f76de0..655f3ef 100644
--- a/pwuniapp/pages/expert/workspace.vue
+++ b/pwuniapp/pages/expert/workspace.vue
@@ -39,7 +39,7 @@
-
+
@@ -50,22 +50,80 @@
- 输入参与人出示的 4 位纯数字核销码完成入队签到：
-
-
-
+ 输入参与人出示的 4 位门票码完成入队签到：
+
+
+
+
+ {{ inputDigits[i - 1] || '' }}
+
+
+
+
+
+
+ {{ num }}
+
+
+
+ 清空
+
+
+ 0
+
+
+
+ 删除
+
+
+
- 点击快速填入演示门票码 [8392]
+ 点击自动填入演示码 [8392] 并触发核销
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ verifiedParticipant.nickname }}
+ VIP 黄金玩家
+
+ 活动：{{ verifiedParticipant.activityTitle }}
+
+ 核销码：
+ {{ verifiedParticipant.code }}
+
+
+
+
+
+ 已付 AA 分摊款：
+ ¥{{ verifiedParticipant.fee }}
+
+
+
+
+
@@ -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 = () => {
- inputCode.value = '8392';
+const pressKey = (num) => {
+ if (inputDigits.value.length >= 4) return;
+ inputDigits.value.push(num);
+ if (inputDigits.value.length === 4) {
+ verifyInputCode();
+ }
};
-const handleVerifyCode = () => {
- if (inputCode.value.trim() === '8392') {
- uni.showModal({
- title: '门票核销成功！',
- 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 backspace = () => {
+ if (inputDigits.value.length > 0) {
+ inputDigits.value.pop();
+ isCodeError.value = false;
}
};
+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 {
- flex: 1;
- 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;
+ &.shake {
+ animation: errorShake 0.4s ease-in-out;
}
- .btn-verify {
- background: linear-gradient(135deg, #10B981 0%, #059669 100%);
- color: #FFF;
- font-size: 26rpx;
- font-weight: 700;
+ .pin-slot {
+ width: 104rpx;
+ height: 116rpx;
+ background: #0A0F1D;
+ 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;
- line-height: 80rpx;
- padding: 0 32rpx;
- margin: 0;
- box-shadow: 0 4rpx 16rpx rgba(16, 185, 129, 0.4);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+ .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;
- text-align: right;
- font-size: 20rpx;
+ margin-top: 20rpx;
+ text-align: center;
+ 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;
diff --git a/pwuniapp/pages/order/list.vue b/pwuniapp/pages/order/list.vue
index a0faf79..dc4331e 100644
--- a/pwuniapp/pages/order/list.vue
+++ b/pwuniapp/pages/order/list.vue
@@ -69,6 +69,7 @@
暂无此类订单
+
@@ -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);
+ }
}
}