perry-mall/pages/tabbar/pagehome/pagehome.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-sx30 mar-x40" style="background-color: #f2f1f7;">
					<image src="/static/public/icon-search.png" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>
					<input @confirm="searchEv" class="pad-z20 width100 fon36" type="text" v-model="searchText" placeholder="搜索" />
				</view>
				<!-- 搜索输入框 end -->
				
				<!-- 轮播图 start -->
				<swiper-pu v-if="bannerList.length" :bannerList="bannerList" :isplay="isAutoPlay" :newHeight="'230'" :newRadius="'15'" :newBottom="'10'"></swiper-pu>
				<!-- 轮播图 end --> 
			</view>
			<view class="tab-nav" style="position: sticky;z-index: 10;" :style="{ top: statusBarHeight +'px'}">
				<swiper-tab id="tab" :list="classifyList" v-model="current" @input="clickTab" itemColor="#000000" lineColor="#000000">
					<!-- 自定义tabs样式 -->
					<!-- <view slot="title"></view> -->
				</swiper-tab>
			</view>
			<view class="pad-zy40" style="padding-bottom: 66px;">
				<swiper class="swiper-page pad-s40" :style="{ height: swiperHeight - (statusBarHeight + 126) +'px'}" :current="current" @change="swiperChange">
					<swiper-item v-for="(item,index) in classifyList" :key="index">
						<scroll-view :scroll-y="isScroll" @scrolltolower="scrollBottomEv" :style="{ height: swiperHeight - (statusBarHeight + 126) +'px'}">
							<!-- 活动商品 start -->
							<view v-for="(item1,index1) in dataList[index][0]" :key="index1" class="mar-x50">
								<h1 class="fon36 bold">{{item1.name}}</h1>
								<view class="colpeili fon26 mar-s20 mar-x40 clips1">{{item1.subtitle}}</view>
								<view class="posir" @tap="goDetail(item1.id)">
									<image class="radius30 animated fadeIn" :src="item1.cover" mode="aspectFill" lazy-load style="height: 425rpx;width: 100%;"></image>
									<view v-if="item1.tag!=''" class="posia fon24 colf pad-zy10 pad-s10 pad-x20 activity-img">限时优惠</view>
								</view>
							</view>
							<!-- 活动商品 end -->
							
							<!-- 子商品 start -->
							<view class="disjbac fw">
								<view @tap="goDetail(item2.id)" class="width47 mar-x50 posir" v-for="(item2,index2) in dataList[index][1]" :key="index2">
									<image :src="item2.cover" mode="aspectFill" lazy-load style="width: 100%;height: 312rpx;border-radius: 30rpx;"></image>
									<view class="clips2 fon30 col0 linh50" style="height: 100rpx;">{{item2.name}}</view>
									<view class="fon30 colpeili">￥{{item2.price}}</view>
									<view v-if="item2.tag!=''" class="posia fon24 colf pad-zy10 pad-s10 pad-x20 activity-img">限时优惠</view>
								</view>
							</view>
							<!-- 子商品 end -->
							<!-- 暂无更多数据 -->
							<pitera v-if="noMore"></pitera>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 底部tab -->
		<foot-tab :titleList="titleList" :imgList="imgList"></foot-tab> 
	</view>
</template>

