You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

331 lines
8.9 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view class="page" v-if="showPage">
<view class="pageMain">
<view class="padding-lr-40 padding-tb-30 border-bottom-ed">
<view class="flex margin-bottom-30">
<view class="flex-one margin-right-30">
<view class="text-46 text-33 text-bold">{{detailData.name}}</view>
<view class="margin-top-10 text-77 text-26">{{detailData.brief}}</view>
</view>
<view class="headerImg">
<image :src="detailData.head_img" class="width-100p height-100p" mode="aspectFill">
</image>
</view>
</view>
<view class="flex align-end justify-between">
<view class="flex">
<view class="flex align-center flex-direction margin-right-80">
<view class="text-34 text-33 text-bold">{{detailData.make_number}}</view>
<view class="text-24 text-77">预约量</view>
</view>
<view class="flex align-center flex-direction">
<view class="text-34 text-33 text-bold">{{detailData.follow_number}}</view>
<view class="text-24 text-77">粉丝</view>
</view>
</view>
<view class="followBtn" @click="changeFollow">
<text v-if="isFollow == 1">已关注</text>
<text v-if="isFollow == 0" class="tyIcon-jia"
style="font-size: 26rpx;margin-right: 5rpx;"></text>
<text v-if="isFollow == 0">关注</text>
</view>
</view>
</view>
<view class="padding-tb-40 padding-lr-30">
<view class="flex justify-between align-center margin-bottom-20">
<view class="text-32 text-33 text-bold line-40">在线咨询服务</view>
<view class="text-32 text-ff85 text-bold text-price line-45">{{detailData.price}}</view>
</view>
<view class="text-26 text-33 line-40 margin-bottom-50">
通过文字、图片、视频向专家提问含1次提问3次追问
</view>
<view class="text-32 text-33 text-bold line-40 margin-bottom-20">
专家介绍
</view>
<view class="text-26 text-77 line-40 margin-bottom-50">
{{detailData.introduce}}
</view>
<view class="text-32 text-33 text-bold line-40 margin-bottom-20">
资质证书
</view>
<view class="margin-bottom-50">
<image v-for="(item,index) in detailData.certificate_img" :key="index" :src="item" mode="widthFix"
class="width-100p block" :class="index == (detailData.certificate_img.length - 1)?'' : 'margin-bottom-20'"></image>
</view>
<view class="text-32 text-33 text-bold line-40 margin-bottom-20">
主要业绩
</view>
<view class="text-26 text-77 line-40">
{{detailData.achievement}}
</view>
</view>
<view class="line15"></view>
<!-- 评价 -->
<view class="evaBox padding-lr-30 padding-bottom-35 padding-top-20">
<view class="text-30 text-bold ">
评价
</view>
<block v-if="reviewMsg">
<view class="flex flex-wrap border-bottom-ed margin-top-20">
<view class="text-22 line-50 padding-lr-25 evaBtn2"
@click="go('/pages/expert/evaluateList?index=0&id='+id)">
<text class="margin-right-5">全部</text>
<text>{{numbers.all}}</text>
</view>
<view class="text-22 line-50 padding-lr-25 evaBtn1"
@click="go('/pages/expert/evaluateList?index=1&id='+id)">
<text class="margin-right-5">及时快速</text>
<text>{{numbers.number1}}</text>
</view>
<view class="text-22 line-50 padding-lr-25 evaBtn1"
@click="go('/pages/expert/evaluateList?index=2&id='+id)">
<text class="margin-right-5">很有耐心</text>
<text>{{numbers.number2}}</text>
</view>
<view class="text-22 line-50 padding-lr-25 evaBtn1"
@click="go('/pages/expert/evaluateList?index=3&id='+id)">
<text class="margin-right-5">专业权威</text>
<text>{{numbers.number3}}</text>
</view>
<view class="text-22 line-50 padding-lr-25 evaBtn1"
@click="go('/pages/expert/evaluateList?index=4&id='+id)">
<text class="margin-right-5">详细清楚</text>
<text>{{numbers.number4}}</text>
</view>
</view>
<view class="padding-top-30 padding-bottom-50">
<view class="flex align-center margin-bottom-20">
<view class="userHeader">
<image :src="reviewMsg.head_img" mode="aspectFill" class="width-100p height-100p">
</image>
</view>
<view class="flex-one margin-lr-15">
<view class="text-24 text-33 text-bold 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 text-28 line-40 text-33">{{reviewMsg.content}}</view>
</view>
<view class="flex justify-center">
<view class="text-24 text-33 text-center allReviewBtn"
@click="go('/pages/expert/evaluateList?index=0&id='+id)">
查看全部评价
</view>
</view>
</block>
<block v-else>
<view class="padding-tb-50 text-center text-26 text-77">
暂无评价~
</view>
</block>
</view>
</view>
<view class="bottomBox justify-between flex align-center border-top-f5">
<view class="flex flex-direction align-center position-relative">
<view class="icon-icon-fenxiang iconfont text-42 margin-bottom-5"></view>
<view class="text-22 text-33">分享</view>
<button open-type="share" class="shareBtn"></button>
</view>
<view class="text-center text-ff text-30 text-bold bottomBtn1" v-if="status == 2" @click="tapOrder">
立即咨询
</view>
<view class="text-30 text-77 text-bold text-center bottomBtn2" v-if="status == 1">
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
id: '',
isFollow: 0, //0-未关注 1-已关注
status: 1,
detailData: {},
numbers: {},
reviewMsg: {},
showPage: false,
}
},
onLoad(options) {
this.id = options.id;
this.getPageData();
},
onShareAppMessage() {
return{
title:this.detailData.name + ' ' + this.detailData.brief,
imageUrl:this.detailData.head_img,
path : '/pages/expert/detail?id=' + this.id
}
},
methods: {
getPageData() {
this.rq.getData('fire/api/Fire/getExpertDetail', {
expert_id: this.id
}).then(res => {
this.detailData = res.data.detail;
this.numbers = res.data.number;
this.reviewMsg = res.data.newest_review;
this.isFollow = res.data.detail.is_follow;
this.status = res.data.detail.is_publish;
this.showPage = true;
})
},
// 关注
changeFollow() {
if (this.cn.isLogin()) {
this.rq.getData('fire/api/Fire/submitExpertFollow', {
expert_id: this.id
}).then(res => {
if (res.code == 0) {
this.isFollow = this.isFollow == 1 ? 0 : 1;
if(this.isFollow){
this.detailData.follow_number++;
}else{
this.detailData.follow_number--;
}
}
})
} else {
uni.navigateTo({
url: '/pages/home/login'
})
}
},
// 立即下单
tapOrder() {
if (this.cn.isLogin()) {
uni.navigateTo({
url: '/pages/expert/order?id=' + this.id
})
} else {
uni.navigateTo({
url: '/pages/home/login'
})
}
}
}
}
</script>
<style scoped>
.pageMain {
width: 100vw;
min-height: 100vh;
background: #fff;
padding-bottom: calc(130rpx + env(safe-area-inset-bottom));
box-sizing: border-box;
}
.headerImg {
width: 200rpx;
height: 200rpx;
border-radius: 50%;
overflow: hidden;
}
.followBtn {
width: 160rpx;
height: 64rpx;
background: #2F97FF;
border-radius: 10rpx;
text-align: center;
line-height: 64rpx;
color: #fff;
font-size: 26rpx;
}
.line15 {
width: 100vw;
height: 15rpx;
background: #F5F5F5;
}
.evaBtn2,
.evaBtn1 {
border-radius: 26rpx;
margin-bottom: 20rpx;
margin-right: 20rpx;
}
.evaBtn2 {
color: #FF8534;
background: #fff;
border: 2rpx solid #FF8534;
}
.evaBtn1 {
background: #F5F5F5;
border: 2rpx solid #F5F5F5;
}
.userHeader {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
overflow: hidden;
}
.starImg {
width: 30rpx;
height: 30rpx;
}
.allReviewBtn {
width: 200rpx;
line-height: 54rpx;
border-radius: 28rpx;
border: 1rpx solid #CCCCCC;
}
/* 底部 */
.bottomBox {
width: 100vw;
background: #fff;
position: fixed;
left: 0;
bottom: 0;
box-sizing: border-box;
padding: 10rpx 30rpx calc(10rpx + env(safe-area-inset-bottom)) 60rpx;
}
.bottomBtn1,
.bottomBtn2 {
width: 560rpx;
height: 80rpx;
border-radius: 40rpx;
line-height: 80rpx;
}
.bottomBtn1 {
background: #2F97FF;
}
.bottomBtn2 {
background: #E5E5E5;
}
.shareBtn{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
z-index: 6;
}
</style>