【类 型】：feat 订单详情页面 完成
【原 因】： 【过 程】： 【影 响】：
This commit is contained in:
tk
parent
205ab45488
commit
f13072f4ce
@ -1,92 +1,239 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<el-row class="m-t-0">
|
<el-row class="m-t-0">
|
||||||
<!-- 订单梗概 -->
|
<el-col :span="24">
|
||||||
<el-descriptions class="margin-top m-b-20" title="订单梗概" :column="3" border>
|
<!-- 订单梗概 -->
|
||||||
<el-descriptions-item>
|
<el-descriptions class="margin-top m-b-20" title="订单梗概" :column="3" border>
|
||||||
<template slot="label">
|
<el-descriptions-item>
|
||||||
<i class="iconfont icon-dingdanshoukuan"></i>
|
<template slot="label">
|
||||||
状态
|
<i class="iconfont icon-dingdanshoukuan"></i>
|
||||||
|
状态
|
||||||
|
</template>
|
||||||
|
{{ orderDetails.main_status }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item>
|
||||||
|
<template slot="label">
|
||||||
|
<i class="iconfont icon-dingdanguanli"></i>
|
||||||
|
订单编号
|
||||||
|
</template>
|
||||||
|
{{ orderDetails.order_sn }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item>
|
||||||
|
<template slot="label">
|
||||||
|
<i class="iconfont icon-shichang"></i>
|
||||||
|
下单时间
|
||||||
|
</template>
|
||||||
|
{{ orderDetails.order_time | parseTime('{y}-{m}-{d} {h}:{i}') }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<template v-if="orderDetails.refund_status !== '未申请'">
|
||||||
|
<el-descriptions-item :span="1">
|
||||||
|
<template slot="label">
|
||||||
|
<i class="iconfont icon-tuikuan"></i>
|
||||||
|
退款状态
|
||||||
|
</template>
|
||||||
|
{{ orderDetails.refund_status }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item
|
||||||
|
v-if="orderDetails.refund_status === '申请中' || orderDetails.refund_status === '已同意' || orderDetails.refund_status === '拒绝退'">
|
||||||
|
<template slot="label">
|
||||||
|
<i class="iconfont icon-qiandai"></i>
|
||||||
|
客户申请金额
|
||||||
|
</template>
|
||||||
|
{{ orderDetails.apply_price }}元
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item v-if="orderDetails.refund_status === '已同意' || orderDetails.refund_status === '主动退'">
|
||||||
|
<template slot="label">
|
||||||
|
<i class="iconfont icon-qiandai"></i>
|
||||||
|
退款金额
|
||||||
|
</template>
|
||||||
|
{{ orderDetails.refund_price }}元
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item :span="3">
|
||||||
|
<template slot="label" v-if="orderDetails.refund_remark !== ''">
|
||||||
|
<i class="el-icon-user"></i>
|
||||||
|
退款原因
|
||||||
|
</template>
|
||||||
|
{{ orderDetails.refund_remark }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item
|
||||||
|
v-if="orderDetails.refund_status === '申请中' || orderDetails.refund_status === '已同意' || orderDetails.refund_status === '拒绝退'">
|
||||||
|
<template slot="label">
|
||||||
|
<i class="iconfont icon-shichang"></i>
|
||||||
|
退款申请时间
|
||||||
|
</template>
|
||||||
|
{{ orderDetails.refundapply_time | parseTime('{y}-{m}-{d} {h}:{i}') }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item v-if="orderDetails.refund_status === '已同意' || orderDetails.refund_status === '主动退'">
|
||||||
|
<template slot="label">
|
||||||
|
<i class="iconfont icon-shichang"></i>
|
||||||
|
退款确定时间
|
||||||
|
</template>
|
||||||
|
{{ orderDetails.refunded_time | parseTime('{y}-{m}-{d} {h}:{i}') }}
|
||||||
|
</el-descriptions-item>
|
||||||
</template>
|
</template>
|
||||||
{{ orderDetails.main_status }}
|
<el-descriptions-item>
|
||||||
</el-descriptions-item>
|
<template slot="label">
|
||||||
<el-descriptions-item>
|
<i class="iconfont icon-zhongliang"></i>
|
||||||
<template slot="label">
|
总重量
|
||||||
<i class="iconfont icon-dingdanguanli"></i>
|
</template>
|
||||||
订单编号
|
{{ orderDetails.total_weight }}克
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item>
|
||||||
|
<template slot="label">
|
||||||
|
<i class="iconfont icon-qiandai"></i>
|
||||||
|
总价格
|
||||||
|
</template>
|
||||||
|
{{ orderDetails.total_price }}元
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item>
|
||||||
|
<template slot="label">
|
||||||
|
<i class="iconfont icon-liuyan"></i>
|
||||||
|
买家留言
|
||||||
|
</template>
|
||||||
|
{{ orderDetails.remark }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item>
|
||||||
|
<template slot="label">
|
||||||
|
<i class="iconfont icon-beizhu"></i>
|
||||||
|
订单备注
|
||||||
|
</template>
|
||||||
|
{{ orderDetails.describe }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
<!-- 收货信息 -->
|
||||||
|
<el-descriptions class="margin-top m-b-20" title="收货信息" :column="3" border>
|
||||||
|
<el-descriptions-item>
|
||||||
|
<template slot="label">
|
||||||
|
<i class="iconfont icon-id"></i>
|
||||||
|
客户ID
|
||||||
|
</template>
|
||||||
|
{{ orderDetails.uid }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item>
|
||||||
|
<template slot="label">
|
||||||
|
<i class="el-icon-user"></i>
|
||||||
|
收货人称呼
|
||||||
|
</template>
|
||||||
|
{{ orderDetails.receiver }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item>
|
||||||
|
<template slot="label">
|
||||||
|
<i class="iconfont icon-gf_phoneLoudspeaker"></i>
|
||||||
|
电话
|
||||||
|
</template>
|
||||||
|
{{ orderDetails.tel }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item>
|
||||||
|
<template slot="label">
|
||||||
|
<i class="iconfont icon-jingqu"></i>
|
||||||
|
收获站点
|
||||||
|
</template>
|
||||||
|
{{ orderDetails.receive_site_name }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item>
|
||||||
|
<template slot="label">
|
||||||
|
<i class="iconfont icon-shuzishurukuang_line"></i>
|
||||||
|
取餐号
|
||||||
|
</template>
|
||||||
|
{{ orderDetails.food_sn }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
<!-- spu -->
|
||||||
|
<div class="el-descriptions__header">
|
||||||
|
<div class="el-descriptions__title">订单详情</div>
|
||||||
|
<div class="el-descriptions__extra"></div>
|
||||||
|
</div>
|
||||||
|
<el-descriptions class="margin-top m-b-20" v-for="spu, index in orderDetails.product_snapshot" :key="index"
|
||||||
|
:column="3" border>
|
||||||
|
<el-descriptions-item :span="3">
|
||||||
|
<template slot="label">
|
||||||
|
<i class="iconfont icon-chanpinliebiao-02"></i>
|
||||||
|
SPU
|
||||||
|
</template>
|
||||||
|
{{ spu.spu_name }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item>
|
||||||
|
<template slot="label">
|
||||||
|
<i class="iconfont icon-tuxiang"></i>
|
||||||
|
商品图片
|
||||||
|
</template>
|
||||||
|
<img width="60" height="60" :src="$store.state.settings.host + '/Data/UploadFiles/spu/' + spu.spu_photo" />
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item>
|
||||||
|
<template slot="label">
|
||||||
|
<i class="iconfont icon-id"></i>
|
||||||
|
商品ID
|
||||||
|
</template>
|
||||||
|
{{ spu.spu_id }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item>
|
||||||
|
<template slot="label">
|
||||||
|
<i class="iconfont icon-a-XXXbianhao"></i>
|
||||||
|
商品编号
|
||||||
|
</template>
|
||||||
|
{{ spu.spu_number }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<!-- sku List-->
|
||||||
|
<template v-for="sku in spu.sku_arr">
|
||||||
|
<el-descriptions-item :span="3">
|
||||||
|
<template slot="label">
|
||||||
|
<i class="iconfont icon-sku"></i>
|
||||||
|
SKU
|
||||||
|
</template>
|
||||||
|
{{ sku.arr_name }}：<el-tag>{{ sku.sku_name }}</el-tag>
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item>
|
||||||
|
<template slot="label">
|
||||||
|
<i class="iconfont icon-tuxiang"></i>
|
||||||
|
单品图片
|
||||||
|
</template>
|
||||||
|
<img width="60" height="60" :src="$store.state.settings.host + '/Data/UploadFiles/sku/' + sku.sku_photo" />
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item>
|
||||||
|
<template slot="label">
|
||||||
|
<i class="iconfont icon-id"></i>
|
||||||
|
单品ID
|
||||||
|
</template>
|
||||||
|
{{ sku.sku_id }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item>
|
||||||
|
<template slot="label">
|
||||||
|
<i class="iconfont icon-a-XXXbianhao"></i>
|
||||||
|
单品编号
|
||||||
|
</template>
|
||||||
|
{{ sku.sku_number }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item>
|
||||||
|
<template slot="label">
|
||||||
|
<i class="iconfont icon-yunsuankongjian"></i>
|
||||||
|
购买数量
|
||||||
|
</template>
|
||||||
|
{{ sku.sku_totol }} {{ sku.sku_unit }}
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item>
|
||||||
|
<template slot="label">
|
||||||
|
<i class="iconfont icon-zhongliang"></i>
|
||||||
|
单品重量
|
||||||
|
</template>
|
||||||
|
{{ sku.sku_weight }}克
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item>
|
||||||
|
<template slot="label">
|
||||||
|
<i class="iconfont icon-qiandai"></i>
|
||||||
|
单价
|
||||||
|
</template>
|
||||||
|
{{ sku.sku_price }}元
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item :span="3">
|
||||||
|
<template slot="label">
|
||||||
|
<i class="iconfont icon-putaway"></i>
|
||||||
|
进货渠道
|
||||||
|
</template>
|
||||||
|
{{ sku.sku_purchase_channel }}
|
||||||
|
</el-descriptions-item>
|
||||||
</template>
|
</template>
|
||||||
{{ orderDetails.order_sn }}
|
</el-descriptions>
|
||||||
</el-descriptions-item>
|
</el-col>
|
||||||
<el-descriptions-item>
|
|
||||||
<template slot="label">
|
|
||||||
<i class="iconfont icon-shichang"></i>
|
|
||||||
下单时间
|
|
||||||
</template>
|
|
||||||
{{ orderDetails.order_time | parseTime('{y}-{m}-{d} {h}:{i}') }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item :span="2" v-if="orderDetails.refund_status !== 'normal'">
|
|
||||||
<template slot="label">
|
|
||||||
<i class="iconfont icon-tuikuan"></i>
|
|
||||||
退款
|
|
||||||
</template>
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item v-if="orderDetails.back !== 'normal'">
|
|
||||||
<template slot="label">
|
|
||||||
<i class="iconfont icon-qiandai"></i>
|
|
||||||
退款金额
|
|
||||||
</template>
|
|
||||||
{{ orderDetails.refund_price }}元
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item :span="3" v-if="orderDetails.back_remark !== ''">
|
|
||||||
<template slot="label">
|
|
||||||
<i class="el-icon-user"></i>
|
|
||||||
退款原因
|
|
||||||
</template>
|
|
||||||
{{ orderDetails.back_remark }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item :span="1.5" v-if="orderDetails.back !== 'normal'">
|
|
||||||
<template slot="label">
|
|
||||||
<i class="iconfont icon-shichang"></i>
|
|
||||||
退款申请时间
|
|
||||||
</template>
|
|
||||||
{{ orderDetails.back_addtime | parseTime('{y}-{m}-{d} {h}:{i}') }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item :span="1.5" v-if="orderDetails.back !== 'normal'">
|
|
||||||
<template slot="label">
|
|
||||||
<i class="iconfont icon-shichang"></i>
|
|
||||||
退款确定时间
|
|
||||||
</template>
|
|
||||||
{{ orderDetails.back_time | parseTime('{y}-{m}-{d} {h}:{i}') }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item>
|
|
||||||
<template slot="label">
|
|
||||||
<i class="iconfont icon-zhongliang"></i>
|
|
||||||
总重量
|
|
||||||
</template>
|
|
||||||
{{ orderDetails.total_weight }}克
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item>
|
|
||||||
<template slot="label">
|
|
||||||
<i class="iconfont icon-qiandai"></i>
|
|
||||||
总价格
|
|
||||||
</template>
|
|
||||||
{{ orderDetails.total_price }}元
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item>
|
|
||||||
<template slot="label">
|
|
||||||
<i class="iconfont icon-liuyan"></i>
|
|
||||||
买家留言
|
|
||||||
</template>
|
|
||||||
{{ orderDetails.remark }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item>
|
|
||||||
<template slot="label">
|
|
||||||
<i class="iconfont icon-beizhu"></i>
|
|
||||||
订单备注
|
|
||||||
</template>
|
|
||||||
{{ orderDetails.remark }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
</el-descriptions>
|
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -112,7 +259,13 @@ export default {
|
|||||||
const res = await getOrderDetails(orderId)
|
const res = await getOrderDetails(orderId)
|
||||||
if (res.data.status === 1) {
|
if (res.data.status === 1) {
|
||||||
this.orderDetails = res.data.orderDetails
|
this.orderDetails = res.data.orderDetails
|
||||||
console.log(this.orderDetails)
|
// 反序列化 product_snapshot 字符串
|
||||||
|
try {
|
||||||
|
const productSnapshot = JSON.parse(this.orderDetails.product_snapshot)
|
||||||
|
this.orderDetails.product_snapshot = productSnapshot // 存回 this.orderDetails
|
||||||
|
} catch (error) {
|
||||||
|
this.$message.error('解析产品快照失败')
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
this.$message.error('获取订单详情失败')
|
this.$message.error('获取订单详情失败')
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user