xiongmao/pages/index/limited-source-pre-sale/limited-source-pre-sale.vue

<!-- 限源预售 -->
<template>
	<view class="wrap">

		<view class="swiper-box">
			<swiper class="swiper" indicator-dots="true" indicator-color="#fff" indicator-active-color="#000"
				:circular="true" autoplay="true" interval="3000" duration="500">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<view class="swiper-item">
						<image :src="item" class="banner-img" mode="aspectFill" />
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="header-bottom">
			<view class="header-item" @tap="showSeason">
				时令
				<image src="../../../static/sanjiao-bottom.png"
					:class="[isShowSeason == false ? 'sanjiao' : 'sanjiaoSelect']" mode="widthFix"></image>
			</view>
			<view class="header-item" @tap="showArea">
				地域
				<image src="../../../static/sanjiao-bottom.png"
					:class="[isShowArea == false ? 'sanjiao' : 'sanjiaoSelect']" mode="widthFix"></image>
			</view>
			<view class="header-item" @tap="showType">
				品类
				<image src="../../../static/sanjiao-bottom.png"
					:class="[isShowType == false ? 'sanjiao' : 'sanjiaoSelect']" mode="widthFix"></image>
			</view>

			<!-- 时令-弹窗 -->
			<view v-show="isShowSeason">
				<view class="mask" @tap="closeSeason"></view>
				<view class="collectionTime-window">
					<view class="collectionTime-item">
						1月
					</view>
					<view class="collectionTime-item">
						2月
					</view>
					<view class="collectionTime-item">
						3月
					</view>
					<view class="collectionTime-item">
						4月
					</view>
					<view class="collectionTime-item">
						5月
					</view>
					<view class="collectionTime-item">
						6月
					</view>
					<view class="collectionTime-item">
						7月
					</view>
					<view class="collectionTime-item">
						8月
					</view>
					<view class="collectionTime-item">
						9月
					</view>
					<view class="collectionTime-item">
						10月
					</view>
					<view class="collectionTime-item">
						11月
					</view>
					<view class="collectionTime-item">
						12月
					</view>
				</view>
			</view>
			<!-- 时令-弹窗  -->

			<!-- 地域-弹窗 -->
			<view v-show="isShowArea">
				<view class="mask" @tap="closeArea"></view>
				<view class="collectionTime-window">
					<view class="collectionTime-item">
						华中地区
					</view>
					<view class="collectionTime-item">
						华北地区
					</view>
					<view class="collectionTime-item">
						华东地区
					</view>
					<view class="collectionTime-item">
						华南地区
					</view>
					<view class="collectionTime-item">
						东北地区
					</view>
					<view class="collectionTime-item">
						西北地区
					</view>
				</view>
			</view>
			<!-- 地域-弹窗  -->

			<!-- 品类-弹窗 -->
			<view v-show="isShowType">
				<view class="mask" @tap="closeType"></view>
				<view class="allCategories-window">
					<view class="allCategories-item">
						<image src="../../../static/categories-1.png" mode="heightFix"></image>
						地产本草
					</view>
					<view class="allCategories-item">
						<image src="../../../static/categories-2.png" mode="heightFix"></image>
						草本茗茶
					</view>
					<view class="allCategories-item">
						<image src="../../../static/categories-3.png" mode="heightFix"></image>
						干菌蔬果
					</view>
					<view class="allCategories-item">
						<image src="../../../static/categories-4.png" mode="heightFix"></image>
						五谷杂粮
					</view>
					<view class="allCategories-item">
						<image src="../../../static/categories-5.png" mode="heightFix"></image>
						水产干货
					</view>
					<view class="allCategories-item">
						<image src="../../../static/categories-6.png" mode="heightFix"></image>
						调味佳料
					</view>
					<view class="allCategories-item">
						<image src="../../../static/categories-7.png" mode="heightFix"></image>
						地产畜禽
					</view>
					<view class="allCategories-item">
						<image src="../../../static/categories-8.png" mode="heightFix"></image>
						生态饮品
					</view>
					<view class="allCategories-item">
						<image src="../../../static/categories-9.png" mode="heightFix"></image>
						养生器皿
					</view>
					<view class="allCategories-item">
						<image src="../../../static/categories-10.png" mode="heightFix"></image>
						地产良酿
					</view>
				</view>
			</view>
			<!-- 品类-弹窗  -->

		</view>
		
		<scroll-view scroll-x="true" class="tab-list">
			<view :class="{ 'active' : isActive === index }" class="child" v-for="(item,index) in navList"
				:key="index" @click="checked(index)">
				{{item.title}}
			</view>
		</scroll-view>
		
		<view class="list">
			<view class="product-item">
				<image src="../../../static/img-4.png" class="product-item-img" mode="aspectFill"></image>
				<view class="product-item-column">
					<view class="product-name">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
					<view class="recommend-tag">
						<image src="../../../static/icon-3.png" mode=""></image>
						口干多汁，品质极佳
					</view>
					<view class="recommend-msg">7月、8月采摘 | 新疆</view>
					<view class="recommend-row">
						限量100份 <text class="margin">已预订<text class="red">56</text>份</text>
					</view>
					<view class="product-item-price">￥394.00</view>
				</view>
			</view>
			<view class="product-item">
				<image src="../../../static/img-4.png" class="product-item-img" mode="aspectFill"></image>
				<view class="product-item-column">
					<view class="product-name">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
					<view class="recommend-tag">
						<image src="../../../static/icon-3.png" mode=""></image>
						口干多汁，品质极佳
					</view>
					<view class="recommend-msg">7月、8月采摘 | 新疆</view>
					<view class="recommend-row">
						限量100份 <text class="margin">已预订<text class="red">56</text>份</text>
					</view>
					<view class="product-item-price">￥394.00</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				//轮播
				swiperList: [
					'../../../static/banner-5.png',
					'../../../static/banner-5.png',
					'../../../static/banner-5.png'
				],

				//时令-弹窗
				isShowSeason: false,

				//地域-弹窗
				isShowArea: false,

				//品类-弹窗
				isShowType: false,
				
				//选项卡
				isActive: 0,
				navList: [{
					index: 0,
					title: '春季预售',
				}, {
					index: 1,
					title: "夏季预售",
				}, {
					index: 2,
					title: "秋季预售",
				}, {
					index: 3,
					title: "冬季预售",
				}],
			}
		},
		methods: {
			/**
			 * 时令-弹窗
			 */
			showSeason() {
				this.isShowSeason = true;
			},
			closeSeason() {
				this.isShowSeason = false;
			},

			/**
			 * 地域-弹窗
			 */
			showArea() {
				this.isShowArea = true;
			},
			closeArea() {
				this.isShowArea = false;
			},

			/**
			 * 品类-弹窗
			 */
			showType() {
				this.isShowType = true;
			},
			closeType() {
				this.isShowType = false;
			},
			
			//选项卡
			checked(index) {
				this.isActive = index
			},
			
		}
	}
</script>

<style scoped lang="scss">
	@import "./limited-source-pre-sale.css";
</style>