glhcp/pc/pages/user/after_sales/apply_result.vue

106 lines
3.2 KiB
Vue
Raw Normal View History

2023-08-10 06:59:52 +00:00
<template>
<div class="apply-result-container">
<div class="result-header flex">
<img style="width: 40px;height: 40px;align-self: flex-start" src="~/static/images/pay_success.png" />
<div class="m-l-16">
<div class="apply-title" style="font-weight: 500;">提交申请</div>
<div class="muted m-t-8">申请已提交请耐心等待商家处理</div>
</div>
</div>
<div class="result-content">
<div class="result-item flex">
<div class="label">退款类型</div>
<div class="desc">{{lists.refund_type_text}}</div>
</div>
<div class="result-item flex">
<div class="label">退款原因</div>
<div class="desc">{{lists.refund_reason}}</div>
</div>
<div class="result-item flex">
<div class="label">退款金额</div>
<div class="desc">
<price-formate :price="lists.refund_price" showSubscript color="red" />
</div>
</div>
<div class="result-item flex">
<div class="label">退款说明</div>
<div class="column desc">
<div class="m-b-16">{{lists.refund_remark}}</div>
<el-image style="width: 76px;height: 76px;" :src="lists.refund_image" v-if="lists.refund_image" :preview-src-list="[lists.refund_image]" />
</div>
</div>
</div>
</div>
</template>
<script>
export default {
head() {
return {
title: this.$store.getters.headTitle,
link: [{ rel: "icon", type: "image/x-icon", href: this.$store.getters.favicon}],
};
},
layout: "user",
async asyncData({$get, query}) {
const data = {
id: query.afterSaleId
};
let lists = {}
let res = await $get("after_sale/detail", {params: data});
if(res.code == 1) {
lists = res.data;
}
return {
lists,
}
},
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.apply-result-container {
padding: 10px;
.result-header {
padding: 46px 20px;
border-bottom: 1px solid #E5E5E5;
.apply-title {
font-size: 24px;
}
}
.result-content {
padding: 24px 20px;
.result-item {
margin-bottom: 16px;
&:not(:last-of-type) {
.label {
width: 82px;
align-self: flex-start;
text-align: right;
&::before {
content: '* ';
color: red;
}
}
}
.label {
width: 82px;
align-self: flex-start;
text-align: right;
}
.desc {
margin-left: 24px;
width: 680px;
}
}
}
}
</style>