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

523 lines
15 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>
<!-- 状态栏 -->
<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>