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

<template>
	<view class="pad-x180">
		<status-nav :ifReturn="false" titleColor="#FFFFFF" navBarTitle="首页" backgroudColor="transparent"></status-nav>
		<view class="head-box" :style="{paddingTop: padt+'px'}" style="background: linear-gradient( to top, #ff3574 0%, #fd5745 100%);position: fixed;top: 0;left: 0;right: 0;z-index: 2;">
			<view class=" mar-zy40 radius30 pad-zy30 mar-x30 disac" style="background-color: rgba(255, 255, 255, 0.2);">
				<image src="/static/public/icon-search.png" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>
				<input @confirm="goSearch" v-model="keyword" class="width100 colf fon30 mar-z20" type="text" placeholder="搜索" style="height: 90rpx;" placeholder-style="color: #FFFFFF">
			</view>
		</view>
		<view class="pad-zy20" :style="{paddingTop: headHeight+'px'}">
			<!-- 轮播图 -->
			<swiper-pu newRadius="40rpx" :bannerList="bannerList" newHeight="400rpx" newBottom="20rpx" :isplay='isplay'></swiper-pu>
		</view>
		<view class="pad-sx20">
			<!-- 分类宫格 -->
			<gong-ge-function itemTop="40rpx" @chooseGe="chooseGe" :list="list"></gong-ge-function>
		</view>
		<view class="pad-zy20">
			<list-one ref="listhome" :ifTitle="true"></list-one>
		</view>
		<customer-one :nbottom="150"></customer-one>
		<!-- 底部tab -->
		<foot-tab></foot-tab>
	</view>
</template>

<script>
	import swiperPu from '@/components/swipers/swiper-pu';
	import statusNav from '@/components/status-navs/status-nav';
	import footTab from '@/components/foot-tabs/foot-tab.vue';
	import gongGeFunction from '@/components/function-list/gong-ge/gong-ge-function.vue';
	import listOne from '@/components/list/list-one';
	import customerOne from '@/components/customer/customer-one';
	import {slidePosition} from '@/jsFile/public-api.js';
	export default {
		components:{
			'foot-tab' :footTab,
			gongGeFunction,
			statusNav,
			swiperPu,
			listOne,
			customerOne
		},
		data() {
			return {
				padt:uni.getSystemInfoSync().statusBarHeight + 50,
				headHeight:'',//头部导航高
				list:[
					{url:'/pages/tabbar/cate/cate?index=0',iconsrc:'/static/deleteImg/icon-ge-01.png',iconWidth:48,iconHeight:50,title:'推荐套装'},
					{url:'/pages/tabbar/cate/cate?index=1',iconsrc:'/static/deleteImg/icon-ge-02.png',iconWidth:56,iconHeight:54,title:'喜糖组合'},
					{url:'/pages/tabbar/cate/cate?index=2',iconsrc:'/static/deleteImg/icon-ge-03.png',iconWidth:64,iconHeight:46,title:'喜盒自选'},
					{url:'/pages/tabbar/cate/cate?index=3',iconsrc:'/static/deleteImg/icon-ge-04.png',iconWidth:48,iconHeight:48,title:'喜糖自选'},
					{url:'/pages/tabbar/cate/cate?index=4',iconsrc:'/static/deleteImg/icon-ge-05.png',iconWidth:56,iconHeight:58,title:'迎宾糖散糖'},
					{url:'/pages/tabbar/cate/cate?index=5',iconsrc:'/static/deleteImg/icon-ge-06.png',iconWidth:58,iconHeight:52,title:'瓜子花生'},
					{url:'/pages/tabbar/cate/cate?index=6',iconsrc:'/static/deleteImg/icon-ge-07.png',iconWidth:48,iconHeight:54,title:'伴手礼'},
					{url:'/pagesB/buy-read/buy-read',iconsrc:'/static/deleteImg/icon-ge-08.png',iconWidth:44,iconHeight:56,title:'购买须知'},
					{url:'/pagesB/business-profile/business-profile',iconsrc:'/static/deleteImg/icon-ge-09.png',iconWidth:54,iconHeight:50,title:'商家简介'},
					{url:'/pages/tabbar/cate/cate?index=0',iconsrc:'/static/deleteImg/icon-ge-10.png',iconWidth:52,iconHeight:52,title:'其他推荐'},
				],
				keyword:'',
				isplay:false,
				playTimer:null,
				bannerList:[]
			}
		},
		onReachBottom(e) {
			this.$refs.listhome.moreEv();
		},
		onHide() {
			clearTimeout(this.playTimer);
		},
		onShow() {
			slidePosition().then(res=>{
				if(res.code==0) {
					console.log(res.data,74);
				}
			})
			this.playTimer = setTimeout(()=>{
				this.isplay = true;
			},2000)
		},
		onLoad() {
			this.getBanner();
			// 缓存状态栏+标题栏的高度
			const query = wx.createSelectorQuery().in(this)
			query.select('.head-box').boundingClientRect((rect) => {
				this.headHeight = rect.height - this.padt;
			}).exec()
		},
		methods: {
			// 获取轮播图事件
			getBanner(){
				this.$requst.get('/api/common/slides',{position:'home-banner'}).then(res=>{
					if(res.data.length!=0){
						res.data.forEach(item=>{
							let isVideo = false
							if(item.type!='img') isVideo = true
							let banObj = {
								imgSrc:item.src,
								url:item.url,
								isVideo:isVideo,
								poster:item.src,
							}
							this.bannerList.push(banObj)
						})
					}
				})
			},
			// 宫格点击事件
			chooseGe(obj) {
				if(this.$toolAll.tools.judgeAuth()) {
					let exist = obj.url.slice(0,18);
					if(exist=='/pages/tabbar/cate') {
						uni.reLaunch({
							url:obj.url
						})
					} else {
						uni.navigateTo({
							url:obj.url
						})
					}
				}
			},
			// 去搜索页面
			goSearch(){
				uni.navigateTo({
					url:`/pagesB/search/search?keyword=${this.keyword}`
				})
			}
		}
	}
</script>

<style>
	page{background-color: #f7f7f7;}
</style>