feat: migrate comprehensive venue module
This commit is contained in:
gqt
@@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<view class="orders-page">
|
||||
<view class="filter-panel">
|
||||
<scroll-view scroll-x class="filter-scroll">
|
||||
<view class="filter-row">
|
||||
<view v-for="item in businessOptions" :key="item.value" class="filter-chip" :class="{ active: businessType === item.value }" @tap="selectBusiness(item.value)">
|
||||
{{ item.label }}
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<scroll-view scroll-x class="filter-scroll second">
|
||||
<view class="filter-row">
|
||||
<view v-for="item in statusOptions" :key="item.value" class="filter-chip" :class="{ active: orderStatus === item.value }" @tap="selectStatus(item.value)">
|
||||
{{ item.label }}
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<view class="list">
|
||||
<view v-for="order in orders" :key="order.id" class="order-card card" @tap="goDetail(order.id)">
|
||||
<view class="order-top">
|
||||
<text class="business">{{ order.business_type_label }}</text>
|
||||
<text class="badge" :class="statusBadgeClass(order.status)">{{ order.status_label }}</text>
|
||||
</view>
|
||||
<text class="order-no">{{ order.order_no }}</text>
|
||||
<view class="order-bottom">
|
||||
<text class="time">{{ formatDateTime(order.created_at) }}</text>
|
||||
<text class="amount">¥{{ order.amount }}</text>
|
||||
</view>
|
||||
<view v-if="order.status === 'pending_pay'" class="actions" @tap.stop>
|
||||
<button class="ghost-button small-btn" @tap="closeOrder(order.id)">取消订单</button>
|
||||
<button class="primary-button small-btn" @tap="goPay(order.id)">去支付</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="isLoading" class="load-more-tip">加载中...</view>
|
||||
<view v-else-if="orders.length === 0" class="empty-state">暂无订单</view>
|
||||
<view v-else-if="!hasMore" class="load-more-tip">已加载全部</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
|
||||
import { orderApi } from '@/modules/comprehensive/api/order'
|
||||
import { formatDateTime } from '@/modules/comprehensive/utils/date'
|
||||
import { statusBadgeClass } from '@/modules/comprehensive/utils/status'
|
||||
|
||||
const businessOptions = [
|
||||
{ label: '全部', value: '' },
|
||||
{ label: '课程', value: 'course' },
|
||||
{ label: '包场', value: 'private_booking' },
|
||||
{ label: '门票', value: 'ticket' }
|
||||
]
|
||||
|
||||
const statusOptions = [
|
||||
{ label: '全部', value: '' },
|
||||
{ label: '待支付', value: 'pending_pay' },
|
||||
{ label: '已支付', value: 'paid' },
|
||||
{ label: '已关闭', value: 'closed' },
|
||||
{ label: '已退款', value: 'refunded' }
|
||||
]
|
||||
|
||||
const businessType = ref('')
|
||||
const orderStatus = ref('')
|
||||
const orders = ref([])
|
||||
const page = ref(1)
|
||||
const pageSize = 20
|
||||
const total = ref(0)
|
||||
const isLoading = ref(false)
|
||||
const isLoadingMore = ref(false)
|
||||
|
||||
const hasMore = computed(() => orders.value.length < total.value)
|
||||
|
||||
onMounted(() => loadOrders(true))
|
||||
|
||||
onPullDownRefresh(() => {
|
||||
loadOrders(true).finally(() => uni.stopPullDownRefresh())
|
||||
})
|
||||
|
||||
onReachBottom(() => {
|
||||
if (!hasMore.value || isLoadingMore.value) return
|
||||
page.value += 1
|
||||
loadOrders(false)
|
||||
})
|
||||
|
||||
const loadOrders = async (reset) => {
|
||||
if (reset) {
|
||||
page.value = 1
|
||||
isLoading.value = true
|
||||
} else {
|
||||
isLoadingMore.value = true
|
||||
}
|
||||
try {
|
||||
const data = await orderApi.getOrders({
|
||||
page: page.value,
|
||||
pageSize,
|
||||
businessType: businessType.value,
|
||||
status: orderStatus.value
|
||||
})
|
||||
orders.value = reset ? data.items : [...orders.value, ...data.items]
|
||||
total.value = data.total
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
isLoadingMore.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const selectBusiness = (value) => {
|
||||
businessType.value = value
|
||||
loadOrders(true)
|
||||
}
|
||||
|
||||
const selectStatus = (value) => {
|
||||
orderStatus.value = value
|
||||
loadOrders(true)
|
||||
}
|
||||
|
||||
const goDetail = (id) => {
|
||||
uni.navigateTo({ url: `/pages/comprehensive/orders/detail?id=${id}` })
|
||||
}
|
||||
|
||||
const goPay = (id) => {
|
||||
uni.navigateTo({ url: `/pages/comprehensive/pay/index?order_id=${id}` })
|
||||
}
|
||||
|
||||
const closeOrder = async (id) => {
|
||||
await orderApi.closeOrder(id)
|
||||
uni.showToast({ title: '订单已取消', icon: 'none' })
|
||||
loadOrders(true)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.orders-page {
|
||||
min-height: 100vh;
|
||||
background: $bg-color-soft;
|
||||
}
|
||||
|
||||
.filter-panel {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
padding: $spacing-md;
|
||||
background: $bg-color-main;
|
||||
border-bottom: 1rpx solid $border-color;
|
||||
}
|
||||
|
||||
.filter-scroll {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.filter-scroll.second {
|
||||
margin-top: $spacing-sm;
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
display: inline-flex;
|
||||
gap: $spacing-sm;
|
||||
}
|
||||
|
||||
.filter-chip {
|
||||
min-width: 118rpx;
|
||||
height: 62rpx;
|
||||
padding: 0 $spacing-sm;
|
||||
border-radius: $border-radius-base;
|
||||
background: $bg-color-hover;
|
||||
color: $text-color-muted;
|
||||
font-size: 24rpx;
|
||||
font-weight: 800;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.filter-chip.active {
|
||||
background: $text-color-main;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.list {
|
||||
padding: $spacing-md;
|
||||
}
|
||||
|
||||
.order-card {
|
||||
margin-bottom: $spacing-md;
|
||||
}
|
||||
|
||||
.order-top,
|
||||
.order-bottom,
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: $spacing-md;
|
||||
}
|
||||
|
||||
.business {
|
||||
color: $text-color-main;
|
||||
font-size: 30rpx;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.order-no,
|
||||
.time {
|
||||
display: block;
|
||||
color: $text-color-muted;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.order-no {
|
||||
margin-top: $spacing-sm;
|
||||
}
|
||||
|
||||
.order-bottom {
|
||||
margin-top: $spacing-md;
|
||||
}
|
||||
|
||||
.amount {
|
||||
color: $text-color-main;
|
||||
font-size: 34rpx;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.actions {
|
||||
justify-content: flex-end;
|
||||
margin-top: $spacing-md;
|
||||
padding-top: $spacing-md;
|
||||
border-top: 1rpx solid $bg-color-hover;
|
||||
}
|
||||
|
||||
.small-btn {
|
||||
width: 180rpx;
|
||||
height: 64rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user