123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276 |
- <!-- 限源预售 -->
- <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>
|