【类 型】：feat 订单详情页
【原 因】： 【过 程】： 【影 响】：
This commit is contained in:
tk
parent
22249b4ca3
commit
205ab45488
@ -89,11 +89,23 @@ export async function getOrderList (orderSerch = {}) {
|
|||||||
params.append('shipment_status', orderSerch.shipment_status)
|
params.append('shipment_status', orderSerch.shipment_status)
|
||||||
params.append('refund_status', orderSerch.refund_status)
|
params.append('refund_status', orderSerch.refund_status)
|
||||||
params.append('search', orderSerch.search)
|
params.append('search', orderSerch.search)
|
||||||
// 发送退款请求
|
// 发送查询订单列表请求
|
||||||
const res = await api.post('getOrderList', params, 'Admin')
|
const res = await api.post('getOrderList', params, 'Admin')
|
||||||
return res
|
return res
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 获取订单详情
|
||||||
|
* @param {*} order_id 订单id
|
||||||
|
*/
|
||||||
|
export async function getOrderDetails (id) {
|
||||||
|
const params = new URLSearchParams()// post对象参数 转成 字符串连接
|
||||||
|
params.append('id', id)
|
||||||
|
// 发送查询订单详情 求情
|
||||||
|
const res = await api.post('getOrderDetails', params, 'Admin')
|
||||||
|
return res
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @description: 退款函数
|
* @description: 退款函数
|
||||||
* @param {*} orderSn 订单号
|
* @param {*} orderSn 订单号
|
||||||
|
|||||||
@ -1,306 +1,126 @@
|
|||||||
<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 class="margin-top m-b-20" title="订单梗概" :column="3" border>
|
<el-descriptions-item>
|
||||||
<el-descriptions-item>
|
<template slot="label">
|
||||||
<template slot="label">
|
<i class="iconfont icon-dingdanshoukuan"></i>
|
||||||
<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>
|
</template>
|
||||||
</el-descriptions>
|
{{ orderDetails.main_status }}
|
||||||
</el-col>
|
</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>
|
||||||
|
<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>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { parseTime } from '@/utils'
|
import { parseTime } from '@/utils'
|
||||||
|
import { getOrderDetails } from '@/utils/api/table'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'OrderShow',
|
name: 'OrderShow',
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
orderId: this.$route.params.id, // get参数 获取飞机id 没有为添加页面
|
orderId: this.$route.params.id, // get参数 获取飞机id 没有为添加页面
|
||||||
orderStatus: '', // 订单状态 文字
|
orderDetails: {}// 订单详情
|
||||||
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 {}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
computed: {},
|
||||||
methods: {
|
methods: {
|
||||||
/**
|
/**
|
||||||
* @description: 订单状态转成文字形式
|
* @description: 获取订单详情
|
||||||
* @param {*} val 订单状态值
|
|
||||||
*/
|
*/
|
||||||
statusToStr (val) {
|
async getOrderDetails (orderId) {
|
||||||
if (val.status === 'canceled') {
|
const res = await getOrderDetails(orderId)
|
||||||
this.orderStatus = '订单已取消'
|
if (res.data.status === 1) {
|
||||||
} else if (val.status === 'unpaid') {
|
this.orderDetails = res.data.orderDetails
|
||||||
this.orderStatus = '未付款'
|
console.log(this.orderDetails)
|
||||||
} else if (val.status === 'pending') {
|
} else {
|
||||||
this.orderStatus = '已付款处理中'
|
this.$message.error('获取订单详情失败')
|
||||||
} 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: {
|
watch: {},
|
||||||
orderDetails (val) {
|
|
||||||
this.statusToStr(val)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created () {
|
created () {
|
||||||
if (Object.keys(this.orderDetails).length > 0) {
|
this.getOrderDetails(this.orderId)
|
||||||
this.statusToStr(this.orderDetails)
|
|
||||||
}
|
|
||||||
console.log(this.orderList)
|
|
||||||
},
|
},
|
||||||
filters: {
|
filters: {
|
||||||
parseTime
|
parseTime
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user