couponList.vue 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297
  1. <template>
  2. <view class="container">
  3. <view class="tab-h flex flex-x-between flex-y-center">
  4. <view :class="['item',active == 1?'active':'']" @click="onChangeTab(1)">
  5. <view class="title" :style="[active == 1?{color:setColor}:'']">未使用</view>
  6. <view class="line" :style="[active == 1?{'background-color':setColor}:'']"></view>
  7. </view>
  8. <view :class="['item',active == 2?'active':'']" @click="onChangeTab(2)">
  9. <view class="title" :style="[active == 2?{color:setColor}:'']">已使用</view>
  10. <view class="line" :style="[active == 2?{'background-color':setColor}:'']"></view>
  11. </view>
  12. <view :class="['item', active == 3?'active':'']" @click="onChangeTab(3)">
  13. <view class="title" :style="[active == 3?{color:setColor}:'']">已过期</view>
  14. <view class="line" :style="[active == 3?{'background-color':setColor}:'']"></view>
  15. </view>
  16. </view>
  17. <view class="tab-b">
  18. <view class="tab-b-c" v-for="(item,index) in list" :key="index" v-if="item.state==active">
  19. <view class="item">
  20. <image v-if="item.state==1" src="../../static/coupon_bg_1.png" class="coupon-bg" mode="aspectFit">
  21. </image>
  22. <image v-else src="../../static/coupon_bg_3.png" class="coupon-bg" mode="aspectFit"></image>
  23. <view class="content flex flex-nowarp flex-y-center">
  24. <view class="left-bar flex flex-nowarp flex-column flex-x-center flex-y-center">
  25. <view class="money-block flex flex-nowarp flex-x-center flex-y-baseline">
  26. <view class="money">{{Number(item.reduce)}}</view>
  27. <view class="unit">元</view>
  28. </view>
  29. <view class="desc text-nowarp">满 {{Number(item.full)}}元可用</view>
  30. </view>
  31. <view class="right-bar">
  32. <view class="title-block flex flex-y-center">
  33. <view class="tips" v-if="item.type == 2">指定商品</view>
  34. <view class="tips" v-if="item.activity== 1">商家劵</view>
  35. <view class="title text-nowarp">{{item.name}}</view>
  36. </view>
  37. <view class="box-pack-between flex-y-center">
  38. <view class="time">有效期:{{item.start_time}} - {{item.end_time}}</view>
  39. <image v-if="item.type==2" @click.stop="bindChecked(index)" class="more-down"
  40. :class="item.checked?'more-down-deg':''" src="../../static/more-down.png">
  41. </image>
  42. </view>
  43. </view>
  44. </view>
  45. </view>
  46. <view class="coupon-foot flex-grow-1" v-if="item.checked">
  47. <view class="box-pack-between">
  48. <view class="mrt16 flex flex-grow-1">
  49. <text style="min-width: 190rpx;">指定商品:</text>
  50. <view class="flex-grow-1">
  51. <view class="box-pack-between" v-for="(items,index) of item.goods"> {{items.name}}
  52. <text style="color: red;">¥{{items.price}}</text>
  53. </view>
  54. </view>
  55. </view>
  56. </view>
  57. </view>
  58. <!-- <no-none v-else></no-none> -->
  59. </view>
  60. </view>
  61. <view class="no-more">没有更多了~</view>
  62. </view>
  63. </template>
  64. <script>
  65. let hideLoading = true;
  66. export default {
  67. data() {
  68. return {
  69. active: 1,
  70. userInfo: {},
  71. list: [],
  72. setColor: ''
  73. }
  74. },
  75. onLoad() {
  76. uni.setNavigationBarColor({
  77. frontColor: '#ffffff',
  78. backgroundColor: this.$store.state.color,
  79. })
  80. this.setColor = this.$store.state.color;
  81. this.userInfo = uni.getStorageSync('userInfo')
  82. this.getData()
  83. },
  84. methods: {
  85. bindChecked(index) {
  86. this.list[index].checked = !this.list[index].checked;
  87. },
  88. onChangeTab(index) {
  89. if (index != this.active) {
  90. this.active = index
  91. }
  92. },
  93. getData() {
  94. this.$http.request('xcx/MyCoupons', {
  95. user_id: uni.getStorageSync('user_id'),
  96. store_id: uni.getStorageSync('store_id')
  97. }, "", "", hideLoading).then(res => {
  98. for (let s of res.data) {
  99. s.checked = false;
  100. };
  101. this.list = res.data
  102. })
  103. }
  104. }
  105. }
  106. </script>
  107. <style lang="scss">
  108. page {
  109. background-color: #F4F5F7;
  110. }
  111. .content {
  112. position: relative;
  113. }
  114. .tab-h {
  115. background-color: #fff;
  116. position: sticky;
  117. top: 0;
  118. z-index: 100
  119. }
  120. .tab-b-c {
  121. margin-bottom: 30rpx;
  122. }
  123. .tab-h .item {
  124. /* padding: 0 30rpx; */
  125. height: 88rpx;
  126. position: relative;
  127. flex: 1;
  128. text-align: center;
  129. }
  130. .tab-h .item .title {
  131. font-size: 28rpx;
  132. line-height: 88rpx;
  133. font-weight: 500;
  134. }
  135. // .tab-h .item .active::after {
  136. // content: "";
  137. // }
  138. .tab-h .item .line {
  139. display: block;
  140. height: 4rpx;
  141. width: 40rpx;
  142. border-radius: 2rpx;
  143. background-color: none;
  144. position: absolute;
  145. bottom: 5rpx;
  146. left: 50%;
  147. transform: translateX(-50%)
  148. }
  149. .tab-h .item.active .title {
  150. font-size: 32rpx;
  151. font-weight: 600;
  152. color: $theme-color;
  153. }
  154. .tab-b {
  155. padding: 30rpx 25rpx 0;
  156. }
  157. .tab-b .item {
  158. width: 700rpx;
  159. height: 180rpx;
  160. position: relative;
  161. }
  162. .tab-b .item .coupon-bg {
  163. display: block;
  164. width: 100%;
  165. height: 100%;
  166. position: absolute;
  167. left: 0;
  168. top: 0;
  169. z-index: 0;
  170. }
  171. .tab-b .item .content {
  172. position: relative;
  173. z-index: 10;
  174. }
  175. .tab-b .item .content .left-bar {
  176. flex: none;
  177. width: 200rpx;
  178. height: 180rpx;
  179. text-align: center;
  180. }
  181. .tab-b .item .content .left-bar .money {
  182. font-size: 58rpx;
  183. line-height: 70rpx;
  184. color: #fff;
  185. font-weight: bold;
  186. }
  187. .tab-b .item .content .left-bar .unit {
  188. font-size: 24rpx;
  189. color: #fff;
  190. font-weight: 500;
  191. margin-left: 6rpx;
  192. }
  193. .tab-b .item .content .left-bar .desc {
  194. font-size: 24rpx;
  195. line-height: 33rpx;
  196. margin-top: 16rpx;
  197. color: #fff;
  198. }
  199. .tab-b .item .content .right-bar {
  200. width: 500rpx;
  201. flex: none;
  202. box-sizing: border-box;
  203. height: 180rpx;
  204. padding: 0 25rpx;
  205. }
  206. .tab-b .item .content .right-bar .title-block {
  207. height: 106rpx;
  208. border-bottom: 1rpx dashed #E5E5E5;
  209. }
  210. .tab-b .item .content .right-bar .title-block .tips {
  211. flex: none;
  212. height: 40rpx;
  213. background: #2979FF;
  214. border-radius: 4rpx;
  215. font-size: 20rpx;
  216. color: #fff;
  217. padding: 0 10rpx;
  218. line-height: 40rpx;
  219. margin-right: 16rpx;
  220. }
  221. .tab-b .item .content .right-bar .title-block .title {
  222. font-size: 28rpx;
  223. color: #333;
  224. font-weight: bold;
  225. }
  226. .tab-b .item .content .right-bar .time {
  227. font-size: 24rpx;
  228. color: #999;
  229. height: 73rpx;
  230. line-height: 73rpx;
  231. }
  232. .more-down {
  233. width: 33rpx;
  234. height: 33rpx;
  235. }
  236. .more-down-deg {
  237. transform: rotate(180deg);
  238. animation: showPopUp 0.2s;
  239. animation-fill-mode: forwards;
  240. }
  241. @keyframes showPopUp {
  242. 0% {
  243. transform: rotate(0deg);
  244. }
  245. 100% {
  246. transform: rotate(180deg);
  247. }
  248. }
  249. .CouponContentC {
  250. color: #999999;
  251. }
  252. .coupon-foot {
  253. background: #FFFFFF;
  254. padding: 20rpx;
  255. font-size: 28rpx;
  256. border-bottom: 1rpx solid #F1F1F1;
  257. }
  258. </style>