首页 > 小程序教程 > 微信小程序附近五洲会门店列表页设计制作开发教程

微信小程序附近五洲会门店列表页设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序附近五洲会门店列表页设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--pages/list/list.wxml-->
<import src="../../template/slider/slider.wxml"/>
<template is="slider" data="{{slider}}"/>
<view class="container">
    <view class="warn-msg-box">
        <span class="icon icon-warning"></span>
        <view class="msg-box">
            <view class="msg-box-text1">暂无可支持配送的门店</view>
            <view class="msg-box-text2">为您推荐的为附近的五洲会门店,请考虑更换地址</view>
        </view>
    </view>
    <view class="store-list" wx:if="{{storeData.store_list}}">
        <view class="store-item" wx:for="{{storeData.store_list}}" wx:for-index="idx" wx:for-item="store" data-store="{{store}}" bindtap="toStoreDetail" wx:key="id">
            <image src="{{store.store_logo_format}}" class="store-pic"></image>
            <view class="store-info">
                <view class="store-name"> {{store.store_name}} </view>
                <view class="store-address">{{store.store_address}}</view>
                <view class="store-distance">
                    <view class="distance">
                        <span class="icon icon-gps"></span>
                        <text>{{store.distance_format}}</text>
                    </view>
                    <view class="store-status {{store.delivery_sta_format == '可配送' ? 'green' : ''}}">
                        {{store.delivery_sta_format}}
                    </view>
                </view>
                <view class="store-discount">
                    <text class="dtag" wx:for="{{store.store_activity_list}}" wx:for-item="tagItem" wx:key="*this" style="background-color: {{ tagItem[1] }}">{{tagItem[0]}}</text>
                </view>
            </view>
        </view>
    </view>
</view>
 
二、wxss样式文件代码如下:
/* pages/list/list.wxss */
.warn-msg-box{
    width: 100%;
    display: flex;
    align-items: flex-start;
    padding: 23rpx 20rpx;
    background-color: #fff9e3;
    border-bottom: 1px solid #efe5a7;   
    box-sizing: border-box; 
}
.msg-box{
    flex: 1;
    padding-left: 8rpx;
}
.msg-box .msg-box-text1{
    margin-bottom: 6rpx;
    font-size: 30rpx;
    color: #333;
}
.msg-box .msg-box-text2{
    font-size: 24rpx;
    color: #999;
}
.store-list{
    background-color: #fff;
    width: 100%;
    box-sizing: border-box;
}
.store-item{
    margin:0 20rpx;
    padding: 20rpx 0;
    box-sizing: border-box;
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.store-pic{
    width: 200rpx;
    height: 200rpx;
}
.store-info{
    overflow: hidden;
    flex: 1;
    padding-left: 20rpx;
    color: #222;
}
.store-name{
    font-size: 32rpx;
}
.store-address{
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding: 10rpx 0;
    font-size: 28rpx;
}
.store-distance{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24rpx;
    color: #666;
}
.store-distance .icon{
    font-size: 24rpx;
    margin-right: 5rpx;
}
.store-status{
    padding: 3rpx 20rpx;
    border-radius: 4px;
    background-color: #ccc;
    color: #fff;
}
.store-status.green{
    background-color: #25ae5f;
    color:#fff;
}
.store-discount{
    padding: 10rpx 0;
}
/*优惠小标签*/
.dtag{
    display: inline-block;
    margin: 4rpx;
    margin-top: 0;
    padding: 1rpx 6rpx;
    color: #fff;
    font-style: normal;
    font-weight: normal;
    background-color: #49caec;
    border-radius: 4px;
    font-size: 24rpx;
}
@import "../../css/font.wxss";
三、js页面代码如下:
// pages/list/list.js
var util = require('../../utils/util.js');
var ports = require('../../utils/ports.js');
//引入灯箱组件
var Slider = require('../../template/slider/slider.js');
// 引入promise
var Promise = require('../../lib/es6-promise.min.js'); 
// 优惠标签配色
var tagColor = util.getTagColor();
var dialog = [
    {
      title: '您有可支持配送的地址',
      content: '是否切换至该收货地址?',
      cancelText: '保留地址',
      confirmText: '切换地址',
      confirmColor: '#e61773',
      success: function(res){
          if (res.confirm) {
            console.log('用户点击确定')
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
      }
    },
    {
      title: '当前地址无可配送的门店',
      content: '是否更换收货地址?',
      cancelText: '继续浏览',
      confirmText: '选择地址', 
      confirmColor: '#e61773',
      success: function(res){
          if (res.confirm) {
            console.log('用户点击确定')
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
      }
    }
];
Page({
  data:{
      storeData: {},
      showAddress: '',
      finalAddress: '',
      lng: 0,
      lat: 0,
      gpsInfo:{}
  },
  // 获取门店列表
  getStoreList(){
      var _self = this;
      return util.wxRequest({
            method: 'POST',
            url: ports.storeSearch,
            header: {
              'content-type': 'application/x-www-form-urlencoded'
            },
            data: {
                region_id: _self.data.finalAddress.region_id,
                lat: _self.data.finalAddress.lat,
                lng: _self.data.finalAddress.lng    
            }
        }).then(result => {
            return Promise.resolve(result);
        }).catch(e => {
            return Promise.reject(e);
        });
  },
  dTag:function(tag, index){
        var tagName=/^[(.)]/.exec(tag)[1];
        // 循环使用颜色
        return [tagName,tagColor[index%tagColor.length]];
  },
  onLoad:function(options){
      //初始化灯箱组件
      this.slider = new Slider(this);
      var finalAddress = util.getStorage('final_address');
      if(finalAddress){
          var tempfinalAddress = JSON.parse(finalAddress);
          this.setData({
              finalAddress: tempfinalAddress,
              showAddress: tempfinalAddress.location_addr || '定位失败'
          });
          this.getStoreList().then(result=>{
              var picList = result.data.banner_list.map(function(item){
                  return item.imgUrl;
              });
              //整理标签颜色
              for(let i = 0; i < result.data.store_list.length; i++){
                  var store_item = result.data.store_list[i];
                  for(let j = 0; j < store_item.store_activity_list.length;j++){
                        store_item.store_activity_list[j] = this.dTag(store_item.store_activity_list[j],j);
                  }
              }
              this.setData({
                storeData: result.data
              });
              this.slider.initData(picList);
          })
      }
      // 来自顶页面分发(确定使用哪种弹窗提示)
      var switchInfo = util.getStorage("page_switch_info");
      if(switchInfo){
          switchInfo = JSON.parse(switchInfo);
          // 清空分发配置
          util.removeStorage("page_switch_info");
          if(switchInfo.popType){
              dialog[switchInfo.popType-1].cancelColor = "#666666";
              dialog[switchInfo.popType-1].confirmColor = "#666666";
              wx.showModal(dialog[switchInfo.popType-1]);
          }
      }
  },
  toStoreDetail(e){
      console.log(e);
  },
  onPullDownRefresh: function(){
    wx.stopPullDownRefresh()
  },    
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

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

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