perry-mall/pages/tabbar/pagehome/pagehome.vue

523 lines
15 KiB
Vue
Raw Normal View History

2022-02-12 11:33:47 +00:00
<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>
<!-- 底部tab -->
<foot-tab :titleList="titleList" :imgList="imgList"></foot-tab>
</view>
</template>
<script>
const {log} = console;
import swiperPu from '@/components/swiper-pu.vue';
import wfallsFlow from '@/components/wfalls-flow'
import {collectionEV,cancleCollectionEV,checkBanner} from '@/jsFile/publicAPI.js';
export default {
components:{
swiperPu,
wfallsFlow
},
data() {
return {
statusBarHeight:uni.getSystemInfoSync().statusBarHeight,
statusHNH:uni.getStorageSync('statusHNH'),
searchVal:'',//输入框的值
publicColor:'',//主题颜色
gonggList:[//九宫格列表
],
fwList:[//热搜关键词
],
kcurrent:0,//默认选中第一项
ktList:[//恒美小课堂
],
dataList:[//小课堂数据列表
],
showTop:false,
newCurrent:0,
page:1,
size:10,
total:'',//总数
isZanw:true,
course_id:0,
isLoading:false,
isShowT:true,
titleList:[],//底部导航文字
imgList:[],//底部导航图标
gaoone:{},
gaotwo:{},
gaothree:{},
isNet:true,
wuNet:'当前无网络连接',
refTime:'',
reNum:0,
bannerList:[],//轮播图
isAutoPlay:false,
jieDuan:false,
isNewRenderDone:false ,//锁的作用
isQuan:uni.getStorageSync('isQuan'),
quanImg:uni.getStorageSync('quanImg'),
}
},
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
}
},
onHide() {
this.isAutoPlay = false;
},
onUnload() {
this.isAutoPlay = false;
},
onShow() {
uni.setStorageSync('firstTime',1);
log('输出的解构')
this.checkNet()
this.$toolAll.tools.isLogin()
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)
}
this.checkKT()//恒美课堂列表
this.isAutoPlay = true;
},
onShareAppMessage(res) {
var ya = this;
let maiOjb = {
e:6,//内容分享
t:new Date().getTime()//当前时间戳
}
this.$toolAll.tools.maiDian(maiOjb)
var shareObj = {
     title: '成都恒美毛发', // 默认是小程序的名称(可以写slogan等)
     path: `/pages/tabbar/pagehome/pagehome?invite_code=${uni.getStorageSync('invite_code')}` // 默认是当前页面,必须是以‘/’开头的完整路径
  };
  return shareObj;
},
onLoad(options) {
this.$toolAll.tools.isVedio();
if(options.source_code!='' && options.source_code!=undefined){
this.loginEv(options);
} else if(options.q!=undefined){
// 解码一unescape("http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1")
// 解码二decodeURIComponent("http%3A%2F%2Fwww.baidu.com%3Fname%3Dzhang%40xiao%40jie%26order%3D1")
let str = unescape(options.q);
// console.log(str);
let len1 = str.indexOf('invite_code=');
let len2 = str.indexOf('channel=');
let len3 = str.indexOf('source_code=');
let newInvite = '';
let newChanel = '';
let newsource_code = '';
if(len1!=-1) newInvite = str.slice((len1+12),(len1+12+32));
if(len2!=-1) newChanel = str.slice((len2+8),(len2+8+8));
if(len3!=-1) newsource_code = str.slice((len3+12),(len3+12+32));
uni.login({
provider: 'weixin',
success: (res)=> {
var params = {
code:res.code,
invite_code:newInvite,//用户邀请码
channel:newChanel,
source_code:newsource_code
}
// console.log(params);
this.$requst.post('user/login',params).then(res => {console.log('调用成功');},error => {})
},
});
} else if(options.invite_code!='' && options.invite_code!=undefined){
this.loginEv(options);
} else {
this.$toolAll.tools.overdue()
}
const query = wx.createSelectorQuery()
query.select('.statusHNH').boundingClientRect((rect) => {
// log('状态栏+标题栏:',rect.height);
uni.setStorageSync('statusHNH',rect.height)
this.statusHNH = rect.height
}).exec()
this.checkBCate();
this.checkKey();
this.checkSwi();//查询轮播图
// this.checkBanner()//调用轮播图查询事件
this.$toolAll.tools.buriedPointAll();//查询需要埋点的事件id
// this.checkQ();
setTimeout(()=>{
this.quanImg= uni.getStorageSync('quanImg');
this.quanId = uni.getStorageSync('quanId');
},3000)
this.checkUserInfo();
},
methods: {
loginEv(option){
console.log(option,'option');
uni.login({
provider: 'weixin',
success: (res)=> {
var params = {
code:res.code,
invite_code:option.invite_code || '',//用户邀请码
source_code:option.source_code || '',
channel:option.channel || ''
}
this.$requst.post('user/login',params).then(res => {console.log('调用成功');},error => {})
},
});
},
checkUserInfo(){
this.$requst.post('user/info').then(res=>{
if(res.code==0){
if(res.data.phone_active!=0){
uni.setStorageSync('phone_active',res.data.phone_active);
}
} else {
this.$toolAll.tools.isLogin()
}
})
},
checkQ(){//查询优惠券
this.$requst.post('user/home-coupon').then(res=>{
if(res.code==0){
if(res.data.has_coupon==1){
this.isQuan = true;
this.quanImg = this.$http + res.data.home_coupon.cover;
this.quanId = res.data.home_coupon.id;
}
}
})
},
recerveEv(){//领取优惠券
this.$requst.post('user/get-coupon',{coupon_id:uni.getStorageSync('quanId')}).then(res=>{
if(res.code==0){
this.isQuan = false;
this.$toolAll.tools.showToast('领取成功');
setTimeout(()=>{
uni.navigateTo({
url:'/pagesA/coupon/coupon'
})
},1000)
}
if(res.code==302){
this.$toolAll.tools.showToast(res.msg);
setTimeout(()=>{
uni.navigateTo({
url:'/pages/login/login'
})
},1500)
}
})
},
closeEv(){
this.isQuan = false;
uni.setStorageSync('isQuan',false);
},
// 顶部轮播查询事件
checkSwi(){
checkBanner({position:'home-banner'}).then(res=>{
if(res.code==0){
if(res.data.length!=0){
res.data.forEach(item=>{
let isVideo = false
if(item.type!='img') isVideo = true
let banObj = {
imgSrc:this.$http + item.src,
url:item.url,
isVideo:isVideo,
poster:this.$http + item.src,
}
this.bannerList.push(banObj)
})
}
}
})
},
checkNet(){
uni.getNetworkType({
success: (res)=> {
if(res.networkType=='none'){
uni.setStorageSync('isNet',false)
this.isNet = false
if((this.reNum++)==5){
clearInterval(this.refTime)
this.wuNet = '刷新失败'
this.reNum = 0
}
this.publicColor = uni.getStorageSync('publicColor')
} else {
uni.setStorageSync('isNet',true)
this.isNet = true
clearInterval(this.refTime)
if(this.wuNet == '正在刷新...') {
getCurrentPages()[getCurrentPages().length - 1].onLoad()
}
}
}
});
},
refresh(){
this.wuNet = '正在刷新...'
this.refTime = setInterval(()=>{
this.checkNet()
},1000)
},
bangd(){//绑定客服事件
this.$requst.post('').then(res=>{log('绑定客服:',res);},error=>{})
},
tapChoose(index){//宫格下的,三张图点击事件
if(!this.jieDuan){
let isAuth = this.$toolAll.tools.returnAuth()
if(!isAuth){
let newUrl = ''
if(index==0) newUrl = this.gaoone.url
if(index==1) newUrl = this.gaotwo.url
if(index==2) newUrl = this.gaothree.url
uni.navigateTo({
url:newUrl
})
} else this.jieDuan = true
}
},
checkKey(){//查询热搜关键词事件
this.$requst.get('index/hot-keywords').then(res=>{
// log('关键词列表:',res);
if(res.code==0){
if(res.data.length!=0){
res.data.forEach(item=>{
let reObj = {title:item.keyword}
this.fwList.push(reObj)
})
}
}
},error=>{})
},
checkBCate(){//查询底部事件、八宫格、
this.$requst.post('index/mini-program-setting').then(res=>{
// 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:this.$http + res.data.recommendMore,title:'更多'})
}
if(res.data.footBar.length!=0){//底部导航
res.data.footBar.forEach(item=>{
let newName = item.name
let newObj = {
iconPath:this.$http + item.icon[0],
selectedIconPath:this.$http + item.icon[1],
}
if(item.key=="home"){
this.imgList[0] = newObj
this.titleList[0] = newName
}
if(item.key=="category"){
this.imgList[1] = newObj
this.titleList[1] = newName
}
if(item.key=="service"){
this.imgList[2] = newObj
this.titleList[2] = newName
}
if(item.key=="shop"){
this.imgList[3] = newObj
this.titleList[3] = newName
}
if(item.key=="my"){
this.imgList[4] = newObj
this.titleList[4] = newName
}
})
uni.setStorageSync('footTitle',this.titleList)
uni.setStorageSync('footimg',this.imgList)
}
if(res.data.ad.length!=0){//三张图
this.gaoone = {
imgSrc:this.$http + res.data.ad[0].img,
url:res.data.ad[0].link,
}
this.gaotwo = {
imgSrc:this.$http + res.data.ad[1].img,
url:res.data.ad[1].link,
}
this.gaothree = {
imgSrc:this.$http + res.data.ad[2].img,
url:res.data.ad[2].link,
}
}
// this.publicColor = res.data.mainColor
this.publicColor = uni.getStorageSync('publicColor')
}
}
},error=>{})
},
checkKT(){//查询恒美小课堂
let parmas = {
course_id:this.course_id,//课堂ID
page:this.page,
size:this.size
}
this.$requst.post('archives/course',parmas).then(res=>{
// 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 fabImg = '';
if(item.published_headimgurl!='' && item.published_headimgurl!=null) fabImg = this.$http + item.published_headimgurl;
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: fabImg || '/static/public/logo.png',//发布者头像
name:item.published_by || '恒美植发',//发布者昵称
isVideo:item.video.includes(".mp4")//是否是视频
}
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})
},
// chooseLike(e){//收藏事件
// // log(this.dataList[e].is_collected);
// let active = ''
// this.dataList.forEach((item,index)=>{
// if(e==item.id){
// active = index
// }
// })
// if(this.dataList[active].is_collected==0){
// this.dataList[active].is_collected = 1
// // 调用收藏事件
// collectionEV({action:'collect',archive_id:e})
// }
// },
// comfirmev(e){//确认取消收藏事件
// let active = ''
// this.dataList.forEach((item,index)=>{
// if(e==item.id){
// active = index
// }
// })
// this.dataList[active].is_collected = 0
// this.$toolAll.tools.showToast('正在取消...','loading')
// // 调用取消收藏事件
// cancleCollectionEV({action:'collect',archive_id:e})
// },
chooseGon(index){//宫格事件
if(!this.jieDuan){
let isAuth = this.$toolAll.tools.returnAuth()
if(!isAuth){
if(index==(this.gonggList.length-1)){
uni.navigateTo({
url:'/pages/tabbar/cate/cate'
})
} else {
uni.navigateTo({url:this.gonggList[index].url})
}
} else this.jieDuan = true
}
},
choosecateEv(e){//恒美小课堂选择事件
// 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(){//搜索事件
// log(this.searchVal);
if(!this.jieDuan){
let isAuth = this.$toolAll.tools.returnAuth()
if(!isAuth){
uni.navigateTo({
url:'/pagesB/searchPage/searchPage?keyWorld='+this.searchVal
})
} else this.jieDuan = true
}
},
chooseReEv(index){
if(!this.jieDuan){
let isAuth = this.$toolAll.tools.returnAuth()
if(!isAuth){
uni.navigateTo({
url:'/pagesB/searchPage/searchPage?keyWorld='+this.fwList[index].title
})
} else this.jieDuan = true
}
}
}
}
</script>
<style>
</style>