提交测试版
This commit is contained in:
@@ -0,0 +1,217 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user