|
|
<template>
|
|
|
<view class="page" v-if="showPage">
|
|
|
<view class="pageMain">
|
|
|
<view class="padding-30 flex">
|
|
|
<view class="headerImg margin-right-15">
|
|
|
<image :src="expertData.head_img" mode="aspectFill" class="width-100p height-100p block"></image>
|
|
|
</view>
|
|
|
<view class="flex-one">
|
|
|
<view class="flex align-center justify-between">
|
|
|
<view class="text-34 text-bold line-50 text-33">{{expertData.name}}</view>
|
|
|
<view class="text-32 text-ff85 text-bold text-price">{{expertData.price}}</view>
|
|
|
</view>
|
|
|
<view class="text-26 text-cut-one text-909298 margin-top-10">{{expertData.brief}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="line15"></view>
|
|
|
<view class="box">
|
|
|
<view class="text-30 text-33 text-bold line-40 margin-bottom-15">
|
|
|
咨询内容
|
|
|
</view>
|
|
|
<view class="zxBox">
|
|
|
<textarea v-model="content" placeholder="描述您的要咨询的内容" placeholder-class="text-aa" class="text-30"
|
|
|
maxlength="500" @input="inputContent"></textarea>
|
|
|
<view class="margin-top-20 text-right text-26 text-aa">
|
|
|
{{contentLength}}/500
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="margin-top-40">
|
|
|
<view class="margin-bottom-15">
|
|
|
<text class="line-40 text-30 text-33 text-bold">相关图片</text>
|
|
|
<text class="line-40 text-24 text-aa">（最多5张）</text>
|
|
|
</view>
|
|
|
<ty-image-images-upload :count="5" :video-count="0" @imageChange="imageChange"
|
|
|
:image_list="image_list">
|
|
|
</ty-image-images-upload>
|
|
|
</view>
|
|
|
<view class="padding-top-25">
|
|
|
<view class="margin-bottom-15">
|
|
|
<text class="line-40 text-30 text-33 text-bold">相关视频</text>
|
|
|
</view>
|
|
|
<ty-image-images-upload :count="0" :video-count="1" @videoChange="videoChange"
|
|
|
:video_list="video_list">
|
|
|
</ty-image-images-upload>
|
|
|
</view>
|
|
|
<view class="padding-top-25">
|
|
|
<view class="margin-bottom-15">
|
|
|
<text class="line-40 text-30 text-33 text-bold">相关文件</text>
|
|
|
<text class="line-40 text-24 text-aa">（最多5个）</text>
|
|
|
</view>
|
|
|
<view class="margin-bottom-30">
|
|
|
<view v-for="(item,index) in file_list" :key="index" class="flex align-center"
|
|
|
:class="index == 0 ? '' : 'margin-top-20'">
|
|
|
<view class="flex-one text-28 text-4b8 line-40" style="text-decoration:underline">
|
|
|
{{item.file_name}}
|
|
|
</view>
|
|
|
<view class="text-28 text-e62 margin-left-30 line-40" @click="delFile(index)">删除</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="margin-top-30" v-if="file_list.length < 5" @click="upLoadFile">
|
|
|
<image src="/static/home/uploadFile.png" class="fileUpImg"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="border-top-f5 bottomBox flex align-center justify-between">
|
|
|
<view>
|
|
|
<text class="text-28">实付：</text>
|
|
|
<text class="text-24">￥</text>
|
|
|
<text class="text-32 text-bold">{{expertData.price}}</text>
|
|
|
</view>
|
|
|
<view class="text-30 text-ff text-bold text-center payBtn" @click="tapPay">去付款</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import file from '@/components/hzjc/utils/functions/file.js'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
expertData: {},
|
|
|
showPage: false,
|
|
|
id: '', //专家id
|
|
|
content: '', //咨询内容
|
|
|
contentLength: 0,
|
|
|
image_list: [], //相关图片
|
|
|
video_list: [], //相关视频
|
|
|
file_list: [], //相关文件
|
|
|
canTapPay: true, //支付防连点
|
|
|
}
|
|
|
},
|
|
|
onLoad(options) {
|
|
|
this.id = options.id;
|
|
|
this.getPageData()
|
|
|
},
|
|
|
methods: {
|
|
|
getPageData() {
|
|
|
this.rq.getData('fire/api/Fire/getOrderReady', {
|
|
|
expert_id: this.id
|
|
|
}).then(res => {
|
|
|
if (res.code == 0) {
|
|
|
this.expertData = res.data.expert;
|
|
|
this.showPage = true;
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
inputContent(e) {
|
|
|
if (e.detail.cursor < 500) {
|
|
|
this.contentLength = e.detail.cursor;
|
|
|
} else {
|
|
|
this.contentLength = 500
|
|
|
}
|
|
|
},
|
|
|
imageChange(e) {
|
|
|
this.image_list = e.image_list;
|
|
|
},
|
|
|
videoChange(e) {
|
|
|
this.video_list = e.video_list;
|
|
|
},
|
|
|
upLoadFile() {
|
|
|
wx.chooseMessageFile({
|
|
|
count: 5 - this.file_list.length,
|
|
|
type: 'file',
|
|
|
success: (r) => {
|
|
|
uni.showLoading({
|
|
|
title: '上传中...'
|
|
|
})
|
|
|
console.log(1007, r)
|
|
|
var tempFiles = r.tempFiles;
|
|
|
let files = []
|
|
|
|
|
|
tempFiles.forEach(value => {
|
|
|
// 原文件名称
|
|
|
let localFileName,
|
|
|
// 上传后文件名称
|
|
|
fileName
|
|
|
// 获取源文件名称
|
|
|
localFileName = value.name
|
|
|
if (localFileName) {
|
|
|
fileName = localFileName
|
|
|
} else {
|
|
|
let suffix = this.cn.getSuffix(localFileName)
|
|
|
fileName = this.cn.getRandomStr(10) + suffix
|
|
|
}
|
|
|
let file = {
|
|
|
path: value.path,
|
|
|
fileName: fileName
|
|
|
}
|
|
|
files.push(file)
|
|
|
})
|
|
|
|
|
|
// 上传到OSS
|
|
|
file.uploadFilesToOss(files, [], {}, true, 'file').then(res => {
|
|
|
uni.hideLoading()
|
|
|
console.log(1005, res)
|
|
|
res.forEach((item, index) => {
|
|
|
var n = item.split("/");
|
|
|
this.file_list.push({
|
|
|
file_name: n[n.length - 1],
|
|
|
file_url: item
|
|
|
})
|
|
|
})
|
|
|
|
|
|
}).catch(res => {
|
|
|
uni.hideLoading()
|
|
|
console.log(1006, res)
|
|
|
})
|
|
|
},
|
|
|
fail: (ff) => {
|
|
|
uni.hideLoading()
|
|
|
console.log(1008, ff)
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
delFile(i) {
|
|
|
this.file_list.splice(i, 1)
|
|
|
},
|
|
|
tapPay() {
|
|
|
if (this.canTapPay) {
|
|
|
if (this.content == '') {
|
|
|
this.cn.alert('请描述您的要咨询的内容');
|
|
|
return;
|
|
|
}
|
|
|
this.canTapPay = false;
|
|
|
this.rq.getData('fire/api/Fire/orderSubmit', {
|
|
|
expert_id: this.id,
|
|
|
ask_content: this.content,
|
|
|
ask_img: this.image_list.join(','),
|
|
|
ask_video: this.video_list.length ? this.video_list[0].video_url : '',
|
|
|
ask_data: JSON.stringify(this.file_list)
|
|
|
}).then(res => {
|
|
|
if (res.code == 0) {
|
|
|
if (res.data.need_pay == 1) { //需要支付
|
|
|
this.cn.requestPayment(res.data.pay_params, 1).then(res => {
|
|
|
uni.redirectTo({
|
|
|
url: '/pages/expert/orderList'
|
|
|
}).then(() => {
|
|
|
this.canTapPay = true;
|
|
|
})
|
|
|
}).catch(res => {
|
|
|
uni.redirectTo({
|
|
|
url: '/pages/expert/orderList'
|
|
|
}).then(() => {
|
|
|
this.canTapPay = true;
|
|
|
})
|
|
|
})
|
|
|
} else { //不需要支付
|
|
|
this.cn.alert(res.msg).then(res => {
|
|
|
uni.redirectTo({
|
|
|
url: '/pages/expert/orderList'
|
|
|
}).then(() => {
|
|
|
this.canTapPay = true;
|
|
|
})
|
|
|
})
|
|
|
}
|
|
|
} else {
|
|
|
this.canTapPay = true;
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
.pageMain {
|
|
|
min-height: 100vh;
|
|
|
width: 100vw;
|
|
|
background: #fff;
|
|
|
}
|
|
|
|
|
|
.headerImg {
|
|
|
width: 110rpx;
|
|
|
height: 110rpx;
|
|
|
border-radius: 10rpx;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.line15 {
|
|
|
width: 100vw;
|
|
|
height: 15rpx;
|
|
|
background: #F5F5F5;
|
|
|
}
|
|
|
|
|
|
.box {
|
|
|
width: 100vw;
|
|
|
padding: 25rpx 30rpx calc(140rpx + env(safe-area-inset-bottom));
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.zxBox {
|
|
|
padding: 20rpx 25rpx 15rpx;
|
|
|
width: 100%;
|
|
|
box-sizing: border-box;
|
|
|
border-radius: 10rpx;
|
|
|
border: 1rpx solid #DDDDDD;
|
|
|
}
|
|
|
|
|
|
.zxBox textarea {
|
|
|
width: 100%;
|
|
|
height: 180rpx;
|
|
|
}
|
|
|
|
|
|
.fileUpImg {
|
|
|
width: 160rpx;
|
|
|
height: 160rpx;
|
|
|
}
|
|
|
|
|
|
.bottomBox {
|
|
|
width: 100vw;
|
|
|
background: #fff;
|
|
|
position: fixed;
|
|
|
left: 0;
|
|
|
bottom: 0;
|
|
|
padding: 10rpx 30rpx calc(10rpx + env(safe-area-inset-bottom));
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.payBtn {
|
|
|
width: 220rpx;
|
|
|
height: 80rpx;
|
|
|
background: #2F97FF;
|
|
|
border-radius: 40rpx;
|
|
|
line-height: 80rpx;
|
|
|
}
|
|
|
</style>
|
