简单的小程序 展示优惠券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() { } })

原文链接:https://blog.csdn.net/HECTOR_1368391900/article/details/99867725?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165277499316782395393704%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165277499316782395393704&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-10-99867725-null-null.nonecase&utm_term=%E4%BC%98%E6%83%A0

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
文明发言,共建和谐米科社区
提交
头像

昵称

取消
昵称表情图片