chenkainan
2 months ago
9 changed files with 1680 additions and 13 deletions
@ -0,0 +1,512 @@ |
|||
<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> |
|||
|
|||
|
|||
|
|||
@ -0,0 +1,495 @@ |
|||
<template> |
|||
<div class="bg"> |
|||
<div class="notice-bar" > |
|||
<div class="notice-bar__content"> |
|||
<div>说明：</div> |
|||
<div>1.订单提交成功，系统将根据订单内容自动为您创建交易合同。</div> |
|||
<div>2.您可直接“下载合同模板”，线下邮寄盖章使用。</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<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.orderNo" 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.orderNo" placeholder="请输入订单编号"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="商品名称"> |
|||
<el-input v-model="filterForm.orderNo" placeholder="请输入订单编号"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="合同金额"> |
|||
<el-input-number v-model="filterForm.min"></el-input-number> |
|||
至 |
|||
<el-input-number v-model="filterForm.max"></el-input-number> |
|||
</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="createTime" label="下单时间" width="200"></el-table-column> |
|||
<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="totalAmount" label="合同号" width="120"></el-table-column> |
|||
<el-table-column prop="orderNo" label="合同金额" min-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; |
|||
|
|||
::v-deep .el-input-number__decrease{ |
|||
display: none; |
|||
} |
|||
::v-deep .el-input-number__increase{ |
|||
display: none; |
|||
} |
|||
::v-deep .el-input-number .el-input__inner{ |
|||
padding-left: 10px; |
|||
padding-right: 10px; |
|||
} |
|||
} |
|||
|
|||
|
|||
/* 订单卡片样式 */ |
|||
.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; |
|||
} |
|||
|
|||
/* 通知栏样式 */ |
|||
.notice-bar { |
|||
background-color: #fffbe6; |
|||
border: 1px solid #ffe58f; |
|||
padding: 12px 16px; |
|||
border-radius: 4px; |
|||
margin-bottom: 20px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
color: #fa8c16; |
|||
font-size: 14px; |
|||
line-height: 1.5; |
|||
} |
|||
|
|||
</style> |
|||
|
|||
|
|||
|
|||
@ -0,0 +1,157 @@ |
|||
<template> |
|||
<div class="notification-page"> |
|||
<!-- 全部已读按钮 --> |
|||
<el-button type="text" @click="markAllAsRead" class="mark-all-read">全部已读</el-button> |
|||
|
|||
<!-- 通知列表 --> |
|||
<el-card v-for="(item, index) in currentPageNotifications" :key="index" class="notification-card" :class="{ 'read': item.isRead }"> |
|||
<div class="notification-header"> |
|||
<span class="dot" v-if="!item.isRead">●</span> |
|||
<span class="title">{{ item.title }}</span> |
|||
<el-button type="text" @click="toggleExpand(item)" class="expand-btn"> |
|||
{{ item.isExpanded? '收起 ^' : '展开 ∨' }} |
|||
</el-button> |
|||
<span class="date">{{ item.date }}</span> |
|||
</div> |
|||
<div class="notification-content" v-show="item.isExpanded"> |
|||
{{ item.content }} |
|||
</div> |
|||
</el-card> |
|||
|
|||
<!-- 分页组件 --> |
|||
<el-pagination |
|||
@current-change="handleCurrentChange" |
|||
:current-page="currentPage" |
|||
:page-size="pageSize" |
|||
layout="prev, pager, next" |
|||
:total="notifications.length" |
|||
class="pagination" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'NotificationPage', |
|||
data() { |
|||
return { |
|||
currentPage: 2, // 当前页码 |
|||
pageSize: 3, // 每页条数 |
|||
notifications: [ |
|||
{ |
|||
title: '您的订单（编号：0022929922992）包含的产品：xxx 已成功出票', |
|||
date: '2025-08-18', |
|||
content: '', |
|||
isRead: false, |
|||
isExpanded: false |
|||
}, |
|||
{ |
|||
title: '重大通知：因台风天气影响，部分商家发货会延迟，请见谅！', |
|||
date: '2025-08-18', |
|||
content: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\nxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', |
|||
isRead: false, |
|||
isExpanded: true |
|||
}, |
|||
{ |
|||
title: '您的订单（编号：0022929922992）包含的产品：xxx 已成功出票', |
|||
date: '2025-08-18', |
|||
content: '', |
|||
isRead: true, |
|||
isExpanded: false |
|||
}, |
|||
// 更多模拟数据... |
|||
{ |
|||
title: '新功能上线通知：新增会员专属优惠活动', |
|||
date: '2025-08-17', |
|||
content: '尊敬的用户，我们新增了会员专属优惠活动，快来查看吧！', |
|||
isRead: true, |
|||
isExpanded: false |
|||
}, |
|||
{ |
|||
title: '您的账户安全提示：请及时修改密码', |
|||
date: '2025-08-17', |
|||
content: '为保障您的账户安全，建议您定期修改密码，避免使用简单密码。', |
|||
isRead: true, |
|||
isExpanded: false |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
computed: { |
|||
// 当前页通知数据 |
|||
currentPageNotifications() { |
|||
const start = (this.currentPage - 1) * this.pageSize; |
|||
const end = start + this.pageSize; |
|||
return this.notifications.slice(start, end); |
|||
} |
|||
}, |
|||
methods: { |
|||
// 切换展开/收起 |
|||
toggleExpand(item) { |
|||
item.isExpanded =!item.isExpanded; |
|||
}, |
|||
// 全部已读 |
|||
markAllAsRead() { |
|||
this.notifications.forEach(item => { |
|||
item.isRead = true; |
|||
}); |
|||
}, |
|||
// 页码改变 |
|||
handleCurrentChange(val) { |
|||
this.currentPage = val; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.notification-page { |
|||
width: 800px; |
|||
margin: 30px auto; |
|||
} |
|||
.mark-all-read { |
|||
text-align: right; |
|||
display: block; |
|||
margin-bottom: 10px; |
|||
} |
|||
.notification-card { |
|||
margin-bottom: 10px; |
|||
border: 1px solid #ebeef5; |
|||
border-radius: 4px; |
|||
overflow: hidden; |
|||
} |
|||
.notification-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 10px; |
|||
cursor: pointer; |
|||
} |
|||
.dot { |
|||
color: red; |
|||
margin-right: 8px; |
|||
} |
|||
.title { |
|||
flex: 1; |
|||
} |
|||
.expand-btn { |
|||
padding: 0; |
|||
margin: 0 10px; |
|||
} |
|||
.date { |
|||
color: #909399; |
|||
font-size: 13px; |
|||
} |
|||
.notification-content { |
|||
padding: 0 10px 10px 10px; |
|||
color: #606266; |
|||
white-space: pre-line; |
|||
} |
|||
.read { |
|||
opacity: 0.6; |
|||
} |
|||
.pagination { |
|||
margin-top: 20px; |
|||
text-align: right; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,468 @@ |
|||
<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> |
|||
|
|||
|
|||
|
|||
Loading…
Reference in new issue