257 lines
7.6 KiB
Vue
257 lines
7.6 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 状态栏 -->
|
||
<status-nav
|
||
:ifTitle="true"
|
||
:ifReturn="false"
|
||
:ifCenter="true"
|
||
:navBarTitle="'首页'"></status-nav>
|
||
<view :style="{paddingTop: statusBarHeight +'px'}">
|
||
<view class="pad-sx20 pad-zy40">
|
||
<!-- 搜索输入框 start -->
|
||
<view class="radius30 disac pad-zy40 pad-sx20 mar-x40" style="background-color: #f2f1f7;">
|
||
<image src="/static/public/icon-search.png" mode="widthFix" style="width: 60rpx;height: 60rpx;"></image>
|
||
<input @confirm="searchEv" class="pad-z20 width100" type="text" v-model="searchText" placeholder="搜索" placeholder-style="font-weight: bold;" />
|
||
</view>
|
||
<!-- 搜索输入框 end -->
|
||
|
||
<!-- 轮播图 start -->
|
||
<swiper-pu :bannerList="bannerList" :isplay="isAutoPlay" :newHeight="'230'" :newRadius="'15'" :newBottom="'10'"></swiper-pu>
|
||
<!-- 轮播图 end -->
|
||
</view>
|
||
<view style="position: sticky;z-index: 10;" :style="{ top: statusBarHeight +'px'}">
|
||
<swiper-tab id="tab" :list="type" v-model="current" @input="clickTab" itemColor="#000000" lineColor="#000000">
|
||
<!-- 自定义tabs样式 -->
|
||
<!-- <view slot="title">其其</view> -->
|
||
</swiper-tab>
|
||
</view>
|
||
<view class="pad-zy40 pad-s40">
|
||
<swiper class="swiper-page pad-x140" :style="{ height: swiperHeight - statusBarHeight +'px'}" :current="current" @change="swiperChange">
|
||
<swiper-item v-for="item in type" :key="index">
|
||
<scroll-view scroll-y @scrolltolower="scrollBottomEv" style="height: 100%;">
|
||
<!-- 列表数据 -->
|
||
<list-one></list-one>
|
||
<!-- 暂无更多数据 -->
|
||
<pitera v-if="pitera"></pitera>
|
||
</scroll-view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
</view>
|
||
<!-- 底部tab -->
|
||
<foot-tab :titleList="titleList" :imgList="imgList"></foot-tab>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// tab组件
|
||
import swiperTab from '@/components/swiper-tab/swiper-tab.vue';
|
||
// 轮播图组件
|
||
import swiperPu from '@/components/swiper-pu.vue';
|
||
// 暂无更多组件
|
||
import pitera from '@/components/nothing/pitera.vue';
|
||
// 列表组件
|
||
import listOne from '@/components/list/list-one.vue';
|
||
// 公共接口
|
||
import {collectionEV,cancleCollectionEV,checkBanner} from '@/jsFile/publicAPI.js';
|
||
export default {
|
||
components:{
|
||
swiperPu,
|
||
pitera,
|
||
swiperTab,
|
||
listOne
|
||
},
|
||
data() {
|
||
return {
|
||
statusBarHeight:uni.getSystemInfoSync().statusBarHeight + 50,
|
||
searchText:'',// 搜索内容
|
||
type: [{
|
||
title: '翡翠'
|
||
}, {
|
||
title: '白玉'
|
||
}, {
|
||
title: '彩宝'
|
||
}, {
|
||
title: '琥珀'
|
||
}, {
|
||
title: '其他'
|
||
}],
|
||
current:0, // 当前显示tab及swiper列表
|
||
swiperHeight:uni.getSystemInfoSync().windowHeight,
|
||
publicColor:'', // 主题颜色
|
||
showTop:false, // 是否显示回到顶部
|
||
dataList:[], // 数据列表
|
||
page:1, // 第几页
|
||
size:10, // 数量
|
||
total:0, // 总数
|
||
pitera:false, // 是否显示暂无数据
|
||
titleList:uni.getStorageSync('footTitle'), // 底部导航文字
|
||
imgList:uni.getStorageSync('footimg'), // 底部导航图标
|
||
ifNet:true,
|
||
noNetwork:'当前无网络连接',
|
||
refTime:null, // 刷新定时器
|
||
refNum:0, // 刷新次数
|
||
bannerList:[], // 轮播图
|
||
isAutoPlay:false,// 是否开启自动轮播
|
||
blockIng:true, // 阻止执行
|
||
}
|
||
},
|
||
onPageScroll(e) {
|
||
e.scrollTop > 360 ? this.showTop = true : this.showTop = false;
|
||
},
|
||
onHide() {
|
||
// 关闭自动轮播
|
||
this.isAutoPlay = false;
|
||
},
|
||
onUnload() {
|
||
// 关闭自动轮播
|
||
this.isAutoPlay = false;
|
||
},
|
||
onReady() {
|
||
// 获取ID为tab元素的信息
|
||
uni.createSelectorQuery().in(this).select('#tab').boundingClientRect().exec(rect => {
|
||
this.swiperHeight = this.swiperHeight - rect[0].height
|
||
});
|
||
},
|
||
onShow() {
|
||
// 网络检测
|
||
this.checkNet();
|
||
this.isAutoPlay = true; // 开启自动轮播
|
||
},
|
||
onShareAppMessage(res) {
|
||
var shareObj = {
|
||
title: '', // 默认是小程序的名称(可以写slogan等)
|
||
path: `/pages/tabbar/pagehome/pagehome?invite_code=${uni.getStorageSync('invite_code')}` // 默认是当前页面，必须是以‘/’开头的完整路径
|
||
};
|
||
return shareObj;
|
||
},
|
||
onLoad(options) {
|
||
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));
|
||
}
|
||
// const query = wx.createSelectorQuery()
|
||
// query.select('.statusHNH').boundingClientRect((rect) => {
|
||
// // log('状态栏+标题栏：',rect.height);
|
||
// uni.setStorageSync('statusHNH',rect.height)
|
||
// this.statusHNH = rect.height
|
||
// }).exec()
|
||
this.checkSwi();//查询轮播图
|
||
this.checkUserInfo();//查询用户信息
|
||
},
|
||
methods: {
|
||
// 视图容器触底事件
|
||
scrollBottomEv(){
|
||
// 判断总数是否等于数组长度，如果相等显示暂无更多，否则继续执行列表事件
|
||
if(this.total!=this.dataList.length){
|
||
// 页数每次+1
|
||
this.page++
|
||
// this.checkList(); // 调用列表事件
|
||
} else {
|
||
// 显示暂无数据
|
||
this.pitera = true;
|
||
}
|
||
},
|
||
// tab点击事件
|
||
clickTab(index){
|
||
this.current = index
|
||
},
|
||
// 列表滑动事件
|
||
swiperChange(e){
|
||
this.current = e.detail.current
|
||
},
|
||
// 用户信息查询
|
||
async 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()
|
||
}
|
||
})
|
||
},
|
||
// 顶部轮播查询事件
|
||
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)
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
searchEv(){//搜索事件
|
||
if(this.blockIng){
|
||
uni.navigateTo({
|
||
url:`/pagesB/searchPage/searchPage?keyWorld=${ this.searchText }`
|
||
})
|
||
}
|
||
},
|
||
// 网络检测事件
|
||
checkNet(){
|
||
uni.getNetworkType({
|
||
success: (res)=> {
|
||
if(res.networkType=='none'){
|
||
uni.setStorageSync('isNet',false)
|
||
this.ifNet = false
|
||
if((this.refNum++)==5){
|
||
clearInterval(this.refTime)
|
||
this.noNetwork = '刷新失败'
|
||
this.refNum = 0
|
||
}
|
||
this.publicColor = uni.getStorageSync('publicColor')
|
||
} else {
|
||
uni.setStorageSync('isNet',true)
|
||
this.ifNet = true
|
||
clearInterval(this.refTime)
|
||
if(this.noNetwork == '正在刷新...') {
|
||
getCurrentPages()[getCurrentPages().length - 1].onLoad()
|
||
}
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// 刷新事件
|
||
refresh(){
|
||
this.noNetwork = '正在刷新...'
|
||
this.refTime = setInterval(()=>{
|
||
this.checkNet()
|
||
},1000)
|
||
},
|
||
backTop(){//回到顶部事件
|
||
uni.pageScrollTo({
|
||
scrollTop: 0,
|
||
duration: 300
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
|
||
</style>
|