From 8bc0d018fe7cf97a486efccda65370a2b1433d3f Mon Sep 17 00:00:00 2001 From: wikiboss Date: Wed, 16 Sep 2026 18:16:56 +0800 Subject: [PATCH] =?UTF-8?q?style(ux):=20=E4=BE=9D=E6=8D=AEUIUX=E8=A7=84?= =?UTF-8?q?=E8=8C=834.2=E8=8A=82=E6=B7=B1=E5=BA=A6=E6=89=93=E7=A3=A8?= =?UTF-8?q?=E5=A4=A7=E7=A5=9E=E7=AB=AF4=E4=BD=8D=E6=A0=B8=E9=94=80?= =?UTF-8?q?=E7=A0=81=E4=B9=9D=E5=AE=AB=E6=A0=BC=E9=94=AE=E7=9B=98=E4=B8=8E?= =?UTF-8?q?=E8=BA=AB=E4=BB=BD=E7=A1=AE=E8=AE=A4=E5=8D=A1=E5=8F=8A=E8=AE=A2?= =?UTF-8?q?=E5=8D=95=E7=A9=BA=E7=8A=B6=E6=80=81=E5=BC=95=E5=AF=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pwuniapp/common/icons.js | 16 + pwuniapp/pages/expert/workspace.vue | 483 ++++++++++++++++++++++++---- pwuniapp/pages/order/list.vue | 22 ++ 3 files changed, 452 insertions(+), 69 deletions(-) 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); + } } }