|
|
<template>
|
|
|
<view class="page">
|
|
|
<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="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-top-40 padding-lr-30">
|
|
|
<view class="flex align-center">
|
|
|
<view class="quesHeader">
|
|
|
<image :src="detailData.head_img" class="width-100p height-100p block" mode="aspectFill">
|
|
|
</image>
|
|
|
</view>
|
|
|
<view class="margin-left-15 text-30 text-33 text-bold">{{detailData.nick_name}}</view>
|
|
|
</view>
|
|
|
<view class="flex align-center text-28 line-40 margin-top-25">
|
|
|
<view class="text-33">订单金额：</view>
|
|
|
<view class="text-ff85">¥{{detailData.expert_price}}</view>
|
|
|
</view>
|
|
|
<view class="flex align-center text-28 text-33 line-40 margin-top-15">
|
|
|
<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>
|
|
|
<view 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">
|
|
|
<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">
|
|
|
<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">
|
|
|
<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-if="item.type == 2">
|
|
|
<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-images :list="item.answer_img_url" width="206" height="206" space="15" column="3">
|
|
|
</ty-image-images> -->
|
|
|
<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="index"
|
|
|
:class="index2 == 0 ? '' : 'margin-top-25'" @click="downFile(item2.file_url)">
|
|
|
{{item2.file_name}}
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
|
|
|
<!-- 评价 -->
|
|
|
<view class="evaBox margin-top-40 padding-bottom-50" v-if="reviewMsg.id">
|
|
|
<view class="text-28 line-40 text-33 text-bold">
|
|
|
评价
|
|
|
</view>
|
|
|
<view class="margin-top-15 bg-f5 padding-top-20 padding-lr-20 padding-bottom-30 radius-10">
|
|
|
<view class="flex align-center ">
|
|
|
<view class="headerImg">
|
|
|
<image :src="reviewMsg.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">{{reviewMsg.nick_name}}</view>
|
|
|
<view class="text-24 text-98">{{reviewMsg.review_time}}</view>
|
|
|
</view>
|
|
|
<view class="flex align-center">
|
|
|
<image src="/static/home/star1.png" v-for="(item,index) in reviewMsg.star" :key="index"
|
|
|
class="starImg margin-left-10"></image>
|
|
|
<image src="/static/home/star0.png" v-for="(item,index) in (5-reviewMsg.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">{{reviewMsg.content}}</view>
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="flex justify-end bottomBox">
|
|
|
<block v-if="status == 2">
|
|
|
<view class="btn1" @click="tapRefund">退款</view>
|
|
|
<picker class="margin-left-20" :range="answerWays" range-key="name" @change="chooseAnswerWay">
|
|
|
<view class="btn2 ">去解答</view>
|
|
|
</picker>
|
|
|
</block>
|
|
|
<block v-if="status == 3">
|
|
|
<view class="btn1" @click="tapDel">删除订单</view>
|
|
|
<view class="btn2 margin-left-20" @click="tapRefund" v-if="detailData.is_refund == 1">退款</view>
|
|
|
</block>
|
|
|
<block v-if="status == 4">
|
|
|
<view class="btn1" @click="tapDel">删除订单</view>
|
|
|
<view class="btn1 margin-left-20" @click="tapRefund" v-if="detailData.is_refund == 1">退款</view>
|
|
|
<view class="btn2 margin-left-20" @click="go('/pages/expertCenter/reply?oid=' + id)"
|
|
|
v-if="detailData.is_reply == 1">回复评论</view>
|
|
|
</block>
|
|
|
<block v-if="status == 5">
|
|
|
<view class="btn1" @click="tapDel">删除订单</view>
|
|
|
</block>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
const innerAudioContext = uni.createInnerAudioContext();
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
id: '',
|
|
|
status: 2, //1--待支付 2-进行中 3-待评价 4-已完成 5-已退款 6-已取消
|
|
|
detailData: {},
|
|
|
askList: [],
|
|
|
reviewMsg: {},
|
|
|
// 解答
|
|
|
answerWays: [{
|
|
|
id: 1,
|
|
|
name: '文本解答'
|
|
|
}, {
|
|
|
id: 2,
|
|
|
name: '语音解答'
|
|
|
}, {
|
|
|
id: 3,
|
|
|
name: '图片解答'
|
|
|
}, {
|
|
|
id: 4,
|
|
|
name: '视频解答'
|
|
|
}, {
|
|
|
id: 5,
|
|
|
name: '资料解答'
|
|
|
}],
|
|
|
showPage: false,
|
|
|
cancelSecond2:'',
|
|
|
goOnTimer: null,
|
|
|
}
|
|
|
},
|
|
|
onLoad(options) {
|
|
|
this.id = options.id;
|
|
|
},
|
|
|
onShow() {
|
|
|
this.getPageData()
|
|
|
},
|
|
|
onUnload() {
|
|
|
// 清除计时器
|
|
|
clearInterval(this.goOnTimer)
|
|
|
if (innerAudioContext.src) {
|
|
|
innerAudioContext.stop()
|
|
|
}
|
|
|
},
|
|
|
onHide() {
|
|
|
// 清除计时器
|
|
|
clearInterval(this.goOnTimer)
|
|
|
if (innerAudioContext.src) {
|
|
|
innerAudioContext.stop()
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
getPageData() {
|
|
|
this.rq.getData('fire/api/Expert/expertOrderDetail', {
|
|
|
order_id: this.id
|
|
|
}).then(res => {
|
|
|
if (res.code == 0) {
|
|
|
this.status = res.data.detail.status;
|
|
|
this.detailData = res.data.detail;
|
|
|
this.reviewMsg = res.data.order_review;
|
|
|
this.askList = res.data.order_ask;
|
|
|
if (this.detailData.status == 2) {
|
|
|
this.resetTimer2(this.detailData.end_second)
|
|
|
}
|
|
|
this.showPage = true;
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
// 进行中的倒计时
|
|
|
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(path) {
|
|
|
uni.setClipboardData({
|
|
|
data: path,
|
|
|
showToast: false,
|
|
|
success: () => {
|
|
|
this.cn.alert('已复制成功，请在浏览器中访问并下载资料')
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
tapRefund() {
|
|
|
this.cn.confirm('确认退款吗?').then(r => {
|
|
|
if (r.confirm) {
|
|
|
this.rq.getData('fire/api/Expert/expertRefundOrder', {
|
|
|
order_id: this.id
|
|
|
}).then(res => {
|
|
|
if (res.code == 0) {
|
|
|
this.getPageData()
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
tapDel() {
|
|
|
this.cn.confirm('确认删除吗?').then(r => {
|
|
|
if (r.confirm) {
|
|
|
this.rq.getData('fire/api/Expert/expertDeleteOrder', {
|
|
|
order_id: this.id
|
|
|
}).then(res => {
|
|
|
if (res.code == 0) {
|
|
|
uni.navigateBack({
|
|
|
delta: 1
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
// 去解答
|
|
|
chooseAnswerWay(e) {
|
|
|
console.log(9444, e)
|
|
|
var i = e.detail.value;
|
|
|
setTimeout(()=>{
|
|
|
uni.navigateTo({
|
|
|
url: '/pages/expertCenter/orderAnswer?type=' + this.answerWays[i].id + '&oid=' + this.id
|
|
|
})
|
|
|
},100)
|
|
|
|
|
|
},
|
|
|
}
|
|
|
}
|
|
|
</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;
|
|
|
}
|
|
|
|
|
|
.quesHeader {
|
|
|
width: 80rpx;
|
|
|
height: 80rpx;
|
|
|
border-radius: 50%;
|
|
|
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>
|
