|
|
@ -1,27 +1,38 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div class="bg"> |
|
|
<div class="bg"> |
|
|
<div class="notice-bar" > |
|
|
<div class="notice-bar"> |
|
|
<div class="notice-bar__content"> |
|
|
<div class="notice-bar__content"> |
|
|
<div>说明：</div> |
|
|
<div>说明：</div> |
|
|
<div>1.订单提交成功，系统将根据订单内容自动为您创建交易合同。</div> |
|
|
<div>1.订单提交成功，系统将根据订单内容自动为您创建交易合同。</div> |
|
|
<div>2.您可直接“下载合同模板”，线下邮寄盖章使用。</div> |
|
|
<div>2.您可直接“下载合同模板”，线下邮寄盖章使用。</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="filter-bar"> |
|
|
<div class="filter-bar"> |
|
|
<el-form :inline="true" :model="filterForm" size="small"> |
|
|
<el-form :inline="true" :model="filterForm" size="small"> |
|
|
<el-form-item label="合同号"> |
|
|
<el-form-item label="合同号"> |
|
|
<el-input v-model="filterForm.orderNo" placeholder="请输入订单编号"></el-input> |
|
|
<el-input |
|
|
|
|
|
v-model="filterForm.contract_number" |
|
|
|
|
|
placeholder="请输入合同号" |
|
|
|
|
|
></el-input> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
<el-form-item label="订单编号"> |
|
|
<el-form-item label="订单编号"> |
|
|
<el-input v-model="filterForm.orderNo" placeholder="请输入订单编号"></el-input> |
|
|
<el-input |
|
|
|
|
|
v-model="filterForm.order_id" |
|
|
|
|
|
placeholder="请输入订单编号" |
|
|
|
|
|
></el-input> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
<el-form-item label="下单时间"> |
|
|
<el-form-item label="下单时间"> |
|
|
<el-date-picker v-model="filterForm.createTime" type="daterange" range-separator="至" start-placeholder="开始日期" |
|
|
<el-date-picker |
|
|
end-placeholder="结束日期" value-format="yyyy-MM-dd"></el-date-picker> |
|
|
v-model="filterForm.datetime" |
|
|
|
|
|
type="daterange" |
|
|
|
|
|
range-separator="至" |
|
|
|
|
|
start-placeholder="开始日期" |
|
|
|
|
|
end-placeholder="结束日期" |
|
|
|
|
|
value-format="yyyy-MM-dd" |
|
|
|
|
|
></el-date-picker> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
<el-form-item label="供应商名称"> |
|
|
<!-- <el-form-item label="供应商名称"> |
|
|
<el-input v-model="filterForm.orderNo" placeholder="请输入订单编号"></el-input> |
|
|
<el-input v-model="filterForm.orderNo" placeholder="请输入订单编号"></el-input> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
<el-form-item label="商品名称"> |
|
|
<el-form-item label="商品名称"> |
|
|
@ -31,10 +42,15 @@ |
|
|
<el-input-number v-model="filterForm.min"></el-input-number> |
|
|
<el-input-number v-model="filterForm.min"></el-input-number> |
|
|
至 |
|
|
至 |
|
|
<el-input-number v-model="filterForm.max"></el-input-number> |
|
|
<el-input-number v-model="filterForm.max"></el-input-number> |
|
|
</el-form-item> |
|
|
</el-form-item> --> |
|
|
|
|
|
|
|
|
<el-form-item> |
|
|
<el-form-item> |
|
|
<el-button style="background:#6a8a27;border: none;" type="primary" @click="search">搜索</el-button> |
|
|
<el-button |
|
|
|
|
|
style="background: #6a8a27; border: none" |
|
|
|
|
|
type="primary" |
|
|
|
|
|
@click="search" |
|
|
|
|
|
>搜索</el-button |
|
|
|
|
|
> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
<el-form-item> |
|
|
<el-form-item> |
|
|
<el-button @click="reset">重置</el-button> |
|
|
<el-button @click="reset">重置</el-button> |
|
|
@ -42,453 +58,407 @@ |
|
|
</el-form> |
|
|
</el-form> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<el-table :data="orders" border style="width: 100%;"> |
|
|
<el-table :data="orders" border style="width: 100%"> |
|
|
<el-table-column prop="createTime" label="下单时间" width="200"></el-table-column> |
|
|
<el-table-column |
|
|
<el-table-column prop="orderNo" label="订单号" min-width="120"></el-table-column> |
|
|
prop="create_time" |
|
|
<el-table-column prop="status" label="商品信息" width="120"></el-table-column> |
|
|
label="下单时间" |
|
|
<el-table-column prop="totalAmount" label="合同号" width="120"></el-table-column> |
|
|
width="160" |
|
|
<el-table-column prop="orderNo" label="合同金额" min-width="120"></el-table-column> |
|
|
></el-table-column> |
|
|
<el-table-column label="操作" width="200"> |
|
|
<el-table-column |
|
|
<template slot-scope="scope"> |
|
|
prop="order_id" |
|
|
<el-button size="mini" @click="handleEdit(scope.row)">查看</el-button> |
|
|
label="订单号" |
|
|
<el-button size="mini" type="danger" @click="handleDelete(scope.row)">下载合同模板</el-button> |
|
|
min-width="100" |
|
|
</template> |
|
|
></el-table-column> |
|
|
</el-table-column> |
|
|
<el-table-column prop="status" label="商品信息" min-width="200"> |
|
|
</el-table> |
|
|
<template slot-scope="scope"> |
|
|
<div style="text-align: right; margin-top: 20px;"> |
|
|
<div class="product-info"> |
|
|
<el-pagination |
|
|
<img |
|
|
@size-change="handleSizeChange" |
|
|
:src="util.showImg(scope.row.product_headimg)" |
|
|
@current-change="handleCurrentChange" |
|
|
class="product-img" |
|
|
:current-page="filterForm.currentPage" |
|
|
/> |
|
|
:page-sizes="[5, 10, 20]" |
|
|
<div class="product-name"> |
|
|
:page-size="filterForm.pageSize" |
|
|
{{ scope.row.product_title }} |
|
|
layout="total, sizes, prev, pager, next, jumper" |
|
|
{{ |
|
|
:total="filterForm.total" |
|
|
scope.row.child_order_num > 1 |
|
|
></el-pagination> |
|
|
? "等" + scope.row.child_order_num + "款" |
|
|
</div> |
|
|
: "" |
|
|
|
|
|
}} |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</template> |
|
|
|
|
|
</el-table-column> |
|
|
|
|
|
<el-table-column |
|
|
|
|
|
prop="contract_number" |
|
|
|
|
|
label="合同号" |
|
|
|
|
|
width="180" |
|
|
|
|
|
></el-table-column> |
|
|
|
|
|
<el-table-column |
|
|
|
|
|
prop="paid_money" |
|
|
|
|
|
label="合同金额" |
|
|
|
|
|
min-width="70" |
|
|
|
|
|
></el-table-column> |
|
|
|
|
|
<el-table-column label="操作" width="130"> |
|
|
|
|
|
<template slot-scope="scope" v-if="scope.row.contract_number"> |
|
|
|
|
|
<!-- <el-button size="mini" @click="handlePreview(scope.row.contract_url)" |
|
|
|
|
|
>查看</el-button |
|
|
|
|
|
> --> |
|
|
|
|
|
<el-button |
|
|
|
|
|
size="mini" |
|
|
|
|
|
type="danger" |
|
|
|
|
|
@click="handleDownload(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="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> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
export default { |
|
|
export default { |
|
|
name: 'OrderList', |
|
|
name: "OrderList", |
|
|
data () { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
activeTab: 'all', |
|
|
activeTab: "all", |
|
|
currentPage: 1, |
|
|
currentPage: 1, |
|
|
pageSize: 10, |
|
|
filterForm: { |
|
|
filterForm: { |
|
|
contract_number: "", |
|
|
goodsName: '', |
|
|
datetime: "", |
|
|
orderNo: '', |
|
|
order_id: "", |
|
|
createTime: '', |
|
|
limit: 10, |
|
|
merchantName: '', |
|
|
}, |
|
|
tradeStatus: '' |
|
|
orders: [], |
|
|
}, |
|
|
}; |
|
|
// 订单数据 - 按商家合并商品 |
|
|
}, |
|
|
orders: [ |
|
|
mounted() { |
|
|
{ |
|
|
this.getList(); |
|
|
id: 1, |
|
|
}, |
|
|
orderNo: '209907091214560078', |
|
|
methods: { |
|
|
createTime: '2099-07-09 10:47:49', |
|
|
// 查看合同（预览PDF） |
|
|
status: 'pendingPayment', |
|
|
handlePreview(pdfUrl) { |
|
|
totalAmount: 937, |
|
|
window.open(pdfUrl, "_blank"); |
|
|
freight: 15, |
|
|
}, |
|
|
isReviewed: false, |
|
|
|
|
|
merchant: { |
|
|
// 下载合同 |
|
|
id: 101, |
|
|
handleDownload(row) { |
|
|
name: '花艺生活馆', |
|
|
const downloadUrl = this.util.showImg(row.contract_url); |
|
|
isOfficial: true |
|
|
// 创建隐藏的下载链接并触发点击 |
|
|
}, |
|
|
const link = document.createElement("a"); |
|
|
products: [ |
|
|
link.href = downloadUrl; |
|
|
{ |
|
|
link.download = `合同${row.contract_number}.pdf`; |
|
|
id: 1001, |
|
|
link.style.display = "none"; |
|
|
name: '深情挚爱/卡罗拉玫瑰', |
|
|
document.body.appendChild(link); |
|
|
image: 'https://picsum.photos/200/200?random=1', |
|
|
link.click(); |
|
|
spec: '卡罗拉玫瑰33枝', |
|
|
document.body.removeChild(link); |
|
|
price: 349, |
|
|
|
|
|
quantity: 1, |
|
|
this.$message({ |
|
|
status: 'pendingPayment' |
|
|
message: `合同 ${row.contract_number} 开始下载`, |
|
|
}, |
|
|
type: "success", |
|
|
{ |
|
|
}); |
|
|
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: { |
|
|
// 获取合同列表 |
|
|
// 过滤后的订单列表 |
|
|
getList() { |
|
|
filteredOrders() { |
|
|
this.get( |
|
|
let result = [...this.orders]; |
|
|
{ |
|
|
|
|
|
offset: (this.currentPage - 1) * this.filterForm.limit, |
|
|
// 根据当前标签页过滤 |
|
|
...this.filterForm, |
|
|
if (this.activeTab !== 'all') { |
|
|
}, |
|
|
result = result.filter(order => order.status === this.activeTab); |
|
|
"/api/order/orderContract" |
|
|
} |
|
|
).then((res) => { |
|
|
|
|
|
this.orders = res.data; |
|
|
// 根据商品名称过滤 |
|
|
}); |
|
|
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() { |
|
|
search() { |
|
|
this.currentPage = 1; // 重置到第一页 |
|
|
this.currentPage = 1; // 重置到第一页 |
|
|
this.$message({ |
|
|
this.getList() |
|
|
message: '搜索条件已应用', |
|
|
|
|
|
type: 'info' |
|
|
|
|
|
}); |
|
|
|
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
// 重置 |
|
|
// 重置 |
|
|
reset() { |
|
|
reset() { |
|
|
this.filterForm = { |
|
|
this.filterForm = { |
|
|
goodsName: '', |
|
|
order_id: "", |
|
|
orderNo: '', |
|
|
createTime: "", |
|
|
createTime: '', |
|
|
contract_number: "", |
|
|
merchantName: '', |
|
|
}; |
|
|
tradeStatus: '' |
|
|
this.activeTab = "all"; |
|
|
}; |
|
|
this.currentPage = 1; |
|
|
this.activeTab = 'all'; |
|
|
|
|
|
this.currentPage = 1; |
|
|
|
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
// 分页大小改变 |
|
|
// 分页大小改变 |
|
|
handleSizeChange(val) { |
|
|
handleSizeChange(val) { |
|
|
this.pageSize = val; |
|
|
this.filterForm.limit = val; |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
// 当前页改变 |
|
|
// 当前页改变 |
|
|
handleCurrentChange(val) { |
|
|
handleCurrentChange(val) { |
|
|
this.currentPage = val; |
|
|
this.currentPage = val; |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
// 获取状态显示文本 |
|
|
// 获取状态显示文本 |
|
|
getStatusText(status) { |
|
|
getStatusText(status) { |
|
|
const statusMap = { |
|
|
const statusMap = { |
|
|
pendingPayment: '待付款', |
|
|
pendingPayment: "待付款", |
|
|
pendingDelivery: '待发货', |
|
|
pendingDelivery: "待发货", |
|
|
delivering: '配送中', |
|
|
delivering: "配送中", |
|
|
completed: '已完成', |
|
|
completed: "已完成", |
|
|
cancelled: '已取消' |
|
|
cancelled: "已取消", |
|
|
}; |
|
|
}; |
|
|
return statusMap[status] || status; |
|
|
return statusMap[status] || status; |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
// 获取状态标签类型 |
|
|
// 获取状态标签类型 |
|
|
getStatusTagType(status) { |
|
|
getStatusTagType(status) { |
|
|
const typeMap = { |
|
|
const typeMap = { |
|
|
pendingPayment: 'warning', |
|
|
pendingPayment: "warning", |
|
|
pendingDelivery: 'info', |
|
|
pendingDelivery: "info", |
|
|
delivering: 'primary', |
|
|
delivering: "primary", |
|
|
completed: 'success', |
|
|
completed: "success", |
|
|
cancelled: 'danger' |
|
|
cancelled: "danger", |
|
|
}; |
|
|
}; |
|
|
return typeMap[status] || 'default'; |
|
|
return typeMap[status] || "default"; |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
// 去付款 |
|
|
// 去付款 |
|
|
payOrder(orderId) { |
|
|
payOrder(orderId) { |
|
|
this.$message({ |
|
|
this.$message({ |
|
|
message: `订单 ${orderId} 去付款`, |
|
|
message: `订单 ${orderId} 去付款`, |
|
|
type: 'info' |
|
|
type: "info", |
|
|
}); |
|
|
}); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
// 提醒发货 |
|
|
// 提醒发货 |
|
|
remindDelivery(orderId) { |
|
|
remindDelivery(orderId) { |
|
|
this.$message({ |
|
|
this.$message({ |
|
|
message: `已提醒订单 ${orderId} 发货`, |
|
|
message: `已提醒订单 ${orderId} 发货`, |
|
|
type: 'success' |
|
|
type: "success", |
|
|
}); |
|
|
}); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
// 查看物流 |
|
|
// 查看物流 |
|
|
checkLogistics(orderId) { |
|
|
checkLogistics(orderId) { |
|
|
this.$message({ |
|
|
this.$message({ |
|
|
message: `查看订单 ${orderId} 物流`, |
|
|
message: `查看订单 ${orderId} 物流`, |
|
|
type: 'info' |
|
|
type: "info", |
|
|
}); |
|
|
}); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
// 去评价 |
|
|
// 去评价 |
|
|
gotoReview(orderId) { |
|
|
gotoReview(orderId) { |
|
|
this.$message({ |
|
|
this.$message({ |
|
|
message: `去评价订单 ${orderId}`, |
|
|
message: `去评价订单 ${orderId}`, |
|
|
type: 'info' |
|
|
type: "info", |
|
|
}); |
|
|
}); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
// 查看订单详情 |
|
|
// 查看订单详情 |
|
|
viewOrderDetail(orderId) { |
|
|
viewOrderDetail(orderId) { |
|
|
this.$router.push({ |
|
|
this.$router.push({ |
|
|
name: 'OrderDetail', |
|
|
name: "OrderDetail", |
|
|
}); |
|
|
}); |
|
|
} |
|
|
}, |
|
|
} |
|
|
}, |
|
|
} |
|
|
}; |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
<style lang="scss" scoped> |
|
|
.bg{ |
|
|
.bg { |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
flex-direction: column; |
|
|
|
|
|
|
|
|
::v-deep .el-button--text { |
|
|
::v-deep .el-button--text { |
|
|
color: #6a8a27; |
|
|
color: #6a8a27; |
|
|
} |
|
|
} |
|
|
::v-deep .el-tabs__item.is-active{ |
|
|
::v-deep .el-tabs__item.is-active { |
|
|
color: #6a8a27; |
|
|
color: #6a8a27; |
|
|
} |
|
|
} |
|
|
::v-deep .el-tabs__active-bar{ |
|
|
::v-deep .el-tabs__active-bar { |
|
|
background-color: #6a8a27 |
|
|
background-color: #6a8a27; |
|
|
} |
|
|
} |
|
|
::v-deep .el-tabs__item:hover{ |
|
|
::v-deep .el-tabs__item:hover { |
|
|
color: #6a8a27; |
|
|
color: #6a8a27; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
.filter-bar { |
|
|
.filter-bar { |
|
|
margin-bottom: 20px; |
|
|
margin-bottom: 20px; |
|
|
|
|
|
|
|
|
::v-deep .el-input-number__decrease{ |
|
|
::v-deep .el-input-number__decrease { |
|
|
display: none; |
|
|
display: none; |
|
|
} |
|
|
} |
|
|
::v-deep .el-input-number__increase{ |
|
|
::v-deep .el-input-number__increase { |
|
|
display: none; |
|
|
display: none; |
|
|
} |
|
|
} |
|
|
::v-deep .el-input-number .el-input__inner{ |
|
|
::v-deep .el-input-number .el-input__inner { |
|
|
padding-left: 10px; |
|
|
padding-left: 10px; |
|
|
padding-right: 10px; |
|
|
padding-right: 10px; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* 订单卡片样式 */ |
|
|
/* 订单卡片样式 */ |
|
|
.order-card { |
|
|
.order-card { |
|
|
border: 1px solid #eee; |
|
|
border: 1px solid #eee; |
|
|
border-radius: 4px; |
|
|
border-radius: 4px; |
|
|
margin-bottom: 20px; |
|
|
margin-bottom: 20px; |
|
|
overflow: hidden; |
|
|
overflow: hidden; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 订单头部 - 包含商家信息 */ |
|
|
/* 订单头部 - 包含商家信息 */ |
|
|
.order-header { |
|
|
.order-header { |
|
|
background-color: #f8f9fa; |
|
|
background-color: #f8f9fa; |
|
|
padding: 12px 20px; |
|
|
padding: 12px 20px; |
|
|
display: flex; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
border-bottom: 1px solid #eee; |
|
|
border-bottom: 1px solid #eee; |
|
|
color: #666; |
|
|
color: #666; |
|
|
font-size: 14px; |
|
|
font-size: 14px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 订单商品列表 */ |
|
|
|
|
|
.order-products { |
|
|
|
|
|
padding: 10px 20px; |
|
|
/* 订单商品列表 */ |
|
|
} |
|
|
.order-products { |
|
|
|
|
|
padding: 10px 20px; |
|
|
.product-item { |
|
|
} |
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
.product-item { |
|
|
padding: 15px 0; |
|
|
display: flex; |
|
|
border-bottom: 1px dashed #eee; |
|
|
align-items: center; |
|
|
font-size: 14px; |
|
|
padding: 15px 0; |
|
|
} |
|
|
border-bottom: 1px dashed #eee; |
|
|
|
|
|
font-size: 14px; |
|
|
.product-item:last-child { |
|
|
} |
|
|
border-bottom: none; |
|
|
|
|
|
} |
|
|
.product-item:last-child { |
|
|
|
|
|
border-bottom: none; |
|
|
.product-image { |
|
|
} |
|
|
width: 80px; |
|
|
|
|
|
height: 80px; |
|
|
.product-image { |
|
|
object-fit: cover; |
|
|
width: 80px; |
|
|
margin-right: 15px; |
|
|
height: 80px; |
|
|
border-radius: 4px; |
|
|
object-fit: cover; |
|
|
} |
|
|
margin-right: 15px; |
|
|
|
|
|
border-radius: 4px; |
|
|
.product-details { |
|
|
} |
|
|
flex: 1; |
|
|
|
|
|
} |
|
|
.product-details { |
|
|
|
|
|
flex: 1; |
|
|
.product-name { |
|
|
} |
|
|
color: #333; |
|
|
|
|
|
margin-bottom: 5px; |
|
|
.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; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.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; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.product-info { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
padding: 5px 0; |
|
|
|
|
|
|
|
|
|
|
|
.product-img { |
|
|
|
|
|
width: 50px; |
|
|
|
|
|
height: 50px; |
|
|
|
|
|
object-fit: cover; |
|
|
|
|
|
border-radius: 4px; |
|
|
|
|
|
margin-right: 10px; |
|
|
|
|
|
border: 1px solid #eee; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.product-name { |
|
|
|
|
|
color: #333; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
</style> |
|
|
</style> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
chenkainan
4 weeks ago