dengrui/pages/tabbar/homePage/homePage.vue

<template>
    <view>
        <view class="posir">
            <image class="posia" src="/static/img/pageh/headb.png" style="width: 100%;"></image>
            <!-- 使用标题栏 -->
			<!-- <status-nav :statusTitle="true" :title-val="'登锐商城'" :tabcolor="'#ffffff'"></status-nav> -->
			<view class="posi-tzy zIn5 statusHNH" style="background: url(https://s3.jpg.cm/2021/07/22/I6PtxL.png) fixed top;background-size: 100%;">
			    <view :style="{height:statusBarHeight+'px'}"></view>
			    <view class="padding-z20 disac width100 navBarH" :style="{background:backgroudColor}">
			        <!-- 标题 -->
					<view class="tab-title titlec" style="color:#ffffff;">登锐商城</view>
			    </view>
			</view>
            <!-- 搜索框、消息 -->
            <view class="margin-zy20 disba" :style="{paddingTop:statusHNH+'px'}">
                <view class="searchRadius disac ptwo-input-box">
                    <image class="searcht margin-z20" src="/static/img/pageh/sousuo.png"></image>
                    <input @tap="inputFocus" disabled class="margin-z10 fon26 colorh width100" placeholder="搜索的内容" placeholder-class="searchpla" type="text" />
                </view>
                <!-- <image @tap="goNotices" class="xiaox margin-y10 flexs" src="/static/img/pageh/xiaoxi.png"></image> -->
            </view>
            <view class="margin20">
                <!-- banner轮播 -->
                <view class="radius10">
                    <swiper class="banner-box" :indicator-color="'#f9f9f9'" :indicator-active-color="'#1c4593'"
                        :indicator-dots="true" :easing-function="'easeOutCubic'" :autoplay="true" :interval="3000"
                        :circular="true" :duration="1000">
                        <swiper-item v-if="bannerList.length!=0" v-for="(item,index) in bannerList" :key="index">
                            <view class="swiper-item">
                                <image class="width100 banner-box radius10" :src="item.src" mode="aspectFill"></image>
                            </view>
                        </swiper-item>
                    </swiper>
                </view>
                <!-- 公告 -->
                <view v-if="user_type!='personal'" class="margin-sx20 disac zIn4" style="position: relative;">
                    <view class="disac flexs">
                        <image class="gimg" src="/static/img/pageh/gonggao.png" mode=""></image>
                        <view class="fon26 gtitle margin-z10"><i>小程序公告:</i></view>
                    </view>
                    <view class="disba width100">
                        <view class="fon24 color6 margin-zy20 width100">
                            <!-- <marquee direction="left" align="absmiddle" scrollamount="5">新品上市百雀明媚羚眼霜限时促销霜限时促销霜限时促销</marquee> -->
                            <lwNotice @dangGao="dangGao" :list="advanceListTwo"></lwNotice>
                        </view>
                        <view @tap="goNotices" class="fon24 color9 margin-y20 flexs">更多</view>
                    </view>
                </view>
            </view>
            <!-- 热门产品，限时补贴 -->
            <view class="discc width100 textc" style="background: url(https://s3.jpg.cm/2021/07/22/I6P1IW.png) no-repeat;background-size: 100% 100%;">
                <view v-if="user_type!='personal'" class="fon36 colorb bold margin-s40 disbcac">
                    <image class="reba" src="/static/img/pageh/rebefore.png"></image>
                    <view class="margin-zy20">厂家送红包 购100送70</view>
                    <image class="reba" src="/static/img/pageh/reaffter.png"></image>
                </view>
                <view v-if="user_type!='personal'" class="fon24 colorb margin-s20 discc">
                    <view class="zIn1">红包可提现，也可分次购货</view>
                    <view class="tiao"></view>
                </view>
				<view v-if="user_type!='personal'" class="fon24 margin-sx20" style="color: rgba(255,255,255,.7);">商城产品低于市场价70%，红包可选择长期分红更划算</view>
				<view class="reboxre margin-zy20 margin-sx20" style="width: 94%;" v-for="(itemre,indexre) in zanReArrImg" :key="indexre">
					<image class="radius10" @tap="goReDetail(itemre.link)" style="width: 100%;height: 342rpx;" mode="aspectFill" :src="itemre.src"></image>
				</view>
				<!-- <view class="radius10 disba rebox margin-zy20 margin-x20" v-for="(itemre,indexre) in reArr" :key="indexre">
					<image v-if="indexre%2==0" class="flexs reimg" :src="itemre.src"></image>
					<view class="disbc width100 flw margin-sf30">
						<view class="fon26 color26">{{itemre.title}}</view>
						<view class="fon36 color26 bold margin-sx10">{{itemre.miaoone}}</view>
						<view class="fon24 color26">{{itemre.miaotwo}}</view>
						<view class="btnradius fon24 colorb rebtn margin-s20">
							惊喜价:￥<span class="fon36 blod">{{itemre.price}}</span>.00
						</view>
					</view>
					<image v-if="indexre%2!=0" class="flexs reimg" :src="itemre.src"></image>
				</view> -->
            </view>
            <!-- 分类列表 -->
            <view class="width100 padding-x120">
                <!-- 分类 -->
                <scroll-view scroll-x="true" style="height: 80rpx;">
                    <view class="disba margin20 catebox">
                        <view @tap="chooseCate(item.id,index)" :class="current==index?'pactive':'pmo'" class="disac flexs"
                        v-for="(item,index) in cateList" :key="index">{{item.name}}<view class="pxian"></view>
                        </view>
                    </view>
                </scroll-view>
                <!-- 列表 -->
				 <!-- @addChe="addChe" -->
				<twocoluList v-if="dataList.length!=0" :dataList="dataList"></twocoluList>
                <!-- 更多 -->
                <view v-if="gisok" class="margin-sx26 textc color9 fon26">{{gcontent}}</view>
            </view>
            <backTop :showTop="showTop" @backTop="backTop"></backTop>
            <!-- <footTab></footTab> -->
        </view>
		<foot-tab :userType="user_type"></foot-tab>
    </view>
