property/user_ui/pages/goods/index.vue

<template>
  <view class="home" :style="'padding-top:'+nvaHeight+'px;'">
		<view class="navbox" :style="'backgroundColor:'+backgroundColor">
			<uni-nav-bar  color="#272727" title="商圈"  :background-color="backgroundColor" :border="false" statusBar='true' fixed="true">
			</uni-nav-bar>
			<view class="flexc plr12 mt10 mb10">
				<view class="topl flexc">
					<image :src="adrimg" ></image>
					<view class="over">{{city}}</view>
				</view>
				<view class="search flexc">
					<image :src="search"></image>
					<!-- confirm-type="search" @confirm="getConfirm" -->
					<input placeholder="请输入商品名称进行搜索"  v-model="text"/>
					<view class="btn" @click="getConfirm">搜索</view>
				</view>
			</view>
		</view>
		<!-- 主体 -->
		<view class="wymain mt10">
			
			<!-- 轮播图 circular-->
			<swiper  class="swiper mb12" circular :indicator-color="incolorh" :indicator-active-color="activecolorh" :indicator-dots="indicatorDotsh" :autoplay="autoplayh">
				<!-- v-if="checkPermi(['system:application:list'])" -->
				<swiper-item>
					<image :src="banner" class="bannerimg"></image>
				</swiper-item>
			</swiper>
			<view class="grid mb18">
				<view class="grid-item-box" @click="getHouseFn" >
					<view class="img"><image :src="gtaba" class="imga"></image></view>
					<view>积分商城</view>
				</view>
				<view class="grid-item-box" @click="getCarFn" >
					<view class="img"><image :src="gtabb" class="imga"></image></view>
					<view>每日签到</view>
				</view>
				<view class="grid-item-box" @click="getBusListFn(1)" >
					<view class="img"><image :src="gtabc" class="imga"></image></view>
					<view>领券中心</view>
				</view>
				<view class="grid-item-box" @click="getBusListFn(1)" >
					<view class="img"><image :src="gtabd" class="imga"></image></view>
					<view>精选商品</view>
				</view>
			</view>
		</view>
		<!-- 今日优惠 -->
		<view class="hlist">
			<view class="hlista flexc mb12 ">
				<view class="line" ></view>
				<view class="tit flex1">今日优惠</view>
				<view class="more flex0 flexc">更多<image :src="more"></image></view>
			</view>
		</view>
		<view class="mb20">
			<box-list type='coupon' :datainfo="list"></box-list>	
		</view>
		<!-- 推荐商品 -->
		<view class="hlist">
			<view class="hlista flexc mb15 ">
				<view class="line" ></view>
				<view class="tit flex1">推荐商品</view>
				<view class="more flex0 flexc" @click="getMoreFn">更多<image :src="more"></image></view>
			</view>
		</view>
		<view class="mb4">
			<box-list type='goods' :datainfo="list"></box-list>	
		</view>

	<loading></loading>
	<pop-up :type="type" @getClose="getClose"></pop-up>
	 <footers v-if="isfootflag"  :footerindex="footerindex"></footers>
  </view>
</template>

<script>
import footers from '@/components/footer/footer.vue'
import notice from '@/components/swiper/notice.vue'
import boxList from "@/components/box/list.vue"
import popUp from "@/components/box/popup.vue"
  export default {
	components:{footers,notice,boxList,popUp},
	data(){
		return{
			footerindex:'goods',
			isfootflag:true,
			nvaHeight:96,
			activeColor:'#A7A7A7',
			nactiveColor:'#E6E6E6',
			text:'',
			backgroundColor: "transparent",
			adrimg:require("@/static/images/goods/adr.png"),
			search:require('@/static/images/goods/search.png'),
			banner:require('@/static/images/goods/banner.png'),
			gtaba:require("@/static/images/goods/gtaba.png"),
			gtabb:require("@/static/images/goods/gtabb.png"),
			gtabc:require("@/static/images/goods/gtabc.png"),
			gtabd:require("@/static/images/goods/gtabd.png"),
			more:require("@/static/images/home/more.png"),
			type:'',//wygj
			wtdt:"加载更多",
			autoplay:false,
			autoplayh:false,
			incolorh:'#E6E6E6',
			activecolorh:'#A7A7A7',
			indicatorDotsh: false,
			city:'幸福大街',
			list:[],
			tabval:0,
			tablist:[{tit:'本地资讯',val:"0"},{tit:'供求资讯',val:"1"},{tit:'热门资讯',val:"2"}],
			noticelist:[{noticeTitle:"您有1条报修信息，请及时查看处理！",num:'11-14'},{noticeTitle:"您有1条报修信息，请及时查看处理！",num:'11-14'}]
		}
	},
	onPageScroll(e) {
		var scrollTop = Number(e.scrollTop);
		if (scrollTop > 0) {
			this.backgroundColor = '#FFF7E1'
		} else {
			this.backgroundColor = 'transparent'
		}
	},
    onLoad: function() {
		uni.getSystemInfo({
			success: (e) => {
				this.nvaHeight = Number(e.statusBarHeight)+96;
			}
		})
    },
	methods:{
		getClose(){
			this.type=''
		},
		getNoticeDet(){
			
		},
		getZhanFn(){
			this.zhanflag=!this.zhanflag
		},
		getMoreFn(){//积分商城
			this.$tab.navigateTo(`/goods/pages/points/index`) 
		},
	}
  }
