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.
512 lines
14 KiB
512 lines
14 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-input v-model="filterForm.goodsName" placeholder="请输入商品名称"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="供应商名称">
|
|
<el-input v-model="filterForm.merchantName" 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>
|
|
<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 filteredOrders" :key="order.id">
|
|
<!-- 订单头部 - 包含商家信息 -->
|
|
<div class="order-header flex-between">
|
|
<div style="display: flex;">
|
|
<div >订单号: {{ order.orderNo }}</div>
|
|
<div style="padding-left: 60px;">下单时间：{{ order.createTime }}</div>
|
|
</div>
|
|
<div class="product-status">
|
|
<!-- <el-tag :type="getStatusTagType(order.status)" size="small">{{ getStatusText(order.status) }}</el-tag> -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 订单商品列表 -->
|
|
<div class="order-products">
|
|
<div class="product-item" v-for="product in order.products" :key="product.id">
|
|
<img :src="product.image" class="product-image" :alt="product.name">
|
|
<div class="product-details">
|
|
<div class="product-name">{{ product.name }}</div>
|
|
<div class="product-spec">{{ product.spec }}</div>
|
|
</div>
|
|
<div class="product-price">¥{{ product.price.toFixed(2) }}</div>
|
|
<div class="product-quantity">x{{ product.quantity }}</div>
|
|
<div class="product-total">¥{{ (product.price * product.quantity).toFixed(2) }}</div>
|
|
<!-- <div class="product-status">
|
|
<el-tag :type="getStatusTagType(product.status)" size="small">{{ getStatusText(product.status) }}</el-tag>
|
|
</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.totalAmount.toFixed(2) }}</strong> (含运费 ¥{{ order.freight.toFixed(2) }})
|
|
</div>
|
|
<!-- <div class="order-tips">
|
|
{{ order.products.length }}件商品
|
|
</div> -->
|
|
</div>
|
|
<div class="order-actions">
|
|
<el-button type="text" size="mini" @click="gotoReview(order.id)">去评价</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<el-empty description="暂无订单" v-if="filteredOrders.length<=0"></el-empty>
|
|
|
|
<!-- 分页 -->
|
|
<div style="text-align: right; margin-top: 20px;">
|
|
<el-pagination
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
:current-page="currentPage"
|
|
:page-sizes="[5, 10, 20]"
|
|
:page-size="pageSize"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="filteredOrders.length"
|
|
></el-pagination>
|
|
</div>
|
|
</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>
|
|
|
|
|
|
|
|
|