第一次迭代优化

.env.production

@@ -1,6 +1,7 @@
 VITE_USE_MOCK=false
 VITE_PROXY_TARGET=
-VITE_API_BASE_URL=https://biz.nianxx.cn/
+#VITE_API_BASE_URL=https://biz.nianxx.cn/
+VITE_API_BASE_URL=
 VITE_AUTH_BASE=/auth
 VITE_ADMIN_BASE=/admin
 VITE_STAFF_BASE=/hotelStaff

.env.test

@@ -1,6 +1,7 @@
 VITE_USE_MOCK=false
 VITE_PROXY_TARGET=
-VITE_API_BASE_URL=http://8.138.234.141/ingress
+# VITE_API_BASE_URL=http://8.138.234.141/ingress
+VITE_API_BASE_URL=
 VITE_AUTH_BASE=/auth
 VITE_ADMIN_BASE=/admin
 VITE_STAFF_BASE=/hotelStaff

src/views/events/EventCreateView.vue

@@ -38,7 +38,7 @@ const afterRead = async (fileItem: UploaderFileListItem | UploaderFileListItem[]
 
 const submit = async () => {
   if (!form.entityName.trim()) {
-    showToast('请输入实体名称')
+    showToast('请输入事件标题')
     return
   }
   if (!form.eventDescription.trim()) {
@@ -73,7 +73,7 @@ const submit = async () => {
 
   <section class="page create-page">
     <section class="panel form-panel">
-      <van-field v-model="form.entityName" label="实体名称" placeholder="如 前台 / 餐饮部" clearable />
+      <van-field v-model="form.entityName" label="事件标题" placeholder="请输入事件标题" clearable />
       <van-field
         v-model="form.eventDescription"
         label="事件描述"
@@ -119,7 +119,7 @@ const submit = async () => {
     </section>
 
     <section class="panel form-panel">
-      <van-cell title="弹窗提醒" label="开启后会按后端通知逻辑广播给员工">
+      <van-cell title="弹窗提醒" label="开启后会在首页进行通知提醒">
         <template #icon><BellRing :size="18" class="cell-icon" /></template>
         <template #right-icon>
           <van-switch v-model="form.popUpReminder" :active-value="1" :inactive-value="0" size="22" />

src/views/events/EventListView.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref, watch } from 'vue'
+import { onMounted, reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { BellRing, CalendarDays, Megaphone, Plus, Search } from 'lucide-vue-next'
 import { fetchEventList } from '@/api/events'
-import type { EventData, EventSearch, EventStatus } from '@/types/event'
+import type { EventData, EventSearch } from '@/types/event'
-import { eventStatusText } from '@/utils/constants'
 
 const router = useRouter()
 const loading = ref(false)
@@ -12,7 +11,6 @@ const refreshing = ref(false)
 const finished = ref(false)
 const records = ref<EventData[]>([])
 const keyword = ref('')
-const status = ref<'all' | EventStatus>('all')
 
 const query = reactive<EventSearch>({
   pageNum: 1,
@@ -30,8 +28,7 @@ const loadEvents = async (reset = false) => {
     const page = await fetchEventList({
       pageNum: query.pageNum,
       pageSize: query.pageSize,
-      entityName: keyword.value.trim() || undefined,
+      entityName: keyword.value.trim() || undefined
-      eventStatus: status.value === 'all' ? undefined : status.value
     })
     records.value = reset ? page.records : [...records.value, ...page.records]
     finished.value = records.value.length >= page.total || page.records.length === 0
@@ -47,8 +44,6 @@ const onRefresh = () => {
   loadEvents(true)
 }
 
-watch(status, () => loadEvents(true))
-
 onMounted(() => loadEvents(true))
 </script>
 
@@ -69,7 +64,7 @@ onMounted(() => loadEvents(true))
       <van-search
         v-model="keyword"
         shape="round"
-        placeholder="搜索实体名称"
+        placeholder="搜索事件标题"
         @search="loadEvents(true)"
         @clear="loadEvents(true)"
       >
@@ -77,12 +72,6 @@ onMounted(() => loadEvents(true))
       </van-search>
     </div>
 
-    <van-tabs v-model:active="status" shrink>
-      <van-tab title="全部" name="all" />
-      <van-tab title="开启" :name="0" />
-      <van-tab title="关闭" :name="1" />
-    </van-tabs>
-
     <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
       <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多事件" @load="loadEvents">
         <div v-if="records.length" class="event-list">
@@ -92,9 +81,6 @@ onMounted(() => loadEvents(true))
             </div>
             <div class="meta-row">
               <strong>{{ event.entityName }}</strong>
-              <van-tag :type="event.eventStatus === 0 ? 'success' : 'default'" plain>
-                {{ eventStatusText[event.eventStatus] }}
-              </van-tag>
             </div>
             <p class="event-desc">{{ event.eventDescription }}</p>
             <div class="event-status-row">

src/views/login/LoginView.vue

@@ -80,7 +80,7 @@ const handleLogin = async () => {
       <div class="login-brand">
         <span class="login-logo"><ShieldCheck :size="30" /></span>
         <div>
-          <p>酒店员工端</p>
+          <p>员工端</p>
           <h1>手机号登录</h1>
         </div>
       </div>

src/views/mine/MineView.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
-import { LogOut, ServerCog, ShieldCheck, UserRound } from 'lucide-vue-next'
+import { LogOut, ShieldCheck, UserRound } from 'lucide-vue-next'
 import { useAuthStore } from '@/stores/auth'
-import { env } from '@/utils/env'
 
 const router = useRouter()
 const auth = useAuthStore()
@@ -35,15 +34,6 @@ const logout = () => {
       <van-cell title="租户" :value="String(auth.user?.tenantId || '-')" />
     </section>
 
-    <section class="panel mine-panel">
-      <van-cell title="接口模式" :value="auth.isMockMode ? 'Mock' : '真实接口'">
-        <template #icon><ServerCog :size="18" class="cell-icon" /></template>
-      </van-cell>
-      <van-cell title="clientId" :value="env.clientId || '-'" />
-      <van-cell title="clientConfigId" :value="env.clientConfigId || '-'" />
-      <van-cell title="员工端前缀" :value="env.staffBase" />
-    </section>
-
     <van-button block plain type="danger" class="logout-button" @click="logout">
       <template #icon><LogOut :size="18" /></template>
       退出登录

src/views/orders/OrderDetailView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { CalendarDays, CheckCircle2, MapPin, Phone, ReceiptText, UserRound } from 'lucide-vue-next'
+import { CalendarDays, CheckCircle2, Phone, ReceiptText, UserRound } from 'lucide-vue-next'
 import { fetchOrderDetail } from '@/api/orders'
 import PageNav from '@/components/PageNav.vue'
 import StatusTag from '@/components/StatusTag.vue'
@@ -103,11 +103,6 @@ onMounted(loadDetail)
           <span>预约时间</span>
           <strong>{{ detail.reservationDate || detail.checkInData || '无需预约' }}</strong>
         </div>
-        <div class="info-row">
-          <MapPin :size="17" />
-          <span>核销地点</span>
-          <strong>{{ detail.storeName || detail.commodityAddress || '-' }}</strong>
-        </div>
         <div class="info-row">
           <Phone :size="17" />
           <span>投诉电话</span>

src/views/orders/OrderListView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref, watch } from 'vue'
 import { RouterLink } from 'vue-router'
-import { Search, SlidersHorizontal, ClipboardList } from 'lucide-vue-next'
+import { Search, ClipboardList } from 'lucide-vue-next'
 import { fetchOrderList } from '@/api/orders'
 import StatusTag from '@/components/StatusTag.vue'
 import type { CommodityOrder, CommodityOrderSearch } from '@/types/order'
@@ -13,8 +13,6 @@ const finished = ref(false)
 const records = ref<CommodityOrder[]>([])
 const status = ref('')
 const keyword = ref('')
-const typeCode = ref('')
-const showFilter = ref(false)
 
 const query = reactive<CommodityOrderSearch>({
   pageNum: 1,
@@ -33,9 +31,7 @@ const loadOrders = async (reset = false) => {
     const page = await fetchOrderList({
       ...query,
       orderStatus: status.value || undefined,
-      commodityTypeCode: typeCode.value || undefined,
+      contactPhone: searchText || undefined
-      orderId: /^\d{12,}$/.test(searchText) ? searchText : undefined,
-      contactPhone: /^1\d{10}$/.test(searchText) ? searchText : undefined
     })
     records.value = reset ? page.records : [...records.value, ...page.records]
     finished.value = records.value.length >= page.total || page.records.length === 0
@@ -51,7 +47,7 @@ const onRefresh = () => {
   loadOrders(true)
 }
 
-watch([status, typeCode], () => loadOrders(true))
+watch(status, () => loadOrders(true))
 
 onMounted(() => loadOrders(true))
 </script>
@@ -67,15 +63,12 @@ onMounted(() => loadOrders(true))
       <van-search
         v-model="keyword"
         shape="round"
-        placeholder="订单号 / 手机号"
+        placeholder="手机号"
         @search="loadOrders(true)"
         @clear="loadOrders(true)"
       >
         <template #left-icon><Search :size="16" /></template>
       </van-search>
-      <van-button class="filter-button" plain type="primary" @click="showFilter = true">
-        <template #icon><SlidersHorizontal :size="16" /></template>
-      </van-button>
     </div>
 
     <van-tabs v-model:active="status" shrink>
@@ -119,53 +112,11 @@ onMounted(() => loadOrders(true))
       </van-list>
     </van-pull-refresh>
 
-    <van-popup v-model:show="showFilter" position="bottom" round>
-      <div class="filter-sheet">
-        <h2>商品类型</h2>
-        <van-radio-group v-model="typeCode">
-          <van-cell-group inset>
-            <van-cell title="全部" clickable @click="typeCode = ''">
-              <template #right-icon><van-radio name="" /></template>
-            </van-cell>
-            <van-cell title="酒店" clickable @click="typeCode = '0'">
-              <template #right-icon><van-radio name="0" /></template>
-            </van-cell>
-            <van-cell title="门票" clickable @click="typeCode = '1'">
-              <template #right-icon><van-radio name="1" /></template>
-            </van-cell>
-            <van-cell title="餐饮" clickable @click="typeCode = '2'">
-              <template #right-icon><van-radio name="2" /></template>
-            </van-cell>
-          </van-cell-group>
-        </van-radio-group>
-        <van-button block type="primary" @click="showFilter = false">完成</van-button>
-      </div>
-    </van-popup>
   </section>
 </template>
 
 <style scoped>
-.filter-button {
-  width: 44px;
-  padding: 0;
-}
-
 .order-list {
   padding-top: 12px;
 }
-
-.filter-sheet {
-  padding: 16px 14px calc(16px + var(--safe-bottom));
-  background: var(--app-bg);
-}
-
-.filter-sheet h2 {
-  margin: 0 0 12px;
-  color: var(--text-strong);
-  font-size: 17px;
-}
-
-.filter-sheet .van-button {
-  margin-top: 12px;
-}
 </style>

src/views/verify/VerifyView.vue

@@ -1,63 +1,141 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { nextTick, onBeforeUnmount, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { showToast } from 'vant'
-import { Keyboard, QrCode, ScanLine } from 'lucide-vue-next'
+import { QrCode, X } from 'lucide-vue-next'
-import { fetchOrderDetail } from '@/api/orders'
+import { parseWriteOffCode, type WriteOffCodePayload } from '@/utils/writeOffCode'
 
 const router = useRouter()
-const orderId = ref('')
+const videoRef = ref<HTMLVideoElement | null>(null)
 const loading = ref(false)
+const scanning = ref(false)
+const scanError = ref('')
 
-const queryOrder = async () => {
+let stream: MediaStream | null = null
-  if (!orderId.value.trim()) {
+let detector: { detect: (source: HTMLVideoElement) => Promise<Array<{ rawValue: string }>> } | null = null
-    showToast('请输入订单号')
+let frameId = 0
-    return
+
+const getBarcodeDetector = () => {
+  return (window as unknown as {
+    BarcodeDetector?: new (options: { formats: string[] }) => {
+      detect: (source: HTMLVideoElement) => Promise<Array<{ rawValue: string }>>
     }
-  loading.value = true
+  }).BarcodeDetector
-  try {
+}
-    const detail = await fetchOrderDetail(orderId.value.trim())
+
+const stopScan = () => {
+  scanning.value = false
+  if (frameId) {
+    window.cancelAnimationFrame(frameId)
+    frameId = 0
+  }
+  if (stream) {
+    stream.getTracks().forEach((track) => track.stop())
+    stream = null
+  }
+  if (videoRef.value) {
+    videoRef.value.srcObject = null
+  }
+}
+
+const goConfirm = (payload: WriteOffCodePayload) => {
   router.push({
     path: '/verify/confirm',
     query: {
-        orderId: detail.orderId,
+      orderId: payload.orderId,
-        packageName: detail.commodityName
+      ...(payload.packageName ? { packageName: payload.packageName } : {})
     }
   })
+}
+
+const handleCodeValue = (rawValue: string) => {
+  const payload = parseWriteOffCode(rawValue)
+  stopScan()
+  goConfirm(payload)
+}
+
+const detectLoop = async () => {
+  if (!scanning.value || !videoRef.value || !detector) return
+  const video = videoRef.value
+
+  try {
+    if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
+      const results = await detector.detect(video)
+      const value = results[0]?.rawValue
+      if (value) {
+        handleCodeValue(value)
+        return
+      }
+    }
+  } catch {
+    scanError.value = '扫码识别失败，请调整距离或光线后重试'
+  }
+
+  if (scanning.value) {
+    frameId = window.requestAnimationFrame(detectLoop)
+  }
+}
+
+const startScan = async () => {
+  if (scanning.value || loading.value) return
+  const BarcodeDetector = getBarcodeDetector()
+  if (!BarcodeDetector) {
+    scanError.value = '当前浏览器不支持摄像头扫码'
+    showToast('当前浏览器不支持摄像头扫码')
+    return
+  }
+
+  loading.value = true
+  scanError.value = ''
+  try {
+    detector = new BarcodeDetector({ formats: ['qr_code'] })
+    stream = await navigator.mediaDevices.getUserMedia({
+      audio: false,
+      video: {
+        facingMode: { ideal: 'environment' }
+      }
+    })
+    scanning.value = true
+    await nextTick()
+    if (!videoRef.value) return
+    videoRef.value.srcObject = stream
+    await videoRef.value.play()
+    frameId = window.requestAnimationFrame(detectLoop)
+  } catch (error) {
+    stopScan()
+    scanError.value = error instanceof Error && error.name === 'NotAllowedError'
+      ? '未获得摄像头权限，请允许后重试'
+      : '无法打开摄像头，请检查浏览器权限'
+    showToast(scanError.value)
   } finally {
     loading.value = false
   }
 }
 
-const scanPlaceholder = () => {
+onBeforeUnmount(stopScan)
-  showToast('当前先按订单号核销，扫码入口已预留')
-}
 </script>
 
 <template>
   <section class="page">
     <header class="page-header">
       <p class="page-kicker">商品核销</p>
-      <h1 class="page-title">核销订单</h1>
+      <h1 class="page-title">扫码核销</h1>
-      <p class="page-subtitle">输入订单号后核对商品与联系人信息，再确认核销。</p>
+      <p class="page-subtitle">扫描客人二维码，核对订单信息后再确认核销。</p>
     </header>
 
     <section class="scan-panel panel">
-      <button class="scan-button" type="button" @click="scanPlaceholder">
+      <div v-if="scanning" class="scanner-live">
-        <QrCode :size="54" />
+        <video ref="videoRef" muted playsinline />
-        <span>扫码核销</span>
+        <div class="scan-frame" />
+        <button class="stop-button" type="button" aria-label="停止扫码" @click="stopScan">
+          <X :size="18" />
         </button>
-    </section>
+      </div>
-
+      <button v-else class="scan-button" type="button" :disabled="loading" @click="startScan">
-    <section class="panel form-panel">
+        <QrCode :size="54" />
-      <h2 class="section-title">手动核销</h2>
+        <span>{{ loading ? '正在打开摄像头' : '点击进行扫码' }}</span>
-      <van-field v-model="orderId" label="订单号" placeholder="请输入订单号" clearable>
+      </button>
-        <template #left-icon><Keyboard :size="17" /></template>
+      <p v-if="scanError" class="scan-error">{{ scanError }}</p>
-      </van-field>
-      <van-button block type="primary" :loading="loading" @click="queryOrder">
-        <template #icon><ScanLine :size="18" /></template>
-        查询订单
-      </van-button>
     </section>
   </section>
 </template>
@@ -70,6 +148,57 @@ const scanPlaceholder = () => {
     var(--surface);
 }
 
+.scanner-live {
+  position: relative;
+  overflow: hidden;
+  min-height: 260px;
+  border-radius: var(--radius);
+  background: #111827;
+}
+
+.scanner-live video {
+  display: block;
+  width: 100%;
+  height: 260px;
+  object-fit: cover;
+}
+
+.scan-frame {
+  position: absolute;
+  inset: 50% auto auto 50%;
+  width: min(68vw, 230px);
+  height: min(68vw, 230px);
+  border: 2px solid rgba(255, 255, 255, 0.92);
+  border-radius: 12px;
+  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.22);
+  transform: translate(-50%, -50%);
+}
+
+.scan-frame::after {
+  position: absolute;
+  top: 50%;
+  right: 14px;
+  left: 14px;
+  height: 2px;
+  background: var(--primary);
+  box-shadow: 0 0 16px rgba(15, 139, 114, 0.9);
+  content: '';
+}
+
+.stop-button {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  display: grid;
+  width: 34px;
+  height: 34px;
+  border: 0;
+  border-radius: 999px;
+  background: rgba(17, 24, 39, 0.68);
+  color: #fff;
+  place-items: center;
+}
+
 .scan-button {
   display: grid;
   width: 100%;
@@ -79,21 +208,18 @@ const scanPlaceholder = () => {
   background: rgba(255, 255, 255, 0.78);
   color: var(--primary-deep);
   font-weight: 750;
+  gap: 10px;
   place-items: center;
 }
 
-.scan-button span {
+.scan-button:disabled {
-  margin-top: 10px;
+  opacity: 0.72;
 }
 
-.form-panel {
+.scan-error {
-  display: grid;
+  margin: 10px 0 0;
-  gap: 12px;
+  color: var(--rose);
-  margin-top: 12px;
+  font-size: 12px;
-}
+  line-height: 1.5;
-
-.form-panel :deep(.van-cell) {
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
 }
 </style>