</script>
<style lang="scss" scoped>
.home{min-height: 100vh;background: linear-gradient(180deg, #FFF6E1 0%, rgba(214,164,164,0) 100%) no-repeat;background-size: 100% 614rpx;}
.navbox{position: fixed;left: 0;right: 0;top: 0;z-index: 4;	}
.navbg{width: 100%;height: 782rpx;}
.wymain{z-index: 2;position: relative;padding: 0 24rpx;}

.topl{overflow: hidden;padding-left: 2rpx;max-width: 240rpx;
	image{width: 18rpx;height: 22rpx;margin-right: 14rpx;flex: 0 0 auto;}
	view{font-weight: bold;font-size: 26rpx;color: #272727;}
}
.search{flex: 1;margin-left: 16rpx;height: 64rpx;background: #FFFFFF;border-radius: 32rpx;border: 2rpx solid #FE5A0E;padding-left: 24rpx;box-sizing: border-box;
	image{width: 32rpx;height: 34rpx;margin-right: 22rpx;flex: 0 0 auto;}
	input{flex: 1;font-size: 26rpx;color: #272727;}
	.btn{width: 100rpx;height: 64rpx;background: #FE5A0E;border-radius: 32rpx;flex: 0 0 auto;font-weight: bold;text-align: center;line-height: 64rpx;font-size: 26rpx;color: #FFFFFF;}
}
.swiper{
	width: 100%;height: 314rpx;
	image{width: 100%;height: 314rpx;}
}
.line{width: 14rpx;height: 48rpx;background: #FE5A0E;border-radius:0 12rpx 12rpx 0;margin-right: 18rpx;}
// tab栏
.grid{
	display: flex;align-items: center;flex-wrap: wrap;
	.grid-item-box {display: flex;flex-direction: column;align-items: center;width: 25%;box-sizing: border-box;
		.img{width: 108rpx;height: 108rpx;display: flex;align-items: center;justify-content: center;
			.imga{width: 108rpx;height: 108rpx;}
		}
		view{font-weight: bold;font-size: 26rpx;color: #272727;position: relative;}
	}
}

.hlist{
	.hlista{padding: 8rpx 0;
		.limg{width: 32rpx;height: 32rpx;margin-right: 18rpx;}
		.tit{font-weight: bold;font-size: 30rpx;color: #272727;}
		.more{font-weight: 500;font-size: 24rpx;color: #AAAAAA;
			image{width: 18rpx;height: 16rpx;margin-left: 16rpx;}
		}
		.htabs{flex: 1;overflow: auto;padding: 10rpx 0;
			view{font-weight: 500;font-size: 28rpx;color: #666666;position: relative;height: 56rpx;line-height: 56rpx;margin-right: 48rpx;flex: 0 0 auto;
			&.act{font-size: 15px;font-weight: bold;color: #272727;
				&:after{width: 36rpx;height: 10rpx;background: linear-gradient(150deg, rgba(177,240,216,0.97), rgba(3,218,138,0.97));border-radius: 6rpx;content: '';position: absolute;bottom: -10rpx;left: 50%;margin-left: -18rpx;}
			}
			}
		}
	}
	
}

</style>