370 lines
8.0 KiB
Vue
370 lines
8.0 KiB
Vue
<script lang="ts" setup>
|
|
import { useMerchantStore } from '@/store/merchant'
|
|
import { OrderStatus, ORDER_STATUS_CONFIG } from '@/typings/merchant'
|
|
|
|
definePage({
|
|
style: {
|
|
navigationBarTitleText: '订单管理',
|
|
},
|
|
})
|
|
|
|
const merchantStore = useMerchantStore()
|
|
|
|
// Tab 状态
|
|
const tabs = [
|
|
{ value: 'all', label: '全部' },
|
|
{ value: OrderStatus.PENDING, label: '待确认' },
|
|
{ value: OrderStatus.SHIPPING, label: '待发货' },
|
|
{ value: OrderStatus.SHIPPED, label: '已发货' },
|
|
{ value: OrderStatus.COMPLETED, label: '已完成' },
|
|
]
|
|
const currentTab = ref<OrderStatus | 'all'>('all')
|
|
|
|
// 搜索
|
|
const keyword = ref('')
|
|
|
|
// 加载订单
|
|
async function loadOrders() {
|
|
await merchantStore.fetchOrders({
|
|
status: currentTab.value,
|
|
keyword: keyword.value,
|
|
})
|
|
}
|
|
|
|
// 切换 Tab
|
|
function handleTabChange(value: OrderStatus | 'all') {
|
|
currentTab.value = value
|
|
loadOrders()
|
|
}
|
|
|
|
// 搜索
|
|
function handleSearch() {
|
|
loadOrders()
|
|
}
|
|
|
|
// 查看详情
|
|
function handleDetail(id: string) {
|
|
uni.navigateTo({ url: `/pagesMerchant/order/detail?id=${id}` })
|
|
}
|
|
|
|
// 快捷确认订单
|
|
async function handleConfirm(id: string) {
|
|
uni.showModal({
|
|
title: '确认订单',
|
|
content: '确认接受此订单？',
|
|
success: async (res) => {
|
|
if (res.confirm) {
|
|
await merchantStore.confirmOrder(id)
|
|
uni.showToast({ title: '确认成功', icon: 'success' })
|
|
}
|
|
},
|
|
})
|
|
}
|
|
|
|
// 下拉刷新
|
|
async function onRefresh() {
|
|
await loadOrders()
|
|
}
|
|
|
|
// 页面加载
|
|
onMounted(() => {
|
|
loadOrders()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<view class="order-list-page">
|
|
<!-- 搜索栏 -->
|
|
<view class="search-bar">
|
|
<wd-search
|
|
v-model="keyword"
|
|
placeholder="搜索订单号/客户名称"
|
|
@search="handleSearch"
|
|
@clear="handleSearch"
|
|
/>
|
|
</view>
|
|
|
|
<!-- Tab 切换 -->
|
|
<view class="tabs">
|
|
<view
|
|
v-for="tab in tabs"
|
|
:key="tab.value"
|
|
class="tab-item"
|
|
:class="{ active: currentTab === tab.value }"
|
|
@click="handleTabChange(tab.value)"
|
|
>
|
|
{{ tab.label }}
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 订单列表 -->
|
|
<scroll-view
|
|
class="order-list"
|
|
scroll-y
|
|
refresher-enabled
|
|
:refresher-triggered="merchantStore.loading"
|
|
@refresherrefresh="onRefresh"
|
|
>
|
|
<view v-if="merchantStore.orders.length === 0" class="empty">
|
|
<text class="i-carbon-document"></text>
|
|
<text>暂无订单</text>
|
|
</view>
|
|
|
|
<view
|
|
v-for="order in merchantStore.orders"
|
|
:key="order.id"
|
|
class="order-card"
|
|
@click="handleDetail(order.id)"
|
|
>
|
|
<view class="order-header">
|
|
<text class="order-no">{{ order.orderNo }}</text>
|
|
<text class="order-status" :style="{ color: ORDER_STATUS_CONFIG[order.status].color }">
|
|
{{ ORDER_STATUS_CONFIG[order.status].label }}
|
|
</text>
|
|
</view>
|
|
|
|
<view class="order-goods">
|
|
<view v-for="goods in order.goods" :key="goods.id" class="goods-item">
|
|
<image :src="goods.image" class="goods-image" mode="aspectFill" />
|
|
<view class="goods-info">
|
|
<text class="goods-name">{{ goods.name }}</text>
|
|
<text class="goods-sku">{{ goods.skuName }}</text>
|
|
<view class="goods-price">
|
|
<text class="price">¥{{ goods.price.toFixed(2) }}</text>
|
|
<text class="quantity">x{{ goods.quantity }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="order-footer">
|
|
<view class="customer">
|
|
<text class="i-carbon-user"></text>
|
|
<text>{{ order.customerName }}</text>
|
|
</view>
|
|
<view class="amount">
|
|
共{{ order.goods.length }}件 实付 <text class="total">¥{{ order.payAmount.toFixed(2) }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 操作按钮 -->
|
|
<view class="order-actions" v-if="order.status === OrderStatus.PENDING || order.status === OrderStatus.SHIPPING">
|
|
<view
|
|
v-if="order.status === OrderStatus.PENDING"
|
|
class="action-btn primary"
|
|
@click.stop="handleConfirm(order.id)"
|
|
>
|
|
确认订单
|
|
</view>
|
|
<view
|
|
v-if="order.status === OrderStatus.SHIPPING"
|
|
class="action-btn primary"
|
|
@click.stop="handleDetail(order.id)"
|
|
>
|
|
去发货
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.order-list-page {
|
|
min-height: 100vh;
|
|
background: #f5f5f5;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.search-bar {
|
|
padding: 20rpx;
|
|
background: #fff;
|
|
}
|
|
|
|
.tabs {
|
|
display: flex;
|
|
background: #fff;
|
|
padding: 0 10rpx;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
|
|
.tab-item {
|
|
flex: 1;
|
|
text-align: center;
|
|
padding: 24rpx 0;
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
position: relative;
|
|
|
|
&.active {
|
|
color: #ff8f0d;
|
|
font-weight: 600;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 40rpx;
|
|
height: 4rpx;
|
|
background: #ff8f0d;
|
|
border-radius: 2rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.order-list {
|
|
flex: 1;
|
|
}
|
|
|
|
.empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 100rpx 0;
|
|
color: #999;
|
|
|
|
text:first-child {
|
|
font-size: 80rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
}
|
|
|
|
.order-card {
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
padding: 24rpx;
|
|
margin: 20rpx;
|
|
.order-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
|
|
.order-no {
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.order-status {
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.order-goods {
|
|
border-top: 1rpx solid #f5f5f5;
|
|
border-bottom: 1rpx solid #f5f5f5;
|
|
padding: 20rpx 0;
|
|
|
|
.goods-item {
|
|
display: flex;
|
|
gap: 16rpx;
|
|
|
|
& + .goods-item {
|
|
margin-top: 16rpx;
|
|
}
|
|
|
|
.goods-image {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 8rpx;
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.goods-info {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.goods-name {
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.goods-sku {
|
|
font-size: 22rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.goods-price {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.price {
|
|
font-size: 28rpx;
|
|
color: #ff8f0d;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.quantity {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.order-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-top: 16rpx;
|
|
|
|
.customer {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.amount {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
|
|
.total {
|
|
font-size: 30rpx;
|
|
color: #ff8f0d;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
|
|
.order-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 16rpx;
|
|
margin-top: 20rpx;
|
|
padding-top: 20rpx;
|
|
border-top: 1rpx solid #f5f5f5;
|
|
|
|
.action-btn {
|
|
padding: 12rpx 32rpx;
|
|
border-radius: 32rpx;
|
|
font-size: 24rpx;
|
|
border: 1rpx solid #ddd;
|
|
color: #666;
|
|
|
|
&.primary {
|
|
background: #ff8f0d;
|
|
border-color: #ff8f0d;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|