微信小程序五洲到家店面详情地址信息页面设计制作开发教程

本文给大家带来的是微信小程序五洲到家店面详情地址信息页面设计制作开发教程，制作好以后效果图如下：

一、wxml页面代码如下：

<!--pages/store-detail/store-detail.wxml-->
<import src="../../template/slider/slider.wxml"/>
<import src="../../template/coupon-item/coupon-item.wxml"/>
<template is="slider" data="{{slider}}"/>
<!-- 店铺简介 -->
<view class="store-intro">
    <view class="store-intro-list">
        <view class="store-adress store-intro-item">
            <span class="icon icon-map"></span>
            <text>地址：{{storeData.store_address}}</text>
        </view>
        <view class="store-phone  store-intro-item">
            <span class="icon icon-phone3"></span>
            <text bindtap="phoneCal" data-phone="{{storeData.phone}}">电话：{{storeData.phone}}</text>
        </view>
        <view class="store-shop-hours  store-intro-item">
            <span class="icon icon-clock1"></span>
            <text>营业时间：{{storeData.business_hours}}（周末正常营业）</text>
        </view>
    </view>
</view>
<view class="pt20"></view>
<!-- 优惠信息 -->
<view class="discount-info">
    <view class="normal-title">优惠信息</view>
    <view class="discount-list">
        <view wx:for="{{storeData.store_activity_list}}" class="discount-list-item">
            <text class="dtag" style="background-color: {{item.backgroundColor}}">{{item.tag}}</text>
            <text class="tag-str">{{item.tagStr}}</text>
        </view>
    </view>
</view>
<view class="pt20"></view>
<!-- 门店优惠券 -->
<view class="store-coupon">
    <view class="normal-title">门店优惠券（<text>仅限实体店使用</text>）</view>
    <view class="store-coupon-list">
        <view class="coupon-item" wx:for="{{couponData}}" wx:for-item="cpn">
            <view class="coupon-name">{{storeData.store_name + cpn.showAimTitle}}现金券</view>
            <template is="couponItem" data="{{cpn: cpn, type: 2, toDetail: false, index: index}}" />
            <view class="coupon-count-get">
                <view class="coupon-count">剩余数量：<text>{{cpn.remain_nums}}</text></view>
                <button type="default" size="mini" disabled="{{cpn.coupon_sta==2 || cpn.coupon_sta==3}}" class="btn-get-coupon"  data-index="{{index}}" data-cpn="{{cpn}}" catchtap="getCoupon">立即领取</button>
            </view>
        </view>
    </view>
</view>

二、wxss样式文件代码如下：

/* pages/store-detail/store-detail.wxss */
.normal-title{
    padding: 30rpx 20rpx; 
    background-color: #fff;
    border-bottom: solid #e8e8e8 3rpx;
    font-weight: normal;
    font-size: 32rpx;
    color: #222;
}
.normal-title text{
    font-weight: bold;
    color: #e61773;
}
.store-intro{
    background-color: #fff;
    border-bottom: solid #e8e8e8 1px;
}
.store-intro-list .store-intro-item{
    padding: 30rpx 20rpx 30rpx 70rpx;
    border-bottom: solid #e8e8e8 1px;
}
.store-intro-list .store-shop-hours{
    border-bottom: 0;
}
.store-intro-list .store-intro-item .icon{
    margin-left: -50rpx;
    margin-right: 5rpx;
    font-size: 32rpx;
}
.store-intro-list .store-intro-item  text{
    line-height: 1.4;
    font-size: 28rpx;
    color: #222;  
}
.discount-info{
    background-color: #fff;
}
.discount-list{
    padding: 10rpx 0;
    overflow: hidden;
}
.discount-list .discount-list-item{
    padding: 12rpx 20rpx 12rpx 70rpx;
}
.discount-list .discount-list-item .dtag{
    margin-left: -50rpx;
    padding: 2rpx 6rpx;
    font-size: 24rpx;
}
.discount-list .discount-list-item .tag-str{
    line-height: 1.35;
    padding-left: 10rpx;
    font-size: 28rpx;
    color: #666;
    word-break: break-all;
}
/*优惠小标签*/
.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;
}
.store-coupon .store-coupon-list .coupon-item{
    margin-bottom: 20rpx;
    padding: 0 20rpx;
    background-color: #fff;
}
.store-coupon .store-coupon-list .coupon-name{
    padding: 20rpx 0;
    font-size: 28rpx;
}
.coupon-count-get{
    display: flex;
    justify-content: space-between;
    padding: 20rpx 0;
}
.coupon-count-get .coupon-count{
    font-size: 24rpx;
    line-height:2.3;
}
.coupon-count-get .coupon-count text{
    color:#e61773;
}
.coupon-count-get .btn-get-coupon{
    margin-left: 0;
    margin-right: 0;
}
@import "../../css/font.wxss";
@import "../../template/coupon-item/coupon-item.wxss";

