<template>
	<view class="content">
		<view class="search">
			<u-search shape="square"  :show-action="true" disabled @click="dump('/other/gongzhonghao/gongzhonghao')" action-text="搜索" :animation="true" :mystyle="navbarStyle"></u-search>
		</view>
		<u-sticky offset-top="0" h5-nav-height="0" bg-color='none' @fixed="juli" @unfixed="likai" style="z-index: 99;width:100%;margin:20rpx 0;">
					<!-- 只能有一个根元素 -->
			<view class="sticky" :style="[sticky]">
				<u-tabs :list="list" :is-scroll="true" :current="current" @change="change"  inactive-color="#fff" bg-color="none" active-color="#fff"></u-tabs>
			</view>
		</u-sticky>
		<view class="banner_lanmu">
			<indexBanner  @onSwiperChenge="onSwiperChenge"></indexBanner>
			<lanmu></lanmu>
		</view>
		<view class="tz_hd">
			<u-notice-bar class="tongzhi" type="success" mode="horizontal" duration="2000ms" :is-circular="false" :volume-icon="true" :more-icon="true" :list="listtongzhi"  @click="xiangqing" @getMore="liebiao"></u-notice-bar>
			<huodong></huodong>
		</view>
		<liebiao></liebiao>
		<dibunav></dibunav>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import {dumpUrl} from '@/common/util.js'
	import indexBanner from '@/components/index-banner.vue'
	import lanmu from '@/components/lanmu.vue'
	import huodong from '@/components/huodong.vue'
	import liebiao from '@/components/liebiao.vue'
	import dibunav from '@/components/dibunav.vue'
	export default {
		components:{
			indexBanner,
			lanmu,
			huodong,
			liebiao,
			dibunav
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		data() {
			return {
				current: 0,
				navbarStyle:{	//模板根据banner改变时背景色和nav背景色改变
					padding:'0 20rpx'
				},
				list: [{
					name: '精选'
				}, {
					name: '男装'
				}, {
					name: '女装'
				},{
					name: '手机'
				},{
					name: '家电'
				},{
					name: '美妆'
				},{
					name: '童装'
				}
				],
				sticky:{
					padding: '0 18rpx 0 0'
				},
				listtongzhi: [
					'这里是公告',
					'这里是公告',
					'这里是公告',
					'这里是公告'
				]
			}
		},
		methods: {
			dump(url){
				dumpUrl(url);
			},
			onSwiperChenge(bannerItem){
				// banner切换事件，返回图片下标
				
				this.navbarStyle = {
					color: '#fff',
					backgroundColor: bannerItem.background_color,
					padding:'0 20rpx',
					position:'absolute'
				}
			},
			change(index) {
				this.current = index;
			},
			juli(){
				//吸顶时事件
				
				this.sticky = {
					//#ifdef APP-PLUS 
					padding: '40rpx 18rpx 0 0',
					//#endif
					//#ifdef MP-WEIXIN
					padding: '130rpx 18rpx 0 0',
					//#endif
					background: 'linear-gradient(to bottom ,#ff7c00,#ff7c00)'
				} 
				
			},
			likai(){
				//取消吸顶时事件
				this.sticky = {
					padding: '0 18rpx 0 0',
				} 
			},
			xiangqing(){
				dumpUrl('/other/gongzhonghao/gongzhonghao')
			},
			liebiao(){
				dumpUrl('/other/gongzhonghao/gongzhonghao')
			}
		}
	}
</script>

<style>
	.content {
		padding-top: 1px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: #eee;
	}
	.search{
		width: 95%;
		margin: 0 auto;
		z-index: 99;
		margin-top: 60rpx !important;
	}
	/*#ifdef H5*/
		.search{
			margin-top: 30rpx !important;
		}
	/*#endif*/
	/*#ifdef MP-WEIXIN*/
		.search{
			margin-top: 70rpx !important;
		}
		.search .u-search{
			width: 60%;
		}
	/*#endif*/
	.banner_lanmu{
		width: 100%;
		background: #fff;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
	}
	.tz_hd{
		width: 100%;
		margin: 40rpx 0 12rpx 0;
		padding: 35rpx 0;
		background: #fff;
		border-radius: 10px;
	}
	.tongzhi{
		width: 95%;
		margin: 0 auto;
		margin-bottom: 10rpx;
	}
</style>
