第一次迭代优化

This commit is contained in:
andy
2026-06-17 15:41:20 +08:00
parent 43a617e5da
commit 3f1684e57a
9 changed files with 186 additions and 136 deletions

View File

@@ -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>

View File

@@ -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>