第一次迭代优化

2026-06-17 15:41:20 +08:00
parent 43a617e5da
commit 3f1684e57a
9 changed files with 186 additions and 136 deletions
--- a/.env.production
+++ b/.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
--- a/.env.test
+++ b/.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
--- a/src/views/events/EventCreateView.vue
+++ b/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" />
--- a/src/views/events/EventListView.vue
+++ b/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 { eventStatusText } from '@/utils/constants'
+import type { EventData, EventSearch } from '@/types/event'

 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,
-      eventStatus: status.value === 'all' ? undefined : status.value
+      entityName: keyword.value.trim() || undefined
    })
    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">
--- a/src/views/login/LoginView.vue
+++ b/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>
--- a/src/views/mine/MineView.vue
+++ b/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>
      退出登录
--- a/src/views/orders/OrderDetailView.vue
+++ b/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>
--- a/src/views/orders/OrderListView.vue
+++ b/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,
-      orderId: /^\d{12,}$/.test(searchText) ? searchText : undefined,
-      contactPhone: /^1\d{10}$/.test(searchText) ? searchText : undefined
+      contactPhone: 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>
--- a/src/views/verify/VerifyView.vue
+++ b/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 { fetchOrderDetail } from '@/api/orders'
+import { QrCode, X } from 'lucide-vue-next'
+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 () => {
-  if (!orderId.value.trim()) {
-    showToast('请输入订单号')
+let stream: MediaStream | null = null
+let detector: { detect: (source: HTMLVideoElement) => Promise<Array<{ rawValue: string }>> } | null = null
+let frameId = 0
+
+const getBarcodeDetector = () => {
+  return (window as unknown as {
+    BarcodeDetector?: new (options: { formats: string[] }) => {
+      detect: (source: HTMLVideoElement) => Promise<Array<{ rawValue: string }>>
+    }
+  }).BarcodeDetector
+}
+
+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: payload.orderId,
+      ...(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 {
-    const detail = await fetchOrderDetail(orderId.value.trim())
-    router.push({
-      path: '/verify/confirm',
-      query: {
-        orderId: detail.orderId,
-        packageName: detail.commodityName
+    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 = () => {
-  showToast('当前先按订单号核销，扫码入口已预留')
-}
+onBeforeUnmount(stopScan)
 </script>

 <template>
  <section class="page">
    <header class="page-header">
      <p class="page-kicker">商品核销</p>
-      <h1 class="page-title">核销订单</h1>
-      <p class="page-subtitle">输入订单号后核对商品与联系人信息，再确认核销。</p>
+      <h1 class="page-title">扫码核销</h1>
+      <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">
+        <video ref="videoRef" muted playsinline />
+        <div class="scan-frame" />
+        <button class="stop-button" type="button" aria-label="停止扫码" @click="stopScan">
+          <X :size="18" />
+        </button>
+      </div>
+      <button v-else class="scan-button" type="button" :disabled="loading" @click="startScan">
        <QrCode :size="54" />
-        <span>扫码核销</span>
+        <span>{{ loading ? '正在打开摄像头' : '点击进行扫码' }}</span>
      </button>
-    </section>
-
-    <section class="panel form-panel">
-      <h2 class="section-title">手动核销</h2>
-      <van-field v-model="orderId" label="订单号" placeholder="请输入订单号" clearable>
-        <template #left-icon><Keyboard :size="17" /></template>
-      </van-field>
-      <van-button block type="primary" :loading="loading" @click="queryOrder">
-        <template #icon><ScanLine :size="18" /></template>
-        查询订单
-      </van-button>
+      <p v-if="scanError" class="scan-error">{{ scanError }}</p>
    </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 {
-  margin-top: 10px;
+.scan-button:disabled {
+  opacity: 0.72;
 }

-.form-panel {
-  display: grid;
-  gap: 12px;
-  margin-top: 12px;
-}
-
-.form-panel :deep(.van-cell) {
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
+.scan-error {
+  margin: 10px 0 0;
+  color: var(--rose);
+  font-size: 12px;
+  line-height: 1.5;
 }
 </style>