<script>
	var app = getApp();
	// 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 {checkBanner} from '@/jsFile/publicAPI.js';
	// 底部导航组件
	import footTab from '@/components/foot-tab.vue';
	export default {
		components:{
			swiperPu,
			pitera,
			swiperTab,
			listOne,
			footTab
		},
		data() {
			return {
				statusBarHeight:uni.getSystemInfoSync().statusBarHeight + 50,
				searchText:'',// 搜索内容
				classifyList: [
					// {//默认结构
					// 	id:1,
					// 	title: '翡翠'
					// }
				],
				current:0, // 当前显示tab及swiper列表
				swiperHeight:uni.getSystemInfoSync().screenHeight,
				publicColor:'', // 主题颜色
				showTop:false, // 是否显示回到顶部
				dataList:[], // 数据列表
				page:1, // 第几页
				size:200, // 数量
				total:0, // 总数
				titleList:uni.getStorageSync('footTitle'), // 底部导航文字
				imgList:uni.getStorageSync('footimg'), // 底部导航图标
				ifNet:true,
				noNetwork:'当前无网络连接',
				refTime:null, // 刷新定时器
				refNum:0, // 刷新次数
				bannerList:[], // 轮播图
				isAutoPlay:false,// 是否开启自动轮播
				classifyId:'',//分类id
				noMore:false,
				isScroll:false
			}
		},
		onPageScroll(e) {
		    e.scrollTop > 360 ? this.showTop = true : this.showTop = false;
			let info = uni.createSelectorQuery().select('.tab-nav');
			info.boundingClientRect(data=>{
				if(data.top==this.statusBarHeight){
					this.isScroll = true;
				} else {
					this.isScroll = false;
				}
			}).exec();
		},
		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) {
			// 查询是否显示视频
			this.$toolAll.tools.isVedio();
			// 获取当前页面url
			this.$toolAll.tools.obtainUrl();
			// 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.classifyEv();// 调用分类查询事件
			if(options.invite_code!=undefined){
				uni.setStorageSync('existCode',options.invite_code);
				uni.setStorageSync('transientUrl',`/pages/tabbar/my/my`);
				uni.navigateTo({
					url:'/pages/login/login'
				})
			}
			if(uni.getStorageSync('phone_active')){
				this.$toolAll.tools.clearShare();
			}
		},
		methods: {
			goDetail(id){//前往详情页
				if(uni.getStorageSync('phone_active')){
					uni.navigateTo({
						url:`/pagesB/shopDetail/shopDetail?id=${id}`
					})
				} else {
					uni.navigateTo({
						url:`/pages/login/login`
					})
				}
			},
			// 分类查询
			classifyEv(){
				this.$requst.post('/api/spu/category').then(res=>{
					if(res.code==0){
						this.classifyList = res.data;
						if(this.classifyList.length){
							// 分类第一次加载，设置分类id
							this.classifyId = this.classifyList[0].id;
							this.classifyList.forEach(item=>{
								this.dataList.push([[],[]]);
							})
							this.$nextTick(()=>{
								//查询商品列表
								this.checkList();
							})
						}
					} else {
						this.$toolAll.tools.showToast(res.msg);
					}
				}).catch(err=>{
					this.$toolAll.tools.showToast(err.msg);
				})
			},
			// 视图容器触底事件
			scrollBottomEv(){
				// 判断总数是否等于数组长度，如果相等显示暂无更多，否则继续执行列表事件
				if(this.total!=(this.dataList[this.current][0].length+this.dataList[this.current][1].length)){
					// 页数每次+1
					this.page++
					this.checkList(); // 调用列表事件
				} else {
					this.noMore = true;
				}
			},
			// 查询商品列表
			checkList(){
				let params = {
					page:this.page,
					size:this.size,
					category_id: this.classifyId,//分类id
				}
				if(this.page!=1){
					uni.showLoading({
						title:'加载中...'
					})
				}
				this.$requst.post('/api/spu/home',params).then(res=>{
					if(res.code==0){
						if(this.page==1) {
							this.dataList[this.current] = [[],[]];
						}
						// 设置列表总数
						this.total = res.data.total;
						if(res.data.list.length){
							res.data.list.forEach(item=>{
								if(item.home_display=='big'){
									this.dataList[this.current][0].push(item);
								} else {
									let twoObj = {
										amount: item.amount,
										cover: item.cover,
										home_display: item.home_display,
										id: item.id,
										name: item.name,
										original_price: this.$toolAll.tools.changeNum(item.original_price),
										price: this.$toolAll.tools.changeNum(item.price),
										stock: item.stock,
										subtitle: item.subtitle,
										tag: item.tag
									}
									this.dataList[this.current][1].push(item);
								}
							})
						}
						if(this.total == (this.dataList[this.current][0].length + this.dataList[this.current][1].length)){
							this.noMore = true;
						}
						uni.hideLoading();
					} else {
						this.$toolAll.tools.showToast(res.msg);
					}
				}).catch(err=>{
					this.$toolAll.tools.showToast(err.msg);
				})
			},
			// 顶部轮播查询事件
			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(uni.getStorageSync('phone_active')){
					uni.navigateTo({
						url:`/pagesB/searchPage/searchPage?keyWorld=${ this.searchText }`
					})
				} else {
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}
			},
			// 网络检测事件
			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)
			},
			// tab点击事件
			clickTab(index){
				// 设置选中下标
				this.current = index;
			},
			// 列表滑动事件
			swiperChange(e){
				this.current = e.detail.current;
				// 调用执行列表查询事件
				this.executeCheckList();
			},
			// 执行列表查询事件
			executeCheckList(){
				this.page = 1;
				this.classifyId = this.classifyList[this.current].id
				// 调用列表查询事件
				this.checkList();
			}
		}
	}
</script>

<style>

</style>