gxwebsoft/mp-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化：提升性能

Browse Source
This commit is contained in:
赵忠林
2025-08-04 07:17:31 +08:00
parent a4cc1cfe2d
commit e5e496a216
9 changed files with 618 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/views/shop/shopOrder/components/search.vue
View File

@@ -1,6 +1,16 @@
<!-- 搜索表单 -->
<template>
<a-space :size="10" style="flex-wrap: wrap">
<a-select
v-model:value="where.type"
style="width: 150px"
placeholder="订单类型"
@change="search"
>
<a-select-option value="">全部</a-select-option>
<a-select-option :value="1">普通订单</a-select-option>
<a-select-option :value="0">未付款</a-select-option>
</a-select>
<a-select
v-model:value="where.payStatus"
style="width: 150px"
@@ -11,21 +21,21 @@
<a-select-option :value="1">已付款</a-select-option>
<a-select-option :value="0">未付款</a-select-option>
</a-select>
<a-select
v-model:value="where.orderStatus"
style="width: 150px"
placeholder="订单状态"
@change="search"
>
<a-select-option value="">全部</a-select-option>
<a-select-option :value="1">已完成</a-select-option>
<a-select-option :value="0">未完成</a-select-option>
<a-select-option :value="2">未使用</a-select-option>
<a-select-option :value="3">已取消</a-select-option>
<a-select-option :value="4">退款中</a-select-option>
<a-select-option :value="5">退款被拒</a-select-option>
<a-select-option :value="6">退款成功</a-select-option>
</a-select>
<!-- <a-select-->
<!-- v-model:value="where.orderStatus"-->
<!-- style="width: 150px"-->
<!-- placeholder="订单状态"-->
<!-- @change="search"-->
<!-- >-->
<!-- <a-select-option value="">全部</a-select-option>-->
<!-- <a-select-option :value="1">已完成</a-select-option>-->
<!-- <a-select-option :value="0">未完成</a-select-option>-->
<!-- <a-select-option :value="2">未使用</a-select-option>-->
<!-- <a-select-option :value="3">已取消</a-select-option>-->
<!-- <a-select-option :value="4">退款中</a-select-option>-->
<!-- <a-select-option :value="5">退款被拒</a-select-option>-->
<!-- <a-select-option :value="6">退款成功</a-select-option>-->
<!-- </a-select>-->
<a-select
:options="getPayType()"
v-model:value="where.payType"

102
src/views/shop/shopOrder/index.vue
View File

