|
|
<template>
|
|
|
<view class="page" v-if="showPage">
|
|
|
<view class="pageMain">
|
|
|
<view class="topBox padding-tb-50">
|
|
|
<view class="text-center text-fe text-bold margin-bottom-10">
|
|
|
<text class="text-40 ">{{detailData.status_text}}</text>
|
|
|
<text class="text-28" v-if="detailData.status == 1">（{{cancelSecond}}后失效）</text>
|
|
|
<text class="text-28" v-if="detailData.status == 2">（{{cancelSecond2}}后失效）</text>
|
|
|
</view>
|
|
|
<view class="flex align-center justify-center text-ff">
|
|
|
<view class="tyIcon-dingdanhaochaxun text-28 margin-right-5 "></view>
|
|
|
<view class="text-22 line-30">{{detailData.order_number}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="padding-tb-25 padding-lr-30 flex">
|
|
|
<view class="expertHeader">
|
|
|
<image :src="detailData.expert_head_img" class="width-100p height-100p block" mode="aspectFill">
|
|
|
</image>
|
|
|
</view>
|
|
|
<view class="flex-one margin-left-15">
|
|
|
<view class="flex justify-between margin-bottom-10">
|
|
|
<view class="flex-one margin-right-15 text-34 text-33 text-bold line-50">
|
|
|
{{detailData.expert_name}}
|
|
|
</view>
|
|
|
<view class="text-32 text-bold text-ff85 text-price">{{detailData.expert_price}}</view>
|
|
|
</view>
|
|
|
<view class="text-cut-one text-26 text-909298">{{detailData.expert_brief}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="line15"></view>
|
|
|
<view class="padding-top-25 padding-lr-30">
|
|
|
<view class="flex align-center text-28 text-33 line-40">
|
|
|
<view>下单时间：</view>
|
|
|
<view>{{detailData.order_time}}</view>
|
|
|
</view>
|
|
|
<view class="flex align-center text-28 text-33 line-40 margin-top-15" v-if="detailData.pay_time">
|
|
|
<view>付款时间：</view>
|
|
|
<view>{{detailData.pay_time}}</view>
|
|
|
</view>
|
|
|
<view class="flex align-center text-28 text-33 line-40 margin-top-15" v-if="detailData.end_time">
|
|
|
<view>结束时间：</view>
|
|
|
<view>{{detailData.end_time}}</view>
|
|
|
</view>
|
|
|
<view class="flex align-center text-28 text-33 line-40 margin-top-15" v-if="detailData.refund_time">
|
|
|
<view>退款时间：</view>
|
|
|
<view>{{detailData.refund_time}}</view>
|
|
|
</view>
|
|
|
<view class="flex align-center text-28 text-33 line-40 margin-top-15" v-if="detailData.cancel_time">
|
|
|
<view>取消时间：</view>
|
|
|
<view>{{detailData.cancel_time}}</view>
|
|
|
</view>
|
|
|
<block v-for="(item,index) in askList" :key="index">
|
|
|
<!-- 提问 -->
|
|
|
<view class="msgBox1 margin-top-25" v-if="item.type == 1">
|
|
|
<view>
|
|
|
<view class="text-2f9 text-bold line-40 text-28 margin-bottom-10">
|
|
|
{{index == 0 ? '咨询内容' : '追加提问'}}
|
|
|
</view>
|
|
|
<view class="text-28 text-33 line-40">
|
|
|
{{item.ask_content}}
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="margin-top-25" v-if="item.ask_img.length > 0">
|
|
|
<view class="text-2f9 text-bold line-40 text-28 margin-bottom-10">
|
|
|
相关图片
|
|
|
</view>
|
|
|
<view class="" style="width: calc(100% + 15rpx);">
|
|
|
<ty-image-images2 :list="item.ask_img" width="206" height="206" space="15" column="5">
|
|
|
</ty-image-images2>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="padding-top-10" v-if="item.ask_video.length > 0">
|
|
|
<view class="text-2f9 text-bold line-40 text-28 margin-bottom-10">
|
|
|
相关视频
|
|
|
</view>
|
|
|
<view class="" style="width: calc(100% + 15rpx);">
|
|
|
<ty-image-video :list="[{video_url:item.ask_video,image_url:item.ask_video_cover_img}]"
|
|
|
width="206" height="206" space="15" column="5">
|
|
|
</ty-image-video>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="padding-top-10" v-if="item.ask_data.length > 0">
|
|
|
<view class="text-2f9 text-bold line-40 text-28 margin-bottom-10">
|
|
|
相关资料
|
|
|
</view>
|
|
|
<view class="text-28 text-33 line-40" style="text-decoration: underline;"
|
|
|
v-for="(item2,index2) in item.ask_data" :key="index2"
|
|
|
:class="index2 == 0 ? '' : 'margin-top-25'" @click="downFile(item2.file_url)">
|
|
|
{{item2.file_name}}
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 回答 -->
|
|
|
<view class="margin-top-25" v-else>
|
|
|
<view class="replyBox">
|
|
|
<view class="flex align-center padding-bottom-10">
|
|
|
<view class="replyHeader">
|
|
|
<image :src="detailData.expert_head_img" class="width-100p height-100p block"
|
|
|
mode="aspectFill"></image>
|
|
|
</view>
|
|
|
<view class="flex-one margin-lr-15 text-30 text-33 text-bold">
|
|
|
{{detailData.expert_name}}
|
|
|
</view>
|
|
|
<view class="text-24 text-77">{{item.show_create_time}}</view>
|
|
|
</view>
|
|
|
<!-- 文字 -->
|
|
|
<view class="text-28 text-33 line-50 margin-bottom-15" v-if="item.answer_type == 5">
|
|
|
{{item.answer_text}}
|
|
|
</view>
|
|
|
<!-- 图片 -->
|
|
|
<view style="width: calc(100% + 15rpx);" class="margin-top-15" v-if="item.answer_type == 2">
|
|
|
<ty-image-images2 :list="item.answer_img_url" width="206" height="206" space="15"
|
|
|
column="3">
|
|
|
</ty-image-images2>
|
|
|
</view>
|
|
|
<!-- 视频 -->
|
|
|
<view style="width: calc(100% + 15rpx);" class="margin-top-15" v-if="item.answer_type == 3">
|
|
|
<ty-image-video
|
|
|
:list="[{video_url:item.answer_video_url,image_url:item.answer_video_cover_img}]"
|
|
|
width="206" height="206" space="15" column="3">
|
|
|
</ty-image-video>
|
|
|
</view>
|
|
|
<!-- 语音 -->
|
|
|
<view class="margin-tb-15" v-if="item.answer_type == 1">
|
|
|
<view class="flex align-center yyBox" @click="playAudio(item.answer_audio_url)">
|
|
|
<view class="icon-icon-tongzhi iconfont text-48 text-ff margin-right-40"></view>
|
|
|
<view class="text-36 text-ff text-bold">
|
|
|
{{item.answer_audio_second}}”
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 文件 -->
|
|
|
<view class="margin-tb-15" v-if="item.answer_type == 4">
|
|
|
<view class="text-28 text-2f9 line-40" style="text-decoration: underline;"
|
|
|
v-for="(item2,index2) in item.answer_data_url" :key="index2"
|
|
|
:class="index2 == 0 ? '' : 'margin-top-25'" @click="downFile(item2.file_url)">
|
|
|
{{item2.file_name}}
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</block>
|
|
|
|
|
|
<!-- 评价 -->
|
|
|
<view class="evaBox margin-top-40 padding-bottom-50" v-if="reviewData.id">
|
|
|
<view class="text-32 line-45 text-33 text-bold">
|
|
|
评价
|
|
|
</view>
|
|
|
<view class="flex align-center margin-top-20">
|
|
|
<view class="headerImg">
|
|
|
<image :src="reviewData.head_img" mode="aspectFill" class="width-100p height-100p">
|
|
|
</image>
|
|
|
</view>
|
|
|
<view class="flex-one margin-lr-15">
|
|
|
<view class="text-33 text-bold text-24 margin-bottom-10">{{reviewData.nick_name}}</view>
|
|
|
<view class="text-24 text-98">{{reviewData.review_time}}</view>
|
|
|
</view>
|
|
|
<view class="flex align-center">
|
|
|
<image src="/static/home/star1.png" v-for="(item,index) in reviewData.star" :key="index"
|
|
|
class="starImg margin-left-10"></image>
|
|
|
<image src="/static/home/star0.png" v-for="(item,index) in (5-reviewData.star)" :key="index"
|
|
|
class="starImg margin-left-10"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="padding-left-95 margin-top-20 text-28 text-33 line-40">{{reviewData.content}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="flex justify-end bottomBox">
|
|
|
<block v-if="status == 1">
|
|
|
<view class="btn1" @click="cancelOrder">取消订单</view>
|
|
|
<view class="btn2 margin-left-20" @click="tapPay">支付</view>
|
|
|
</block>
|
|
|
<block v-if="status == 2 && detailData.append_times < 3">
|
|
|
<view class="btn2 margin-left-20" @click="go('/pages/expert/addQues?id='+id)">追加提问</view>
|
|
|
</block>
|
|
|
<block v-if="status == 3">
|
|
|
<view class="btn2 margin-left-20" @click="go('/pages/expert/evaluate?id=' + id)">去评价</view>
|
|
|
</block>
|
|
|
<block v-if="status == 4 || status == 5 || status == 6">
|
|
|
<view class="btn1" @click="delOrder">删除订单</view>
|
|
|
</block>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
const innerAudioContext = uni.createInnerAudioContext();
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
id: '',
|
|
|
status: 3, //1--待支付 2-进行中 3-待评价 4-已完成 5-已退款 6-已取消
|
|
|
detailData: {},
|
|
|
askList: [],
|
|
|
reviewData: {},
|
|
|
showPage: false,
|
|
|
// 自动取消订单倒计时
|
|
|
cancelSecond: '',
|
|
|
cancelSecond2: '',
|
|
|
// 自动取消订单倒计时定时器
|
|
|
cancelSecondIntervalTimer: '',
|
|
|
goOnTimer: null, //进行中的倒计时
|
|
|
}
|
|
|
},
|
|
|
onLoad(options) {
|
|
|
this.id = options.id;
|
|
|
},
|
|
|
onShow() {
|
|
|
this.getPageData();
|
|
|
},
|
|
|
onUnload() {
|
|
|
// 清除计时器
|
|
|
clearInterval(this.cancelSecondIntervalTimer)
|
|
|
clearInterval(this.goOnTimer)
|
|
|
if (innerAudioContext.src) {
|
|
|
innerAudioContext.stop()
|
|
|
}
|
|
|
},
|
|
|
onHide() {
|
|
|
// 清除计时器
|
|
|
clearInterval(this.cancelSecondIntervalTimer)
|
|
|
clearInterval(this.goOnTimer)
|
|
|
if (innerAudioContext.src) {
|
|
|
innerAudioContext.stop()
|
|
|
}
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
getPageData() {
|
|
|
this.rq.getData('fire/api/Fire/getOrderDetail', {
|
|
|
order_id: this.id
|
|
|
}).then(res => {
|
|
|
if (res.code == 0) {
|
|
|
this.detailData = res.data.detail;
|
|
|
this.askList = res.data.order_ask;
|
|
|
// 倒计时取消订单
|
|
|
if (this.detailData.cancel_second > 0) {
|
|
|
this.resetTime(this.detailData.cancel_second)
|
|
|
}
|
|
|
if (this.detailData.status == 2) {
|
|
|
this.resetTimer2(this.detailData.end_second)
|
|
|
}
|
|
|
this.status = res.data.detail.status;
|
|
|
this.reviewData = res.data.order_review;
|
|
|
this.showPage = true;
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
/**
|
|
|
* 重置倒计时
|
|
|
*/
|
|
|
resetTime(second) {
|
|
|
this.cancelSecondIntervalTimer = setInterval(res => {
|
|
|
if (second > 0) {
|
|
|
let time = this.cn.timeSplit(second, 2)
|
|
|
this.cancelSecond = time.minute + ":" + time.second;
|
|
|
--second;
|
|
|
} else {
|
|
|
this.cancelSecond = '00:00';
|
|
|
clearInterval(this.cancelSecondIntervalTimer)
|
|
|
// 取消订单
|
|
|
this.rq.getData('fire/api/Fire/submitCancelOrder', {
|
|
|
order_id: this.id
|
|
|
}).then(res => {
|
|
|
if (res.code == 0) {
|
|
|
this.getPageData()
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
}, 1000)
|
|
|
},
|
|
|
// 进行中的倒计时
|
|
|
resetTimer2(second) {
|
|
|
this.goOnTimer = setInterval(() => {
|
|
|
if (second > 0) {
|
|
|
let time = this.cn.timeSplit(second, 3)
|
|
|
this.cancelSecond2 = time.hour + ":" + time.minute + ":" + time.second;
|
|
|
--second;
|
|
|
} else {
|
|
|
this.cancelSecond2 = '00:00:00';
|
|
|
clearInterval(this.goOnTimer)
|
|
|
// 结束订单
|
|
|
this.rq.getData('fire/api/Fire/submitEndOrder', {
|
|
|
order_id: this.id
|
|
|
}).then(res => {
|
|
|
if (res.code == 0) {
|
|
|
this.getPageData()
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
}, 1000)
|
|
|
},
|
|
|
// 播放录音
|
|
|
playAudio(url) {
|
|
|
if (innerAudioContext.src) {
|
|
|
innerAudioContext.stop()
|
|
|
}
|
|
|
if (url) {
|
|
|
innerAudioContext.src = url;
|
|
|
innerAudioContext.play();
|
|
|
}
|
|
|
},
|
|
|
// 下载文件
|
|
|
downFile(file) {
|
|
|
console.log(8777, file)
|
|
|
uni.setClipboardData({
|
|
|
data: file,
|
|
|
showToast: false,
|
|
|
success: () => {
|
|
|
this.cn.alert('已复制成功，请在浏览器中访问并下载资料')
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
// 取消订单
|
|
|
cancelOrder() {
|
|
|
this.cn.confirm('确认取消订单吗?').then(r => {
|
|
|
if (r.confirm) {
|
|
|
this.rq.getData('fire/api/Fire/submitCancelOrder', {
|
|
|
order_id: this.id
|
|
|
}).then(res => {
|
|
|
if (res.code == 0) {
|
|
|
this.getPageData()
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
// 支付
|
|
|
tapPay() {
|
|
|
this.rq.getData('fire/api/Fire/submitOrderRePay', {
|
|
|
order_id: this.id
|
|
|
}).then(res => {
|
|
|
if (res.code == 0) {
|
|
|
if (res.data.need_pay == 1) { //需要支付
|
|
|
this.cn.requestPayment(res.data.pay_params, 1).then(res => {
|
|
|
this.getPageData()
|
|
|
})
|
|
|
} else { //不需要支付
|
|
|
this.cn.alert(res.msg).then(res => {
|
|
|
this.getPageData()
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
// 删除订单
|
|
|
delOrder() {
|
|
|
this.cn.confirm('确认删除订单吗?').then(r => {
|
|
|
if (r.confirm) {
|
|
|
this.rq.getData('fire/api/Fire/submitOrderDelete', {
|
|
|
order_id: this.id
|
|
|
}).then(res => {
|
|
|
if (res.code == 0) {
|
|
|
uni.navigateBack({
|
|
|
delta: 1
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
.pageMain {
|
|
|
width: 100vw;
|
|
|
min-height: 100vh;
|
|
|
background: #fff;
|
|
|
padding-bottom: calc(130rpx + env(safe-area-inset-bottom));
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.topBox {
|
|
|
background: #2F97FF;
|
|
|
border-radius: 0rpx 0rpx 30rpx 30rpx;
|
|
|
}
|
|
|
|
|
|
.expertHeader {
|
|
|
width: 110rpx;
|
|
|
height: 110rpx;
|
|
|
border-radius: 10rpx;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.line15 {
|
|
|
width: 100vw;
|
|
|
height: 15rpx;
|
|
|
background: #f5f5f5;
|
|
|
}
|
|
|
|
|
|
.msgBox1 {
|
|
|
padding: 25rpx 20rpx 30rpx;
|
|
|
border-radius: 10rpx;
|
|
|
border: 1rpx solid #DDDDDD;
|
|
|
width: 100%;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.bottomBox {
|
|
|
width: 100vw;
|
|
|
background: #fff;
|
|
|
position: fixed;
|
|
|
left: 0;
|
|
|
bottom: 0;
|
|
|
padding: 15rpx 30rpx calc(15rpx + env(safe-area-inset-bottom));
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.btn1,
|
|
|
.btn2 {
|
|
|
width: 180rpx;
|
|
|
text-align: center;
|
|
|
line-height: 64rpx;
|
|
|
border-radius: 36px;
|
|
|
font-size: 28rpx;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
|
|
|
.btn1 {
|
|
|
border: 2rpx solid #CCCCCC;
|
|
|
color: #777777;
|
|
|
}
|
|
|
|
|
|
.btn2 {
|
|
|
border: 2rpx solid #2F97FF;
|
|
|
color: #2F97FF;
|
|
|
}
|
|
|
|
|
|
.replyBox {
|
|
|
width: 100%;
|
|
|
padding: 25rpx 20rpx 25rpx;
|
|
|
background: #F0F8FF;
|
|
|
border-radius: 10rpx;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.replyHeader {
|
|
|
width: 80rpx;
|
|
|
height: 80rpx;
|
|
|
border-radius: 50%;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.yyBox {
|
|
|
width: 260rpx;
|
|
|
height: 100rpx;
|
|
|
background: #2F97FF;
|
|
|
border-radius: 50rpx;
|
|
|
padding-left: 35rpx;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.headerImg {
|
|
|
width: 80rpx;
|
|
|
height: 80rpx;
|
|
|
border-radius: 50%;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.starImg {
|
|
|
width: 30rpx;
|
|
|
height: 30rpx;
|
|
|
}
|
|
|
</style>
|
