food/src/views/layout/components/main/order/show.vue
tk 205ab45488 【类 型】:feat 订单详情页
【原  因】:
【过  程】:
【影  响】:
2024-09-26 17:43:36 +08:00

132 lines
4.1 KiB
Vue

<template>
<div class="app-container">
<el-row class="m-t-0">
<!-- 订单梗概 -->
<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>
<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 没有为添加页面
orderDetails: {}// 订单详情
}
},
computed: {},
methods: {
/**
* @description: 获取订单详情
*/
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: {},
created () {
this.getOrderDetails(this.orderId)
},
filters: {
parseTime
}
}
</script>
<style lang="scss" scoped></style>