@@ -1,45 +1,74 @@
<template>
<a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
<a-card style="margin-bottom: 20px">
<search
@search="reload"
:selection="selection"
@add="openEdit"
@remove="removeBatch"
@batchMove="openMove"
/>
</a-card>
<a-card :bordered="false" :body-style="{ padding: '16px' }">
<a-tabs type="card" v-model:activeKey="activeKey" @change="onTabs">
<a-tab-pane key="all" tab="全部"/>
<a-tab-pane key="unpaid" tab="待支付"/>
<a-tab-pane key="undelivered" tab="待发货"/>
<a-tab-pane key="unverified" tab="待核销"/>
<a-tab-pane key="unreceived" tab="待收货"/>
<a-tab-pane key="unevaluated" tab="待评价"/>
<a-tab-pane key="completed" tab="已完成"/>
<a-tab-pane key="refunded" tab="已退款"/>
<a-tab-pane key="deleted" tab="已删除"/>
</a-tabs>
<ele-pro-table
ref="tableRef"
row-key="orderId"
:columns="columns"
:datasource="datasource"
:customRow="customRow"
v-model:selection="selection"
:toolbar="false"
tool-class="ele-toolbar-form"
class="sys-org-table"
>
<template #toolbar>
<search
@search="reload"
:selection="selection"
@add="openEdit"
@remove="removeBatch"
@batchMove="openMove"
/>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'name'">
<div @click="onSearch(record)" class="cursor-pointer">{{ record.name || '匿名' }}</div>
</template>
<template v-if="column.key === 'orderGoods'">
<template v-for="(item,index) in record.orderGoods" :key="index">
<div class="item py-1">
<a-space :id="`g-${index}`">
<a-avatar :src="item.image" shape="square"/>
<span>{{ item.goodsName }}</span>
</a-space>
</div>
</template>
</template>
<template v-if="column.key === 'phone'">
<div v-if="record.mobile" class="text-gray-400">{{ record.mobile }}</div>
<div v-else class="text-gray-600">{{ record.phone }}</div>
</template>
<template v-if="column.key === 'payType'">
<template v-for="item in getPayType()">
<template v-if="record.payStatus == 1">
<span v-if="item.value == record.payType">{{ item.label }}</span>
</template>
<template v-else>
<span></span>
</template>
<template v-for="item in getPayType()">
<template v-if="record.payStatus == 1">
<span v-if="item.value == record.payType">{{ item.label }}</span>
</template>
<template v-else>
<span></span>
</template>
</template>
</template>
<template v-if="column.key === 'payStatus'">
<a-tag v-if="record.payStatus == 1" color="green" @click.stop="updatePayStatus(record)" class="cursor-pointer">已付款</a-tag>
<a-tag v-if="record.payStatus == 0" @click.stop="updatePayStatus(record)" class="cursor-pointer">未付款</a-tag>
<a-tag v-if="record.payStatus == 1" color="green" @click.stop="updatePayStatus(record)"
class="cursor-pointer">已付款
</a-tag>
<a-tag v-if="record.payStatus == 0" @click.stop="updatePayStatus(record)" class="cursor-pointer">未付款
</a-tag>
<a-tag v-if="record.payStatus == 3">未付款,占场中</a-tag>
</template>
<template v-if="column.key === 'image'">
@@ -103,7 +132,7 @@ import type {
} from 'ele-admin-pro/es/ele-pro-table/types';
import Search from './components/search.vue';
import {getPageTitle} from "@/utils/common";
import { toDateString } from 'ele-admin-pro';
import {toDateString} from 'ele-admin-pro';
import OrderInfo from './components/orderInfo.vue';
import {ShopOrder, ShopOrderParam} from "@/api/shop/shopOrder/model";
import {pageShopOrder, repairOrder} from "@/api/shop/shopOrder";
@@ -123,7 +152,8 @@ const showEdit = ref(false);
const showMove = ref(false);
// 加载状态
const loading = ref(true);
// 激活的标签
const activeKey = ref<string>('all');
// 表格数据源
const datasource: DatasourceFunction = ({
page,
@@ -146,11 +176,16 @@ const datasource: DatasourceFunction = ({
// 表格列配置
const columns = ref<ColumnItem[]>([
{
title: '订单号',
title: '订单编号',
dataIndex: 'orderNo',
key: 'orderNo',
align: 'center',
width: 200,
align: 'center'
},
{
title: '商品信息',
dataIndex: 'orderGoods',
key: 'orderGoods',
width: 400,
},
{
title: '实付金额',
@@ -206,7 +241,7 @@ const columns = ref<ColumnItem[]>([
width: 180,
sorter: true,
ellipsis: true,
customRender: ({ text }) => toDateString(text)
customRender: ({text}) => toDateString(text)
},
// {
// title: '操作',
@@ -224,6 +259,24 @@ const reload = (where?: ShopOrderParam) => {
tableRef?.value?.reload({where: where});
};
const onTabs = () => {
// 将语义化的key转换为后端需要的statusFilter值
const statusFilterMap: Record<string, number | undefined> = {
'all': undefined, // 全部：不传statusFilter
'unpaid': 0, // 待支付：对应原来的key="0"
'undelivered': 1, // 待发货：对应原来的key="1"
'unverified': 2, // 待核销：对应原来的key="2"
'unreceived': 3, // 待收货：对应原来的key="3"
'unevaluated': 4, // 待评价：对应原来的key="4"
'completed': 5, // 已完成：对应原来的key="5"
'refunded': 6, // 已退款：对应原来的key="6"
'deleted': 7 // 已删除：对应原来的key="7"
};
const statusFilter = statusFilterMap[activeKey.value as string];
reload({statusFilter});
}
const onSearch = (item: ShopOrder) => {
reload({userId: item.userId})
}
@@ -247,12 +300,13 @@ const updatePayStatus = (record: ShopOrder) => {
repairOrder({
...record
}).then(() => {
if(!record.realName){
if (!record.realName) {
// 更新用户真实姓名
updateUser({
userId: record.userId,
realName: record.realName
}).then(() => {})
}).then(() => {
})
}
reload();
})