couponList.wxml 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. <wxs src="../../../utils/tools.wxs" module="tools" />
  2. <view class="container">
  3. <!-- <view class="h">
  4. <view class="item {{ status == 0 ? 'active' : ''}}" bindtap="switchTab" data-index="0">
  5. <view class="txt">未使用</view>
  6. </view>
  7. <view class="item {{ status == 1 ? 'active' : ''}}" bindtap="switchTab" data-index="1">
  8. <view class="txt">已使用</view>
  9. </view>
  10. <view class="item {{ status == 2 ? 'active' : ''}}" bindtap="switchTab" data-index="2">
  11. <view class="txt">已过期</view>
  12. </view>
  13. </view> -->
  14. <van-tabs active="{{status}}" color="#09afff" bind:change="onTabChange">
  15. <van-tab title="未使用" name="0"></van-tab>
  16. <van-tab title="已使用" name="1"></van-tab>
  17. <van-tab title="已过期" name="2"></van-tab>
  18. </van-tabs>
  19. <view class="b">
  20. <view class="coupon-form" wx:if="{{status == 0}}">
  21. <view class="input-box">
  22. <input class="coupon-sn" placeholder="请输入优惠码" value="{{code}}" bindinput="bindExchange" />
  23. <van-icon name="close" class="clear-icon" wx:if="{{ code.length > 0 }}" catchtap="clearExchange" />
  24. </view>
  25. <view class="add-btn" bindtap='goExchange'>兑换</view>
  26. </view>
  27. <!-- <view class="help" wx:if="{{status == 0}}">
  28. <van-icon name="question-o" />
  29. 使用说明
  30. </view> -->
  31. <view wx:if="{{status == 0}}" class="coupon-switch-block">
  32. <view wx:for="{{typeList}}" wx:for-index="index" wx:for-item="item" wx:key="index" data-type="{{item.type}}"
  33. class="type-switch {{item.type===currentType?'active-switch':''}}" bindtap="switchType">
  34. {{item.name}}
  35. </view>
  36. </view>
  37. <scroll-view scroll-y="true" scroll-top="{{scrollTop}}" class="my-coupon-list">
  38. <!-- 未使用 -->
  39. <view wx:for="{{couponList}}" wx:for-index="index" wx:for-item="item" wx:key="id" class="my-coupon-item-valid"
  40. wx:if="{{status == 0}}">
  41. <view wx:if="{{item.type==4}}" class="marker">会员专享</view>
  42. <view class="coupon-top">
  43. <view class="coupon-top-left">
  44. <view class="coupon-value">
  45. <text wx:if="{{item.voucherType==1}}" class="{{item.type==4?'coupon-flag-member':'coupon-flag'}}">¥</text>
  46. <text class="{{item.type==4?'coupon-value-member':'coupon-value-num'}}" wx:if="{{item.voucherType==1}}">{{item.discount}}</text>
  47. <text class="{{item.type==4?'coupon-value-member':'coupon-value-num'}}" wx:if="{{item.voucherType==2}}">{{item.discount/10}}</text>
  48. <text wx:if="{{item.voucherType==2}}" class="{{item.type==4?'coupon-unit-member':'coupon-unit'}}">折</text>
  49. <text class="{{item.type==4?'coupon-value-member':'coupon-value-num2'}}" wx:if="{{item.voucherType==3}}">兑换券</text>
  50. </view>
  51. <view class="coupon-type">
  52. <text wx:if="{{item.voucherType==1}}" style="color:#555555">满{{item.min}}可用</text>
  53. <text wx:if="{{item.voucherType==2}}" style="color:#555555">满{{item.min}}可用</text>
  54. <text wx:if="{{item.voucherType==3}}" style="color:#555555">无门槛立即兑换</text>
  55. </view>
  56. </view>
  57. <view class="coupon-top-content">
  58. <view class="coupon-valid-name">{{item.name}}</view>
  59. <view>有效期至:{{item.endTime}}</view>
  60. </view>
  61. </view>
  62. <view class="coupon-bottom">
  63. <text wx:if="{{item.desc&&item.name!=item.desc}}">{{item.desc}}</text>
  64. <text wx:else=""></text>
  65. <view class="{{item.type==4?'coupon-top-member':'coupon-top-right'}}" data-id="{{item.couponId}}" data-goodsvalue="{{item.goodsValue}}" bindtap="goService">
  66. 立即使用
  67. </view>
  68. </view>
  69. </view>
  70. <!-- 已使用 已过期 -->
  71. <view wx:for="{{couponList}}" wx:for-index="index" wx:for-item="item" wx:key="id" class="my-coupon-item"
  72. wx:if="{{status != 0}}">
  73. <view class="coupon-left">
  74. <view wx:if="{{item.voucherType==1}}">¥<text class="coupon-amount">{{item.discount}}</text></view>
  75. <view wx:if="{{item.voucherType==2}}"><text class="coupon-amount">{{item.discount/10}}</text>折</view>
  76. <view class="coupon-type">
  77. <!-- {{item.name}} -->
  78. <span wx:if="{{item.voucherType==1}}">立减券</span>
  79. <span wx:if="{{item.voucherType==2}}">折扣券</span>
  80. </view>
  81. <view wx:if="{{status==0}}" class="coupon-btn {{item.status===0?'active-btn':''}}" data-id="{{item.couponId}}"
  82. data-goodsvalue="{{item.goodsValue}}" bindtap="goService">立即使用</view>
  83. </view>
  84. <view class="coupon-content">
  85. <view class="coupon-name">{{item.name}}</view>
  86. <view class="coupon-date">有效期开始:{{item.startTime}}</view>
  87. <view class="coupon-date">有效期结束:{{item.endTime}}</view>
  88. </view>
  89. <view class="coupon-right">
  90. <image class="coupon-status" mode="aspectFit" wx:if="{{item.status==1}}" src="/static/images/coupon-used.png">
  91. </image>
  92. <image class="coupon-status" mode="aspectFit" wx:if="{{item.status==2}}"
  93. src="/static/images/coupon-invalid.png"></image>
  94. </view>
  95. </view>
  96. <view class="page" wx:if="{{showPage}}">
  97. <view class="prev {{ page <= 1 ? 'disabled' : ''}}" bindtap="prevPage">上一页</view>
  98. <view class="next {{ (count / size) < page ? 'disabled' : ''}}" bindtap="nextPage">下一页</view>
  99. </view>
  100. </scroll-view>
  101. <!-- <scroll-view class="coupon-list" scroll-y="true" scroll-top="{{scrollTop}}">
  102. <view class="item {{ status == 0 ? 'active' : ''}}" wx:for="{{couponList}}" wx:for-index="index" wx:for-item="item" wx:key="id">
  103. <view class="tag">{{item.tag}}</view>
  104. <view class="content">
  105. <view class="left">
  106. <view class="discount">{{item.discount}}元</view>
  107. <view class="min"> 满{{item.min}}元使用</view>
  108. </view>
  109. <view class="right">
  110. <view class="name">{{item.name}}</view>
  111. <view class="time"> 有效期:{{item.startTime}} - {{item.endTime}}</view>
  112. </view>
  113. </view>
  114. <view class="condition">
  115. <text class="txt">{{item.desc}}</text>
  116. <image src="{{item.pic}}" class="icon"></image>
  117. </view>
  118. </view>
  119. <view class="page" wx:if="{{showPage}}">
  120. <view class="prev {{ page <= 1 ? 'disabled' : ''}}" bindtap="prevPage">上一页</view>
  121. <view class="next {{ (count / size) < page ? 'disabled' : ''}}" bindtap="nextPage">下一页</view>
  122. </view>
  123. </scroll-view> -->
  124. <view class="no-list" wx:if="{{couponList==0}}">没有更多了</view>
  125. </view>
  126. </view>
  127. <view class="pup-up-coupon" bindtap="closePupCoupon" wx:if='{{showTc}}'>
  128. <view class="tc" catchtap="drawDown">
  129. <view class="pkName">{{couponPackage.pkName.length>8?tools.subStr(couponPackage.pkName,0,8):couponPackage.pkName}}</view>
  130. <view class="num">{{couponPackage.pkNumber}}</view>
  131. <view class="box">
  132. <!-- <view class="money">7.9<span>折</span></view> -->
  133. <view class="{{coupon.voucherType==3?'couponName':'money'}}">{{coupon.voucherType==3?'商品券':coupon.discount}}
  134. <span wx:if="{{coupon.voucherType!=3}}">{{coupon.voucherType==1?'元':'折'}}</span>
  135. </view>
  136. <view class="couponNameDesc">{{coupon.voucherType==3?'无门槛立即兑换':'满'+coupon.min+'元可用'}}</view>
  137. <!-- <view class="couponName">测试2兑换券</view>
  138. <view class="couponNameDesc">无门槛立即兑换</view> -->
  139. </view>
  140. </view>
  141. <!-- <icon bindtap="closePupCoupon" class="icon-small close-icon" type="cancel" color="rgb(178,187,182)" size="25"/> -->
  142. </view>