f7a52217a0
【原 因】：根据学校要求 如站点改为地块管理 商铺改为单位 【过 程】： 【影 响】： # 类型 包含: # feat：新功能（feature） # fix：修补bug # docs：文档（documentation） # style： 格式（不影响代码运行的变动） # refactor：重构（即不是新增功能，也不是修改bug的代码变动） # test：增加测试 # chore：构建过程或辅助工具的变动
285 lines
10 KiB
Vue
285 lines
10 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<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>
|
||
<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>
|
||
<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.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>
|
||
</el-descriptions>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { parseTime } from '@/utils'
|
||
import { getOrderDetails } from '@/utils/api/table'
|
||
|
||
export default {
|
||
name: 'OrderShow',
|
||
data () {
|
||
return {
|
||
orderId: this.$route.params.id, // get参数 获取飞机id 没有为添加页面
|
||
orderDetails: {}// 订单详情
|
||
}
|
||
},
|
||
computed: {},
|
||
methods: {
|
||
/**
|
||
* @description: 获取订单详情
|
||
*/
|
||
async getOrderDetails (orderId) {
|
||
const res = await getOrderDetails(orderId)
|
||
if (res.data.status === 1) {
|
||
this.orderDetails = res.data.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 {
|
||
this.$message.error('获取订单详情失败')
|
||
}
|
||
}
|
||
},
|
||
watch: {},
|
||
created () {
|
||
this.getOrderDetails(this.orderId)
|
||
},
|
||
filters: {
|
||
parseTime
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped></style>
|