hengmei-two/pagesB/doctorDetail/doctorDetail.vue

236 lines
8.0 KiB
Vue
Raw Blame History

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>
<!-- 状态栏 -->
<status-nav :titleVal="'医生'" :statusTitle="true"></status-nav>
<!-- 自定义二级分类 -->
<!-- 列表 -->
<view :style="{paddingTop: statusHNH+'px'}" class=" pad-x180">
<view v-if="isLoading" class="bacf mar-s20 pad-s20 pad-y32 pad-x40">
<view class="disjb pad-z30">
<image class="radius10" :src="doctorObj.doctor_extra.headimg || moImg" mode="widthFix" lazy-load></image>
<!-- <image class="radius10 flexs mar-z30" :src="doctorObj.doctor_extra.headimg || moImg" style="width: 300rpx;height: 300rpx;" mode="aspectFill"></image>
<view class="pad-z20 width100">
<view class="fon28 bold col3">{{doctorObj.doctor_extra.name}}</view>
<view class="col80 fon24">
<view class="flexs">擅长领域:</view>
<view class="dis fw">
<view class="flexs" v-for="(item,index) in doctorObj.diseases" :key="index" style="background-color: #F5F5F5;border-radius: 10rpx;padding: 6rpx 10rpx;margin-top: 10rpx;margin-right: 10rpx;">
<text class="bold pcol">{{item.disease_name}}</text>
</view>
</view>
</view>
</view> -->
</view>
<view class="mar-z32">
<view class="bbot mar-s30"></view>
<view class="fon28 bold col3 mar-sx20">医生简介</view>
<rich-text class="fon26 col3" :nodes="peopleJian"></rich-text>
</view>
<view class="mar-z32">
<view class="bbot mar-s30"></view>
<view class="fon28 bold col3 mar-sx20">医生详情</view>
<rich-text class="fon26 col3" :nodes="detailInfo"></rich-text>
</view>
</view>
<view id="daoh" :class="isTop?'isTop':''" class="isTops" :style="{top:(statusHNH-10)+'px'}">
<view class="bacf pad-zy32 mar-s20 pad-sx20">
<cate-pu :isaaaa="1" :newCurrent="newCurrent*1" :activeb="publicColor" @choosecateEv="chooseTwo" :newbmo="'#F2F2F2'" :isCenter="false" :newcateList="cateList"></cate-pu>
</view>
</view>
<view class="mar-zy32 mar-s20" v-if="dataList.length!=0"><list-pu @chooseLike="chooseLike" @praise="praiseEv" @comfirmev="comfirmev" :list="dataList"></list-pu></view>
<view style="margin-top: 8%;" v-if="dataList.length==0"><list-pu :list="dataList" @praise="praiseEv"></list-pu></view>
</view>
<!-- 底部客服 -->
<!-- <public-customer :nbottom="100"></public-customer> -->
<!-- 用户信息授权手机号授权 -->
<auth-userInfo-mobileInfo></auth-userInfo-mobileInfo>
<!-- 底部导航 -->
<view class="posixzy">
<bottom-tab></bottom-tab>
</view>
</view>
</template>
<script>
import {collectionEV,cancleCollectionEV} from '@/jsFile/publicAPI.js';
import bottomTab from '@/components/bottom-tab.vue';
export default {
components:{
bottomTab
},
data() {
return {
statusHNH:uni.getStorageSync('statusHNH'),
cateList:[],
dataList:[],
newCurrent:0,
category_id:0,//栏目ID
moImg:'/static/public/logo.png',
doctorObj:{},//医生详情
page:1,
size:10,
total:'',//总数
isZanw:true,
chuTop:'',
isTop:false,
isLoading:false,
detailInfo:'',
peopleJian:'',
doctorId:''//医生id
}
},
computed: {
// 主题颜色
publicColor() {
return this.$store.state.publicColor
}
},
onShareAppMessage() {
var shareObj = {
path: `/pagesB/doctorDetail/doctorDetail?invite_code=${uni.getStorageSync('invite_code')}&doctor_id=${this.doctorId}`, // 默认是当前页面,必须是以‘/’开头的完整路径
};
return shareObj;
},
onPageScroll(e) {
if((this.chuTop - this.statusHNH) - e.scrollTop*1 <= 0) this.isTop = true
else this.isTop = false
},
onReachBottom() {//触底事件
// console.log(this.total,this.dataList.length);
if(this.total!=this.dataList.length){
this.page++
if(this.category_id==0) this.category_id = this.cateList[0].id
this.checkConList(this.category_id)//调用自主预约列表事件
} else {
if(this.isZanw) this.$toolAll.tools.showToast('暂无更多列表','none',1000)
this.isZanw = false
}
},
onShow() {
this.$toolAll.tools.isLogin();
if(uni.getStorageSync('phone_active')!=0 && uni.getStorageSync('is_active')!=0){
this.checkConList(this.category_id)
}
},
onLoad(options) {
const query = wx.createSelectorQuery()
query.select('#daoh').boundingClientRect((rect) => {
this.chuTop = rect.top
}).exec()
this.doctorId = options.doctor_id;
if(uni.getStorageSync('phone_active')!=0 && uni.getStorageSync('is_active')!=0){
this.checkDoD(this.doctorId)
}
},
methods: {
chooseLike(e){//收藏事件
// console.log(this.dataList[e].is_collected);
if(this.dataList[e].is_collected==0){
this.dataList[e].is_collected = 1;
this.dataList[e].collects++;
// 调用收藏事件
collectionEV({action:'collect',archive_id:this.dataList[e].id})
}
},
praiseEv(e){ // 点赞事件
// console.log(this.dataList[e].is_collected);
if(this.dataList[e].is_liked==0){
this.dataList[e].is_liked = 1;
this.dataList[e].likes++;
if(this.dataList[e].likes>1000) this.dataList[e].likes = '999+'
// 调用收藏事件
collectionEV({action:'like',archive_id:this.dataList[e].id})
}
},
comfirmev(e){//确认取消收藏事件
this.dataList[e].is_collected = 0
this.$toolAll.tools.showToast('正在取消...','loading');
this.dataList[e].collects--;
// 调用取消收藏事件
cancleCollectionEV({action:'collect',archive_id:this.dataList[e].id})
},
checkDoD(doctor_id){
this.$requst.post('user/doctor-info',{doctor_id:doctor_id}).then(res=>{
// console.log('医生详情:',res);
if(res.code==0){
this.doctorObj = res.data;
// 富文本
this.peopleJian = this.$toolAll.tools.escape2Html(this.doctorObj.doctor_extra.summary);
this.detailInfo = this.$toolAll.tools.escape2Html(this.doctorObj.doctor_extra.content);
this.isLoading = true;
}
},error=>{})
},
checkConList(category_id){//查询收藏列表
let params = {
category_id:category_id,
page:this.page,
size:this.size
}
this.$requst.post('archives/hot',params).then(res=>{
if(res.code==0){
// 栏目类别
this.cateList = [];
if(res.data.category.length!=0){
res.data.category.forEach((item,index)=>{
let cateObj = {
id:item.id,//栏目ID
title:item.title,//栏目名称
active:item.active,//是否选中
model_id:item.model_id,//模型ID
model_name:item.model_name,//模型标识
sort:item.sort,
}
if(item.title=='日记分享') {
this.cateList.unshift(cateObj)
} else {
this.cateList.push(cateObj)
}
})
}
// 获取列表
if(this.page==1) {
this.dataList = [];
}
this.total = res.data.list.total
if(res.data.list.list.length!=0){
res.data.list.list.forEach(item=>{
let fabImg = '';
if(item.published_headimgurl!='' && item.published_headimgurl!=null) fabImg = this.$http + item.published_headimgurl
let tObj = {
category_id:item.category_id,//栏目ID
id:item.id,
is_collected:item.is_collected,//是否已收藏
collects:item.collects,//收藏量
views:item.views,//查看量
main_img:this.$http + item.cover,//封面图
video:this.$http + item.video,//视频地址
title:item.title,//标题
content:item.subtitle,//副标题
head_img:fabImg || '/static/public/logo.png',//发布者头像
name:item.published_by || '恒美植发',//发布者昵称
isVideo:item.video.includes(".mp4"),//是否是视频
likes:item.likes,//点赞数量
is_liked:item.is_liked//是否已点赞
}
this.dataList.push(tObj);
})
}
}
},error=>{})
},
chooseTwo(index){
this.newCurrent = index
this.isZanw = true
this.page = 1
this.category_id = this.cateList[index].id
this.checkConList(this.category_id)
},
}
}
</script>
<style>
</style>