218 lines
7.3 KiB
Vue
218 lines
7.3 KiB
Vue
<template>
|
||
<div class="order-detail" v-if="data">
|
||
<div class="topbar" ref="topbar">
|
||
<van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
|
||
</div>
|
||
<div class="order-detail-container" >
|
||
<div class="top">
|
||
<h1 class="status">{{data.status}}</h1>
|
||
<div class="order-panel">
|
||
<div class="order-info">
|
||
<span class="order-icon">
|
||
<van-icon name="success" />
|
||
<!-- <van-icon name="fail" />-->
|
||
</span>
|
||
<div class="order-desc">
|
||
<h3 class="text">感谢您对自在福田的信任，恭祝再结善缘。</h3>
|
||
<p class="desc">处理时间：{{data.created_at}}</p>
|
||
<p class="desc">处理单位：{{data.unit_name}}</p>
|
||
</div>
|
||
</div>
|
||
<div class="order-btns">
|
||
<button class="order-btn" @click="onCustomer">联系客服</button>
|
||
<button class="order-btn" @click="onShowCert">功德证书</button>
|
||
</div>
|
||
<div class="order-no">
|
||
<span>善缘编号：{{data.order_sn}}</span>
|
||
<button class="order-repeat" @click="onOrderAgain">再结善缘</button>
|
||
</div>
|
||
</div>
|
||
<div class="order-feedback" v-if="data.feedback_content">
|
||
<h3 class="feed-title">反馈内容</h3>
|
||
<p class="feed-content">{{data.feedback_content}}</p>
|
||
<div class="feed-picture">
|
||
<img v-for="(pic, index) in data.feedback_pictures" :key="index" :src="pic" alt="" class="feed-picture" @click="onPreview(pic, data.feedback_pictures)">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<van-popup v-model="showCert" round>
|
||
<div class="cert">
|
||
<img :src="certUrl">
|
||
<p class="tip">长按图片保存到手机</p>
|
||
</div>
|
||
</van-popup>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getOrder } from '@/api';
|
||
import { previewImage } from '@/common/wechat-web';
|
||
|
||
export default {
|
||
data(){
|
||
const { query } = this.$route;
|
||
return {
|
||
query,
|
||
data: null,
|
||
showCert: false,
|
||
}
|
||
},
|
||
mounted(){
|
||
this.getOrder();
|
||
},
|
||
|
||
computed: {
|
||
certUrl(){
|
||
return `https://wdx-temple.oss-cn-hangzhou.aliyuncs.com/uploads/merit/certificate/${this.data.id}.jpg`
|
||
}
|
||
},
|
||
methods: {
|
||
onPreview(picture, pictureArr){
|
||
previewImage(picture, pictureArr)
|
||
},
|
||
async getOrder(){
|
||
const res = await getOrder(this.query.id);
|
||
this.data = res;
|
||
this.wechatReady((wx) => {
|
||
this.shareToWechat(wx, res.data.shareConfig)
|
||
})
|
||
},
|
||
onOrderAgain(){
|
||
this.onPushToGoodsDetail(this.data.goods_type, this.data.goods_id, this.data.temple_id, this.data.spec_ids)
|
||
},
|
||
onCustomer(){
|
||
this.$router.push({ name: 'user-customer'})
|
||
},
|
||
onShowCert(){
|
||
this.showCert = true;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.order-detail{
|
||
font-size: .35rem;
|
||
min-height: 100vh;
|
||
background: #f9f9f9;
|
||
.cert{
|
||
padding: .3rem;
|
||
border-radius: .1rem;
|
||
img{
|
||
width: 8rem;
|
||
}
|
||
.tip{
|
||
font-size: .4rem;
|
||
padding: .4rem 0;
|
||
text-align: center;
|
||
}
|
||
}
|
||
.order-detail-container{
|
||
padding: 0 .3rem;
|
||
.top{
|
||
.status{
|
||
font-size: .5rem;
|
||
padding: .3rem 0;
|
||
padding-top: .6rem;
|
||
text-indent: .4rem;
|
||
}
|
||
.order-panel{
|
||
background: white;
|
||
border-radius: .1rem;
|
||
padding: .4rem;
|
||
box-shadow: 0 0 .3rem rgba(0,0,0,0.1);
|
||
.order-info{
|
||
display: flex;
|
||
padding-bottom: .3rem;
|
||
.order-icon{
|
||
width: 1rem;
|
||
height: 1rem;
|
||
display: flex;
|
||
background: forestgreen;
|
||
color: white;
|
||
border-radius: 1rem;
|
||
font-size: .6rem;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: .3rem;
|
||
}
|
||
.order-desc{
|
||
flex: 1;
|
||
.text{
|
||
font-size: .4rem;
|
||
line-height: 1.3;
|
||
}
|
||
.desc{
|
||
font-size: .35rem;
|
||
color: #999;
|
||
margin-top: .3rem;
|
||
}
|
||
}
|
||
}
|
||
.order-btns{
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
padding-top: .2rem;
|
||
border-bottom: 1px solid #eee;
|
||
padding-bottom: .5rem;
|
||
padding-left: 1.3rem;
|
||
padding-right: .3rem;
|
||
margin-bottom: .4rem;
|
||
.order-btn{
|
||
height: 1rem;
|
||
border-radius: .1rem;
|
||
border: 1px solid #ddd;
|
||
background: white;
|
||
padding: 0 .5rem;
|
||
margin-right: .2rem;
|
||
}
|
||
}
|
||
.order-no{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
span{
|
||
color: #555;
|
||
}
|
||
.order-repeat{
|
||
height: 1rem;
|
||
border-radius: .1rem;
|
||
border: 1px solid #e77979;
|
||
padding: 0 .5rem;
|
||
background: #e77979;
|
||
color: white;
|
||
}
|
||
}
|
||
}
|
||
.order-feedback{
|
||
background: white;
|
||
border-radius: .1rem;
|
||
padding: .4rem;
|
||
box-shadow: 0 0 .3rem rgba(0,0,0,0.1);
|
||
margin-top: 1rem;
|
||
.feed-title{
|
||
font-size: .4rem;
|
||
}
|
||
.feed-content{
|
||
padding-top: .3rem;
|
||
padding-bottom: .3rem;
|
||
line-height: 1.4;
|
||
font-size: .38rem;
|
||
color: #888;
|
||
text-align: justify;
|
||
}
|
||
.feed-picture{
|
||
img{
|
||
width: 23%;
|
||
margin-right: 2%;
|
||
margin-bottom: .1rem;
|
||
height: 1.5rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|