329 lines
10 KiB
Vue
329 lines
10 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 状态栏 -->
|
||
<status-nav :titleVal="'医生'" :statusTitle="true"></status-nav>
|
||
<!-- 自定义二级分类 -->
|
||
<!-- 列表 -->
|
||
<view :style="{paddingTop: statusHeight+'px'}" class=" pad-x180">
|
||
<!-- 新闻视频 -->
|
||
<view class="news-video-img" v-if="video!=''">
|
||
<image :src="videoImg==''?doctorObj.doctor_extra.headImg:videoImg" mode="widthFix"></image>
|
||
<view class="news-video-btn" @tap.stop="playEv(video)">
|
||
<image src="/static/public/video.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
<view v-if="isLoading" class="bacf mar-s20 pad-s20 pad-x40" :style="{'margin-top':video==''?'20rpx':0}">
|
||
<view class=""></view>
|
||
<view class="pad-zy20">
|
||
<rich-text class="fon26 col3" :nodes="detailInfo"></rich-text>
|
||
</view>
|
||
</view>
|
||
<view id="daoh" :class="isTop?'isTop':''" class="isTops" :style="{top:(statusHeight-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>
|
||
<!-- 分享 -->
|
||
<view @tap="shareImgEv" class="detail-cart-box" style="display: flex;justify-content: center;align-items: center;width: 112rpx;height: 112rpx;border-radius: 100%;background-color: #0fac29;bottom: 160rpx;color: #FFFFFF;">
|
||
<image class="zanw-img" src="/static/public/share-pyq.png" mode="aspectFill" style="width: 64rpx;height: 81rpx;"></image>
|
||
</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';
|
||
import { base64ToPath } from '@/jsFile/base64-src.js';
|
||
export default {
|
||
components:{
|
||
bottomTab
|
||
},
|
||
data() {
|
||
return {
|
||
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
|
||
shareFlag:true, //分享
|
||
videoImg:'', //视频封面图
|
||
video:'', //视频链接
|
||
shareImg:'', //分享图
|
||
}
|
||
},
|
||
computed: {
|
||
// 主题颜色
|
||
publicColor() {
|
||
return this.$store.state.publicColor
|
||
},
|
||
statusHeight() {
|
||
return this.$store.state.statusHeight
|
||
}
|
||
},
|
||
onShareAppMessage(e) {
|
||
if(this.shareImg!==''){
|
||
let shareObj = {
|
||
title: this.doctorObj.doctor_extra.name,
|
||
path: `/pagesB/doctorDetail/doctorDetail?invite_code=${uni.getStorageSync('invite_code')}&doctor_id=${this.doctorId}`, // 默认是当前页面，必须是以‘/’开头的完整路径
|
||
imageUrl: this.$hostApi + this.shareImg,
|
||
};
|
||
return shareObj;
|
||
}else{
|
||
let shareObj = {
|
||
title: this.doctorObj.doctor_extra.name,
|
||
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() {
|
||
// 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: {
|
||
// 全屏播放
|
||
playEv(url){
|
||
uni.navigateTo({
|
||
url: '/pagesB/video/playVideo?src='+ this.$hostApi + url
|
||
})
|
||
},
|
||
// 分享图分享
|
||
shareImgEv(){
|
||
this.$toolAll.tools.showToast('分享图生成中...','none',10000);
|
||
if(this.shareFlag){
|
||
this.shareFlag = false;
|
||
this.$requst.post('staff/doctor-share',{id:this.doctorId}).then(res=>{
|
||
base64ToPath(res.data.share_img).then(path=>{
|
||
uni.hideToast();
|
||
this.$toolAll.tools.showToast('正在调起分享...');
|
||
wx.showShareImageMenu({
|
||
path: path,
|
||
success:(res=>{
|
||
this.shareFlag = true;
|
||
this.$requst.post('user/record', {
|
||
type: 'doctor',
|
||
action: 'share',
|
||
id: this.doctorId
|
||
}).then(res => {
|
||
console.log('分享成功：', res);
|
||
}, error => {})
|
||
// 调用tools.js中的种植埋点事件
|
||
this.$toolAll.tools.plantPoint(4);
|
||
}),
|
||
fail:(err=>{
|
||
this.shareFlag = true;
|
||
})
|
||
})
|
||
})
|
||
})
|
||
} else {this.$toolAll.tools.showToast('请勿重复点击');}
|
||
},
|
||
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.video = this.doctorObj.doctor_extra.video;
|
||
if(this.doctorObj.doctor_extra.video_img){
|
||
this.videoImg = this.$hostApi + this.doctorObj.doctor_extra.video_img;
|
||
}
|
||
this.shareImg = this.doctorObj.doctor_extra.share_img;
|
||
// console.log('视频链接',this.video,this.videoImg)
|
||
this.checkConList(this.category_id);
|
||
this.isLoading = true;
|
||
}
|
||
},error=>{})
|
||
},
|
||
checkConList(category_id){//查询收藏列表
|
||
let params = {
|
||
doctor_id:this.doctorObj.id,
|
||
category_id:category_id,
|
||
page:this.page,
|
||
size:this.size
|
||
}
|
||
this.$requst.post('archives/category',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,//是否已点赞
|
||
tag_text:item.tag_text,
|
||
}
|
||
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 scoped>
|
||
.news-video-img{
|
||
height: 500rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.news-video-img>image{
|
||
width: 100%;
|
||
min-height: 500rpx;
|
||
}
|
||
.news-video-btn{
|
||
width: 118rpx;
|
||
height: 118rpx;
|
||
border-radius: 100%;
|
||
overflow: hidden;
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%,-50%);
|
||
}
|
||
.news-video-btn image{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.news-video-content{
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-color: rgba(0,0,0,.5);
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 9;
|
||
}
|
||
video#my-video{
|
||
width: 100vw;
|
||
min-height: 400rpx;
|
||
position: fixed;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
z-index: 999;
|
||
}
|
||
</style>
|