<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:[{tit:'123'},{tit:'123'},{tit:'123'}], 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>