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.
368 lines
9.4 KiB
368 lines
9.4 KiB
<template>
|
|
<div class="bg">
|
|
<!-- 订单状态时间线 -->
|
|
<div class="normal-margin-bottom">
|
|
<el-breadcrumb separator-class="el-icon-arrow-right">
|
|
<el-breadcrumb-item :to="{ path: '/User/UserCenter' }"
|
|
>个人中心</el-breadcrumb-item
|
|
>
|
|
<el-breadcrumb-item :to="{ path: '/User/OrderList' }"
|
|
>我的订单</el-breadcrumb-item
|
|
>
|
|
<el-breadcrumb-item> 订单详情</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
</div>
|
|
|
|
<div
|
|
class="common-card normal-margin-bottom"
|
|
style="padding: 20px 0; display: flex"
|
|
>
|
|
<div class="order-status">
|
|
<div class="order-no">
|
|
订单号: 209907091214560078
|
|
<el-button
|
|
style="color: #999"
|
|
type="text"
|
|
icon="el-icon-document-copy"
|
|
></el-button>
|
|
</div>
|
|
<div class="status-title">
|
|
<i class="el-icon-time" style="color: #ff9800; font-size: 32px"></i>
|
|
<span style="height: 24px; line-height: 24px; padding-left: 5px"
|
|
>订单状态: {{ info.state_text }}</span
|
|
>
|
|
</div>
|
|
|
|
<el-button
|
|
type="primary"
|
|
size="medium"
|
|
v-if="info.state != 'WAIT_COMMENT'"
|
|
>在线付款</el-button
|
|
>
|
|
<!-- <el-button type="text" size="small" style="padding: 0"
|
|
>打印订单</el-button
|
|
> -->
|
|
</div>
|
|
<div class="order-step">
|
|
<el-steps :active="activities.length" align-center style="width: 100%">
|
|
<el-step v-for="(item, i) in activities" :key="i">
|
|
<div class="process-title" slot="description">
|
|
{{ item.remark }}
|
|
</div>
|
|
<div slot="icon">
|
|
<span v-if="i >= 2">{{ i + 1 }}</span>
|
|
<i v-else style="color: #fff" class="el-icon-check"></i>
|
|
</div>
|
|
<div class="process-description" slot="description">
|
|
{{ item.create_time }}
|
|
</div>
|
|
</el-step>
|
|
</el-steps>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 订单信息卡片 -->
|
|
<div
|
|
class="common-card normal-margin-bottom order-info-card"
|
|
style="display: flex; padding: 20px 0"
|
|
>
|
|
<el-descriptions title="订单信息" :column="1">
|
|
<el-descriptions-item label="订单号">{{
|
|
info.order_id
|
|
}}</el-descriptions-item>
|
|
<el-descriptions-item label="订单状态">{{
|
|
info.state_text
|
|
}}</el-descriptions-item>
|
|
<el-descriptions-item label="下单时间">{{
|
|
info.create_time
|
|
}}</el-descriptions-item>
|
|
</el-descriptions>
|
|
<el-descriptions title="配送信息" :column="1">
|
|
<el-descriptions-item label="收货人">{{
|
|
info.order_product_list[0].consignee_info.name
|
|
}}</el-descriptions-item>
|
|
<el-descriptions-item label="地址">{{
|
|
info.order_product_list[0].consignee_info.address
|
|
}}</el-descriptions-item>
|
|
<el-descriptions-item label="手机号码">{{
|
|
info.order_product_list[0].consignee_info.tel
|
|
}}</el-descriptions-item>
|
|
<!-- <el-descriptions-item label="配送方式">{{
|
|
deliveryInfo.deliveryMethod
|
|
}}</el-descriptions-item>
|
|
<el-descriptions-item label="期望送达时间">{{
|
|
deliveryInfo.expectedDeliveryTime
|
|
}}</el-descriptions-item> -->
|
|
</el-descriptions>
|
|
<el-descriptions title="支付信息" :column="1" style="border: none" v-if="info.pay_method_text">
|
|
<el-descriptions-item label="支付方式">{{
|
|
info.pay_method_text
|
|
}}</el-descriptions-item>
|
|
<!-- <el-descriptions-item label="支付状态">{{
|
|
paymentInfo.paymentStatus
|
|
}}</el-descriptions-item> -->
|
|
<el-descriptions-item label="支付时间">{{
|
|
info.pay_at
|
|
}}</el-descriptions-item>
|
|
</el-descriptions>
|
|
</div>
|
|
|
|
<!-- 商品列表 -->
|
|
|
|
<el-table :data="productList" style="width: 100%">
|
|
<el-table-column prop="name" label="商品名称" align="center">
|
|
<template slot-scope="{ row }">
|
|
<div style="display: flex; align-items: center">
|
|
<img
|
|
:src="row.product_img"
|
|
class="product-image"
|
|
:alt="row.product_title"
|
|
/>
|
|
<div>{{ row.product_title }}</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="sku_name"
|
|
label="规格"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="product_price"
|
|
label="单价(元)"
|
|
align="center"
|
|
width="200"
|
|
>
|
|
<template slot-scope="{ row }">
|
|
<div>{{ row.product_price / 100 }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="product_num"
|
|
label="数量"
|
|
align="center"
|
|
width="100"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="subtotal"
|
|
label="小计(元)"
|
|
align="center"
|
|
width="200"
|
|
>
|
|
<template slot-scope="{ row }">
|
|
<div style="color: #ff1111">￥{{ row.paid_money / 100 }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<!-- 订单总价 -->
|
|
<div class="common-card normal-margin-bottom total-card">
|
|
<el-descriptions :column="1">
|
|
<el-descriptions-item label="商品总价"
|
|
>￥{{ info.total_money / 100 }}</el-descriptions-item
|
|
>
|
|
<el-descriptions-item label="运费"
|
|
>￥{{ info.total_post_fee / 100 }}</el-descriptions-item
|
|
>
|
|
<el-descriptions-item label="实付款">
|
|
<span style="font-size: 16px; font-weight: bold; color: #ff1111"
|
|
>￥{{ info.paid_money / 100 }}</span
|
|
>
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "OrderDetail",
|
|
data() {
|
|
return {
|
|
info: {},
|
|
activities: [],
|
|
orderInfo: {
|
|
orderNumber: "20250801123456",
|
|
status: "已完成",
|
|
orderTime: "2025-08-01 15:30:00",
|
|
},
|
|
deliveryInfo: {
|
|
receiver: "张三",
|
|
address: "北京市海淀区xxx街道xxx小区",
|
|
phone: "13800138000",
|
|
deliveryMethod: "快递",
|
|
expectedDeliveryTime: "2025-08-02",
|
|
},
|
|
paymentInfo: {
|
|
paymentMethod: "支付宝",
|
|
paymentStatus: "已支付",
|
|
paymentTime: "2025-08-01 15:35:00",
|
|
},
|
|
productList: [],
|
|
totalPrice: {
|
|
productTotal: 500,
|
|
shippingFee: 0,
|
|
actualPayment: 500,
|
|
},
|
|
};
|
|
},
|
|
computed: {},
|
|
mounted() {
|
|
this.getDetail();
|
|
},
|
|
methods: {
|
|
getDetail() {
|
|
// 订单详情
|
|
this.post(
|
|
{
|
|
order_id: this.$route.query.id,
|
|
},
|
|
"/api/order/query"
|
|
).then((res) => {
|
|
this.info = res.data;
|
|
this.productList = this.info.order_product_list;
|
|
this.info.order_product_list.forEach((item) => {
|
|
if (item.product_model === "post" && item.consignee_info)
|
|
item.consignee_info = JSON.parse(item.consignee_info);
|
|
});
|
|
});
|
|
|
|
// 订单流程记录
|
|
this.post(
|
|
{
|
|
order_id: this.$route.query.id,
|
|
},
|
|
"/api/order/refund_detail"
|
|
).then((res) => {
|
|
this.activities = res.data.list;
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.bg {
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: 14px;
|
|
}
|
|
.common-card {
|
|
width: 100%;
|
|
background-color: white;
|
|
padding: 20px;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
}
|
|
.order-status {
|
|
border-right: 1px solid #eee;
|
|
width: 350px;
|
|
height: 220px;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
.order-no {
|
|
color: #999;
|
|
.el-button {
|
|
width: fit-content;
|
|
margin: 0;
|
|
display: inline-block;
|
|
padding: 0;
|
|
}
|
|
}
|
|
.status-title {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.status-title i {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.el-button {
|
|
width: 120px;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
.order-step {
|
|
flex: 1;
|
|
width: 1px;
|
|
padding: 0 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
::v-deep .el-step__icon.is-text {
|
|
border: none;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
background: #c0c4cc;
|
|
color: white;
|
|
}
|
|
::v-deep .el-step__line {
|
|
top: 13px;
|
|
}
|
|
::v-deep .el-step__line-inner {
|
|
border-color: #c0c4cc;
|
|
}
|
|
.process-title {
|
|
color: #666;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
margin-top: 20px;
|
|
}
|
|
.process-description {
|
|
color: #666;
|
|
font-size: 12px;
|
|
// margin-top: 45px;
|
|
}
|
|
::v-deep .is-finish .el-step__icon {
|
|
background: #67c23a;
|
|
}
|
|
}
|
|
|
|
.order-info-card {
|
|
display: flex;
|
|
::v-deep .el-descriptions {
|
|
flex: 1;
|
|
flex-shrink: 0;
|
|
border-right: 1px solid rgba(153, 153, 153, 0.1);
|
|
padding: 0 20px;
|
|
.el-descriptions-item__label {
|
|
width: 90px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.product-image {
|
|
width: 80px;
|
|
height: 80px;
|
|
object-fit: cover;
|
|
margin-right: 15px;
|
|
border-radius: 4px;
|
|
}
|
|
.total-card {
|
|
margin-top: 20px;
|
|
background: #fafafa;
|
|
box-shadow: none;
|
|
::v-deep .el-descriptions__body {
|
|
background: none;
|
|
text-align: right;
|
|
|
|
.el-descriptions-item__label {
|
|
width: 90%;
|
|
text-align: right;
|
|
justify-content: flex-end;
|
|
}
|
|
.el-descriptions-item__content {
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
|
|
|
|
|