feat: 订单列表样式和接口更新

This commit is contained in:
lzhizhao 2025-09-30 23:35:32 +08:00
parent 0aa1746679
commit df15102661
3 changed files with 507 additions and 178 deletions

View File

@ -12,7 +12,7 @@
(function () { (function () {
window.SITE_CONFIG = {}; window.SITE_CONFIG = {};
// api接口请求地址 // api接口请求地址
window.SITE_CONFIG["baseUrl"] = "https://admin.damajishi.cn/"; window.SITE_CONFIG["baseUrl"] = "https://admin-test.damajishi.cn/";
// 在线api接口请求地址 // 在线api接口请求地址
// window.SITE_CONFIG['baseUrl'] = 'http://119.29.103.250:8082/red-memory'; // window.SITE_CONFIG['baseUrl'] = 'http://119.29.103.250:8082/red-memory';
// 在线api接口请求地址 // 在线api接口请求地址

View File

@ -352,5 +352,45 @@ export const mer_admin = {
}, },
membershipEnableSaveSettings: data => { membershipEnableSaveSettings: data => {
return $http.post(`/merchant-api/membershipEnable/saveSettings`, data); return $http.post(`/merchant-api/membershipEnable/saveSettings`, data);
},
/**
* 订单分页查询
* @param {object} data 查询参数
* @param {number} data.pageNumber 页码
* @param {number} data.pageSize 每页数量
* @param {string} data.sortOrder 排序顺序
* @param {string} data.sortName 排序字段
* @param {string} data.receiverName 收货人姓名
* @param {string} data.receiverPhone 收货人手机号
* @param {string} data.statusList 订单业务状态列表 0 待支付1待接单2待备货3待取货4已取货待配送5 配送中待送达6 已配送待收货8完成-1未支付订单取消-2用户申请退款中-3用户申请已退款-4商家取消订单-5平台取消订单
* @param {string} data.unitOrderNo 结算订单号
* @param {string} data.startTime 开始日期
* @param {string} data.endTime 结束日期
* @returns {Promise}
*/
orderV2Page: data => {
return $http.request({
method: "get",
url: `/merchant-api/backend/order/v2/page`,
params: data
});
},
/**
* 订单概览
* @param {object} data 查询参数
* @param {string} data.receiverName 收货人姓名
* @param {string} data.receiverPhone 收货人手机号
* @param {string} data.statusList 订单业务状态 0 待支付1待接单2待备货3待取货4已取货待配送5 配送中待送达6 已配送待收货8完成-1未支付订单取消-2用户申请退款中-3用户申请已退款-4商家取消订单-5平台取消订单
* @param {string} data.unitOrderNo 结算订单号
* @param {string} data.startTime 开始日期
* @param {string} data.endTime 结束日期
* @returns {Promise}
*/
orderV2Overview: data => {
return $http.request({
method: "get",
url: `/merchant-api/backend/order/v2/overview`,
params: data
});
} }
}; };

View File

@ -1,209 +1,498 @@
<template> <template>
<div style="height: calc(100vh - 200px)"> <div class="page-container">
<div class="fixed-content">
<el-card class="search-card" shadow="never">
<!-- 搜索表单 -->
<el-form <el-form
v-if="storeList.length > 1" :model="searchForm"
:inline="true" ref="searchForm"
:model="formInline" label-position="top"
class="demo-form-inline" class="search-form"
size="small"
> >
<el-form-item label="摊铺"> <el-row :gutter="15">
<el-col :span="6">
<el-form-item label="收货人姓名" prop="receiverName">
<el-input
v-model="searchForm.receiverName"
placeholder="请输入收货人姓名"
clearable
></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="订单编号" prop="unitOrderNo">
<el-input
v-model="searchForm.unitOrderNo"
placeholder="请输入订单编号"
clearable
></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="订单状态" prop="statusList">
<el-select <el-select
class="filter-item" v-model="searchForm.statusList"
style="width: 200px" multiple
v-model="formInline.shopId" placeholder="请选择订单状态"
placeholder="请选择摊铺" clearable
style="width: 100%;"
> >
<el-option <el-option
v-for="item in storeList" v-for="item in orderStatusOptions"
:key="item.shopId"
:label="item.shopName"
:value="item.shopId"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getList">查询</el-button>
<el-button type="primary" @click="Reset">重置</el-button>
<el-button
type="success"
@click="
$router.push({ name: 'operation-management-total-order/index' })
"
>菜市场总订单</el-button
>
</el-form-item>
</el-form>
<el-tabs v-model="formInline.group" @tab-click="handleClick">
<el-tab-pane
v-for="item in statusList"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:name="item.value" :value="item.value"
></el-tab-pane> ></el-option>
</el-tabs> </el-select>
<el-table :data="tableData" height="70vh" border style="width: 100%"> </el-form-item>
<el-table-column type="expand"> </el-col>
<el-col :span="6">
<el-form-item label="订单时间" prop="dateRange">
<el-date-picker
v-model="searchForm.dateRange"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd HH:mm:ss"
style="width: 100%;"
></el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24" class="search-buttons">
<el-button type="primary" @click="handleSearch" icon="el-icon-search" size="small">搜索</el-button>
<el-button @click="handleReset" icon="el-icon-refresh" size="small">重置</el-button>
</el-col>
</el-row>
</el-form>
</el-card>
<el-card class="stats-card" shadow="never">
<el-row :gutter="20">
<el-col :span="6">
<div class="stat-item">
<div class="stat-label">订单数量()</div>
<div class="stat-value">{{ stats.totalCount || 0 }}</div>
</div>
</el-col>
<el-col :span="6">
<div class="stat-item">
<div class="stat-label">订单金额()</div>
<div class="stat-value">¥ {{ (stats.totalMoney / 100).toFixed(2) || '0.00' }}</div>
</div>
</el-col>
<el-col :span="6">
<div class="stat-item">
<div class="stat-label">订单完成率</div>
<div class="stat-value">{{ (stats.completeRate * 100).toFixed(2) || '0.00' }}%</div>
</div>
</el-col>
<el-col :span="6">
<div class="stat-item">
<div class="stat-label">代理商抽成()</div>
<div class="stat-value">¥ {{ (stats.agentCommission / 100).toFixed(2) || '0.00' }}</div>
</div>
</el-col>
</el-row>
</el-card>
</div>
<el-card class="table-card" shadow="never">
<div slot="header">
<span>订单列表</span>
</div>
<!-- 表格 -->
<el-table
:data="tableData"
v-loading="loading"
style="width: 100%"
row-key="unitOrderNo"
size="small"
:expand-row-keys="expandedRows"
@expand-change="handleExpandChange"
:default-expand-all="false">
<el-table-column type="expand" width="50">
<template slot-scope="props"> <template slot-scope="props">
<div style="padding-left: 20px" m="4"> <div class="expand-content">
<el-table :data="props.row.productOrders" :border="true"> <div class="shop-order" v-for="(shopOrder, shopIndex) in props.row.shopOrderList" :key="shopIndex">
<el-table-column type="index" width="50" label="序号"> <h4>店铺: {{ shopOrder.shopName }}</h4>
<!-- 二级子列表: 店铺订单信息 -->
<el-table
:data="[shopOrder]"
size="small"
style="width: 100%; margin-bottom: 10px;"
:show-header="true">
<el-table-column label="序号" width="50">
<template slot-scope="shopScope">
{{ shopIndex + 1 }}
</template>
</el-table-column> </el-table-column>
<el-table-column label="商品订单号" prop="productOrderNo" /> <el-table-column prop="shopOrderNo" label="店铺订单号" width="180"></el-table-column>
<el-table-column label="商品名称" prop="productName" /> <el-table-column prop="status" label="档位" width="100">
<el-table-column label="商品原价" prop="originPrice" /> <template slot-scope="shopScope">
<el-table-column label="商品终价" prop="finalPrice" /> {{ shopScope.row.status || "暂无" }}
<el-table-column label="商品订单金额" prop="productOrderMoney" /> </template>
<el-table-column label="商品数量" prop="productCount" /> </el-table-column>
<el-table-column label="商品单价" prop="productFinalPrice" /> <el-table-column prop="status" label="订单状态" width="120">
<el-table-column label="商品图片" prop="productImg"> <template slot-scope="shopScope">
<template slot-scope="scope"> <el-tag :type="getShopStatusType(shopScope.row.status)" size="small">
<el-image {{ getShopStatusText(shopScope.row.status) }}
style="width: 60px; height: 60px" </el-tag>
:src="scope.row.productImg" </template>
:preview-src-list="[scope.row.productImg]" </el-table-column>
> </el-table>
</el-image>
<!-- 三级子列表: 商品信息 -->
<el-table
:data="shopOrder.productOrderList"
size="small"
style="width: 100%"
:show-header="true">
<el-table-column label="序号" width="50">
<template slot-scope="productScope">
{{ productScope.$index + 1 }}
</template>
</el-table-column>
<el-table-column prop="productName" label="商品名称" width="150"></el-table-column>
<el-table-column prop="productCount" label="商品数量" width="80"></el-table-column>
<el-table-column label="商品原价" width="100">
<template slot-scope="productScope">
¥ {{ (productScope.row.originPrice / 100).toFixed(2) }}
</template>
</el-table-column>
<el-table-column label="商品终价" width="100">
<template slot-scope="productScope">
¥ {{ (productScope.row.finalPrice / 100).toFixed(2) }}
</template>
</el-table-column>
<el-table-column label="商品订单金额" width="120">
<template slot-scope="productScope">
¥ {{ (productScope.row.productOrderMoney / 100).toFixed(2) }}
</template>
</el-table-column>
<el-table-column prop="productImg" label="商品图片" width="80">
<template slot-scope="productScope">
<el-image v-if="productScope.row.productImg"
:src="productScope.row.productImg"
style="width: 40px; height: 40px;"
fit="cover"
:preview-src-list="[productScope.row.productImg]"></el-image>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="总订单号" prop="orderNo" />
<el-table-column label="结算单位订单号" prop="unitOrderNo" /> <!-- 一级列表字段 -->
<el-table-column label="总商品数量" prop="productCount" /> <el-table-column label="序号" width="50">
<el-table-column label="顾客实际支付" prop="totalPayMoney" />
<el-table-column label="商品总价" prop="productMoney" />
<el-table-column label="配送费" prop="deliveryMoney" />
<el-table-column label="优惠券减免" prop="couponMoney" />
<el-table-column label="支付时间" prop="payTime" />
<el-table-column label="预计送达时间" prop="predictDeliveryTime" />
<el-table-column label="预计收入" prop="predictIncome" />
<el-table-column label="距离" prop="distance" />
<el-table-column label="备注" prop="remark" />
<el-table-column fixed="right" width="100px" label="操作" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="primary" size="mini" @click="view(scope.row)"> {{ (pagination.pageNumber - 1) * pagination.pageSize + scope.$index + 1 }}
查看
</el-button>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="unitOrderNo" label="结算订单号" min-width="180"></el-table-column>
<el-table-column prop="createTime" label="下单时间" width="180"></el-table-column>
<el-table-column prop="receiverName" label="收货人姓名" width="120"></el-table-column>
<el-table-column prop="receiverPhone" label="收货人电话" width="150"></el-table-column>
<el-table-column prop="poi" label="收货人地址" min-width="200"></el-table-column>
<el-table-column label="市场订单金额" width="120">
<template slot-scope="scope">
<span>¥ {{ (scope.row.unitOrderMoney / 100).toFixed(2) }}</span>
</template>
</el-table-column>
<el-table-column label="市场订单商品金额" width="120">
<template slot-scope="scope">
<span>¥ {{ (scope.row.productMoney / 100).toFixed(2) }}</span>
</template>
</el-table-column>
<el-table-column label="市场订单配送费" width="120">
<template slot-scope="scope">
<span>¥ {{ (scope.row.deliveryMoney / 100).toFixed(2) }}</span>
</template>
</el-table-column>
<el-table-column label="调度费" width="100">
<template slot-scope="scope">
<span>¥ {{ (scope.row.dispatchMoney / 100).toFixed(2) }}</span>
</template>
</el-table-column>
<el-table-column label="包装费" width="100">
<template slot-scope="scope">
<span>¥ {{ (scope.row.packageMoney / 100).toFixed(2) }}</span>
</template>
</el-table-column>
<el-table-column prop="status" label="订单状态" width="120">
<template slot-scope="scope">
<el-tag :type="getStatusTagType(scope.row.status)" size="small">
{{ getStatusText(scope.row.status) }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="marketId" label="市场编号" width="100"></el-table-column>
<el-table-column prop="marketName" label="市场名称" min-width="150"></el-table-column>
<el-table-column prop="refundReason" label="申请退款原因" min-width="150"></el-table-column>
</el-table> </el-table>
<!-- 分页 --> <!-- 分页 -->
<div class="pagination-container">
<el-pagination <el-pagination
:current-page="formInline.pageNumber"
:page-sizes="[10, 20, 30, 50]"
:page-size="formInline.pageSize"
:total="total"
background
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
/> :current-page="pagination.pageNumber"
</div> :page-sizes="[10, 20, 30, 50]"
<!-- 订单详情 --> :page-size="pagination.pageSize"
<viewDetails ref="viewDetails"></viewDetails> layout="total, sizes, prev, pager, next, jumper"
:total="pagination.total"
class="pagination-container"
></el-pagination>
</el-card>
</div> </div>
</template> </template>
<script> <script>
import viewDetails from "./popup/view-details.vue"; import { mer_admin } from "@/api/modules/mer_admin";
import { mapState } from "vuex";
export default { export default {
components: { viewDetails }, name: "OrderManagement",
data() { data() {
return { return {
formInline: { searchForm: {
group: "", receiverName: "",
shopId: "", unitOrderNo: "",
pageNumber: 1, statusList: [],
pageSize: 10, dateRange: [],
}, },
statusList: [ stats: {
{ totalCount: 0,
label: "全部订单", totalMoney: 0,
value: "0", completeRate: 0,
}, agentCommission: 0,
{
label: "待备货",
value: "1",
},
{
label: "待取货",
value: "2",
},
{
label: "待收货",
value: "3",
},
{
label: "已完成",
value: "4",
}, },
orderStatusOptions: [
{ label: "待支付", value: 0 },
{ label: "待接单", value: 1 },
{ label: "待备货", value: 2 },
{ label: "待取货", value: 3 },
{ label: "已取货(待配送)", value: 4 },
{ label: "配送中(待送达)", value: 5 },
{ label: "已配送(待收货)", value: 6 },
{ label: "完成", value: 8 },
{ label: "未支付订单取消", value: -1 },
{ label: "用户申请退款中", value: -2 },
{ label: "用户申请已退款", value: -3 },
{ label: "商家取消订单", value: -4 },
{ label: "平台取消订单", value: -5 },
], ],
tableData: [], tableData: [],
pagination: {
pageNumber: 1,
pageSize: 10,
total: 0, total: 0,
},
loading: false,
expandedRows: [],
}; };
}, },
created() { created() {
this.formInline = { this.fetchData();
group: "0", this.fetchOverview();
// marketId: this.marketId,
shopId: this.shopId,
agentId: this.agentId
};
this.getList();
}, },
methods: { methods: {
getList() { getCommonParams() {
// const params = {
this.$api.mer_admin receiverName: this.searchForm.receiverName || null,
.shopOrderPage({ unitOrderNo: this.searchForm.unitOrderNo || null,
...this.formInline, statusList: this.searchForm.statusList.length ? this.searchForm.statusList.join(',') : null,
}) startTime: null,
.then((res) => { endTime: null,
console.log(res); };
if (this.searchForm.dateRange && this.searchForm.dateRange.length === 2) {
params.startTime = this.searchForm.dateRange[0];
params.endTime = this.searchForm.dateRange[1];
}
return params;
},
fetchData() {
this.loading = true;
const params = {
...this.getCommonParams(),
pageNumber: this.pagination.pageNumber,
pageSize: this.pagination.pageSize,
};
mer_admin.orderV2Page(params).then(res => {
if (res.data && res.data.data) {
this.tableData = res.data.data.data; this.tableData = res.data.data.data;
this.total = Number(res.data.data.total); this.pagination.total = parseInt(res.data.data.total) || 0;
} else {
this.tableData = [];
this.pagination.total = 0;
}
}).catch(err => {
console.error("Error fetching order data:", err);
this.tableData = [];
this.pagination.total = 0;
}).finally(() => {
this.loading = false;
}); });
}, },
Reset() { fetchOverview() {
this.formInline = { const params = this.getCommonParams();
group: "0", mer_admin.orderV2Overview(params).then(res => {
shopId: this.shopId, if (res.data && res.data.data) {
agentId: this.agentId this.stats = res.data.data;
} else {
this.stats = {
totalCount: 0,
totalMoney: 0,
completeRate: 0,
agentCommission: 0,
}; };
this.getList(); }
}).catch(err => {
console.error("Error fetching overview data:", err);
});
}, },
handleClick(e) { handleSearch() {
this.advanceSellStatus = e.name; this.pagination.pageNumber = 1;
this.getList(); this.fetchData();
this.fetchOverview();
}, },
view(row) { handleReset() {
this.$refs.viewDetails.toggle(row).update(); this.$refs.searchForm.resetFields();
this.searchForm.dateRange = [];
this.handleSearch();
}, },
handleSizeChange(val) { handleSizeChange(val) {
this.formInline.pageSize = val; this.pagination.pageSize = val;
this.getList(); this.fetchData();
}, },
handleCurrentChange(val) { handleCurrentChange(val) {
this.formInline.pageNumber = val; this.pagination.pageNumber = val;
this.getList(); this.fetchData();
}, },
getStatusText(status) {
if (status === undefined || status === null) {
return "未知状态";
}
const statusOption = this.orderStatusOptions.find(opt => opt.value === status);
return statusOption ? statusOption.label : "未知状态";
}, },
computed: { getStatusTagType(status) {
...mapState("userData", [ switch (status) {
"isMerchant", case 0: return 'warning'; //
"marketList", case 1:
"storeList", case 2:
"marketId", case 3:
"shopId", case 4:
"agentId" case 5:
]), case 6:
return 'info'; //
case 8: return 'success'; //
case -1:
case -2:
case -3:
case -4:
case -5:
return 'danger'; // 退
default: return 'primary';
}
},
viewDetails(row) {
//
console.log("View details for:", row.unitOrderNo);
// this.$router.push({ name: 'OrderDetail', params: { id: row.unitOrderNo } });
},
handleExpandChange(row, expandedRows) {
this.expandedRows = expandedRows.map(item => item.unitOrderNo);
},
getShopStatusText(status) {
const shopStatusMap = {
0: '待备货',
1: '备货完成 待取货',
2: '已取货(待配送)',
3: '配送中',
4: '配送完成(待收货)',
5: '待评价',
6: '已完成'
};
return shopStatusMap[status] || '未知状态';
},
getShopStatusType(status) {
switch (status) {
case 0: //
case 1: //
return 'warning';
case 2: //
case 3: //
case 4: // ()
return 'info';
case 5: //
return 'primary';
case 6: //
return 'success';
default:
return 'danger';
}
}
}, },
}; };
</script> </script>
<style lang="scss" scoped></style> <style scoped>
.page-container {
}
.search-card {
margin-bottom: 15px;
}
.stats-card {
margin-bottom: 15px;
}
.stat-item {
text-align: center;
background-color: #f5f5f5;
padding: 15px;
border-radius: 4px;
}
.stat-label {
font-size: 14px;
color: #606266;
margin-bottom: 5px;
}
.stat-value {
font-size: 20px;
font-weight: bold;
color: #409EFF;
}
.search-form .el-form-item {
margin-bottom: 10px;
}
.search-buttons {
text-align: left;
}
.pagination-container {
margin-top: 20px;
text-align: right;
}
.expand-content {
padding: 10px;
}
.shop-order {
margin-bottom: 15px;
}
.shop-order h4 {
margin: 0 0 10px 0;
font-size: 14px;
font-weight: bold;
}
</style>
<style>
.search-form .el-form-item__label {
padding-bottom: 0px !important;
font-size: 12px;
line-height: 20px;
}
</style>