简单的小程序 展示优惠券demo

概要：

1.  后台调用接口 ，返回了不可用的优惠券集合和可用的优惠券集合
2.  根据可用 和 不可用的来展示不同的文字说明，可用的展示有效期，不可用展示不可用原因

截图：

        

目录

 

小程序代码：wxml

小程序代码：wxss

小程序代码：js

---

小程序代码：wxml

<wxs src="../../utils/wxs/date.wxs" module="dateFormat" />
<view class='container'>
  <view class='coupon-tab'>
    <view>
      <view class="{{showAble == true?'active':''}}" catchtap="onShowAble" data-show-value="{{1==1}}">可用优惠券</view>
    </view>
    <view>
      <view class="{{showAble != true?'active':''}}" catchtap="onShowAble" data-show-value="{{1==2}}">不可用优惠券</view>
    </view>
  </view>
  <view class='coupon-list'>
    <block wx:for="{{couponsObj.coupons}}" wx:key>
      <view class='coupon-item' hidden="{{showAble != item.isAble}}" catchtap="onUseCoupon" data-index="{{index}}" data-is-able="{{item.isAble}}">
        <image hidden='{{showAble == false}}' src='/pages/images/coupon.png' />
        <image hidden='{{showAble == true}}' src='/pages/images/coupon-not.png' />
        <view>
          <view class="coupon-left {{showAble != true?'gray':'black'}}">
            <view class='top'>
              <text class='top-money'>{{item.amount}}</text>
              <text>元</text>
            </view>
            <view class='bottom'>
              <text hidden="{{showAble == false}}">{{item.ticketTypeCname =='' || item.ticketTypeCname == null ?'优惠券':item.ticketTypeCname}}</text>
              <text hidden="{{showAble == true}}">{{item.disAbleDesc}}</text>
              <text>有效期{{dateFormat.dateFormat(item.createdate,"yyyy/MM/dd")}}-{{dateFormat.dateFormat(item.limitdate,"yyyy/MM/dd")}}</text>
            </view>
          </view>
          <view class='coupon-right'>使用</view>
        </view>
      </view>
    </block>
  </view>
</view>

小程序代码：wxss

/* pages/coupon/index.wxss */

.container {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.coupon-tab {
  width: 100%;
  height: 98rpx;
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #e2e2e2;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  align-items: center;
  background-color: #fff;
}

.coupon-tab>view {
  flex: 1;
  height: 78rpx;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.coupon-tab>view:first-child {
  border-right: 1px solid #e2e2e2;
}

.coupon-tab>view>view {
  font-size: 32rpx;
  height: 78rpx;
  line-height: 74rpx;
  padding-bottom: 6rpx;
}

.coupon-tab>view .active {
  border-bottom: 4rpx solid #d1ae6b;
  color: #d1ae6b;
}

.coupon-list {
  margin-top: 98rpx;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 40rpx 44rpx 0 46rpx;
}

.coupon-item {
  width: 100%;
  display: flex;
  flex-direction: row;
  position: relative;
  margin-bottom: 30rpx;
}

.coupon-item image {
  width: 660rpx;
  height: 140rpx;
}

.coupon-item>view {
  position: absolute;
  width: 100%;
  height: 140rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  top: 0;
  left: 0;
  z-index: 9;
}

.coupon-left {
  width: 482rpx;
  box-sizing: border-box;
  padding-left: 26rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.black {
  color: #333;
}

.gray {
  color: #b9b9b9;
}

.top {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  margin-bottom: 6rpx;
}

.top text:first-child {
  font-size: 48rpx;
  font-weight: bold;
}

.top text:last-child {
  font-size: 26rpx;
}

.bottom {
  width: 100%;
  font-size: 20rpx;
  display: flex;
  flex-direction: column;
  line-height: 26rpx;
  color: #999;
}

.gray .bottom {
  color: #b9b9b9;
}

.coupon-right {
  flex: 1;
  text-align: center;
  font-size: 36rpx;
  color: #fffefe;
}

  小程序代码：js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    showAble: true //是否显示可用优惠券，true 显示可用优惠券,false 现在不可用优惠券
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {

    let pages = getCurrentPages();
    let prevPage = pages[pages.length - 2]; //上一个页面

    /**
     * 获取上一个页面查询的优惠券数据
     */
    let couponsObj = prevPage.data.couponsObj;
    this.setData({
      couponsObj: couponsObj
    });
  },
  /**
   * 切换 可用优惠券/不可用优惠券 tab
   */
  onShowAble(e) {
    let showValue = e.currentTarget.dataset.showValue;
    this.setData({
      showAble: showValue
    });
  },
  /**
   * 点击事件，使用优惠券
   */
  onUseCoupon(e) {

    let index = e.currentTarget.dataset.index;
    let isAble = e.currentTarget.dataset.isAble;

    console.info("优惠券索引:", index, "是否可用:", isAble);

    let pages = getCurrentPages();
    let prevPage = pages[pages.length - 2]; //上一个页面

    /**
     * 调用 上一页面的使用优惠券的方法
     */
    prevPage.onUseCouponByIndex(index);
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})