欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 小程序教程 >

    微信小程序五洲到家超市店面页面设计制作开发教程

    2018-07-19 09:24 来源/作者:懒人模板 分类:小程序教程  « »
    本文给大家带来的是微信小程序五洲到家超市店面页面设计制作开发教程,制作好以后效果图如下:
    一、wxml页面代码如下:
    <!--pages/home/home.wxml-->
    <import src="../../template/slider/slider.wxml"/>
    <import src="../../template/product-item/product-item.wxml"/>
    <import src="../../template/cart/cart.wxml"/>
    <view class="slider-container">
        <template is="slider" data="{{slider}}"/>
        <view catchtap="toStoreDetail" class="btn-show-store-detail">门店详情</view>
    </view>
    <!-- 店铺简介 -->
    <view class="store-intro">
        <view class="store-pic-name">
            <view class="store-name" catchtap="toStoreDetail">
                <text>{{storeData.store_name}}</text>
                <text class="store-status {{storeData.store_sta < 2 ? 'green' : 'gray'}}" >{{storeData.store_sta_format}}</text>
            </view>
            <navigator url="../more/more" class="btn-more-store">
                <text class="btn-more-store-text">更多门店</text>
                <span class="icon icon-right"></span>    
            </navigator>
        </view>
    </view>
    <!-- 优惠信息 -->
    <view class="discount-info" catchtap="changeShowStoreDetail">
        <view class="discount-msg">
            <text class="label">优惠:</text>
            <text class="dtag" style="background-color:{{storeData.store_activity_format.backgroundColor}}">{{storeData.store_activity_format.tag}}</text>
            <text class="tagstr">{{storeData.store_activity_format.tagStr}}</text>
        </view>
        <i class="icon icon-right btn-show-discount"></i>
    </view>
    <!-- 营销位 -->
    <view class="sale-box" wx:if="{{saleList.length > 0}}">
        <view class="pt20"></view>
        <view class="sale-md sale-md{{saleType}}">
            <view wx:for="{{saleList}}" wx:for-item="sale_item" class="sale-md-item{{index}}" data-title="{{sale_item.actionTitle}}" data-href="{{sale_item.actionValue}}" bindtap="saleTap">
                <image src="{{sale_item.iconUrl}}" mode="aspectFill"></image>
            </view>
        </view>
    </view>
    <view class="pt20"></view>
    
    <!-- 商品(分类导航|商品列表) -->
    <view class="com-product" wx:if="{{showProCate}}">
            <scroll-view  scroll-x="{{true}}" scroll-left="{{scrollLeft}}"  class="scroll-bar" style="width:100%;" >
                <view style="width: {{idxData.navbar.length * 168}}rpx">
                    <view wx:for="{{idxData.navbar}}" wx:for-item="cate" class="cate-item {{index == currentIndex ? 'active' : ''}}" data-id="{{cate.nav_id}}" data-index="{{index}}" bindtap="cateClick">{{cate.nav_name}}</view>
                </view>
            </scroll-view>
            <view class="product-wrap">
                <swiper class="product-swiper" current="{{currentIndex}}" autoplay="{{false}}"  bindchange="productSwiperScroll" style="height: {{swiperHeight}}px">
                    <swiper-item wx:for="{{idxData.navbar}}">
                        <view class="pro-list">
                            <block  wx:for="{{pros[index]}}" wx:for-item="pro" wx:for-index="idx">
                                 <template is="productItem" data="{{ product: pro, index: idx, findex: index,  showCartCtrl: storeData.delivery_sta==1, currentProCount: currentProCounts[index][idx] }}" />
                            </block>
                            <view class="no-products" wx:if="{{pros[index].length == 0}}">
                                <image src="../../image/no-pros.png"></image>
                                <view>啊哦,还没有商品数据</view>
                            </view>
                            <view class="products-loading" wx:if="{{showLoadingFlag[index]}}">
                                <image src="../../image/loading-super.gif"></image>
                                <text>努力加载中</text>
                            </view>
                            <view class="no-more-products" wx:if="{{showLoadedFlag[index]}}">
                                没有更多数据了~
                            </view>
                        </view>
                    </swiper-item>
                </swiper>
            </view>
    
    </view>
    
    
    <!-- 门店公告弹层 -->
    <view class="mask-store-detail {{showStoreDetail ? 'show' : '' }}" catchtap="changeShowStoreDetail">
        <view class="store-detail-scroll">
            <view class="store-detail-name">{{storeData.store_name}}</view>
            <view class="store-address">
                <span class="icon icon-gps"></span>
                <text>{{storeData.store_address}}</text>
            </view>
            <view class="mask-title">
                <view class="line l"></view>
                <view class="span">
                    <text class="i"></text>
                    <text class="strong">优惠信息</text>
                    <text class="i"></text>
                </view>
                <view class="line r"></view>
            </view>
            <view class="discount-list">
                <view wx:for="{{storeData.store_activity_list}}" wx:for-item="store_activity_item">
                    <view class="store-activity-item">
                        <text class="dtag" style="background-color:{{store_activity_item.backgroundColor}}">{{store_activity_item.tag}}</text>
                        <text class="tagstr">{{store_activity_item.tagStr}}</text>       
                    </view>
                </view>
            </view>
            <view class="mask-title">
                <view class="line l"></view>
                <view class="span">
                    <text class="i"></text>
                    <text class="strong">门店公告</text>
                    <text class="i"></text>
                </view>
                <view class="line r"></view>
            </view>
            <view class="store-announcement" wx:for="{{storeAnnouncement}}" wx:for-item="store_announcement_item">
                {{store_announcement_item}}
            </view>
            <view class="btn-close-store-detail">
                <span class="icon icon-close-round"></span>
            </view>
        </view>    
    </view>
    
    <view class="status-bar" wx:if="{{storeData.delivery_sta > 1}}">
        {{storeData.delivery_sta_str}}
    </view>
    
    <view wx:else>
          <template is="cart" data="{{showCartPanel: showCartPanel, cartBaseInfo: cartBaseInfo}}" />
    </view>
    

    点击扫描效果预览免费下载免登陆网盘下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议