<div class="video-box" v-if="details.type == 'video'">
<!-- <img src="../../assets/images/index/play.png" class="video-box-play" alt="" @click="initVideo"/> -->
<!-- <video width="100%" height="100%" class="video-js vjs-big-play-centered vjs-fluid"
controls preload="auto" id="myVideo"
:poster="details.poster_url"
> -->
<video width="100%" height="100%" class="video-js vjs-big-play-centered vjs-fluid"
controls
id="myVideo"
:poster="details.poster_url"
x5-video-player-fullscreen="true" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
x5-playsinline
preload="auto"
>
<source type="video/mp4" v-if="details.video_type=='local'" :src="details.video_url"/>
<source type="video/mp4" v-else-if="details.video_type=='link'" :src="details.video_source_url"/>
</video>
</div>
updated(){
if(this.details.type == 'video'){
this.initVideo();
}
},
initVideo() {
this.$nextTick(() => {
let myPlayer = this.$video(document.getElementById('myVideo'), {
controls: true,
autoDisable: true,
autoplay: false,
preload: "auto",
language: 'zh-CN',
notSupportedMessage: '此视频暂时无法播放',
controlBar:{
playToggle:true
},
});
})
},
<template>
<div>
<div class="video-box" v-if="details.type == 'video'">
<!-- <img src="../../assets/images/index/play.png" class="video-box-play" alt="" @click="initVideo"/> -->
<!-- <video width="100%" height="100%" class="video-js vjs-big-play-centered vjs-fluid"
controls preload="auto" id="myVideo"
:poster="details.poster_url"
> -->
<video width="100%" height="100%" class="video-js vjs-big-play-centered vjs-fluid"
controls
id="myVideo"
:poster="details.poster_url"
x5-video-player-fullscreen="true" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
x5-playsinline
preload="auto"
>
<source type="video/mp4" v-if="details.video_type=='local'" :src="details.video_url"/>
<source type="video/mp4" v-else-if="details.video_type=='link'" :src="details.video_source_url"/>
</video>
</div>
<div class="main">
<div class="navs">
<div class="nav-title" style="color:#333;">{{details.title}}</div>
<div class="nav-con">
<div class="nav-time">{{details.published_time}}</div>
<!-- <div class="nav-see">
<img src="../../assets/images/index/see.png" class="nav-see-img" alt="" />
{{details.hits}}
</div> -->
</div>
</div>
<div class="nav-head">
<router-link :to='"/Doctor/"+ details.doctor.user.id'>
<div style="display: flex; align-items: center;">
<div class="li-nav-head">
<!-- <van-image lazy-load radius='82px' class="li-nav-head-img" src="https://cn.bing.com/th?id=OHR.WhirlpoolFinland_ZH-CN6473757145_UHD.jpg&rf=LaDigue_UHD.jpg&pid=hp&w=1920&h=1080&rs=1&c=4" /> -->
<van-image lazy-load radius='82px' class="li-nav-head-img" :src="details.doctor.work_img?details.doctor.work_img:''" />
<img class="li-nav-head-V" src="../../assets/images/index/tips.png" alt="">
</div>
<div class="li-nav-title">
<div class="li-nav-name">
{{details.doctor.name}}
</div>
<p class="li-nav-text">{{details.doctor.hospital?details.doctor.hospital.name:""}} {{details.doctor.job_title?details.doctor.job_title.name:""}}</p>
</div>
</div>
</router-link>
<div class="li-nav-follows" v-if="!details.doctor.is_followed" @click="Followeds(details.doctor.is_followed,details.doctor.user.id)">+ 关注</div>
<div class="li-nav-follows iSfollows" v-else @click="Followeds(details.doctor.is_followed,details.doctor.user.id)">已关注</div>
</div>
<div class="content" v-html="$options.filters.replaces(details.body)"></div>
<div class="list-nav" v-if="list.length !== 0">
<div class="deGood-title list-nav-title" >文章</div>
<!-- <p>更多 <Icon name="arrow" size='14' color='#999999' /></p> -->
</div>
<List iSdynamic :list='list' finishedText='' :paging='paging' @Give='Give' v-if="paging.total"></List>
<!-- <div class="more" v-if="list.length !== 0">查看更多<Icon name="arrow" size='18' color='#12bfd2'/></div> -->
<div class="listDetailsAd" v-if='enable.enable==1'>
<van-image lazy-load class="listDetailsAd-img" :src="enable.poster" />
</div>
<div class="empty"></div>
<div class="position">
<div class="zan" @click="Give({id:details.id,status:details.is_liked,category:true})">
<img src="../../assets/images/index/zan.png" alt="" class="zan-img" v-if='!details.is_liked'/>
<img src="../../assets/images/index/zans.png" alt="" class="zan-img" v-else/>
{{details.ups_num}}
</div>
<div class="zan" @click="Share">
<img src="../../assets/images/index/see.png" class="nav-see-img" alt="" />
{{details.hits}}
</div>
</div>
</div>
<router-link :to="{path:'/SelectedCases',query:{id:details.doctor.user.id}}">
<div class="footer" v-if="details.doctor.consult_enable == 1" style="position:initial;" >
<img src="../../assets/images/index/network.png" alt="" class="footer-img"/>
<!-- -->
网络咨询
</div>
</router-link>
</div>
</template>
<script>
import{ Image, Icon ,Toast,Dialog} from "vant"
import List from '../components/List'
import { Jssdk } from '../../api/jssdk';
import { getArticlesList, getGive, deleteGive, getArticlesDetails } from '../../api/home'
import { getSettings, } from '../../api/settings'
import { followed, cancelFollow, followingsList } from '@/api/follow'
var wx = require('weixin-js-sdk')
export default {
components: { 'van-image':Image, Icon,List,},
data(){
return{
id:0,
details:{doctor:{hospital:{},user:{},job_title:{}}},
listQuery:{
sort:"popular",
offset:0,
limit:15
},
list:[],
paging:{},
show:true,
mobile:"",
text:"",
enable:{},
}
},
filters:{
replaces(val){
return val.replace(/\<img/gi, '<img style="max-width:100%;height:auto"')
}
},
created(){
this.$route.meta.title= ''
this.Jssdks()
},
beforeRouteLeave(to, form, next) {
this.$route.meta.title= ''
next()
},
mounted(){
this.id = this.$route.params.id
this.getDetails(this.id)
this.settings()
},
updated(){
if(this.details.type == 'video'){
this.initVideo();
}
},
watch:{
'$route'(to, from){
this.id = to.params.id
this.getDetails(this.id)
},
},
methods:{
Followeds(status,id){
if(!status){
followed({user_id:id}).then(res=>{
if(res.followed){
this.details.doctor.is_followed= true
}else{
Toast('关注失败')
}
})
}else{
cancelFollow(id).then(res=>{
if(res.cancelFollow){
this.details.doctor.is_followed= false
}else{
Toast('取消关注失败')
}
})
}
},
Jssdks(){
let url = location.href.split('#')[0]
console.log(url)
Jssdk({url,}).then(res=>{
console.log(res)
const debug = res.debug
const appId = res.appId
const timestamp = res.timestamp
const nonceStr = res.nonceStr
const signature = res.signature
wx.config({
debug: debug,
appId: appId,
timestamp: timestamp,
nonceStr: nonceStr,
signature: signature,
jsApiList: [
'checkJsApi',
'updateAppMessageShareData',
'updateTimelineShareData',
'onMenuShareAppMessage',
'onMenuShareTimeline']
})
wx.checkJsApi({
jsApiList:[
'updateAppMessageShareData',
'updateTimelineShareData',
'onMenuShareTimeline',
'onMenuShareAppMessage'
],
success:(res)=>{
console.log(res)
}
});
wx.ready(function(ready){
});
wx.error(function(error){
console.log(error)
console.log('error')
});
})
},
Share(){
},
initVideo() {
this.$nextTick(() => {
let myPlayer = this.$video(document.getElementById('myVideo'), {
controls: true,
autoDisable: true,
autoplay: false,
preload: "auto",
language: 'zh-CN',
notSupportedMessage: '此视频暂时无法播放',
controlBar:{
playToggle:true
},
});
})
},
getDetails(id){
window.scrollTo(0,0);
let _this = this
getArticlesDetails(id).then(res=>{
console.log('*************',res)
_this.details=res
_this.$route.meta.title= res.title
wx.updateAppMessageShareData({
title: res.title,
desc: res.simple_body || '大医谱爱，健康未来',
link: location.href.split('#')[0] +'/#/ListDetails/'+res.id+"?status=true",
imgUrl: res.poster_url,
success: function () {
},
cancel: function () {
}
})
wx.updateTimelineShareData({
title: res.title,
desc: res.simple_body || '大医谱爱，健康未来',
link: location.href.split('#')[0] +'/#/ListDetails/'+ res.id +"?status=true",
imgUrl: res.poster_url,
success: function () {
},
cancel: function () {
}
})
_this.listQuery.doctor_user_id = res.doctor.id
getArticlesList(_this.listQuery).then(response=>{
console.log(response)
_this.list=response.data
_this.paging = response.paging
})
})
},
Give(obj){
if(!obj.status){
getGive(obj.id).then(res=>{
console.log(res)
if(res.success){
if(obj.category){
this.details.is_liked = true
this.details.ups_num = this.details.ups_num + 1
}else{
let list = this.list
for(let i in list){
if(list[i].id == obj.id){
list[i].is_liked = true
list[i].ups_num = list[i].ups_num+1
}
}
this.list=list
}
}
})
}else{
deleteGive(obj.id).then(res=>{
if(res.success){
if(obj.category){
this.details.is_liked = false
this.details.ups_num = this.details.ups_num - 1 < 0 ? 0 : this.details.ups_num - 1
}else{
let list = this.list
for(let i in list){
if(list[i].id == obj.id){
list[i].is_liked = false
list[i].ups_num = list[i].ups_num - 1 < 0 ? 0 :list[i].ups_num - 1
}
}
this.list=list
}
}
})
}
},
settings(){
getSettings('articleAdvert').then(res=>{
console.log(res)
this.enable=res
})
}
},
}
</script>
<style lang="css">
.video-js .vjs-big-play-button{
width: 102px !important;
height: 102px !important;
border-radius: 50% !important;
line-height: 92px !important;
}
.vjs-big-play-centered .vjs-big-play-button{
margin-top: -51px!important;
margin-left: -51px !important;
}
</style>
<style scoped>
@import url('../../assets/css/listDetails.css');
@import url("../../assets/css/doctor.css");
</style>
扫一扫
1244
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
