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.

273 lines
6.8 KiB

<template>
<view class="page" v-if="showPage">
<view class="pageMain">
<view class="topBox border-bottom-ed">
<view class="flex flex-wrap">
<view class="text-22 line-50 padding-lr-25" :class="tabIndex == 0 ? 'evaBtn2' : 'evaBtn1'"
@click="changeTab(0)">
<text class="margin-right-5">全部</text>
<text>{{numbers.all}}</text>
</view>
<view class="text-22 line-50 padding-lr-25" :class="tabIndex == 1 ? 'evaBtn2' : 'evaBtn1'"
@click="changeTab(1)">
<text class="margin-right-5">及时快速</text>
<text>{{numbers.number1}}</text>
</view>
<view class="text-22 line-50 padding-lr-25" :class="tabIndex == 2 ? 'evaBtn2' : 'evaBtn1'"
@click="changeTab(2)">
<text class="margin-right-5">很有耐心</text>
<text>{{numbers.number2}}</text>
</view>
<view class="text-22 line-50 padding-lr-25" :class="tabIndex == 3 ? 'evaBtn2' : 'evaBtn1'"
@click="changeTab(3)">
<text class="margin-right-5">专业权威</text>
<text>{{numbers.number3}}</text>
</view>
<view class="text-22 line-50 padding-lr-25" :class="tabIndex == 4 ? 'evaBtn2' : 'evaBtn1'"
@click="changeTab(4)">
<text class="margin-right-5">详细清楚</text>
<text>{{numbers.number4}}</text>
</view>
</view>
</view>
<view class="listBox">
<ty-list-list :status="load_status">
<view class="eveList padding-top-30 padding-bottom-25 border-bottom-ed" v-for="(item,index) in list"
:key="index">
<view class="flex align-center">
<view class="headerImg">
<image :src="item.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">{{item.nick_name}}</view>
<view class="text-24 text-98">{{item.review_time}}</view>
</view>
<view class="flex align-center">
<image src="/static/home/star1.png" v-for="(item,index) in item.star" :key="index"
class="starImg margin-left-10"></image>
<image src="/static/home/star0.png" v-for="(item,index) in (5-item.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">{{item.content}}</view>
<view class="margin-top-25 bg-f5 radius-10 padding-tb-15 padding-lr-20" v-if="item.is_reply == 2">
<view class="text-26 text-4d line-40 margin-bottom-5">专家回复</view>
<view class="text-26 text-77 line-40">{{item.reply}}</view>
</view>
</view>
</ty-list-list>
</view>
</view>
<view class="bottomBox flex align-center justify-between border-top-f5">
<view class="flex flex-direction align-center position-relative">
<view class="tyIcon-fenxiang text-42 margin-bottom-5"></view>
<view class="text-22 text-33">分享</view>
<button open-type="share" class="shareBtn"></button>
</view>
<view class="flex flex-direction align-center" @click="changeFollow">
<view class="icon-icon-guanzhu iconfont text-42 margin-bottom-5"></view>
<view class="text-22 text-33">{{isFollow == 0 ? '关注' : '已关注'}}</view>
</view>
<view class="bottomBtn1 text-center text-ff text-bold text-30" v-if="status == 1" @click="tapOrder">立即咨询
</view>
<view class="bottomBtn2 text-center text-77 text-bold text-30" v-if="status == 2"></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
tabIndex: 0,
id: '',
isFollow: 0, //1-关注 0-未关注
status: 1, //1-上架中 2-已下架
numbers: {},
load_status:'',
list:[],
shareTitle:'',
shareImg:'',
showPage:false,
}
},
onLoad(options) {
this.tabIndex = options.index ? options.index : 0;
this.id = options.id;
this.getExpertDetail()
this.getNumbers();
this.loadList(1);
},
onShareAppMessage() {
return {
title: this.shareTitle,
imageUrl :this.shareImg,
path : '/pages/expert/detail?id=' + this.id
}
},
onReachBottom() {
this.loadList(2)
},
methods: {
getNumbers() {
this.rq.getData('fire/api/Fire/getReviewNumber', {
expert_id: this.id
}).then(res => {
if (res.code == 0) {
this.numbers = res.data.number;
}
})
},
getExpertDetail(){
this.rq.getData('fire/api/Fire/getExpertDetail',{
expert_id : this.id
}).then(res=>{
if(res.code == 0){
this.status = res.data.detail.is_publish;
this.isFollow = res.data.detail.is_follow;
this.shareTitle = res.data.detail.name + ' ' + res.data.detail.brief;
this.shareImg = res.data.detail.head_img;
this.showPage = true;
}
})
},
changeTab(i) {
if (this.tabIndex == i) {
return;
} else {
this.tabIndex = i;
this.loadList(1)
}
},
// 关注
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;
}
})
} 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'
})
}
},
loadList(first_page) {
this.rq.getList('fire/api/Fire/getReviewList', {
expert_id: this.id,
label: this.tabIndex,
}, {
that: this,
first_page
})
},
}
}
</script>
<style scoped>
.pageMain {
width: 100vw;
min-height: 100vh;
background: #fff;
padding: 160rpx 30rpx calc(155rpx + env(safe-area-inset-bottom));
box-sizing: border-box;
}
.topBox {
position: fixed;
top: 0;
left: 0;
width: 100vw;
background: #fff;
padding-left: 30rpx;
box-sizing: border-box;
padding-bottom: 20rpx;
z-index: 20;
}
.evaBtn2,
.evaBtn1 {
border-radius: 26rpx;
margin-top: 20rpx;
margin-right: 20rpx;
}
.evaBtn2 {
color: #FF8534;
background: #fff;
border: 2rpx solid #FF8534;
}
.evaBtn1 {
background: #F5F5F5;
border: 2rpx solid #F5F5F5;
}
.headerImg {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
overflow: hidden;
}
.starImg {
width: 30rpx;
height: 30rpx;
}
/* 底部 */
.bottomBox {
width: 100vw;
background: #fff;
position: fixed;
left: 0;
box-sizing: border-box;
bottom: 0;
padding: 10rpx 30rpx calc(10rpx + env(safe-area-inset-bottom)) 60rpx;
}
.shareBtn {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.bottomBtn1,
.bottomBtn2 {
width: 470rpx;
height: 80rpx;
border-radius: 40rpx;
line-height: 80rpx;
}
.bottomBtn1 {
background: #2F97FF;
}
.bottomBtn2 {
background: #E5E5E5;
}
</style>