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

<!--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>