You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
492 lines
12 KiB
492 lines
12 KiB
<template>
|
|
<div class="bg">
|
|
<el-tabs v-model="activeTab">
|
|
<el-tab-pane label="所有订单" name="all"></el-tab-pane>
|
|
<el-tab-pane label="待付款" name="pendingPayment"></el-tab-pane>
|
|
<el-tab-pane label="待发货" name="pendingDelivery"></el-tab-pane>
|
|
<el-tab-pane label="配送中" name="delivering"></el-tab-pane>
|
|
<el-tab-pane label="待评价" name="pendingReview"></el-tab-pane>
|
|
</el-tabs>
|
|
|
|
<div class="filter-bar">
|
|
<el-form :inline="true" :model="filterForm" size="small">
|
|
<el-form-item label="商品名称">
|
|
<el-input
|
|
v-model="filterForm.keywords"
|
|
placeholder="请输入商品名称"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="订单编号">
|
|
<el-input
|
|
v-model="filterForm.order_id"
|
|
placeholder="请输入订单编号"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="下单时间">
|
|
<el-date-picker
|
|
v-model="filterForm.createTime"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
value-format="yyyy-MM-dd"
|
|
></el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item label="商家名称">
|
|
<el-input
|
|
v-model="filterForm.merchantName"
|
|
placeholder="请输入商家名称"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="交易状态">
|
|
<el-select
|
|
v-model="filterForm.tradeStatus"
|
|
placeholder="请选择"
|
|
style="width: 200px"
|
|
>
|
|
<el-option
|
|
v-for="(item, i) in typeList"
|
|
:key="i"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="完成时间">
|
|
<el-date-picker
|
|
v-model="filterForm.finishTime"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
value-format="yyyy-MM-dd"
|
|
></el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button
|
|
style="background: #6a8a27; border: none"
|
|
type="primary"
|
|
@click="search"
|
|
>搜索</el-button
|
|
>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button @click="reset">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
|
|
<div>
|
|
<div
|
|
class="order-products"
|
|
style="
|
|
padding: 0 20px;
|
|
background: #f8f9fa;
|
|
border-top: 1px solid #eee;
|
|
border-bottom: 1px solid #eee;
|
|
margin-bottom: 20px;
|
|
"
|
|
>
|
|
<div class="product-item">
|
|
<div class="product-details">
|
|
<div class="product-name">商品信息</div>
|
|
</div>
|
|
<div class="product-price">单价(元)</div>
|
|
<div class="product-quantity">数量</div>
|
|
<div class="product-total">小计(元)</div>
|
|
<!-- <div class="product-status">
|
|
<el-tag :type="getStatusTagType(product.status)" size="small">{{ getStatusText(product.status) }}</el-tag>
|
|
</div> -->
|
|
<div class="product-actions"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 订单卡片 - 按商家合并商品 -->
|
|
<div class="order-card" v-for="order in orders" :key="order.id">
|
|
<!-- 订单头部 - 包含商家信息 -->
|
|
<div class="order-header flex-between">
|
|
<div style="display: flex">
|
|
<div>订单号: {{ order.order_id }}</div>
|
|
<div style="padding-left: 60px">
|
|
下单时间：{{ order.create_time }}
|
|
</div>
|
|
</div>
|
|
<div class="product-status">
|
|
<el-tag :type="getStatusTagType(order.state)" size="small">{{
|
|
order.state_text
|
|
}}</el-tag>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 订单商品列表 -->
|
|
<div class="order-products">
|
|
<div
|
|
class="product-item"
|
|
v-for="product in order.order_product_list"
|
|
:key="product.id"
|
|
>
|
|
<img :src="product.product_img" class="product-image" />
|
|
<div class="product-details">
|
|
<div class="product-name">{{ product.product_title }}</div>
|
|
<div class="product-spec">{{ product.sku_name }}</div>
|
|
</div>
|
|
<div class="product-price">
|
|
¥{{ (product.product_price / 100).toFixed(2) }}
|
|
</div>
|
|
<div class="product-quantity">x{{ product.product_num }}</div>
|
|
<div class="product-total">
|
|
¥{{ (product.paid_money / 100).toFixed(2) }}
|
|
</div>
|
|
|
|
<div class="product-actions">
|
|
<el-button type="text" size="mini"> 商品详情</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 订单底部 - 金额和操作 -->
|
|
<div class="order-footer">
|
|
<div class="order-summary">
|
|
<div class="order-amount">
|
|
合计:
|
|
<strong>¥{{ (order.paid_money / 100).toFixed(2) }}</strong>
|
|
(含运费 ¥{{ (order.total_post_fee / 100).toFixed(2) }})
|
|
</div>
|
|
<!-- <div class="order-tips">
|
|
{{ order.products.length }}件商品
|
|
</div> -->
|
|
</div>
|
|
<div class="order-actions">
|
|
<el-button
|
|
type="text"
|
|
size="mini"
|
|
@click="viewOrderDetail(order.order_id)"
|
|
>订单详情</el-button
|
|
>
|
|
<el-button
|
|
v-if="order.status === 'pendingPayment'"
|
|
type="primary"
|
|
size="mini"
|
|
@click="payOrder(order.id)"
|
|
>去付款</el-button
|
|
>
|
|
<el-button
|
|
v-if="order.status === 'pendingDelivery'"
|
|
type="text"
|
|
size="mini"
|
|
@click="remindDelivery(order.id)"
|
|
>提醒发货</el-button
|
|
>
|
|
<el-button
|
|
v-if="order.status === 'delivering'"
|
|
type="text"
|
|
size="mini"
|
|
@click="checkLogistics(order.id)"
|
|
>查看物流</el-button
|
|
>
|
|
<el-button
|
|
v-if="order.status === 'completed' && !order.isReviewed"
|
|
type="text"
|
|
size="mini"
|
|
@click="gotoReview(order.id)"
|
|
>去评价</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<el-empty description="暂无订单" v-if="orders.length <= 0"></el-empty>
|
|
|
|
<!-- 分页 -->
|
|
<div style="text-align: right; margin-top: 20px">
|
|
<el-pagination
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
:current-page="filterForm.currentPage"
|
|
:page-sizes="[5, 10, 20]"
|
|
:page-size="filterForm.limit"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="filterForm.total"
|
|
></el-pagination>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "OrderList",
|
|
data() {
|
|
return {
|
|
activeTab: "ALL",
|
|
|
|
filterForm: {
|
|
keywords: "",
|
|
currentPage: 1,
|
|
limit: 10,
|
|
order_id: "",
|
|
createTime: null,
|
|
start_date: "",
|
|
end_date: "",
|
|
total: 1,
|
|
},
|
|
typeList: [
|
|
{ name: "全部", id: "ALL" },
|
|
{ name: "待付款", id: "WAIT_PAYMENT" },
|
|
{ name: "待发货", id: "WAIT_POST" },
|
|
{ name: "待使用/出行", id: "WAIT_USE" },
|
|
{ name: "待收货", id: "WAIT_DELIVERY" },
|
|
{ name: "退款/售后", id: "NEED_REFUND" },
|
|
],
|
|
// 订单数据 - 按商家合并商品
|
|
orders: [],
|
|
};
|
|
},
|
|
computed: {},
|
|
mounted() {
|
|
this.getList();
|
|
},
|
|
methods: {
|
|
getList() {
|
|
this.post(
|
|
{
|
|
...this.filterForm,
|
|
offset: (this.filterForm.currentPage - 1) * this.filterForm.limit
|
|
},
|
|
"/api/order/list"
|
|
).then((res) => {
|
|
this.orders = res.data.list;
|
|
this.filterForm.total = res.data.total;
|
|
});
|
|
},
|
|
|
|
// 搜索
|
|
search() {},
|
|
|
|
// 重置
|
|
reset() {},
|
|
|
|
// 分页大小改变
|
|
handleSizeChange(val) {
|
|
this.filterForm.limit = val;
|
|
this.filterForm.currentPage = 1;
|
|
this.getList();
|
|
},
|
|
|
|
// 当前页改变
|
|
handleCurrentChange(val) {
|
|
this.filterForm.currentPage = val;
|
|
this.getList();
|
|
},
|
|
|
|
// 获取状态显示文本
|
|
getStatusText(status) {
|
|
const statusMap = {
|
|
pendingPayment: "待付款",
|
|
pendingDelivery: "待发货",
|
|
delivering: "配送中",
|
|
completed: "已完成",
|
|
cancelled: "已取消",
|
|
};
|
|
return statusMap[status] || status;
|
|
},
|
|
|
|
// 获取状态标签类型
|
|
getStatusTagType(status) {
|
|
const typeMap = {
|
|
pendingPayment: "warning",
|
|
pendingDelivery: "info",
|
|
delivering: "primary",
|
|
completed: "success",
|
|
cancelled: "danger",
|
|
};
|
|
return typeMap[status] || "default";
|
|
},
|
|
|
|
// 去付款
|
|
payOrder(orderId) {
|
|
this.$message({
|
|
message: `订单 ${orderId} 去付款`,
|
|
type: "info",
|
|
});
|
|
},
|
|
|
|
// 提醒发货
|
|
remindDelivery(orderId) {
|
|
this.$message({
|
|
message: `已提醒订单 ${orderId} 发货`,
|
|
type: "success",
|
|
});
|
|
},
|
|
|
|
// 查看物流
|
|
checkLogistics(orderId) {
|
|
this.$message({
|
|
message: `查看订单 ${orderId} 物流`,
|
|
type: "info",
|
|
});
|
|
},
|
|
|
|
// 去评价
|
|
gotoReview(orderId) {
|
|
this.$message({
|
|
message: `去评价订单 ${orderId}`,
|
|
type: "info",
|
|
});
|
|
},
|
|
|
|
// 查看订单详情
|
|
viewOrderDetail(orderId) {
|
|
this.$router.push({
|
|
path: "/OrderDetail?id=" + orderId,
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.bg {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
::v-deep .el-button--text {
|
|
color: #6a8a27;
|
|
}
|
|
::v-deep .el-tabs__item.is-active {
|
|
color: #6a8a27;
|
|
}
|
|
::v-deep .el-tabs__active-bar {
|
|
background-color: #6a8a27;
|
|
}
|
|
::v-deep .el-tabs__item:hover {
|
|
color: #6a8a27;
|
|
}
|
|
}
|
|
.filter-bar {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* 订单卡片样式 */
|
|
.order-card {
|
|
border: 1px solid #eee;
|
|
border-radius: 4px;
|
|
margin-bottom: 20px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 订单头部 - 包含商家信息 */
|
|
.order-header {
|
|
background-color: #f8f9fa;
|
|
padding: 12px 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: 1px solid #eee;
|
|
color: #666;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* 订单商品列表 */
|
|
.order-products {
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
.product-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 15px 0;
|
|
border-bottom: 1px dashed #eee;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.product-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.product-image {
|
|
width: 80px;
|
|
height: 80px;
|
|
object-fit: cover;
|
|
margin-right: 15px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.product-details {
|
|
flex: 1;
|
|
}
|
|
|
|
.product-name {
|
|
color: #333;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.product-spec {
|
|
color: #999;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.product-price {
|
|
width: 120px;
|
|
text-align: center;
|
|
color: #333;
|
|
}
|
|
|
|
.product-quantity {
|
|
width: 100px;
|
|
text-align: center;
|
|
color: #666;
|
|
}
|
|
|
|
.product-total {
|
|
width: 120px;
|
|
text-align: center;
|
|
color: #333;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.product-status {
|
|
width: 150px;
|
|
text-align: center;
|
|
}
|
|
|
|
.product-actions {
|
|
width: 150px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* 订单底部 - 金额和操作 */
|
|
.order-footer {
|
|
background-color: #f8f9fa;
|
|
padding: 15px 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-top: 1px solid #eee;
|
|
}
|
|
|
|
.order-summary {
|
|
text-align: right;
|
|
}
|
|
|
|
.order-amount {
|
|
color: #333;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.order-amount strong {
|
|
color: #ff4d4f;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.order-tips {
|
|
font-size: 12px;
|
|
color: #999;
|
|
}
|
|
|
|
.order-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
</style>
|
|
|
|
|
|
|
|
|