verification.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. <template>
  2. <view class="">
  3. <no-none v-if='CouponList.length<=0'></no-none>
  4. <block v-else>
  5. <view class="coupon-content" v-for="(item,index) of CouponList" :key="index" >
  6. <view class="flex coupon">
  7. <view class="coupon-left flex-y-center">
  8. <view class="w100">
  9. <view class="title text-1">
  10. {{item.coupon_name}}
  11. </view>
  12. <view class="date text-1">满¥{{Number(item.full_price)}} 元减¥
  13. <text style="color: red;font-size: 32rpx;">{{ Number(item.cut_price) }}</text>元
  14. </view>
  15. <view class="code text-1">
  16. 有效期:{{item.start_time}}~{{item.end_time}}
  17. </view>
  18. </view>
  19. </view>
  20. <view class="coupon-center">
  21. <view class="rund top">
  22. </view>
  23. <view class="line">
  24. </view>
  25. <view class="rund bottom">
  26. </view>
  27. </view>
  28. <view class="coupon-right flex-center flex-grow-1">
  29. <image class="used" src="./static/images/yes_used.png" mode=""></image>
  30. </view>
  31. </view>
  32. <view class="coupon-foot">
  33. <view class="mrt10" v-if="item.nickname">
  34. 领取用户:{{item.nickname}}
  35. </view>
  36. <view class="mrt10">
  37. 领取时间:{{item.draw_time}}
  38. </view>
  39. <view class="mrt10">
  40. 使用时间:{{item.use_time}}
  41. </view>
  42. </view>
  43. </view>
  44. <loading :is_load="is_load" :is_load_more='is_load_more'></loading>
  45. </block>
  46. </view>
  47. </template>
  48. <script>
  49. export default {
  50. data() {
  51. return {
  52. CouponList: [],
  53. page: 1,
  54. is_load: false,
  55. is_load_more: false,
  56. is_hexiao: false
  57. }
  58. },
  59. onLoad() {
  60. this.Coupon();
  61. },
  62. onReachBottom() {
  63. if (!this.is_load) {
  64. this.page = this.page + 1;
  65. this.Coupon();
  66. }
  67. },
  68. methods: {
  69. Coupon() {
  70. // let url, is_agent;
  71. // !this.is_hexiao ? (url = "coupon/verification_log") : (
  72. // url = "home/log", is_agent = "staff");
  73. this.request({
  74. url: "coupon/verification_log",
  75. data: {
  76. token: uni.getStorageSync('token'),
  77. page: this.page,
  78. limit: 15,
  79. },
  80. // is_agent: is_agent,
  81. }).then(res => {
  82. console.log(res, "res")
  83. if (res.code === '200') {
  84. if (res.data.list.length == 0)
  85. this.is_load = true, this.is_load_more = true,
  86. setTimeout(() => {
  87. this.is_load_more = false
  88. }, 1e3);
  89. this.CouponList = this.CouponList.concat(res.data.list)
  90. }
  91. }).catch((res) => {
  92. uni.showToast({
  93. title: res.message,
  94. icon: 'none'
  95. })
  96. });
  97. },
  98. }
  99. }
  100. </script>
  101. <style lang="scss">
  102. page {
  103. background: #efeff4;
  104. padding-top: 30rpx;
  105. }
  106. .mrt10 {
  107. margin-bottom: 4rpx;
  108. }
  109. .coupon-content {
  110. margin-top: 40rpx;
  111. border-radius: 8rpx;
  112. width: 670rpx;
  113. margin: 0 auto;
  114. overflow: hidden;
  115. margin-bottom: 40rpx;
  116. .coupon-foot {
  117. background: #FFFFFF;
  118. color: #999;
  119. font-size: 22rpx;
  120. padding: 20rpx;
  121. }
  122. .coupon {
  123. height: 150rpx;
  124. background: rgb(180, 180, 180);
  125. color: #fff;
  126. .coupon-left {
  127. width: 460rpx;
  128. font-size: 24rpx;
  129. font-weight: 400;
  130. padding-left: 22rpx;
  131. .title {
  132. font-size: 32rpx;
  133. font-family: Source Han Sans CN, Source Han Sans CN-Medium;
  134. font-weight: 500;
  135. }
  136. .date {
  137. margin-bottom: 8rpx;
  138. }
  139. }
  140. .coupon-center {
  141. position: relative;
  142. width: 30rpx;
  143. .rund {
  144. width: 24rpx;
  145. height: 24rpx;
  146. background: #fff;
  147. border-radius: 50%;
  148. position: absolute;
  149. }
  150. .top {
  151. top: -10rpx;
  152. }
  153. .bottom {
  154. bottom: -10rpx;
  155. }
  156. .line {
  157. width: 1rpx;
  158. height: 134rpx;
  159. border: 2rpx dashed #ccc;
  160. position: absolute;
  161. left: 10rpx;
  162. top: 20rpx;
  163. }
  164. }
  165. .coupon-right {
  166. .used {
  167. width: 112rpx;
  168. height: 83rpx;
  169. }
  170. }
  171. }
  172. }
  173. </style>