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.
468 lines
12 KiB
468 lines
12 KiB
<template>
|
|
<div class="bg">
|
|
<el-tabs v-model="activeTab">
|
|
<el-tab-pane label="已开票订单" name="pendingPayment"></el-tab-pane>
|
|
<el-tab-pane label="未开票订单" name="pendingDelivery"></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.orderNo" placeholder="请输入订单编号"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="交易状态">
|
|
<el-select v-model="filterForm.tradeStatus" placeholder="请选择" style="width: 200px;">
|
|
<el-option label="全部" value=""></el-option>
|
|
<el-option label="待付款" value="pendingPayment"></el-option>
|
|
<el-option label="待发货" value="pendingDelivery"></el-option>
|
|
<el-option label="配送中" value="delivering"></el-option>
|
|
<el-option label="已完成" value="completed"></el-option>
|
|
<el-option label="已取消" value="cancelled"></el-option>
|
|
</el-select>
|
|
</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>
|
|
<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>
|
|
|
|
<el-table :data="orders" border style="width: 100%;">
|
|
<el-table-column prop="orderNo" label="订单号" min-width="120"></el-table-column>
|
|
<el-table-column prop="status" label="订单状态" width="120"></el-table-column>
|
|
<el-table-column prop="createTime" label="下单时间" width="200"></el-table-column>
|
|
<el-table-column prop="totalAmount" label="发票金额" width="120"></el-table-column>
|
|
<el-table-column prop="orderNo" label="发票抬头" min-width="120"></el-table-column>
|
|
<el-table-column prop="orderNo" label="发票类型" width="120"></el-table-column>
|
|
<el-table-column prop="orderNo" label="开票状态" width="120"></el-table-column>
|
|
|
|
<el-table-column label="操作" width="200">
|
|
<template slot-scope="scope">
|
|
<el-button size="mini" @click="handleEdit(scope.row)">下载发票</el-button>
|
|
<el-button size="mini" type="danger" @click="handleDelete(scope.row)">申请发票</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<!-- 分页 -->
|
|
<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.pageSize"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="filterForm.total"
|
|
></el-pagination>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'OrderList',
|
|
data () {
|
|
return {
|
|
activeTab: 'all',
|
|
currentPage: 1,
|
|
pageSize: 10,
|
|
filterForm: {
|
|
goodsName: '',
|
|
orderNo: '',
|
|
createTime: '',
|
|
merchantName: '',
|
|
tradeStatus: ''
|
|
},
|
|
// 订单数据 - 按商家合并商品
|
|
orders: [
|
|
{
|
|
id: 1,
|
|
orderNo: '209907091214560078',
|
|
createTime: '2099-07-09 10:47:49',
|
|
status: 'pendingPayment',
|
|
totalAmount: 937,
|
|
freight: 15,
|
|
isReviewed: false,
|
|
merchant: {
|
|
id: 101,
|
|
name: '花艺生活馆',
|
|
isOfficial: true
|
|
},
|
|
products: [
|
|
{
|
|
id: 1001,
|
|
name: '深情挚爱/卡罗拉玫瑰',
|
|
image: 'https://picsum.photos/200/200?random=1',
|
|
spec: '卡罗拉玫瑰33枝',
|
|
price: 349,
|
|
quantity: 1,
|
|
status: 'pendingPayment'
|
|
},
|
|
{
|
|
id: 1002,
|
|
name: '精美包装纸',
|
|
image: 'https://picsum.photos/200/200?random=4',
|
|
spec: '粉色',
|
|
price: 38,
|
|
quantity: 2,
|
|
status: 'pendingPayment'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
id: 2,
|
|
orderNo: '209907091214560079',
|
|
createTime: '2099-07-09 10:48:49',
|
|
status: 'pendingDelivery',
|
|
totalAmount: 199,
|
|
freight: 0,
|
|
isReviewed: false,
|
|
merchant: {
|
|
id: 102,
|
|
name: '北欧家居旗舰店',
|
|
isOfficial: true
|
|
},
|
|
products: [
|
|
{
|
|
id: 2001,
|
|
name: '北欧花艺素雅仿真花',
|
|
image: 'https://picsum.photos/200/200?random=2',
|
|
spec: '白色',
|
|
price: 199,
|
|
quantity: 1,
|
|
status: 'pendingDelivery'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
id: 3,
|
|
orderNo: '209907091214560080',
|
|
createTime: '2099-07-09 10:49:49',
|
|
status: 'delivering',
|
|
totalAmount: 389,
|
|
freight: 10,
|
|
isReviewed: false,
|
|
merchant: {
|
|
id: 101,
|
|
name: '花艺生活馆',
|
|
isOfficial: true
|
|
},
|
|
products: [
|
|
{
|
|
id: 3001,
|
|
name: '香槟玫瑰+白玫瑰混搭',
|
|
image: 'https://picsum.photos/200/200?random=3',
|
|
spec: '混搭',
|
|
price: 389,
|
|
quantity: 1,
|
|
status: 'delivering'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
},
|
|
computed: {
|
|
// 过滤后的订单列表
|
|
filteredOrders() {
|
|
let result = [...this.orders];
|
|
|
|
// 根据当前标签页过滤
|
|
if (this.activeTab !== 'all') {
|
|
result = result.filter(order => order.status === this.activeTab);
|
|
}
|
|
|
|
// 根据商品名称过滤
|
|
if (this.filterForm.goodsName) {
|
|
const keyword = this.filterForm.goodsName.toLowerCase();
|
|
result = result.filter(order => {
|
|
return order.products.some(product =>
|
|
product.name.toLowerCase().includes(keyword)
|
|
);
|
|
});
|
|
}
|
|
|
|
// 根据订单编号过滤
|
|
if (this.filterForm.orderNo) {
|
|
result = result.filter(order =>
|
|
order.orderNo.includes(this.filterForm.orderNo)
|
|
);
|
|
}
|
|
|
|
// 根据商家名称过滤
|
|
if (this.filterForm.merchantName) {
|
|
const keyword = this.filterForm.merchantName.toLowerCase();
|
|
result = result.filter(order =>
|
|
order.merchant.name.toLowerCase().includes(keyword)
|
|
);
|
|
}
|
|
|
|
// 根据交易状态过滤
|
|
if (this.filterForm.tradeStatus) {
|
|
result = result.filter(order =>
|
|
order.status === this.filterForm.tradeStatus
|
|
);
|
|
}
|
|
|
|
return result;
|
|
}
|
|
},
|
|
methods: {
|
|
// 搜索
|
|
search() {
|
|
this.currentPage = 1; // 重置到第一页
|
|
this.$message({
|
|
message: '搜索条件已应用',
|
|
type: 'info'
|
|
});
|
|
},
|
|
|
|
// 重置
|
|
reset() {
|
|
this.filterForm = {
|
|
goodsName: '',
|
|
orderNo: '',
|
|
createTime: '',
|
|
merchantName: '',
|
|
tradeStatus: ''
|
|
};
|
|
this.activeTab = 'all';
|
|
this.currentPage = 1;
|
|
},
|
|
|
|
// 分页大小改变
|
|
handleSizeChange(val) {
|
|
this.pageSize = val;
|
|
},
|
|
|
|
// 当前页改变
|
|
handleCurrentChange(val) {
|
|
this.currentPage = val;
|
|
},
|
|
|
|
// 获取状态显示文本
|
|
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({
|
|
name: 'OrderDetail',
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</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>
|
|
|
|
|
|
|
|
|