三、js页面代码如下：

// pages/store-detail/store-detail.js
var util = require('../../utils/util.js');
var ports = require('../../utils/ports.js');
var polyfill = require('../../utils/polyfill.js');
//引入灯箱组件
var Slider = require('../../template/slider/slider.js');
//引入优惠券组件
var couponItem = require('../../template/coupon-item/coupon-item.js');
// 优惠标签配色
var tagColor = util.getTagColor();
Page({
  data:{
      couponData: {},
      store_id: 0,
      // 门店数据
      storeData: {},
      // 购物车数据
      cartData: [],
      show2: true
  },
  phoneCal: function(e){
      var phone = e.currentTarget.dataset.phone;
      wx.makePhoneCall({
        phoneNumber: phone
      });
  },
  // 处理优惠标签（优惠信息）
  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
        };
  },  
  getCoupon: function(e){
     var cpn = e.currentTarget.dataset.cpn;
     var index = e.currentTarget.dataset.index;
     if(cpn.coupon_sta == 2){
        return wx.showToast({
            title: '已领完',
            duration: 1000
        });
     }
     if(cpn.coupon_sta == 3){ 
        return wx.showToast({
            title: '已过期',
            duration: 1000
        });
     }
     return util.getToken().then(token => {
        util.wxRequest({
            method: 'POST',
            url: ports.couponConversion,
            header:{ 'X-Auth-Token':token,  'content-type': 'application/x-www-form-urlencoded' },
            data: {
                pcode: cpn.code
            }
        }).then((result)=> {
            wx.showToast({
                title: result.msg,
                duration: 1000
            });
            return Promise.resolve(result);
        }).catch((e)=>{
            wx.showToast({
                title: e,
                duration: 1000
            });
            return Promise.reject(e);
        });
    });
  },
  getData: function(){
      var _self = this,
          token = util.getStorage("token"),
          ajaxCfg={
              method: 'POST',
              url: ports.storeDetail,
              header: {
                'content-type': 'application/x-www-form-urlencoded'
              },
              data:{
                  id: _self.data.store_id
              }
          };

      if(token){
          ajaxCfg.header = polyfill.object.assignIn(ajaxCfg.header, {
              'X-Auth-Token':token    
          });
      }
          
      util.wxRequest(ajaxCfg).then((result)=> {
          // console.log(result);
          var couponList = result.data.promotion_code_list.list;
          couponList.forEach((cpn)=>{
              cpn.isexpend = false;
          });
          this.slider.initData(result.data.store_info.store_picture_list); //初始化swiper图片
          var store_activity_list = result.data.store_info.store_activity_list;
          for(let i = 0; i < store_activity_list.length; i++){
                 result.data.store_info.store_activity_list[i] = this.handleAct(store_activity_list[i], i);
          }
          this.setData({
            couponData: couponList,
            storeData: result.data.store_info
          });
          this.couponItem.init();
          return Promise.resolve(result);
      }).catch((e)=>{
          return Promise.reject(e);
      });
  },
  onLoad:function(options){
    //初始化灯箱组件
    this.slider = new Slider(this);
    //初始化优惠券组件
    this.couponItem = new couponItem(this);
    this.setData({
      store_id: options.store_id
    });
    this.getData();
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

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