【类 型】：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('refund_status', orderSerch.refund_status)
|
||||
params.append('search', orderSerch.search)
|
||||
// 发送退款请求
|
||||
// 发送查询订单列表请求
|
||||
const res = await api.post('getOrderList', params, 'Admin')
|
||||
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: 退款函数
|
||||
* @param {*} orderSn 订单号
|
||||
|
||||
@ -1,306 +1,126 @@
|
||||
<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>
|
||||
<!-- 订单梗概 -->
|
||||
<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>
|
||||
</el-descriptions>
|
||||
</el-col>
|
||||
{{ 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>
|
||||
<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>
|
||||
</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 没有为添加页面
|
||||
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 {}
|
||||
}
|
||||
orderDetails: {}// 订单详情
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
/**
|
||||
* @description: 订单状态转成文字形式
|
||||
* @param {*} val 订单状态值
|
||||
* @description: 获取订单详情
|
||||
*/
|
||||
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 = '商家予退'
|
||||
async getOrderDetails (orderId) {
|
||||
const res = await getOrderDetails(orderId)
|
||||
if (res.data.status === 1) {
|
||||
this.orderDetails = res.data.orderDetails
|
||||
console.log(this.orderDetails)
|
||||
} else {
|
||||
this.$message.error('获取订单详情失败')
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
orderDetails (val) {
|
||||
this.statusToStr(val)
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
created () {
|
||||
if (Object.keys(this.orderDetails).length > 0) {
|
||||
this.statusToStr(this.orderDetails)
|
||||
}
|
||||
console.log(this.orderList)
|
||||
this.getOrderDetails(this.orderId)
|
||||
},
|
||||
filters: {
|
||||
parseTime
|
||||
|
||||
Loading…
Reference in New Issue
Block a user