145 lines
5.0 KiB
Vue
145 lines
5.0 KiB
Vue
<template>
|
|
<view class="pad-x180">
|
|
<status-nav :ifReturn="false" titleColor="#FFFFFF" navBarTitle="首页" backgroudColor="#fe4b57"></status-nav>
|
|
<view class="head-box" style="background: linear-gradient( to top, #ff3574 0%, #fe4b57 100%); padding: 0 0 20px; margin-top: -20rpx;">
|
|
<view class=" mar-zy40 radius30 pad-zy30 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: 15+'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="geList"></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';
|
|
import { mapState } from 'vuex'//引入mapState
|
|
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:[]
|
|
}
|
|
},
|
|
computed:{
|
|
...mapState({
|
|
geList: state => state.moduleA.geList,
|
|
}),
|
|
},
|
|
onShareAppMessage() {
|
|
|
|
},
|
|
onReachBottom(e) {
|
|
this.$refs.listhome.moreEv();
|
|
},
|
|
onHide() {
|
|
clearTimeout(this.playTimer);
|
|
this.isplay = false;
|
|
},
|
|
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) {
|
|
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>
|