hengmei-two/pagesB/problemDetail/problemDetail.vue

648 lines
22 KiB
Vue
Raw Blame History

This file contains invisible Unicode characters!

This file contains invisible Unicode characters that may be processed differently from what appears below. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to reveal hidden 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 v-if="invite_code==''" :titleVal="'分类'" :statusTitle="true"></status-nav>
<view v-if="invite_code!=''" class="status-box statusHNH" style="background-color: #FFFFFF;">
<view :style="{height:statusBarHeight+'px'}"></view>
<view class="status-nav">
<!-- 标题 -->
<view class="tab-title tcenter" style="color: #000000;">分类</view>
</view>
</view>
<!-- 列表 -->
<view :style="{top: statusHNH+'px'}" class="posiszy" style="height: 50px;">
<view class="bacf pad-zy32 pad-sx20">
<cate-pu @choosecateEv="choosecateEv" :activeb="invite_code!=''?'#3875F6':publicColor"
:newCurrent="cateCurrent*1" :newbmo="'#F2F2F2'" :isCenter="false" :newcateList="cateList"></cate-pu>
</view>
</view>
<view class="pad-x180" :style="{paddingTop: (statusHNH+50)+'px'}">
<view v-if="isLoading" class="pad-s30">
<view v-show="cateCurrent==isNum">
<view class="pad-zy32">
<!-- 自定义轮播 -->
<swiper-pu :browseP="true" :isplay="isAutoPlay" :bannerList="bannerList" :newHeight="newHeight"
:newRadius="'10'" :newBottom="'5'"></swiper-pu>
<!-- 标题 -->
<view class="fon36 col3 bold mar-sx20 clips2" style="line-height: 50rpx;">{{detailObj.title}}
</view>
<view class="disjbac">
<view class="disac">
<!-- 发布者头像 -->
<image class="flexs" :src="fabImg || '/static/public/logo.png'"
style="width: 60rpx;height: 60rpx;border-radius: 100%;" mode="aspectFill"></image>
<view class="mar-z10">
<!-- 发布者昵称 -->
<view class="fon28 col3 clips1">{{detailObj.published_by || '恒美植发'}}</view>
<!-- 发布时间 -->
<view class="fon20 col9" style="margin-top: 6rpx;">{{detailObj.published_at}}发布
</view>
</view>
</view>
<view class="disac flexs">
<view class="disac fc" @tap="tapLike" style="width: 60rpx;">
<image v-if="isDetailLike" src="/static/public/detail-like.png"
style="width: 42rpx;height: 42rpx;" mode=""></image>
<image v-else src="/static/public/detail-nlike.png"
style="width: 42rpx;height: 42rpx;" mode=""></image>
<view class="fon24 col9 tc">{{likeCon}}</view>
</view>
<view @tap="shareEv" class="disac fc mar-zy36 posir">
<image src="/static/public/weix.png" style="width: 42rpx;height: 42rpx;" mode=""></image>
<view class="fon24 col9">分享</view>
<button class="posia" open-type="share"
style="top: 0;right: 0;left: 0;bottom: 0;opacity: 0;">分享</button>
<!-- <button v-if="haveImg" class="posia" open-type="share" style="top: 0;right: 0;left: 0;bottom: 0;opacity: 0;">分享</button> -->
</view>
<view class="disac fc" @tap="tapConllection">
<image v-if="isDetailConllection" src="/static/public/yconllection.png"
style="width: 44rpx;height: 44rpx;" mode=""></image>
<image v-else src="/static/public/conllection.png"
style="width: 44rpx;height: 44rpx;" mode=""></image>
<view class="fon24 col9">收藏</view>
</view>
</view>
</view>
<!-- 内容详情 -->
<view class="fon28 mar-s20" style="color: #1A1A1A; line-height: 40rpx;">
<rich-text :nodes="detailInfo"></rich-text>
</view>
</view>
<!-- <view class="pad-zy20" v-show="cateCurrent==1"> -->
<view class="pad-zy20">
<view class="fon30 bold tc mar-sx40" :style="{color:publicColor}">相关推荐</view>
<!-- 相关推荐列表 -->
<list-pu @chooseLike="chooseLikex" @comfirmev="comfirmevx" :list="xgList"></list-pu>
</view>
<view class="tc fon28 bold" style="color: #fff;background-color: #3875f6;padding: 20rpx;" @tap="backEv">更多{{contentVal}}>></view>
<!-- <view class="tc fon28 bold" style="color: #3875f6;background-color: #CCCCCC;padding: 20rpx;" @tap="backEv">更多{{cateList[cateCurrent].title}}>></view> -->
<view class="pad-zy20">
<view class="fon30 bold tc mar-sx40" :style="{color:publicColor}">推荐医生</view>
<!-- 推荐医生列表 -->
<list-doctor v-if="dataList.length!=0" :list="dataList"></list-doctor>
<view v-if="dataList.length==0" class="disjcac fc" style="margin-top: 10%;">
<image class="zanw-img" src="/static/public/nothing.png" mode="aspectFill"></image>
<!-- <view class="fon24 col3">暂无推荐医生</view> -->
</view>
</view>
</view>
<!-- <view v-show="cateCurrent==index && isNum!=index" v-for="(item,index) in allArr" :key="index" class="pad-zy20">
<view v-if="item.length!=0">
<list-pu @chooseLike="chooseLike" @comfirmev="comfirmev" :list="item"></list-pu>
</view>
<view v-else class="disjcac fc" style="margin-top: 40%;">
<image class="zanw-img" src="/static/public/nothing.png" mode="aspectFill"></image>
<view class="fon24 col3">暂无内容</view>
</view>
</view> -->
<view v-if="cateCurrent!=isNum">
<view v-if="allList.length!=0" class="pad-zy20">
<list-pu @chooseLike="chooseLike" @comfirmev="comfirmev" :list="allList"></list-pu>
</view>
<view v-else class="disjcac fc" style="margin-top: 40%;">
<image class="zanw-img" src="/static/public/nothing.png" mode="aspectFill"></image>
<view class="fon24 col3">暂无内容</view>
</view>
</view>
</view>
<view class="posixzy disjbac bacf pad-zy32 btnBKS">
<view class="posir">
<image @tap="backHome" class="posia backH" src="/static/public/back-home-02.png" mode="aspectFill"></image>
</view>
<view class="disac fon26 colf">
<view @tap="lianK" class="disac posir lianShare"
style="background-color: #3875F6; border-top-left-radius: 51rpx;border-bottom-left-radius: 51rpx;">
<image src="/static/public/bottom-customer.png" class="mar-zy20"
style="width: 47rpx;height: 47rpx;" mode="aspectFill"></image>
<view>联系客服</view>
<button v-if="haveImg" class="fon24 posia" style="opacity: 0;top: 0;left: 0;right: 0;bottom: 0;"
open-type="contact">客服</button>
</view>
<view @tap="shareEv" class="disac posir lianShare"
style="background-color: #38CE51;border-top-right-radius: 51rpx;border-bottom-right-radius: 51rpx;">
<image src="/static/public/bottom-shear.png"
style="width: 47rpx;height: 47rpx;margin-left: 15rpx;margin-right: 8rpx;" mode="aspectFill">
</image>
<view>分享给好友</view>
<button v-if="haveImg" class="posia" open-type="share"
style="top: 0;right: 0;left: 0;bottom: 0;opacity: 0;">分享</button>
</view>
</view>
</view>
<!-- 返回顶部 -->
<!-- <back-top :showTop="showTop" @backTop="backTop"></back-top> -->
<!-- 弹框授权 -->
<empower @buttonH="buttonH" :vision="vision" :isWhere="2" @cancleEv="cancleEv"></empower>
<!-- 弹框 -->
<auth-phone v-if="isShowP"></auth-phone>
</view>
</view>
</template>
<script>
import listDoctor from '@/components/list-doctor.vue';
import swiperPu from '@/components/swiper-pu.vue';
import {
collectionEV,
cancleCollectionEV
} from '@/jsFile/publicAPI.js';
export default {
components: {
listDoctor,
swiperPu,
},
data() {
return {
statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
isLoading: false,
vision: false,
statusHNH: uni.getStorageSync('statusHNH'),
publicColor: uni.getStorageSync('publicColor') || '#3875F6', //主题颜色
cateCurrent: 0,
haveImg: true,
cateList: [],
bannerList: [], //轮播
xgList: [ //相关推荐
],
dataList: [ //推荐医生
],
showTop: false,
isDetailLike: false, //是否喜欢
likeCon: '点赞',
isDetailConllection: false, //是否已收藏
isNum: 0,
listArrone: [], //问题
listArrtwo: [ //案例日记
],
listArrthree: [ //效果模拟
],
listArrfour: [ //科普视频
],
detailObj: {}, //详情
detailInfo: '', //富文本
category_id: '', //栏目ID
active: '', //是否是详情页
// jieDuan:false,
share_id: 0,
invite_code: '',
isShowP: false,
bcurrent: 0,
isAutoPlay: false,
fabImg: '' ,//发布者头像
allArr:[],
page:1,
size:20,
total:0,
isZanw:true,
allList:[],
contentVal:'',
newHeight:'450'
}
},
onPageScroll(e) {
e.scrollTop > 360 ? this.showTop = true : this.showTop = false
},
onReachBottom() { //触底事件
if(this.cateCurrent!=this.isNum){
if(this.total!=this.allList.length){
this.page++
this.checkList(this.cateCurrent)//调用自主预约列表事件
} else {
if(this.isZanw) this.$toolAll.tools.showToast('暂无更多列表','none',1000)
this.isZanw = false
}
}
},
onShareTimeline() {},
onShareAppMessage(res) {
var ya = this;
this.$requst.post('user/record', {
type: 'content',
action: 'share',
id: this.detailObj.id
}).then(res => {
console.log('分享成功:', res);
}, error => {})
let maiOjb = {
e: 4, //内容分享
c: this.detailObj.id * 1,
t: new Date().getTime() //当前时间戳
}
this.$toolAll.tools.maiDian(maiOjb)
var shareObj = {
title: `${ya.detailObj.title}`, // 默认是小程序的名称(可以写slogan等)
path: `/pagesB/problemDetail/problemDetail?id=${this.detailObj.id}&category_id=${this.category_id}&share_id=${uni.getStorageSync('userId')}&invite_code=${uni.getStorageSync('invite_code')}`, // 默认是当前页面,必须是以‘/’开头的完整路径
imageUrl: ya.$http + ya.detailObj
.share_img //自定义图片路径可以是本地文件路径、代码包文件路径或者网络图片路径支持PNG及JPG不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
};
return shareObj;
},
onShow() {
this.isAutoPlay = true;
},
onHide() {
this.isAutoPlay = false;
},
onUnload() {
this.isAutoPlay = false;
},
onLoad(options) {
//查询过期时间和是否有token并调用登录事件
this.$toolAll.tools.overdue();
if (options.category_id != undefined) {
this.category_id = options.category_id
if(options.invite_code!=undefined){this.invite_code = options.invite_code;}
if (options.share_id != undefined){this.share_id = options.share_id;}
this.checkDetail(options.id);
let maiOjb = {
e: 1, //内容访问
c: options.id * 1,
t: new Date().getTime() //当前时间戳
}
this.$toolAll.tools.maiDian(maiOjb);
if(uni.getStorageSync('phone_active')!=1){
this.vision = true;
this.loginEv(options);
}
}
},
methods: {
loginEv(options) {
uni.login({
provider: 'weixin',
success: (res) => {
if (res.code) {
var params = {
code: res.code,
invite_code: options.invite_code || '', //用户邀请码
source_code: options.source_code || '',
channel: options.channel || ''
}
this.$requst.post('user/login', params).then(res => {
if (res.data.token != '') {
if (res.data.is_active == 0) {
this.haveImg = false;
}
}
}, error => {})
}
},
});
},
chooseLike(e) { //收藏事件
// console.log(this.dataList[e].is_collected);
if (this.allList[e].is_collected == 0) {
this.allList[e].is_collected = 1
// 调用收藏事件
collectionEV({
action: 'collect',
archive_id: this.allList[e].id
})
}
},
comfirmev(e) { //确认取消收藏事件
this.allList[e].is_collected = 0;
this.$toolAll.tools.showToast('正在取消...', 'loading')
// 调用取消收藏事件
cancleCollectionEV({
action: 'collect',
archive_id: this.allList[e].id
})
},
chooseLikex(e) { //收藏事件
if (this.xgList[e].is_collected == 0) {
this.xgList[e].is_collected = 1
// 调用收藏事件
collectionEV({
action: 'collect',
archive_id: this.xgList[e].id
})
}
},
comfirmevx(e) { //确认取消收藏事件
this.xgList[e].is_collected = 0
this.$toolAll.tools.showToast('正在取消...', 'loading')
// 调用取消收藏事件
cancleCollectionEV({
action: 'collect',
archive_id: this.xgList[e].id
})
},
buttonH(e) { //授权成功
this.haveImg = e
if (e) {
this.vision = false
this.isShowP = true
}
},
cancleEv(e) { //取消授权
if (e == 0) this.vision = false
},
backHome() {
uni.navigateTo({
url: '/pages/tabbar/pagehome/pagehome'
})
},
lianK() { //客服
if (this.haveImg) {
this.$requst.post('user/rand-bind-service').then(res => {})
this.$toolAll.tools.closeTimer() //清空埋点倒计时
this.$requst.post('user/record', {
type: 'other',
action: 'ask',
id: 0
}).then(res => {}, error => {})
let maiOjb = {
e: 5, //内容咨询
t: new Date().getTime() //当前时间戳
}
this.$toolAll.tools.maiDian(maiOjb);
} else {
this.vision = true
}
},
shareEv() {
if (this.haveImg == false) {
this.vision = true
}
},
checkDetail(newId) {
this.$requst.post('archives/detail', {
id: newId,
share_id: this.share_id
}).then(res => {
// console.log('详情数据:',res);
if (res.code == 0) {
this.isLoading = true
// 栏目类别
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
}
this.cateList.push(cateObj)
this.allArr.push([]);
// 默认选中的栏目
if (item.active == 1) this.active = this.cateCurrent = index
// 默认展示栏目详情
if (this.category_id == item.id) this.isNum = index
})
this.contentVal = this.cateList[this.cateCurrent].title.slice(2);
if(this.cateList[this.cateCurrent].title== '毛发百科' || this.cateList[this.cateCurrent].title== '科普视频') {
this.newHeight = '200';
}
}
if (this.invite_code != '' && this.invite_code != undefined) {
const query = wx.createSelectorQuery()
query.select('.statusHNH').boundingClientRect((rect) => {
// console.log('状态栏+标题栏:',rect);
this.statusHNH = rect.height
// console.log(this.statusHNH );
}).exec()
}
// 详情
this.detailObj = res.data.detail;
if (this.detailObj.published_headimgurl != '') {
this.fabImg = this.$http + this.detailObj.published_headimgurl;
}
let maiOjb = {
e: 1, //内容访问
c: this.detailObj.id * 1,
t: new Date().getTime() //当前时间戳
}
this.$toolAll.tools.maiDian(maiOjb)
if (this.detailObj.is_liked == 1) {
if (this.detailObj.likes >= 1000) this.likeCon = '999+'
else this.likeCon = this.detailObj.likes
}
// 轮播
// 图片字符串转数组
let arrImg = this.detailObj.images.split(',')
arrImg.forEach(item => {
let newImgObj = {
imgSrc: this.$http + item,
url: '',
isVideo: false,
poster: '',
}
// 存图片
this.bannerList.push(newImgObj)
})
// 存视频
if (this.detailObj.video != '') {
this.bannerList[0] = {
imgSrc: this.$http + arrImg[0],
url: this.$http + this.detailObj.video,
isVideo: true,
poster: '',
}
}
// 默认显示是否收藏
if (this.detailObj.is_collected == 0) this.isDetailConllection = false
if (this.detailObj.is_collected == 1) this.isDetailConllection = true
if (this.detailObj.is_liked == 0) this.isDetailLike = false
if (this.detailObj.is_liked == 1) this.isDetailLike = true
// 富文本
this.detailInfo = this.$toolAll.tools.escape2Html(this.detailObj.content)
// 相关推荐xgList
if(this.cateList[this.cateCurrent].title=='日记分享') {
if (res.data.diary.length != 0) {
res.data.diary.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") //是否是视频
}
if (item.cover != '' && item.video == '') {
this.xgList.push(tObj)
}
})
}
} else {
this.relevant();
}
// 推荐医生
if (res.data.doctor.length != 0) {
res.data.doctor.forEach(item => {
let doObj = {
id: item.id,
imgSrc: item.headimg != null ? item.headimg : '',
name: item.name,
cyear: parseFloat(item.work_time),
bmen: item.dept_name,
zcheng: '主任医师',
goodAt: item.diseases,
show_detail: item.show_detail
}
this.dataList.push(doObj)
})
}
this.choosecateEv(this.cateCurrent)
}
}, error => {})
},
relevant(){
this.$requst.post('archives/category', {
category_id: this.cateList[this.cateCurrent].id,
keyword: '',
page:this.page,
size:this.size
}).then(res => {
if(res.code==0){
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") //是否是视频
}
if (item.cover != '' && item.video == '') {
this.xgList.push(tObj)
}
})
}
}
})
},
choosecateEv(e) {
this.page = 1;
this.isZanw = true;
this.checkList(e);
},
checkList(e){
this.$requst.post('archives/category', {
category_id: this.cateList[e].id,
keyword: '',
page:this.page,
size:this.size
}).then(res => {
// console.log('该分类下的列表:',res);
if (res.code == 0) {
if(this.page==1) {
if(this.active != e) this.allList = [];
uni.pageScrollTo({
scrollTop:0,
duration:0
})
}
this.total = res.data.list.total;
if (res.data.list.list.length != 0) {
res.data.list.list.forEach(item => {
let num = item.video.search(".mp4")
let isVideo = false
if (num != '-1') isVideo = true
let arrObj = {
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: '/static/public/logo.png', //发布者头像
name: '恒美植发', //发布者昵称
isVideo: isVideo //是否是视频
}
if (item.cover != '') {
this.allList.push(arrObj);
}
})
}
this.cateCurrent = e;
} else this.$toolAll.tools.showToast(res.msg);
}, error => {})
},
tapLike() { //喜欢、不喜欢事件
if(this.haveImg){
this.isDetailLike = !this.isDetailLike
if (this.isDetailLike) {
this.detailObj.likes++
this.likeCon = this.detailObj.likes
if (this.likeCon >= 1000) this.likeCon = '999+'
} else {
this.detailObj.likes--
this.likeCon = '喜欢'
}
let isLikeCon = 'like'
//调用点赞事件
if (this.isDetailLike) collectionEV({
action: isLikeCon,
archive_id: this.detailObj.id
})
//调用取消点赞事件
else cancleCollectionEV({
action: isLikeCon,
archive_id: this.detailObj.id
})
} else {
// 调起授权弹框
this.vision = true;
}
},
tapConllection() { //收藏、取消收藏事件
let isLikeCon = 'collect'
if(this.haveImg){
// 调用收藏事件
if (!this.isDetailConllection) collectionEV({
action: isLikeCon,
archive_id: this.detailObj.id
})
// 调用取消收藏事件
else cancleCollectionEV({
action: isLikeCon,
archive_id: this.detailObj.id
})
this.isDetailConllection = !this.isDetailConllection
} else {
// 调起授权弹框
this.vision = true;
}
},
backTop() { //回到顶部事件
uni.pageScrollTo({
scrollTop: 0,
duration: 300
});
},
backEv(){
uni.navigateBack({delta:1})
}
}
}
</script>
<style>
</style>