员工端h5版本代码提交

src/views/orders/OrderListView.vue

@@ -0,0 +1,171 @@
+<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 { fetchOrderList } from '@/api/orders'
+import StatusTag from '@/components/StatusTag.vue'
+import type { CommodityOrder, CommodityOrderSearch } from '@/types/order'
+import { commodityTypeText } from '@/utils/constants'
+
+const loading = ref(false)
+const refreshing = ref(false)
+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,
+  pageSize: 10
+})
+
+const loadOrders = async (reset = false) => {
+  if (loading.value) return
+  loading.value = true
+  if (reset) {
+    query.pageNum = 1
+    finished.value = false
+  }
+  try {
+    const searchText = keyword.value.trim()
+    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
+    })
+    records.value = reset ? page.records : [...records.value, ...page.records]
+    finished.value = records.value.length >= page.total || page.records.length === 0
+    query.pageNum += 1
+  } finally {
+    loading.value = false
+    refreshing.value = false
+  }
+}
+
+const onRefresh = () => {
+  refreshing.value = true
+  loadOrders(true)
+}
+
+watch([status, typeCode], () => loadOrders(true))
+
+onMounted(() => loadOrders(true))
+</script>
+
+<template>
+  <section class="page">
+    <header class="page-header">
+      <p class="page-kicker">订单管理</p>
+      <h1 class="page-title">订单列表</h1>
+    </header>
+
+    <div class="toolbar">
+      <van-search
+        v-model="keyword"
+        shape="round"
+        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>
+      <van-tab title="全部" name="" />
+      <van-tab title="待使用" name="2" />
+      <van-tab title="待确认" name="1" />
+      <van-tab title="退款中" name="4" />
+      <van-tab title="已完成" name="6" />
+    </van-tabs>
+
+    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多订单" @load="loadOrders">
+        <div v-if="records.length" class="order-list">
+          <RouterLink v-for="order in records" :key="order.id" class="order-card" :to="`/orders/${order.id}`">
+            <div class="order-card__main">
+              <div class="thumb">
+                <img :src="order.commodityCoverPhoto" alt="" />
+              </div>
+              <div class="stack">
+                <div class="meta-row">
+                  <span>{{ order.id }}</span>
+                  <StatusTag :status="order.orderStatus" />
+                </div>
+                <h2 class="card-title">{{ order.commodityName }}</h2>
+                <div class="meta-row">
+                  <span>{{ order.visitorName }} · {{ order.contactPhone }}</span>
+                  <strong>¥{{ order.payAmt }}</strong>
+                </div>
+                <div class="meta-row">
+                  <span>{{ commodityTypeText[order.orderType] }} x {{ order.commodityAmount }}</span>
+                  <span>{{ order.reservationDate || order.createTime }}</span>
+                </div>
+              </div>
+            </div>
+          </RouterLink>
+        </div>
+        <div v-else-if="!loading" class="empty-state">
+          <ClipboardList :size="30" />
+          <div>暂无订单</div>
+        </div>
+      </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>