<template>
	<view class="all_box">
		<u-tabs-swiper ref="uTabs" :list="titlelist" bg-color="#FFFFFF" font-size="27" :current="current" @change="tabsChange" :is-scroll="false" :bold="false" active-color="#000" inactive-color="#000" :bar-style="{ background: '#56ab2f', margin: '95rpx 0 0 0' }"></u-tabs-swiper>
		<swiper class="swiper_item" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item v-for="(item, index) in swimglist" :key="index" @touchmove.stop="stopTouchMove">
				<scroll-view class="scroll_bar" :scroll-y="true" @scrolltolower="expandbottom">
					<view class="chooseaddress">
						<view class="chooseaddress_p1">
							<u-icon name="map" color="#999" size="30"></u-icon>
							<view class="chdress_p1txt">请选择我的地址</view>
						</view>
						<view class="chooseaddress_p2">
							<u-icon name="arrow-right" color="#999" size="30"></u-icon>
						</view>
					</view>
					<view class="merchant_box">
						<view class="text_area">
							<view class="shop_name">
								<image src="http://img95.699pic.com/photo/50127/2945.jpg_wh860.jpg" mode="center" :lazy-load="true" class="shop_thumbnail"></image>
								<view class="right_shop_mess">
									<view class="shop_line">
										<view class="shop_line_p1">梁平家庭农场#1<u-icon name="star-fill" size="34" color="#F2B842"> </u-icon>
										</view>
										<view class="right_shop_mess_p2">></view>
									</view>
									<view class="shop_line_fl">
										<u-icon v-for="(item2,index2) in 5" :key="index2" name="star-fill" size="30" color="#F2B842"></u-icon>
									</view>
									<view class="shop_line">
										<view class="shop_line_p2">
											<u-icon :key="index2" name="map" size="30" color="#9C9C9C"></u-icon>地址2
										</view>
									</view>
								</view>
							</view>
						</view>
						<scroll-view class="display_diagram" scroll-x="true">
							<image v-for="(item2,index3) in 5" :key="index3" class="display_diagram_item" mode="center" :lazy-load="true" src="http://img95.699pic.com/photo/50127/2945.jpg_wh860.jpg"></image>
						</scroll-view>
					</view>
					<view class="merchant_box">
						<view class="text_area">
							<view class="shop_name">
								<image src="http://img95.699pic.com/photo/50127/2945.jpg_wh860.jpg" mode="center" :lazy-load="true" class="shop_thumbnail"></image>
								<view class="right_shop_mess">
									<view class="shop_line">
										<view class="shop_line_p1">梁平家庭农场#1<u-icon name="star-fill" size="34" color="#F2B842"> </u-icon>
										</view>
										<view class="right_shop_mess_p2">></view>
									</view>
									<view class="shop_line_fl">
										<u-icon v-for="(item2,index2) in 5" :key="index2" name="star-fill" size="30" color="#F2B842"></u-icon>
									</view>
									<view class="shop_line">
										<view class="shop_line_p2">
											<u-icon :key="index2" name="map" size="30" color="#9C9C9C"></u-icon>地址2
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				primary:this.$theme.primary,
				settingFile:getApp().globalData.siteinfo,
				titlelist: [{ name: '全部' },
					{ name: '距离最近' },
					{ name: '评价最高' },
					{ name: '销量最高' }
				],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				couponlist: [],
				// tabs组件的current值，表示当前活动的tab选项
				current: 0,
				// swiper组件的current值，表示当前那个swiper-item是活动的
				swiperCurrent: 0,
				//轮播图数组
				swimglist: [1, 2, 3, 4],
				swierheight: 0
			}
		},
		onLoad() {
			this.vueinit()
		},
		methods: {
			//初始化方法
			vueinit() {
				let that = this
				uni.getSystemInfo({
					success: function(res) {
						that.swierheight = res.windowWidth * 0.9 * 0.65 * 2
					}
				})
			},
			// tabs通知swiper切换并更改数据
			tabsChange(index) {
				this.swiperCurrent = index
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx
				this.$refs.uTabs.setDx(dx)
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current
				this.$refs.uTabs.setFinishCurrent(current)
				this.swiperCurrent = current
				this.current = current
			},
			//展开底部，可以查看全部信息
			expandbottom() {},
			//阻止用户手动滑动
			stopTouchMove() {
				return true
			}
		}
	}
</script>
<style scoped lang="scss">
	@import '@/common/nowvue.scss';
</style>
