<template>
|
<div class="home-view">
|
<div class="weui-search-bar">
|
<div class="weui-search-bar__form" @click="jumpMenu()">
|
<label class="weui-search-bar__label">
|
<i class="weui-icon-search"></i>
|
<span>{{dict.search}}</span>
|
</label>
|
</div>
|
</div>
|
<swiper-component v-if="swiperData" :swiperSource="swiperData" :swiperConfig="swiperConfig" @swiperjump="swiperJumpMenu"></swiper-component>
|
<nav-grid-component v-if="navGrids" class="border-bottom-5" :grids="navGrids" @navgridjump="navgridJumpMenu"></nav-grid-component>
|
<goods-list-component v-for="(item, index) in goods" :key="index" :goods="item" @goodslistjump="goodslistJumpMenu"></goods-list-component>
|
<bottom-line-component v-if="message" :message="message"></bottom-line-component>
|
<tab-bar-component v-if="tabMenu" :menu="tabMenu"></tab-bar-component>
|
</div>
|
</template>
|
|
<script>
|
import {dict} from '../store/dictionary'
|
import {mainmenu} from '../store/menulist'
|
import {homeData} from '../store/mockdata'
|
import swiperComponent from '../components/swiperComponent'
|
import navGridComponent from '../components/navGridComponent'
|
import goodsListComponent from '../components/goodsListComponent'
|
import bottomLineComponent from '../components/bottomLineComponent'
|
import tabBarComponent from '../components/tabBarComponent'
|
export default {
|
name: 'home',
|
components: { swiperComponent, navGridComponent, goodsListComponent, tabBarComponent, bottomLineComponent },
|
data () {
|
return {
|
dict: dict,
|
swiperConfig: {
|
loop: true,
|
autoplay: 3000,
|
pagination: '.swiper-pagination',
|
paginationClickable: true
|
},
|
swiperData: null,
|
goods: null,
|
navGrids: null,
|
tabMenu: null,
|
message: null
|
}
|
},
|
methods: {
|
jumpMenu () {
|
this.$router.push({name: 'goods', params: {header: 'search'}})
|
},
|
swiperJumpMenu (message) {
|
this.$router.push({name: message.view, params: {type: message.value}})
|
},
|
navgridJumpMenu (message) {
|
this.$router.push({name: message.view, params: {type: message.value}})
|
},
|
goodslistJumpMenu (message) {
|
if (message.view === 'goods') {
|
this.$router.push({name: message.view, params: {type: message.type, header: message.header}})
|
} else if (message.view === 'goodsdetail') {
|
this.$router.push({name: message.view, params: {id: message.id}})
|
}
|
}
|
},
|
mounted: function () {
|
this.tabMenu = mainmenu.map(item => {
|
if (item.view === this.$route.name) {
|
item.active = true
|
} else {
|
item.active = false
|
}
|
return item
|
})
|
setTimeout(() => {
|
this.swiperData = JSON.parse(JSON.stringify(homeData.swiperData))
|
}, 500)
|
setTimeout(() => {
|
this.navGrids = JSON.parse(JSON.stringify(homeData.navGrids))
|
}, 1000)
|
setTimeout(() => {
|
this.goods = JSON.parse(JSON.stringify(homeData.goods))
|
this.tabMenu[2].badge = 3
|
this.message = dict.bottomtip
|
}, 2000)
|
|
$('body').bind('touchmove', () => {
|
if ($(document).scrollTop() >= 140) {
|
$('.weui-search-bar').css({background: '#FFFFFF', opacity: 1})
|
} else {
|
$('.weui-search-bar').css({background: 'transparent', opacity: 0.8})
|
}
|
})
|
$('body').bind('touchend', () => {})
|
// let loading = false //状态标记
|
// $(document.body).infinite().on('infinite', () => {
|
// if(loading) return;
|
// loading = true;
|
// setTimeout(function() {
|
// $("#list").append("<p> 我是新加载的内容 </p>")
|
// loading = false
|
// }, 1500); //模拟延迟
|
// })
|
}
|
}
|
</script>
|
|
<style scoped>
|
.home-view {
|
overflow: hidden;
|
padding-bottom: 50px;
|
}
|
.weui-search-bar {
|
position: fixed;
|
top: 0px;
|
z-index: 100;
|
width: 100%;
|
padding: 5px 10px;
|
opacity: 0.8;
|
max-width: 41.2rem;
|
background: transparent;
|
}
|
.weui-search-bar:before {
|
border: none;
|
}
|
.weui-search-bar:after {
|
border: none;
|
}
|
.weui-search-bar__form {
|
background: transparent;
|
height: 30px;
|
}
|
.weui-search-bar__form:after {
|
border-radius: 35px;
|
}
|
.weui-search-bar__label {
|
border-radius: 20px;
|
}
|
</style>
|
