huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(admin): implement order management and statistics with real database integration

Browse Source
This commit is contained in:
comlibmb
2026-02-10 21:59:30 +08:00
parent 47968565a5
commit 1d9915cd77
9 changed files with 567 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
pages/mall/admin/order/list.uvue
View File

@@ -31,13 +31,13 @@
<text>全部</text>
<view class="arrow-down"></view>
</view>
<input class="search-input" placeholder="请输入" />
<input class="search-input" placeholder="请输入" v-model="searchText" @confirm="handleQuery" />
</view>
</view>
</view>
<view class="btn-row">
<button class="btn btn-primary">查询</button>
<button class="btn btn-default">重置</button>
<button class="btn btn-primary" @click="handleQuery">查询</button>
<button class="btn btn-default" @click="handleReset">重置</button>
</view>
</view>
@@ -50,10 +50,9 @@
:key="index"
class="tab-item"
:class="{ active: activeTab === index }"
@click="activeTab = index"
@click="handleTabChange(index)"
>
<text class="tab-text">{{ tab.name }}</text>
<text v-if="tab.count" class="tab-count">({{ tab.count }})</text>
</view>
</view>
@@ -82,47 +81,52 @@
</view>
<view class="tbody">
<view v-for="(item, index) in orderData" :key="index" class="tr">
<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.sn }}</text>
<text class="order-type" :class="item.typeColor">[{{ item.typeName }}]</text>
<text v-if="item.cancelStatus" class="cancel-text">{{ item.cancelStatus }}</text>
<text class="order-sn">{{ item.order_no }}</text>
<text class="order-type blue">[普通订单]</text>
</view>
<!-- 商品信息 -->
<view class="td col-product">
<view class="product-info-wrap">
<image class="p-img" :src="item.product.img" mode="aspectFill" />
<text class="p-name">{{ item.product.name }}</text>
<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.user.phone }} | {{ item.user.id }}</text>
<text class="u-info">{{ item.buyer_name }} | {{ item.buyer_phone }}</text>
</view>
<!-- 实际支付 -->
<view class="td col-price">
<text class="price-val">{{ item.actualPrice }}</text>
<text class="price-val">¥{{ item.total_amount }}</text>
</view>
<!-- 支付方式 -->
<view class="td col-pay">
<text class="pay-text">{{ item.payMethod }}</text>
<text class="pay-text">余额支付</text>
</view>
<!-- 支付时间 -->
<view class="td col-time">
<text class="time-text">{{ item.payTime }}</text>
<text class="time-text">{{ item.paid_at || '-' }}</text>
</view>
<!-- 订单状态 -->
<view class="td col-status">
<text class="status-text">{{ item.statusName }}</text>
<text class="status-text">{{ getStatusName(item.order_status) }}</text>
</view>
<!-- 操作 -->
<view class="td col-op">
<view class="op-links">
<text class="op-link primary" v-if="item.primaryAction">{{ item.primaryAction }}</text>
<text class="op-link primary">详情</text>
<view class="op-link-more">
<text class="more-text">更多</text>
<view class="arrow-down-blue"></view>
@@ -132,93 +136,122 @@
</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 } from 'vue'
import { ref, onMounted, computed } from 'vue'
import { fetchOrderPage } from '@/services/orderService.uts'
const activeTab = ref(2) // 默认选中待发货或待核销（手动对齐截图）
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: '全部', count: null },
{ name: '待支付', count: 793 },
{ name: '待发货', count: 3695 },
{ name: '待核销', count: null },
{ name: '待收货', count: null },
{ name: '待评价', count: null },
{ name: '已完成', count: null },
{ name: '已退款', count: null },
{ name: '已删除', count: null }
{ 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 orderData = ref([
{
sn: 'cp541336970228400128',
typeName: '秒杀订单',
typeColor: 'blue',
cancelStatus: '用户已取消',
product: {
img: 'https://img.crmeb.com/crmeb_demo/75211.png',
name: '爱奇艺智能 奇遇LT01 投影仪 家用卧室 超高清手机便携投影机 (4K超清 支持...'
},
user: { phone: '188****4074', id: '82694' },
actualPrice: '未支付',
payMethod: '--',
payTime: '--',
statusName: '未支付',
primaryAction: ''
},
{
sn: 'cp541289248708362240',
typeName: '核销订单',
typeColor: 'purple',
cancelStatus: '',
product: {
img: 'https://img.crmeb.com/crmeb_demo/75211.png',
name: '阿迪达斯官网 adidas BBALL CAP COT 男女训练运动帽子FQ5270 传奇墨水...'
},
user: { phone: '你就给', id: '82703' },
actualPrice: '90.1',
payMethod: '余额支付',
payTime: '2026-02-02 16:10:17',
statusName: '未核销',
primaryAction: '立即核销'
},
{
sn: 'cp541268226856714240',
typeName: '普通订单',
typeColor: 'green',
cancelStatus: '',
product: {
img: 'https://img.crmeb.com/crmeb_demo/75211.png',
name: 'UR2024夏季新款女装复古纯欲氛围感一字肩短款T恤衫UWG440060'
},
user: { phone: '王毅不睡了', id: '82689' },
actualPrice: '未支付',
payMethod: '--',
payTime: '--',
statusName: '未支付',
primaryAction: '编辑'
},
{
sn: 'cp541262080745930752',
typeName: '秒杀订单',
typeColor: 'blue',
cancelStatus: '',
product: {
img: 'https://img.crmeb.com/crmeb_demo/75211.png',
name: '爱奇艺智能 奇遇LT01 投影仪 家用卧室 超高清手机便携投影机 (4K超清 支持...'
},
user: { phone: '177****8361', id: '82697' },
actualPrice: '未支付',
payMethod: '--',
payTime: '--',
statusName: '未支付',
primaryAction: '编辑'
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 ?? '未知'
}
</script>
<style scoped lang="scss">