discountCard.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289
  1. <template>
  2. <view class="content">
  3. <view class="teamTop">
  4. <view class="sumCount">可使用优惠券</view>
  5. </view>
  6. <!-- 列表 -->
  7. <view class="itemContent">
  8. <view v-for="(item,index) in itemData" :key="index">
  9. <view class="item">
  10. <!-- 第一块 -->
  11. <view class="topView" @click="ckCoupon(item)">
  12. <view class="leftView">
  13. <view class="moneyView">
  14. <view>¥</view>
  15. <view class="money">{{item.ActMoney}}</view>
  16. </view>
  17. <view class="condition" v-if="item.WhereMoney != 0">满{{item.WhereMoney}}元可用</view>
  18. <view class="condition" v-else>满任意金额可用</view>
  19. </view>
  20. <view class="rightView">
  21. <view class="cardName">{{item.ActName}}</view>
  22. <!-- 时间截取 -->
  23. <view class="valid">有效期:{{item.StartTime.slice(0,item.StartTime.length-8)}}至 {{item.EndTime.slice(0,item.EndTime.length-8)}}</view>
  24. </view>
  25. </view>
  26. <!-- 第二快 -->
  27. <view class="bottomView">
  28. <view>发放门店:{{item.UsedShopName}}</view>
  29. <view @click="goDiscountDetail(item)">查看详情</view>
  30. </view>
  31. </view>
  32. </view>
  33. </view>
  34. <!-- 上拉 加载更多 -->
  35. <view class="noMore" v-if="noMoreShow">没有更多数据</view>
  36. <!-- 无数据空白页 -->
  37. <nodata v-if="itemData.length==0"></nodata>
  38. </view>
  39. </template>
  40. <script>
  41. import nodata from '../../components/nodata/nodata.vue'
  42. export default {
  43. components: {
  44. nodata,
  45. },
  46. data() {
  47. return {
  48. itemData: [],
  49. page: 1,
  50. noMoreShow: false,
  51. payMoney:'',
  52. }
  53. },
  54. onLoad(opt) {
  55. this.page = 1
  56. if(opt.payMoney){
  57. this.payMoney=opt.payMoney;
  58. this.myOrderCoupon()
  59. }else{
  60. this.getItemData()
  61. }
  62. },
  63. methods: {
  64. ckCoupon(item){
  65. console.log(item);
  66. if(this.payMoney){
  67. uni.setStorage({
  68. key: 'couponData',
  69. data: item,
  70. success: function () {
  71. uni.navigateBack({
  72. delta:1
  73. })
  74. }
  75. });
  76. }else{
  77. uni.navigateTo({
  78. url: 'discountDetail?couponId=' + item.ID,
  79. })
  80. }
  81. },
  82. myOrderCoupon(){
  83. uni.showLoading({
  84. title: '加载中'
  85. })
  86. this.$http('worldKeepCar/maintainOrder/myOrderCoupon', {
  87. money:this.payMoney,
  88. /* page:this.page,
  89. limit:10, */
  90. },'GET').then(res => {
  91. uni.hideLoading();
  92. var list = res.data
  93. // 处理 undefined和null转为空白字符串
  94. list.forEach((item, index) => {
  95. for (const key in item) {
  96. item[key] = this.$praseStrEmpty(item[key])
  97. }
  98. })
  99. if (this.page == 1) {
  100. this.itemData = list
  101. } else {
  102. this.itemData = this.itemData.concat(list)
  103. }
  104. if (list.length < 10) {
  105. this.noMoreShow = false
  106. } else {
  107. this.noMoreShow = true
  108. }
  109. })
  110. },
  111. goDiscountDetail(item) {
  112. uni.navigateTo({
  113. url: 'discountDetail?couponId=' + item.ID,
  114. })
  115. },
  116. getItemData() {
  117. uni.showLoading({
  118. title: '加载中'
  119. })
  120. let url = 'worldKeepCar/keepCarMy/listTCouponMemberPage',
  121. params = {
  122. page: this.page,
  123. limit: 20,
  124. }
  125. this.$http(url, params, 'GET').then(res => {
  126. uni.hideLoading();
  127. var list = res.data.Items
  128. // 处理 undefined和null转为空白字符串
  129. list.forEach((item, index) => {
  130. for (const key in item) {
  131. item[key] = this.$praseStrEmpty(item[key])
  132. }
  133. })
  134. if (this.page == 1) {
  135. this.itemData = list
  136. } else {
  137. this.itemData = this.itemData.concat(list)
  138. }
  139. if (list.length < 10) {
  140. this.noMoreShow = false
  141. } else {
  142. this.noMoreShow = true
  143. }
  144. })
  145. },
  146. },
  147. // 下拉刷新 上拉加载更多
  148. onPullDownRefresh() {
  149. this.page = 1
  150. if(opt.payMoney){
  151. this.myOrderCoupon()
  152. }else{
  153. this.getItemData()
  154. }
  155. //this.getItemData()
  156. setTimeout(function() {
  157. uni.stopPullDownRefresh();
  158. }, 1000);
  159. },
  160. onReachBottom() {
  161. this.page++;
  162. if(opt.payMoney){
  163. this.myOrderCoupon()
  164. }else{
  165. this.getItemData()
  166. }
  167. },
  168. }
  169. </script>
  170. <style scoped>
  171. .content {
  172. background: #F4F5F7;
  173. min-height: 100vh;
  174. }
  175. .teamTop {
  176. position: fixed;
  177. top: 0rpx;
  178. left: 0rpx;
  179. background-color: #F4F5F7;
  180. width: 100%;
  181. height: 77rpx;
  182. }
  183. .sumCount {
  184. padding: 20rpx 24rpx;
  185. color: #999999;
  186. font-size: 26rpx;
  187. }
  188. .itemContent {
  189. padding: 55rpx 20rpx 24rpx;
  190. }
  191. .item {
  192. margin: 20rpx 0rpx;
  193. background-color: #FFFFFF;
  194. border-radius: 10rpx;
  195. }
  196. .topView {
  197. display: flex;
  198. justify-content: flex-start;
  199. padding: 22rpx 0rpx;
  200. margin-left: 22rpx;
  201. margin-right: 22rpx;
  202. border-bottom: 1rpx #CCCCCC dashed;
  203. align-items: center;
  204. }
  205. .leftView,
  206. .rightView {
  207. margin-right: 40rpx;
  208. }
  209. .moneyView {
  210. display: flex;
  211. justify-content: flex-start;
  212. color: #FF4F00;
  213. align-items: baseline;
  214. }
  215. .money {
  216. font-size: 56rpx;
  217. }
  218. .condition {
  219. font-size: 22rpx;
  220. color: #999999;
  221. }
  222. .cardName {
  223. font-size: 30rpx;
  224. font-weight: bold;
  225. color: #333333;
  226. margin-top: 10rpx;
  227. margin-bottom: 15rpx;
  228. }
  229. .valid {
  230. font-size: 26rpx;
  231. color: #999999;
  232. }
  233. .bottomView {
  234. display: flex;
  235. justify-content: space-between;
  236. padding: 20rpx 24rpx;
  237. font-size: 24rpx;
  238. color: #666666;
  239. }
  240. .noMore {
  241. text-align: center;
  242. line-height: 50rpx;
  243. color: #999999;
  244. font-size: 28rpx;
  245. }
  246. </style>