112 lines
4.2 KiB
Vue
112 lines
4.2 KiB
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" 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 :ifTitle="true"></list-one>
|
||
|
|
</view>
|
||
|
|
<view class="mar-s60">
|
||
|
|
<pitera textStr="——到底啦——"></pitera>
|
||
|
|
</view>
|
||
|
|
<customer-one></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 pitera from '@/components/nothing/pitera';
|
||
|
|
import customerOne from '@/components/customer/customer-one';
|
||
|
|
export default {
|
||
|
|
components:{
|
||
|
|
'foot-tab' :footTab,
|
||
|
|
gongGeFunction,
|
||
|
|
statusNav,
|
||
|
|
swiperPu,
|
||
|
|
listOne,
|
||
|
|
pitera,
|
||
|
|
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:60,iconHeight:60,title:'推荐套装'},
|
||
|
|
{url:'/pages/tabbar/cate/cate?index=1',iconsrc:'/static/deleteImg/icon-ge-02.png',iconWidth:60,iconHeight:60,title:'喜糖组合'},
|
||
|
|
{url:'/pages/tabbar/cate/cate?index=2',iconsrc:'/static/deleteImg/icon-ge-03.png',iconWidth:60,iconHeight:60,title:'喜盒自选'},
|
||
|
|
{url:'/pages/tabbar/cate/cate?index=3',iconsrc:'/static/deleteImg/icon-ge-04.png',iconWidth:60,iconHeight:60,title:'喜糖自选'},
|
||
|
|
{url:'/pages/tabbar/cate/cate?index=4',iconsrc:'/static/deleteImg/icon-ge-05.png',iconWidth:60,iconHeight:60,title:'迎宾糖散糖'},
|
||
|
|
{url:'/pages/tabbar/cate/cate?index=5',iconsrc:'/static/deleteImg/icon-ge-06.png',iconWidth:60,iconHeight:60,title:'瓜子花生'},
|
||
|
|
{url:'/pages/tabbar/cate/cate?index=6',iconsrc:'/static/deleteImg/icon-ge-07.png',iconWidth:60,iconHeight:60,title:'伴手礼'},
|
||
|
|
{url:'/pagesB/buy-read/buy-read',iconsrc:'/static/deleteImg/icon-ge-08.png',iconWidth:60,iconHeight:60,title:'购买须知'},
|
||
|
|
{url:'/pagesB/business-profile/business-profile',iconsrc:'/static/deleteImg/icon-ge-09.png',iconWidth:60,iconHeight:60,title:'商家简介'},
|
||
|
|
{url:'/pages/tabbar/cate/cate?index=0',iconsrc:'/static/deleteImg/icon-ge-10.png',iconWidth:60,iconHeight:60,title:'其他推荐'},
|
||
|
|
],
|
||
|
|
keyword:'',
|
||
|
|
isplay:false,
|
||
|
|
playTimer:null
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onReachBottom() {
|
||
|
|
|
||
|
|
},
|
||
|
|
onHide() {
|
||
|
|
clearTimeout(this.playTimer);
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
this.playTimer = setTimeout(()=>{
|
||
|
|
this.isplay = true;
|
||
|
|
},2000)
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
// 缓存状态栏+标题栏的高度
|
||
|
|
const query = wx.createSelectorQuery().in(this)
|
||
|
|
query.select('.head-box').boundingClientRect((rect) => {
|
||
|
|
this.headHeight = rect.height - this.padt;
|
||
|
|
}).exec()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
chooseGe(obj) {
|
||
|
|
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>
|