537 lines
14 KiB
Plaintext
537 lines
14 KiB
Plaintext
<template>
|
||
<view class="order-list-page">
|
||
<!-- 筛选区域 -->
|
||
<view class="filter-card">
|
||
<view class="filter-row">
|
||
<view class="filter-item">
|
||
<text class="label">订单类型：</text>
|
||
<view class="mock-select">
|
||
<text>全部订单</text>
|
||
<view class="arrow-down"></view>
|
||
</view>
|
||
</view>
|
||
<view class="filter-item">
|
||
<text class="label">支付方式：</text>
|
||
<view class="mock-select">
|
||
<text>全部</text>
|
||
<view class="arrow-down"></view>
|
||
</view>
|
||
</view>
|
||
<view class="filter-item long">
|
||
<text class="label">创建时间：</text>
|
||
<view class="mock-date-range">
|
||
<image class="cal-icon" src="/static/icons/calendar.png" mode="aspectFit" />
|
||
<text class="placeholder">开始日期 - 结束日期</text>
|
||
</view>
|
||
</view>
|
||
<view class="filter-item search">
|
||
<text class="label">订单搜索：</text>
|
||
<view class="search-group">
|
||
<view class="search-select">
|
||
<text>全部</text>
|
||
<view class="arrow-down"></view>
|
||
</view>
|
||
<input class="search-input" placeholder="请输入" v-model="searchText" @confirm="handleQuery" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="btn-row">
|
||
<button class="btn btn-primary" @click="handleQuery">查询</button>
|
||
<button class="btn btn-default" @click="handleReset">重置</button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 列表数据区域 -->
|
||
<view class="content-card">
|
||
<!-- 状态 Tabs -->
|
||
<view class="status-tabs">
|
||
<view
|
||
v-for="(tab, index) in statusTabs"
|
||
:key="index"
|
||
class="tab-item"
|
||
:class="{ active: activeTab === index }"
|
||
@click="handleTabChange(index)"
|
||
>
|
||
<text class="tab-text">{{ tab.name }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 操作按钮 -->
|
||
<view class="action-bar">
|
||
<button class="action-btn btn-blue">订单核销</button>
|
||
<button class="action-btn btn-outline">批量发货</button>
|
||
<button class="action-btn btn-outline">批量删除</button>
|
||
<button class="action-btn btn-outline">订单导出</button>
|
||
</view>
|
||
|
||
<!-- 数据表格 -->
|
||
<view class="order-table">
|
||
<view class="thead">
|
||
<view class="th col-check">
|
||
<checkbox :checked="false" color="#1890ff" />
|
||
</view>
|
||
<view class="th col-order">订单号 | 类型</view>
|
||
<view class="th col-product">商品信息</view>
|
||
<view class="th col-user">用户信息</view>
|
||
<view class="th col-price">实际支付</view>
|
||
<view class="th col-pay">支付方式</view>
|
||
<view class="th col-time">支付时间</view>
|
||
<view class="th col-status">订单状态</view>
|
||
<view class="th col-op">操作</view>
|
||
</view>
|
||
|
||
<view class="tbody">
|
||
<view v-if="loading" class="table-loading" style="padding: 40px; text-align: center;">
|
||
<text>加载中...</text>
|
||
</view>
|
||
<view v-else-if="orderData.length === 0" class="table-empty" style="padding: 40px; text-align: center;">
|
||
<text>暂无订单数据</text>
|
||
</view>
|
||
<view v-else v-for="(item, index) in orderData" :key="index" class="tr">
|
||
<view class="td col-check">
|
||
<checkbox :checked="false" color="#1890ff" />
|
||
</view>
|
||
<!-- 订单号|类型 -->
|
||
<view class="td col-order">
|
||
<text class="order-sn">{{ item.order_no }}</text>
|
||
<text class="order-type blue">[{{ getChannelName(item.channel_type) }}]</text>
|
||
</view>
|
||
<!-- 商品信息 -->
|
||
<view class="td col-product">
|
||
<view class="product-info-wrap">
|
||
<image class="p-img" :src="item.first_item_summary?.image_url" mode="aspectFill" />
|
||
<text class="p-name">{{ item.first_item_summary?.product_name || '多商品订单' }}</text>
|
||
</view>
|
||
</view>
|
||
<!-- 用户信息 -->
|
||
<view class="td col-user">
|
||
<text class="u-info">{{ item.buyer_name }} | {{ item.buyer_phone }}</text>
|
||
</view>
|
||
<!-- 实际支付 -->
|
||
<view class="td col-price">
|
||
<text class="price-val">¥{{ item.total_amount }}</text>
|
||
</view>
|
||
<!-- 支付方式 -->
|
||
<view class="td col-pay">
|
||
<text class="pay-text">{{ getPayTypeName(item.pay_type) }}</text>
|
||
</view>
|
||
<!-- 支付时间 -->
|
||
<view class="td col-time">
|
||
<text class="time-text">{{ item.paid_at || '-' }}</text>
|
||
</view>
|
||
<!-- 订单状态 -->
|
||
<view class="td col-status">
|
||
<text class="status-text">{{ getStatusName(item.order_status) }}</text>
|
||
</view>
|
||
<!-- 操作 -->
|
||
<view class="td col-op">
|
||
<view class="op-links">
|
||
<text class="op-link primary">详情</text>
|
||
<view class="op-link-more">
|
||
<text class="more-text">更多</text>
|
||
<view class="arrow-down-blue"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 分页区域 -->
|
||
<view class="pagination-row" style="padding: 16px 20px;">
|
||
<text class="total-text">共 {{ total }} 条</text>
|
||
<view class="page-btns">
|
||
<view class="page-btn" :class="{ disabled: page <= 1 }" @click="prevPage"><text>‹</text></view>
|
||
<view class="page-btn active"><text>{{ page }}</text></view>
|
||
<view class="page-btn" :class="{ disabled: page >= totalPages }" @click="nextPage"><text>›</text></view>
|
||
</view>
|
||
<view class="page-jump">
|
||
<text>前往</text>
|
||
<input class="jump-input" v-model="jumpPage" type="number" @confirm="goToJumpPage" />
|
||
<text>页</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="uts">
|
||
import { ref, onMounted, computed } from 'vue'
|
||
import { fetchOrderPage } from '@/services/orderService.uts'
|
||
|
||
const activeTab = ref(0)
|
||
const searchText = ref('')
|
||
const total = ref(0)
|
||
const orderData = ref<any[]>([])
|
||
const loading = ref(false)
|
||
const page = ref(1)
|
||
const pageSize = ref(15)
|
||
const jumpPage = ref('')
|
||
|
||
const statusTabs = [
|
||
{ name: '全部', value: null as number | null },
|
||
{ name: '待付款', value: 1 as number | null },
|
||
{ name: '待发货', value: 2 as number | null },
|
||
{ name: '待收货', value: 3 as number | null },
|
||
{ name: '已完成', value: 4 as number | null },
|
||
{ name: '已取消', value: 5 as number | null },
|
||
{ name: '退款中', value: 6 as number | null },
|
||
{ name: '已退款', value: 7 as number | null }
|
||
]
|
||
|
||
const totalPages = computed((): number => {
|
||
if (pageSize.value <= 0) return 1
|
||
return Math.ceil(total.value / pageSize.value)
|
||
})
|
||
|
||
const loadOrders = async () => {
|
||
loading.value = true
|
||
try {
|
||
const res = await fetchOrderPage(
|
||
page.value,
|
||
pageSize.value,
|
||
statusTabs[activeTab.value].value,
|
||
searchText.value || null
|
||
)
|
||
|
||
orderData.value = res.items
|
||
total.value = res.total
|
||
} catch (e) {
|
||
uni.showToast({ title: '加载订单失败', icon: 'none' })
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
loadOrders()
|
||
})
|
||
|
||
const handleQuery = () => {
|
||
page.value = 1
|
||
loadOrders()
|
||
}
|
||
|
||
const handleReset = () => {
|
||
searchText.value = ''
|
||
page.value = 1
|
||
loadOrders()
|
||
}
|
||
|
||
const handleTabChange = (index: number) => {
|
||
activeTab.value = index
|
||
page.value = 1
|
||
loadOrders()
|
||
}
|
||
|
||
const prevPage = () => {
|
||
if (page.value > 1) {
|
||
page.value--
|
||
loadOrders()
|
||
}
|
||
}
|
||
|
||
const nextPage = () => {
|
||
if (page.value < totalPages.value) {
|
||
page.value++
|
||
loadOrders()
|
||
}
|
||
}
|
||
|
||
const goToJumpPage = () => {
|
||
const targetPage = parseInt(jumpPage.value)
|
||
if (!isNaN(targetPage) && targetPage >= 1 && targetPage <= totalPages.value) {
|
||
page.value = targetPage
|
||
loadOrders()
|
||
jumpPage.value = ''
|
||
} else {
|
||
uni.showToast({ title: '页码无效', icon: 'none' })
|
||
}
|
||
}
|
||
|
||
function getStatusName(status: number): string {
|
||
const tab = statusTabs.find(t => t.value === status)
|
||
return tab?.name ?? '未知'
|
||
}
|
||
|
||
function getPayTypeName(type: number | null): string {
|
||
switch (type) {
|
||
case 1: return '余额支付'
|
||
case 2: return '微信支付'
|
||
case 3: return '支付宝'
|
||
case 4: return '线下支付'
|
||
default: return '其他'
|
||
}
|
||
}
|
||
|
||
function getChannelName(type: number | null): string {
|
||
switch (type) {
|
||
case 1: return '公众号'
|
||
case 2: return '小程序'
|
||
case 3: return 'H5'
|
||
case 4: return 'PC'
|
||
case 5: return 'APP'
|
||
default: return '普通订单'
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.order-list-page {
|
||
padding: 16px;
|
||
background-color: #f0f2f5;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.filter-card {
|
||
background-color: #fff;
|
||
padding: 24px;
|
||
border-radius: 4px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.filter-row {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
gap: 24px;
|
||
}
|
||
|
||
.filter-item {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
|
||
.label {
|
||
font-size: 14px;
|
||
color: #333;
|
||
width: 70px;
|
||
}
|
||
}
|
||
|
||
.mock-select {
|
||
width: 160px;
|
||
height: 32px;
|
||
border: 1px solid #d9d9d9;
|
||
border-radius: 4px;
|
||
padding: 0 12px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
text { font-size: 14px; color: #595959; }
|
||
}
|
||
|
||
.mock-date-range {
|
||
width: 240px;
|
||
height: 32px;
|
||
border: 1px solid #d9d9d9;
|
||
border-radius: 4px;
|
||
padding: 0 12px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
.cal-icon { width: 14px; height: 14px; margin-right: 8px; opacity: 0.4; }
|
||
.placeholder { font-size: 14px; color: #bfbfbf; }
|
||
}
|
||
|
||
.search-group {
|
||
display: flex;
|
||
flex-direction: row;
|
||
border: 1px solid #d9d9d9;
|
||
border-radius: 4px;
|
||
height: 32px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.search-select {
|
||
width: 80px;
|
||
border-right: 1px solid #d9d9d9;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 4px;
|
||
background-color: #fafafa;
|
||
text { font-size: 14px; color: #595959; }
|
||
}
|
||
|
||
.search-input {
|
||
flex: 1;
|
||
border: none;
|
||
padding: 0 12px;
|
||
font-size: 14px;
|
||
width: 120px;
|
||
}
|
||
|
||
.arrow-down {
|
||
width: 0; height: 0;
|
||
border-left: 4px solid transparent;
|
||
border-right: 4px solid transparent;
|
||
border-top: 5px solid #bfbfbf;
|
||
}
|
||
|
||
.btn-row {
|
||
margin-top: 16px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
gap: 8px;
|
||
}
|
||
|
||
.btn {
|
||
height: 32px;
|
||
padding: 0 16px;
|
||
font-size: 14px;
|
||
border-radius: 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0;
|
||
}
|
||
|
||
.btn-primary { background-color: #1890ff; color: #fff; border: none; }
|
||
.btn-default { background-color: #fff; color: #595959; border: 1px solid #d9d9d9; }
|
||
|
||
.content-card {
|
||
background-color: #fff;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.status-tabs {
|
||
display: flex;
|
||
flex-direction: row;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
padding: 0 16px;
|
||
}
|
||
|
||
.tab-item {
|
||
padding: 16px 20px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: row;
|
||
gap: 2px;
|
||
|
||
.tab-text { font-size: 14px; color: #595959; }
|
||
.tab-count { font-size: 14px; color: #595959; }
|
||
|
||
&.active {
|
||
.tab-text, .tab-count { color: #1890ff; font-weight: 500; }
|
||
&::after {
|
||
content: '';
|
||
position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: #1890ff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.action-bar {
|
||
padding: 16px 20px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
gap: 12px;
|
||
}
|
||
|
||
.action-btn {
|
||
height: 32px;
|
||
padding: 0 16px;
|
||
font-size: 14px;
|
||
border-radius: 4px;
|
||
margin: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.btn-blue { background-color: #1890ff; color: #fff; border: none; }
|
||
.btn-outline { background-color: #fff; color: #595959; border: 1px solid #d9d9d9; }
|
||
|
||
/* 表格样式 */
|
||
.order-table {
|
||
width: 100%;
|
||
}
|
||
|
||
.thead {
|
||
display: flex;
|
||
flex-direction: row;
|
||
background-color: #f0f7ff;
|
||
}
|
||
|
||
.th {
|
||
padding: 12px 8px;
|
||
font-size: 14px;
|
||
color: #595959;
|
||
font-weight: 500;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.tr {
|
||
display: flex;
|
||
flex-direction: row;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
&:hover { background-color: #fafafa; }
|
||
}
|
||
|
||
.td {
|
||
padding: 16px 8px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* 列宽控制 */
|
||
.col-check { width: 50px; justify-content: center; align-items: center; }
|
||
.col-order { width: 220px; }
|
||
.col-product { flex: 1; }
|
||
.col-user { width: 160px; }
|
||
.col-price { width: 100px; }
|
||
.col-pay { width: 100px; }
|
||
.col-time { width: 160px; }
|
||
.col-status { width: 100px; }
|
||
.col-op { width: 120px; }
|
||
|
||
/* 单元格具体内容样式 */
|
||
.order-sn { font-size: 13px; color: #262626; margin-bottom: 4px; }
|
||
.order-type { font-size: 12px; }
|
||
.blue { color: #1890ff; }
|
||
.purple { color: #722ed1; }
|
||
.green { color: #52c41a; }
|
||
.cancel-text { font-size: 12px; color: #ff4d4f; margin-top: 4px; }
|
||
|
||
.product-info-wrap {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
}
|
||
|
||
.p-img { width: 44px; height: 44px; border-radius: 4px; background-color: #f5f5f5; flex-shrink: 0; }
|
||
.p-name { font-size: 13px; color: #595959; line-height: 1.5; }
|
||
|
||
.u-info { font-size: 13px; color: #595959; }
|
||
.price-val { font-size: 14px; color: #262626; }
|
||
.pay-text, .time-text, .status-text { font-size: 13px; color: #595959; }
|
||
|
||
.op-links {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.op-link { font-size: 13px; cursor: pointer; }
|
||
.primary { color: #1890ff; }
|
||
|
||
.op-link-more {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
.more-text { font-size: 13px; color: #1890ff; }
|
||
.arrow-down-blue {
|
||
width: 0; height: 0;
|
||
border-left: 3px solid transparent;
|
||
border-right: 3px solid transparent;
|
||
border-top: 4px solid #1890ff;
|
||
}
|
||
</style>
|