301 lines
9.7 KiB
Vue
301 lines
9.7 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<!-- 状态栏 -->
|
||
|
|
<view class="status-box statusHNH">
|
||
|
|
<view :style="{height:statusBarHeight+'px',background:publicColor}"></view>
|
||
|
|
<view class="status-nav" :style="{background:publicColor}">
|
||
|
|
<!-- 标题 -->
|
||
|
|
<view class="tab-title tcenter" style="color: #FFFFFF;">首页</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- <status-nav :titleVal="'首页'" :backgroudColor="publicColor" :tabcolor="'#FFFFFF'" :statusBack="false" :statusTitle="true"></status-nav> -->
|
||
|
|
<!-- 输入框 -->
|
||
|
|
<view class="input-box posiszy" :style="{top: statusHNH+'px',background:publicColor}" style="height: 50px;display: flex;align-items: center;">
|
||
|
|
<view class="disac width100">
|
||
|
|
<image class="searchImg flexs" src="/static/public/search.png" mode="aspectFill"></image>
|
||
|
|
<!-- 输入框 -->
|
||
|
|
<input class="width100 fon28" type="text" v-model="searchVal" placeholder="请输入问题/病种/医生姓名"/>
|
||
|
|
<!-- 竖线 -->
|
||
|
|
<view class="linev"></view>
|
||
|
|
<!-- 搜索 -->
|
||
|
|
<view @tap="searchEv" class="searchT flexs" :style="{color:publicColor}">搜索</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="mar-s10 pad-x180">
|
||
|
|
<!-- 自定义轮播 -->
|
||
|
|
<view :style="{marginTop: (statusHNH+60)+'px'}">
|
||
|
|
<swiper-pu></swiper-pu>
|
||
|
|
</view>
|
||
|
|
<!-- 宫格 -->
|
||
|
|
<view v-if="gonggList.length>1" class="mar-zy30 bacf radius10 pad-s25 mar-s10 disac fw">
|
||
|
|
<view class="disac fc gongg-box mar-x25" style="width: 25%;" @tap="chooseGon(indexgg)" v-for="(itemgg,indexgg) in gonggList" :key="indexgg">
|
||
|
|
<view class="img-box">
|
||
|
|
<image :src="itemgg.src" mode="aspectFill"></image>
|
||
|
|
</view>
|
||
|
|
<view class="fon24">{{itemgg.title}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- 发问 -->
|
||
|
|
<view class="mar-zy30 mar-sx20 disjb">
|
||
|
|
<image class="flexs mar-y20 radius30 fawen-img" src="/static/public/wen-one.png" mode="aspectFill"></image>
|
||
|
|
<view class="disjb fc width100">
|
||
|
|
<image class="radius30 width100 fawen-itemImg" src="/static/public/wen-two.png" mode=""></image>
|
||
|
|
<image class="radius30 width100 fawen-itemImg" src="/static/public/wen-three.png" mode=""></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- 热门搜索 -->
|
||
|
|
<view v-if="isLoading" class="mar-zy30 mar-s50">
|
||
|
|
<view class="col2c fon36 bold mar-x36">热门搜索</view>
|
||
|
|
<view class="bacf fon24 disac fw radius20 pad-zy20 pad-s20">
|
||
|
|
<view @tap="chooseReEv(indexf)" v-for="(itemf,indexf) in fwList" :key="indexf" class="disac radius10 mar-x20 reitem-box">
|
||
|
|
<image src="/static/public/hot.png" mode="aspectFill"></image>
|
||
|
|
<view>{{itemf.title}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- 恒美小课堂 -->
|
||
|
|
<view v-if="isLoading" class="mar-zy30 mar-s40">
|
||
|
|
<view class="col2c fon36 bold">恒美小课堂</view>
|
||
|
|
<!-- 自定义二级分类 -->
|
||
|
|
<view class="mar-s50 mar-x30">
|
||
|
|
<cate-pu :activeb="publicColor" :newcateList="ktList" :isMinW="true" :newCurrent="newCurrent*1" @choosecateEv="choosecateEv" :newbmo="'#E0E0E0'"></cate-pu>
|
||
|
|
</view>
|
||
|
|
<!-- 列表 -->
|
||
|
|
<list-pu @chooseLike="chooseLike" @comfirmev="comfirmev" :list="dataList"></list-pu>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- 底部tab -->
|
||
|
|
<foot-tab></foot-tab>
|
||
|
|
<!-- 返回顶部 -->
|
||
|
|
<!-- <back-top :showTop="showTop" @backTop="backTop"></back-top> -->
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import swiperPu from '@/components/swiper-pu.vue';
|
||
|
|
import {collectionEV,cancleCollectionEV} from '@/jsFile/publicAPI.js';
|
||
|
|
export default {
|
||
|
|
components:{
|
||
|
|
swiperPu
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
statusBarHeight:uni.getSystemInfoSync().statusBarHeight,
|
||
|
|
statusHNH:uni.getStorageSync('statusHNH'),
|
||
|
|
searchVal:'',//输入框的值
|
||
|
|
publicColor:uni.getStorageSync('publicColor'),//主题颜色
|
||
|
|
gonggList:[//九宫格列表
|
||
|
|
// {src:'/static/public/tuof.png',title:'脱发'},
|
||
|
|
// {src:'/static/public/zhif.png',title:'植发'},
|
||
|
|
// {src:'/static/public/toub.png',title:'头发百科'},
|
||
|
|
// {src:'/static/public/tous.png',title:'头发视频'},
|
||
|
|
// {src:'/static/public/zhir.png',title:'植发日记'},
|
||
|
|
// {src:'/static/public/zhij.png',title:'植发价格'},
|
||
|
|
{src:'/static/public/zhis.png',title:'植发医生'},
|
||
|
|
{src:'/static/public/gengd.png',title:'更多'},
|
||
|
|
],
|
||
|
|
fwList:[//热搜关键词
|
||
|
|
{title:'植发需要多少钱'},
|
||
|
|
{title:'疤痕植发'},
|
||
|
|
{title:'眉毛种植'},
|
||
|
|
{title:'胡须种植'},
|
||
|
|
{title:'我为什么会脱发'},
|
||
|
|
{title:'头发如何保养'},
|
||
|
|
],
|
||
|
|
kcurrent:0,//默认选中第一项
|
||
|
|
ktList:[//恒美小课堂
|
||
|
|
// {title:'发际线'},
|
||
|
|
// {title:'秃顶种植'},
|
||
|
|
// {title:'胡须种植'},
|
||
|
|
// {title:'眉毛种植'},
|
||
|
|
// {title:'头发种植'},
|
||
|
|
],
|
||
|
|
dataList:[//小课堂数据列表
|
||
|
|
// {
|
||
|
|
// status:false,
|
||
|
|
// main_img:'/static/public/main_img.png',
|
||
|
|
// title:'恒美小课堂',
|
||
|
|
// content:'饺子会吃肉？',
|
||
|
|
// head_img:'/static/public/like.png',
|
||
|
|
// name:'吃肉的饺子',
|
||
|
|
// isCate:0,
|
||
|
|
// isVideo:false
|
||
|
|
// },
|
||
|
|
],
|
||
|
|
showTop:false,
|
||
|
|
newCurrent:0,
|
||
|
|
page:1,
|
||
|
|
size:10,
|
||
|
|
total:'',//总数
|
||
|
|
isZanw:true,
|
||
|
|
course_id:0,
|
||
|
|
isLoading:false,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onPageScroll(e) {
|
||
|
|
e.scrollTop > 360 ? this.showTop = true : this.showTop = false
|
||
|
|
},
|
||
|
|
onReachBottom() {//触底事件
|
||
|
|
if(this.total!=this.dataList.length){
|
||
|
|
this.page++
|
||
|
|
this.checkKT()//调用自主预约列表事件
|
||
|
|
} else {
|
||
|
|
if(this.isZanw) this.$toolAll.tools.showToast('暂无更多列表','none',1000)
|
||
|
|
this.isZanw = false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
let maiOjb = {
|
||
|
|
e:6,//进入首页
|
||
|
|
t:new Date().getTime()//当前时间戳
|
||
|
|
}
|
||
|
|
this.$toolAll.tools.maiDian(maiOjb)
|
||
|
|
if(uni.getStorageSync('token')!='' && uni.getStorageSync('chu')=='') {
|
||
|
|
this.$toolAll.tools.daoTime()
|
||
|
|
uni.setStorageSync('chu',1)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
const query = wx.createSelectorQuery()
|
||
|
|
query.select('.statusHNH').boundingClientRect((rect) => {
|
||
|
|
// console.log('状态栏+标题栏：',rect.height);
|
||
|
|
uni.setStorageSync('statusHNH',rect.height)
|
||
|
|
this.statusHNH = rect.height
|
||
|
|
}).exec()
|
||
|
|
this.checkKT()
|
||
|
|
this.checkBCate()
|
||
|
|
this.checkKey()
|
||
|
|
this.$toolAll.tools.buriedPointAll()//查询需要埋点的事件id
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
checkKey(){
|
||
|
|
this.$requst.get('index/hot-keywords').then(res=>{
|
||
|
|
console.log('关键词列表：',res);
|
||
|
|
},error=>{})
|
||
|
|
},
|
||
|
|
checkBCate(){
|
||
|
|
this.$requst.post('index/mini-program-setting').then(res=>{
|
||
|
|
// console.log('数据：',res);
|
||
|
|
if(res.code==0){
|
||
|
|
if(res.data.length!=0){
|
||
|
|
if(res.data.recommend.length!=0){
|
||
|
|
res.data.recommend.forEach(item=>{
|
||
|
|
let bcObj = {
|
||
|
|
src:this.$http + item.icon,
|
||
|
|
url:item.link,
|
||
|
|
title:item.name
|
||
|
|
}
|
||
|
|
this.gonggList.push(bcObj)
|
||
|
|
})
|
||
|
|
this.gonggList.push({src:'/static/public/gengd.png',title:'更多'},)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},error=>{})
|
||
|
|
},
|
||
|
|
checkKT(){//查询恒美小课堂
|
||
|
|
let parmas = {
|
||
|
|
course_id:this.course_id,//课堂ID
|
||
|
|
page:this.page,
|
||
|
|
size:this.size
|
||
|
|
}
|
||
|
|
this.$requst.post('archives/course',parmas).then(res=>{
|
||
|
|
// console.log('恒美小课堂列表：',res);
|
||
|
|
if(res.code==0){
|
||
|
|
// 课堂栏目
|
||
|
|
if(res.data.course.length!=0){
|
||
|
|
this.ktList = []
|
||
|
|
res.data.course.forEach(item=>{
|
||
|
|
let lObj = {
|
||
|
|
id:item.id,
|
||
|
|
title:item.title,
|
||
|
|
active:item.active
|
||
|
|
}
|
||
|
|
this.ktList.push(lObj)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
// 课堂列表
|
||
|
|
if(this.page==1) this.dataList = []
|
||
|
|
if(res.data.list.list.length!=0){
|
||
|
|
this.total = res.data.list.total
|
||
|
|
res.data.list.list.forEach(item=>{
|
||
|
|
let num = item.video.search(".mp4")
|
||
|
|
let isVideo = false
|
||
|
|
if(num!='-1') isVideo = true
|
||
|
|
let ktObj = {
|
||
|
|
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//是否是视频
|
||
|
|
}
|
||
|
|
this.dataList.push(ktObj)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
this.isLoading = true
|
||
|
|
}
|
||
|
|
},error=>{})
|
||
|
|
},
|
||
|
|
chooseLike(e){//收藏事件
|
||
|
|
// console.log(this.dataList[e].is_collected);
|
||
|
|
if(this.dataList[e].is_collected==0){
|
||
|
|
this.dataList[e].is_collected = 1
|
||
|
|
// 调用收藏事件
|
||
|
|
collectionEV({action:'collect',archive_id:this.dataList[e].id})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
comfirmev(e){//确认取消收藏事件
|
||
|
|
this.dataList[e].is_collected = 0
|
||
|
|
this.$toolAll.tools.showToast('正在取消...','loading')
|
||
|
|
// 调用取消收藏事件
|
||
|
|
cancleCollectionEV({action:'collect',archive_id:this.dataList[e].id})
|
||
|
|
},
|
||
|
|
chooseGon(index){//宫格事件
|
||
|
|
if(index==(this.gonggList.length-1)){
|
||
|
|
uni.navigateTo({
|
||
|
|
url:'/pages/tabbar/cate/cate'
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
uni.navigateTo({url:this.gonggList[index].url})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
choosecateEv(e){//恒美小课堂选择事件
|
||
|
|
// console.log('恒美小课堂：',e);
|
||
|
|
this.newCurrent = e
|
||
|
|
this.isZanw = true
|
||
|
|
this.page = 1
|
||
|
|
this.course_id = this.ktList[e].id
|
||
|
|
this.checkKT()
|
||
|
|
},
|
||
|
|
backTop(){//回到顶部事件
|
||
|
|
uni.pageScrollTo({
|
||
|
|
scrollTop: 0,
|
||
|
|
duration: 300
|
||
|
|
});
|
||
|
|
},
|
||
|
|
searchEv(){//搜索事件
|
||
|
|
// console.log(this.searchVal);
|
||
|
|
uni.navigateTo({
|
||
|
|
url:'/pagesB/searchPage/searchPage?keyWorld='+this.searchVal
|
||
|
|
})
|
||
|
|
},
|
||
|
|
chooseReEv(index){
|
||
|
|
uni.navigateTo({
|
||
|
|
url:'/pagesB/searchPage/searchPage?keyWorld='+this.fwList[index].title
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
|
||
|
|
</style>
|