</template>

<script>
	import twocoluList from '@/components/twocoluList.vue';
    import backTop from '@/components/backTop.vue';
    import lwNotice from '@/components/lw-notice/lw-notice.vue';
    import footTab from '@/components/footTab.vue';
    export default {
		components:{
			twocoluList,
            backTop,
            lwNotice,
            footTab
		},
        data() {
            return {
				statusBarHeight:uni.getSystemInfoSync().statusBarHeight,
                bannerList: [],
                // cateList:['轮胎轮毂','车载电器','雨刮器','机油养护','汽车配件'],
                cateList:[{
					id:'',
					name:'全部',
					pid:'',
					hasChildren:''
				}],
                current:0,
                dataList:[],
                gcontent:'暂无更多',//更多文本
                gisok:false,//判断更多是否出现
                showTop:false,
                advanceListTwo:[],//公告内容列表
				advanceListInfo:[],//公告所有信息
				// reArr:[
				// 	{src:'/static/img/pageh/reone.jpg',title:'/凌度BLACKVIEW/',miaoone:'行车记录仪前后双录',miaotwo:'全屏流媒体后视镜倒车影像',price:'459'},
				// 	{src:'/static/img/pageh/retwo.jpg',title:'/凌度BLACKVIEW/',miaoone:'行车记录仪前后双录',miaotwo:'全屏流媒体后视镜倒车影像',price:'459'},
				// ],
				zanReArrImg:[],
				cid:0,
				page:1,
				size:10,
				total:'',
				isZanw:true,
				statusHNH:uni.getStorageSync('statusHNH'),
				pageShow:false,
				user_type:uni.getStorageSync('user_type'),
				isHave:false
            };
        },
		onReachBottom() {
			if(this.dataList.length!=0){
				if(this.total!=this.dataList.length){
					this.page++
					this.checkList()//调用自主预约列表事件
				} else {
					if(this.isZanw) this.$toolAll.tools.showToast('暂无更多商品列表','none',1000)
					this.isZanw = false
				}
			}
		},
        onPageScroll(e) {
            e.scrollTop > 360 ? this.showTop = true : this.showTop = false
        },
        onShow() {
            uni.showTabBar()
			uni.login({
				provider: 'weixin',
				success: (res)=> {
					if (res.code) {
						var params = {code:res.code}
						this.$requst.post('user/wxAppletsLogin',params).then(res=>{
							if(res.code==0){
								if(res.data.token!=''){
									uni.setStorageSync('token',res.data.token)//缓存token
									uni.setStorageSync('openid',res.data.openid)//缓存Openid
									uni.setStorageSync('expire',res.data.expire)//缓存失效时间（时间戳格式）
									uni.setStorageSync('is_active',res.data.is_active)//是否第一次授权
									uni.setStorageSync('user_type',res.data.user_type)//权限
									this.user_type = res.data.user_type
									this.checkList()//商品列表查询事件
									this.isHave = true
								}
							} else {
								this.$toolAll.tools.showToast(res.msg)
							}
						},error=>{})
					}
				},
			});
        },
        onLoad(options) {
			const query = wx.createSelectorQuery().in(this)
			query.select('.statusHNH').boundingClientRect((rect) => {
			    // console.log('rect.height',rect)
				uni.setStorageSync('statusHNH',rect.height)
				this.statusHNH = rect.height
			}).exec()
			var _this = this;
			// 微信扫码后会自动编码,所以需要解码
			if (options && options.q) {
				let arr = decodeURIComponent(options.q).split('?')[1].split('&')
				let obj = {}
				arr.forEach(item => {
					let brr = item.split('=')
					obj[brr[0]] = brr[1]
				})
				// console.log(obj) //得到参数组成的对象
				uni.setStorageSync('invite_code',obj.invite_code)
			}
            this.title = this.dengrui
			let timer = setInterval(()=>{
				if(this.isHave){
					clearInterval(timer)
					this.bannerEv()//查询轮播
					this.requestGao()//查询公告
					this.reMen()//查询热门产品
					this.shaiEv()//查询商品分类
				}
			},100)
			
        },
        methods: {
			shaiEv(){//商品分类查询事件
				this.$requst.post('product/spu/category').then(res=>{
					// console.log('筛选',res);
					if(res.data.length!=0){
						res.data.forEach(item=>{
							let obj = {
								id:item.id,
								name:item.name,
								pid:item.pid,
								hasChildren:item.hasChildren
							}
							this.cateList.push(obj)
						})
					}
				},error=>{})
			},
			bannerEv(){// 查询轮播图片事件
				let paramsBanner = {
					position:'home_banner'
				}
				this.$requst.post('slide/index',paramsBanner).then(res => {
					// console.log('轮播图===>',res);
					if(res.data.length!=0){
						this.pageShow = true
						res.data.forEach(item=>{
							let obj = {
								src:this.$http+item.src,
								alt:item.alt,
								link:item.link,
								time:item.time
							}
							this.bannerList.push(obj)
						})
					}
				},error => {})
			},
			goReDetail(urlre){// 去热门详情
				uni.navigateTo({
					url:urlre
				})
			},
			reMen(){//查询热门
				this.$requst.post('slide/index',{position:'home_promote'}).then(res => {
					// console.log('热门===>',res);
					if(res.data.length!=0){
						res.data.forEach(item=>{
							let zanObj = {
								alt: item.alt,
								desc: item.desc,
								link: item.link,
								src: this.$http+item.src,
								time: item.time
							}
							this.zanReArrImg.push(zanObj)
							// let obj = {
							// 	src:this.$http+item.src,
							// 	title:item.alt,
							// 	miaoone:item.link,
							// 	miaotwo:item.time,
							// 	price:item.price
							// }
							// this.reArr.push(obj)
						})
					}
				},error => {})
			},
			requestGao(){//查询公告列表
				var paramsGao = {
					size:0
				}
				this.$requst.post('article/announcement/topList',paramsGao).then(res => {
					// console.log(res);
					if(res.data.list.length!=0){
						res.data.list.forEach(item=>{
							this.advanceListTwo.push(item.title)
						})
						this.advanceListInfo = res.data.list
					}
				},error => {})
			},
            backTop(){
                uni.pageScrollTo({
                    scrollTop: 0,
                    duration: 300
                });
            },
            chooseCate(id,e){
                this.current = e
				if(id=='') this.cid = 0
				else this.cid = id
				this.page = 1
				this.isZanw = true
				this.checkList()
            },
			checkList(){
				let paramCate ={
					category_id:this.cid,
					page:this.page,
					size:this.size,
					sort_filed:'synthetical',//排序字段。“synthetical”综合推荐
					sort_direction:'down'//排序方向。【down 由大到小|up 由小到大】
				}
				this.$requst.post('product/spu/list',paramCate).then(res=>{
					// console.log('产品',res);
					if(this.page==1) this.dataList = []
					if(res.data.list.length!=0){
						this.total = res.data.total
						// this.cid = res.data.list[0].cid//获取分类ID，以便加载更多使用
						this.zanList = res.data.list
						res.data.list.forEach(item=>{
							let cateObj = {
								id:item.main_sku.id,//商品ID
								spu_id:item.id,
								src:this.$http + item.main_sku.main_image,//商品图片
								title:item.name,//商品名称
								content:item.sub_title,//商品标题
								cate:item.tag_list,//标签列表
								price:item.main_sku.cur_price/100//商品原价
							}
							this.dataList.push(cateObj)
						})
					} else {
						// this.$toolAll.tools.showToast('没找到相关产品o(╥﹏╥)o')
					}
				},error=>{})
			},
            // addChe(e){//加入购物车事件
            //     console.log('加入购物车：'+e)
            // },
			dangGao(e){//跳转到公告详情
				uni.setStorageSync('noticeInfo',this.advanceListInfo[e])
				uni.navigateTo({
				    url:'/pagesB/noticesDetail/noticesDetail?index=2'
				})
			},
            goNotices(){//跳转到公告列表
                uni.navigateTo({
                    url:'/pagesB/notices/notices'
                })
            },
			inputFocus(){//搜索框获取焦点跳转产品页
				wx.hideKeyboard()
				uni.navigateTo({
					url:'/pagesB/keySearch/keySearch'
				})
			}
        },
    };
</script>

<style>
    
</style>