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

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

上一篇 下一篇
本文给大家带来的是微信小程序五洲到家超市店面页面设计制作开发教程,制作好以后效果图如下:
一、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>
 
二、wxss样式文件代码如下:
/* pages/home/home.wxss */
.slider-container{
    position: relative;
}
.btn-show-store-detail{
    display: flex;
    align-items: center;
    position:absolute;
    right: 30rpx;
    bottom: 50rpx;
    padding: 0 10rpx;
    width: 70rpx;
    height: 86rpx;
    border: solid #ccc 3rpx;
    background-color: rgba(255,255,255,.8);
    font-size: 24rpx;
    color: #222;
    text-align: center;
    border-radius: 86rpx;
}
.store-intro{
    padding: 10rpx 20rpx;
    background-color: #fff;
    border-bottom: solid #e8e8e8 3rpx;
}
.store-pic-name{
    display: flex;
    align-items: center;
}
.store-name{
    margin-right: 50rpx;
    padding: 20rpx 0; 
    flex-grow: 1;
    display: flex;
    align-items: center;
    font-size: 32rpx;
    color: #222;
}
.store-status{
    flex-shrink:0;
    margin-left: 8rpx;
    border: solid #25ae5f 3rpx;
    border-radius: 4px;
    font-size: 24rpx;
    color: #25ae5f;
    padding: 3rpx 4rpx;
}
.store-status.green{
    color:#25ae5f;
    border-color: #25ae5f;
}
.store-status.gray{
    color:#ccc;
    border-color: #ccc;
}
.btn-more-store{
    flex-shrink:0;
    display: flex;
    align-items: center;
    padding: 20rpx;
    padding-right: 0;
    color: #999;
    font-size: 30rpx;
}
.btn-more-store .icon{
    font-size: 24rpx;
}
.discount-info{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20rpx;
    height: 88rpx;
    background-color: #fff;
}
.discount-msg{
    display: flex;
    align-items: center;
    font-size: 28rpx;
}
.discount-msg .label{
    flex-shrink: 0;
    color: #222;
}
.discount-msg .tagstr{
    width: 480rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #666;
}
.btn-show-discount{
    flex: 0 0 45rpx;
    color: #666;
    font-size: 30rpx;
    text-align: center;
}
/*优惠小标签*/
.dtag{
    display: inline-block;
    margin: 4rpx;
    padding: 4rpx 6rpx;
    color: #fff;
    font-style: normal;
    font-weight: normal;
    background-color: #49caec;
    border-radius: 4px;
    font-size: 24rpx;
}
.dtag.arrow{
    position: relative;
    margin-right: 16rpx;
}
.dtag.arrow .b{
    content:'';
    margin-top: -6rpx;
    position: absolute;
    top: 50%;
    right: -12rpx;
    width: 0;
    height: 0;
    border: solid 8rpx;
    border-color: transparent;
    border-left-color: #fd1268;
}
/*弹框*/
.mask-store-detail{
    visibility: hidden;
    position: fixed;
    z-index: 100000;
    top: 0;
    left: 0;
    padding-top: 10%;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: rgba(0,0,0,.8);
    color: #fff;
    font-size: 30rpx;
    transform: scale(0);
    transition: transform .2s;
}
.mask-store-detail.show{
    transform: scale(1);
    visibility: visible;
}
.store-detail-scroll{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.store-detail-scroll .store-detail-name{
    font-size: 40rpx;
}
.store-address{
    margin-top: 25rpx;
    font-size: 28rpx;
}
.store-address text{
    margin-left: 5rpx;
}
.mask-title{
    position:relative;
    margin: 60rpx 0 40rpx;
    width: 85%;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mask-title .line{
    display: block;
    flex-grow: 1;
    height: 3px;
    background-color: #fff;
}
.mask-title .span{
    margin:0 10rpx;
    display: flex;
    align-items: center;
    justify-content:space-between;
    flex-shrink:0;
}
.mask-title .span .i,.mask-title .span .strong{
    display: block; /*这是必须的*/
}
.mask-title .span .i{
    width: 6rpx;
    height: 6rpx;
    background-color: #fff;
    transform: rotate(45deg);
}
.mask-title .span .strong{
    padding: 0 20rpx;
}
.discount-list{
    width:80%;
    overflow: hidden;
}
.store-activity-item{
    display: flex;
    align-items: center;
    margin: 15rpx auto;
    padding: 0 20rpx;
}
.store-activity-item .tagstr{
    word-break: break-all;
    font-size: 28rpx;
}
.store-announcement{
    width:80%;
    line-height: 1.8;
}
.btn-close-store-detail{
    margin-top: 80rpx;
    color: #fff;
    text-align: center;
}
.btn-close-store-detail span{
    font-size: 70rpx;
}
/*营销位*/
.sale-box{
    border-top: solid #e8e8e8 1px;
}
.sale-md{
    position: relative;
}
.sale-md view{
    position: absolute;
    border: solid #e8e8e8;
    border-width: 0 1px 1px 0;
}
.sale-md image{
    display: block;
    margin: auto;
    max-height: 100%;
    max-width: 100%;
}
.sale-md1{
    height: 400rpx;
}
.sale-md1 .sale-md-item0{
    left: 0;
    top: 0;
    width: 290rpx;
    height: 400rpx;
    border-bottom: none;
}
.sale-md1 .sale-md-item1,
.sale-md1 .sale-md-item2,
.sale-md1 .sale-md-item3,
.sale-md1 .sale-md-item4{
    width: 230rpx;
    height: 200rpx;
}
.sale-md1 .sale-md-item1{
    left: 290rpx;
    top: 0;
}
.sale-md1 .sale-md-item2{
    left: 520rpx;
    top: 0;
    border-right: none;
}
.sale-md1 .sale-md-item3{
    left: 290rpx;
    top: 200rpx;
    border-bottom: none;
}
.sale-md1 .sale-md-item4{
    left: 520rpx;
    top: 200rpx;
    border-right: none;
    border-bottom: none;
}
.sale-md2{
    height: 375rpx;
}
.sale-md2 view{
    width: 25%;
    height: 50%;
}
.sale-md2 .sale-md-item0{
    left: 0;
    top: 0;
}
.sale-md2 .sale-md-item1{
    left: 25%;
    width: 50%;
    top: 0;
}
.sale-md2 .sale-md-item2{
    left: 75%;
    top: 0;
    border-right: none;
}
.sale-md2 .sale-md-item3{
    left: 0;
    top: 50%;
    border-bottom: none;
}
.sale-md2 .sale-md-item4{
    left: 25%;
    top: 50%;
    border-bottom: none;
}
.sale-md2 .sale-md-item5{
    left: 50%;
    top: 50%;
    border-bottom: none;
}
.sale-md2 .sale-md-item6{
    left: 75%;
    top: 50%;
    border-right: none;
    border-bottom: none;
}
.sale-md3{
    height: 375rpx;
}
.sale-md3 view{
    width: 25%;
    height: 50%;
}
.sale-md3 .sale-md-item0{
    left:0;
    top:0;
}
.sale-md3 .sale-md-item1{
    left:25%;
    top:0;
}
.sale-md3 .sale-md-item2{
    left:50%;
    top:0;
}
.sale-md3 .sale-md-item3{
    left:75%;
    top:0;
    border-right:none;
}
.sale-md3 .sale-md-item4{
    left:0;
    top:50%;
    border-bottom: none;
}
.sale-md3 .sale-md-item5{
    left:25%;
    top:50%;
    border-bottom: none;
}
.sale-md3 .sale-md-item6{
    left:50%;
    top:50%;
    border-bottom: none;
}
.sale-md3 .sale-md-item7{
    left:75%;
    top:50%;
    border-right:none;
    border-bottom: none;
}
.sale-md4{
    height: 375rpx;
}
.sale-md4 view{
    width: 50%;
    height: 50%;
}
.sale-md4 .sale-md-item0{
    left:0;
    top:0;
}
.sale-md4 .sale-md-item1{
    left:50%;
    top:0;
    border-right:none;
}
.sale-md4 .sale-md-item2{
    left:0;
    top:50%;
    border-bottom: none;
}
.sale-md4 .sale-md-item3{
    left:50%;
    top:50%;
    border-right:none;
    border-bottom: none;
}
/* 商品列表 */
.com-product{
    background-color: #fff;
}
.com-product .pro-cate{
    width: 100%;
    height: 80rpx;
}
.com-product .scroll-bar{
    position: sticky;
    position: -webkit-sticky;    
    height: 80rpx;
    border-bottom: solid #e8e8e8 1px;
}
.com-product .cate-item{
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 28rpx;
    border-bottom: solid transparent 3px;
    height: 75rpx;
    width: 112rpx;
    color: #222;
    font-size: 28rpx;
}
.com-product .cate-item.active{
    color:#e61773;
    border-color: #e61773;
}
/*分类下无商品时*/
.no-products{
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    min-height: 500rpx;
    background-color: #eee;
}
.no-products image{
    width: 276rpx;
    height: 226rpx;
}
.no-products view{
    text-align: center;
    color: #999;
    font-size: 32rpx;
}
/*数据加载时*/
.products-loading{
    color: #999;
    font-size: 28rpx;
    text-align: center;
    height: 80rpx;
    line-height:80rpx;
}
.products-loading text{
    margin-left: 20rpx;
}
.products-loading image{
    width: 40rpx;
    height: 40rpx;
    vertical-align: sub;
}
/*没有更多数据*/
.no-more-products{
    color: #999;
    text-align: center;
    font-size: 28rpx;
    margin-top: 20rpx;
}
@import "../../css/font.wxss";
@import "../../template/product-item/product-item.wxss";
@import "../../template/cart/cart.wxss";
三、js页面代码如下:
// pages/home/home.js
var util = require('../../utils/util.js');
var ports = require('../../utils/ports.js');
var address = require('../../utils/address.js');
var polyfill = require('../../utils/polyfill.js');
//引入灯箱组件
var Slider = require('../../template/slider/slider.js');
//引入产品Item组件
var ProductItem = require('../../template/product-item/product-item.js');
//引入产品加减部件
var CartCtrl = require('../../template/cart-ctrl/cart-ctrl.js');
//引入购物车组件
var Cart = require('../../template/cart/cart.js');
// 引入promise
var Promise = require('../../lib/es6-promise.min.js'); 
// 优惠标签配色
var tagColor = util.getTagColor();
//获取app实例
var appInstance = getApp();
var dialog = [
    {
      title: '发现您的收货地址已变更',
      content: '是否保留原收货地址?',
      cancelText: '保留地址',
      confirmText: '切换地址',
      confirmColor: '#e61773',
      success: function(res){
          if (res.confirm) {
            // 切换至当前定位门店
            var _self = this,
                gpsInfo = JSON.parse(util.getStorage("gps_info"));
            if(gpsInfo){
                address.setCurrentAddress({
                    city: '',
                    city_name: '',
                    addressline: gpsInfo.location_addr,
                    address_lng: gpsInfo.lng,
                    address_lat: gpsInfo.lat,
                    hasLocationStore: 0                    
                });
                wx.redirectTo({
                    url: '../index/index' 
                });
            }
          }
      }
    }
];
//营销位配置
var cfg={1:5,2:7,3:8,4:4};
Page({
  data:{
      storeAnnouncement: '', //门店公告
      // 当前地址信息
      address:{},
      showAddress:'',
      // 首页信息
      idxData:[],
      // 显示门店详情
      showStoreDetail:false,
      // 营销位
      saleList:[],
      saleType:1,

      // 显示商品某项分类
      showProCate:false,

      // 门店数据
      storeData:{},
     

      
      //单前分类栏目所属类型index
      currentIndex: 0,
      //当前分类Id
      currentCateId: 0,
      //设置分类滚动条位置
      scrollLeft: 0,
      //产品数组
      pros:[],
      //分页信息
      pages:{},
      // 商品分类loading标识
      showLoadingFlag:[],
      //商品分类loaded标识
      showLoadedFlag: [],
      //第一次触发产品列表数据加载标志位
      firstLoadDataFlag: [],
      //swiper高度,官方限死固定高度
      swiperHeight: 40
  },
  //点击分类
  cateClick: function(e){
      this.setData({
            currentIndex: e.currentTarget.dataset.index,
            currentCateId: e.currentTarget.dataset.id
      });
      this.scrollLeftChange(e.currentTarget.dataset.index);
  },     
  //滑动产品swiper
  productSwiperScroll: function(e){
      var _self = this;
      this.setData({
            currentIndex: e.detail.current,
            currentCateId: _self.data.idxData.navbar[e.detail.current].nav_id
      });
      this.scrollLeftChange(e.detail.current);
  }, 
  //分类滚动条位置变化
  scrollLeftChange: function(index){
       var rpx = util.getRpx();
       var arr = new Array(this.data.idxData.navbar.length).fill(false);
       this.setData({
            scrollLeft: index < 4 ? 0 : index * 168 / rpx,
            showLoadingFlag: arr.fill(true, index, index+1)
       });
       if(!this.data.firstLoadDataFlag[index]){
           this.loadingProList(this.data.currentCateId,this.data.currentIndex);
           this.setData(util.dynamicSetData('firstLoadDataFlag', index, true));
       }else{
           this.changeSwiperHeight(index);
           if(this.data.pros[index]){
                this.cartCtrl.switchCartCheck(this.data.pros[index],index); //同步对应分类的购物车数据(针对同种商品可以在不同分类)
           }
       }
  },
  //点击营销位
  saleTap: function(e){
      console.log(e);
  },
  toStoreDetail: function(){
      wx.navigateTo({
        url: '../store-detail/store-detail?store_id=' + this.data.storeData.id
      })
  },
  handleShowByAddress: function(){
      var _self = this;
      // 显示地址
      this.setData({
          showAddress: _self.data.address.location_addr
      });
      // 通过地址信息获取门店信息(region_id,lat,lng)
      this.getStoreInfo().then(result=>{
          this.setStoreData(result.data);
          // this.validCartData();
      });      
  },
  // 获取门店首页信息
  getStoreInfo: function(){
      var _this = this,
          adr = this.data.address,
          selectStoreId = util.getStorage("select_store_id");
      return util.wxRequest({
            method: 'POST',
            url: ports.storeShow,
            header: {
              'content-type': 'application/x-www-form-urlencoded'
            },
            data: {
                store_id: selectStoreId || '',
                region_id: adr.region_id,
                lat: adr.lat,
                lng: adr.lng
            }
        }).then(function(result) {
            // console.log(result)
            return Promise.resolve(result);
        })
        .catch(function(e){
            return Promise.reject(e);
        });
  },
  //改变swiper的高度
  changeSwiperHeight(index){
      if(this.data.pros[index]){
            var prosLength = this.data.pros[index].length;
            this.setData({
                swiperHeight: prosLength * 282 / util.getRpx() + 40 //TODO,这种方式不好,swiper高度,官方限死固定高度
            });    
             this.setData(util.dynamicSetData('showLoadingFlag', index, false));   
      } 
  },
  // 分页加载商品列表
  loadingProList: function(cateId,index) {
        if(typeof this.data.pages[index]=='undefined'){
            //TODO,实现this.pages[index]={}
            this.setData(util.dynamicSetData('pages', index, {}));
        }
        if(typeof this.data.pages[index].page=='undefined'){
            this.setData(util.dynamicSetData('pages', index, 0, 'page'));
        }
        if(typeof this.data.pages[index].totalPage=='undefined'){      
            this.setData(util.dynamicSetData('pages', index, 1, 'totalPage'));
        }
        var page = this.data.pages[index].page;
        this.setData(util.dynamicSetData('pages', index, page+1, 'page'));

        if(this.data.pages[index].page > this.data.pages[index].totalPage) {
            this.setData(util.dynamicSetData('showLoadingFlag', index, false));   
            this.setData(util.dynamicSetData('showLoadedFlag', index, true));
            return;
        }

        this.getProductList(cateId,index).then(result=>{          
            this.setData(util.dynamicSetData('pages', index, result.data.totalPage, 'totalPage'));

            if(typeof this.data.pros[index]=='undefined'){          
                this.setData(util.dynamicSetData('pros', index, []));
            }
            var oldpros = this.data.pros[index];
            var pros = oldpros.concat(this.handleActList(result.data.goodsList));    
            this.setData(util.dynamicSetData('pros', index, pros));
            //动态改变swiper的高度
            this.changeSwiperHeight(index);
            this.cartCtrl.getCurrentProCounts(result.data.goodsList, index); 
        });
  },  
  // 获取商品列表
  getProductList: function(cateId,index){
        var _self = this;
        return util.wxRequest({
            method: 'POST',
            url: ports.goodsGoodslist,
            header: {
            'content-type': 'application/x-www-form-urlencoded'
            },
            data: {
                store_id: _self.data.storeData.id,
                nav_id: cateId,
                page: _self.data.pages[index].page
            }
        }).then(function(result) {
            return Promise.resolve(result);
        }).catch((e)=>{
            return Promise.reject(e);
        });
  },
  //门店公告控制
  changeShowStoreDetail: function(){
        var _self = this;
        this.setData({
            showStoreDetail: !_self.data.showStoreDetail
        });
  },
  // 处理优惠标签(优惠信息)
  handleAct: function(str,index){
        if(!str){
            return '';
        }
        var arrStr=str.split(/[::]/),
            tag=arrStr[0].replace(/[[]]/g,''),
            tagStr=arrStr[1];
        return {
            backgroundColor: tagColor[index % tagColor.length],
            tag: tag,
            tagStr: tagStr
        };
  },
  //处理优惠标签(列表)
  handleActList: function(list){
        var handleAct = function(str){
            if(!str){
                return '';
            }
            var arrStr=/[减促]/.exec(str),
                tag = arrStr[0],
                colorCfg={
                    '减':'#fd1268',
                    '促':'#ffaf04'
                },
                resultColor = '#fd1268';
            if(tag in colorCfg){
                resultColor = colorCfg[tag];
            }
            return {
                resultColor: resultColor,
                tag: tag,
                str: str
            };           
        }
        if(list.length === 0){ return []; }
        return list.map(item =>{
            item.tags = item.tags.map(sitem => {
                return handleAct(sitem.name);
            });
            return item;
        });
  },
  //切分公告字符串
  splitStoreAnnouncement: function(str){
      if(str == ''){ return ''; }
      return str.split(/n|rn/g);
  },
  // 设置首页数据
  setStoreData: function(idxData){
      this.slider.initData(idxData.store_info.store_picture_list); //初始化swiper图片
      var _self = this,
          cateFlagArr = new Array(idxData.navbar.length).fill(false); //初始化分类标识位数组
      //优惠标签处理
      idxData.store_info.store_activity_format = this.handleAct(idxData.store_info.store_activity_format);
      var store_activity_list = idxData.store_info.store_activity_list;
      for(let i = 0; i < store_activity_list.length; i++){
            store_activity_list[i] = this.handleAct(store_activity_list[i], i);
      }
      this.setData({
        idxData: idxData, // 首页通用数据
        storeData: idxData.store_info, // 门店信息
        saleList: idxData.module.data.slice(0,cfg[idxData.module.show_type]), // 营销位
        saleType: idxData.module.show_type,
        showProCate: idxData.navbar ? true : false,
        currentCateId: idxData.navbar[0].nav_id,
        showLoadingFlag: cateFlagArr,
        showLoadedFlag: cateFlagArr
      });

      //默认加载第一个分类的数据
      var arr = new Array(this.data.idxData.navbar.length).fill(false);
      this.setData({
         firstLoadDataFlag: arr.fill(true, 0, 1)
      });          
      this.loadingProList(this.data.currentCateId,this.data.currentIndex);

      //设置公告内容
      this.setData({
         storeAnnouncement: _self.splitStoreAnnouncement(_self.data.idxData.announcement || _self.data.storeData.announcement)
      });
      // 优先使用用户选中的address_id
      var addressId = this.data.address.address_id,
          currentAddress = util.getStorage("currentAddress");
      if(currentAddress){
          currentAddress = JSON.parse(currentAddress);
          addressId = currentAddress.address_id;
      }

      // 门店id
      var storeId = this.data.storeData.id;

      // 将当前选中的门店信息存入本地
      util.setStorage("current_store_info",JSON.stringify({
          address_id: addressId,
          store_id: storeId
      }));
      // 传递给全局变量cartData(购物车数据)
      appInstance.globalData.cartData = polyfill.object.assignIn(appInstance.globalData.cartData,{
            storeId:parseInt(storeId),
            storeName:_self.data.storeData.store_name,
            floorPrice:_self.data.storeData.floor_price,
            freeShipPrice:_self.data.storeData.free_ship_price,
            deliveryFee:_self.data.storeData.delivery_fee
      });
  },
  onReachBottom: function(){
      if(this.data.showLoadedFlag[this.data.currentIndex]){
          //该分类所以数据加载完毕
          return;
      }
      this.setData(util.dynamicSetData('showLoadingFlag', this.data.currentIndex, true));
      this.loadingProList(this.data.currentCateId,this.data.currentIndex);
  },
  onLoad:function(options){
      //初始化灯箱组件
      this.slider = new Slider(this);
      //初始化产品加减部件组件
      this.cartCtrl = new CartCtrl(this);
      //初始化购物车组件
      this.cart = new Cart(this);
      //初始化产品Item组件
      new ProductItem(this);
      /**
       * 1.拿到处理过的地址信息 final_address
       * 2.通过地址信息获取门店信息(region_id,lat,lng)
       * 3.将门店信息数据设置(填充)
       * 3.通过门店信息中商品分类,将分类第一项传递给ProductList.vue
       */
      var finalAddress = util.getStorage("final_address");
      if(finalAddress){
          //拿到处理过的地址信息 finalAddress
          this.setData({
              address: JSON.parse(finalAddress)
          });
          this.handleShowByAddress();
      }
      /**
       * 1.获取到页面分发信息,如果page为1且popType大于0说明要弹层处理
       * 2.弹层
       */
      var pageSwitchInfo = util.getStorage("page_switch_info");
      if(pageSwitchInfo){
          // 拿到分发页面信息
          pageSwitchInfo = JSON.parse(pageSwitchInfo);
          // 清空分发配置
          util.removeStorage("page_switch_info");
          // 弹层
          if((pageSwitchInfo.page == 1) && ( pageSwitchInfo.popType == 1)){
              dialog[switchInfo.popType-1].cancelColor = "#666666";
              dialog[switchInfo.popType-1].confirmColor = "#666666";
              wx.showModal(dialog[switchInfo.popType-1]);
          }
      }
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
    var _self = this;
    this.cart.initCartData();
    //默认执行一次同步操作
    if(this.data.pros[this.data.currentIndex]){
        _self.cartCtrl.switchCartCheck(_self.data.pros[_self.data.currentIndex],_self.data.currentIndex);
    }
    
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

模板简介:该模板名称为【微信小程序五洲到家超市店面页面设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 22,791次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 07-19
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
html5 微信图片 响应式 微信素材 微信公众平台 自适应 微信文章 微信模板 企业网站 单页式简历模板
您可能会喜欢的其他模板