311 lines
10 KiB
Vue
311 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>
|
||
{{ orderStatus }}
|
||
</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.addtime | parseTime('{y}-{m}-{d} {h}:{i}') }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item :span="2" v-if="orderDetails.back !== 'normal'">
|
||
<template slot="label">
|
||
<i class="iconfont icon-tuikuan"></i>
|
||
退款
|
||
</template>
|
||
{{ orderBack }}
|
||
</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-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'
|
||
|
||
export default {
|
||
name: 'OrderShow',
|
||
data () {
|
||
return {
|
||
orderId: this.$route.params.id, // get参数 获取飞机id 没有为添加页面
|
||
orderStatus: '', // 订单状态 文字
|
||
orderBack: ''// 退款状态 文字
|
||
}
|
||
},
|
||
computed: {
|
||
/**
|
||
* @description: 订单列表
|
||
*/
|
||
orderList () {
|
||
return this.$store.state.orderList
|
||
},
|
||
/**
|
||
* @description: 订单详情
|
||
*/
|
||
orderDetails () {
|
||
if (this.orderList.length > 0) {
|
||
return this.orderList.find(order => order.id === this.orderId)
|
||
} else {
|
||
return {}
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
/**
|
||
* @description: 订单状态转成文字形式
|
||
* @param {*} val 订单状态值
|
||
*/
|
||
statusToStr (val) {
|
||
if (val.status === 'canceled') {
|
||
this.orderStatus = '订单已取消'
|
||
} else if (val.status === 'unpaid') {
|
||
this.orderStatus = '未付款'
|
||
} else if (val.status === 'pending') {
|
||
this.orderStatus = '已付款处理中'
|
||
} else if (val.status === 'processing') {
|
||
this.orderStatus = '已接单备货中'
|
||
} else if (val.status === 'shipped') {
|
||
this.orderStatus = '已发货'
|
||
} else if (val.status === 'completed') {
|
||
this.orderStatus = '已送达'
|
||
} else if (val.status === 'closed') {
|
||
this.orderStatus = '交易已完成'
|
||
}
|
||
if (val.back === 'normal') {
|
||
this.orderBack = '未申请过'
|
||
} else if (val.back === 'requested') {
|
||
this.orderBack = '申请退款'
|
||
} else if (val.back === 'refunded') {
|
||
this.orderBack = '已退款'
|
||
} else if (val.back === 'rejected') {
|
||
this.orderBack = '已拒绝退款'
|
||
} else if (val.back === 'actively') {
|
||
this.orderBack = '商家予退'
|
||
}
|
||
}
|
||
},
|
||
watch: {
|
||
orderDetails (val) {
|
||
this.statusToStr(val)
|
||
}
|
||
},
|
||
created () {
|
||
if (Object.keys(this.orderDetails).length > 0) {
|
||
this.statusToStr(this.orderDetails)
|
||
}
|
||
},
|
||
filters: {
|
||
parseTime
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped></style>
|