index.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
  1. <template>
  2. <view :style="colorStyle">
  3. <!-- 优惠券弹窗 -->
  4. <view class='coupon-window' :class='window==true?"on":""'>
  5. <image class="co-bag" :src="imgHost + '/statics/images/co-bag.png'" mode=""></image>
  6. <view class='couponWinList'>
  7. <view class='item acea-row row-between-wrapper' v-for="(item,index) in couponList" :key="index">
  8. <view class='money font-color'><text v-if="item.coupon_type==1"></text><text class='num'>{{item.coupon_type==1?item.coupon_price:parseFloat(item.coupon_price)/10}}</text><text v-if="item.coupon_type==2"></text></view>
  9. <view class='text'>
  10. <view v-if="item.coupon_type==1" class='name'>购物满{{item.use_min_price}}元减{{item.coupon_price}}</view>
  11. <view v-else class='name'>购物满{{item.use_min_price}}元打{{parseFloat(item.coupon_price)/10}}</view>
  12. <view v-if="item.coupon_time">领取后{{item.coupon_time}}天内可用</view>
  13. <view v-else>{{item.start_time ? item.start_time+'-' : ''}}{{item.end_time === 0 ? '不限时': item.end_time}}</view>
  14. <!-- #ifdef H5 || APP-PLUS -->
  15. <slot name="bottom" :item="item"></slot>
  16. <!-- #endif -->
  17. <!-- #ifdef MP -->
  18. <slot name="bottom{{index}}"></slot>
  19. <!-- #endif -->
  20. </view>
  21. </view>
  22. </view>
  23. <view class='lid'>
  24. <navigator hover-class='none' url='/pages/users/user_get_coupon/index' class='bnt'>立即领取</navigator>
  25. <view class='iconfont icon-guanbi3' @click="close"></view>
  26. </view>
  27. </view>
  28. <view class='mask' catchtouchmove="true" :hidden="window==false"></view>
  29. </view>
  30. </template>
  31. <script>
  32. import colors from "@/mixins/color";
  33. import {HTTP_REQUEST_URL} from '@/config/app';
  34. export default {
  35. props: {
  36. window: {
  37. type: Boolean | String | Number,
  38. default: false,
  39. },
  40. couponList: {
  41. type: Array,
  42. default: function() {
  43. return []
  44. },
  45. },
  46. couponImage: {
  47. type: String,
  48. default: '',
  49. },
  50. },
  51. mixins: [colors],
  52. data() {
  53. return {
  54. imgHost:HTTP_REQUEST_URL
  55. };
  56. },
  57. methods: {
  58. close:function(){
  59. this.$emit('onColse');
  60. }
  61. }
  62. }
  63. </script>
  64. <style scoped lang="scss">
  65. .mask {
  66. z-index: 9999;
  67. }
  68. .coupon-window {
  69. width: 572rpx;
  70. height: 760rpx;
  71. position: fixed;
  72. top: 20%;
  73. z-index: 10000;
  74. left: 50%;
  75. margin-left: -286rpx;
  76. transform: translate3d(0, -200%, 0);
  77. transition: all .3s cubic-bezier(.25, .5, .5, .9);
  78. border-radius: 30rpx 30rpx 0 0;
  79. overflow-x: hidden;
  80. }
  81. .co-bag {
  82. width: 100%;
  83. height: 250rpx;
  84. z-index: 33333;
  85. top: -40rpx;
  86. position: absolute;
  87. }
  88. .coupon-window:after {
  89. width: 900rpx;
  90. height: 650rpx;
  91. position: absolute;
  92. top: 0%;
  93. left: 50%;
  94. z-index: 11111;
  95. margin-left: -450rpx;
  96. content: '';
  97. border-radius: 50% 50% 0 0;
  98. background: var(--view-theme);
  99. }
  100. .coupon-window.on {
  101. transform: translate3d(0, 0, 0);
  102. }
  103. .coupon-window .couponWinList {
  104. width: 480rpx;
  105. margin: 157rpx 0 0 50rpx;
  106. height: 340rpx;
  107. overflow: auto;
  108. }
  109. .coupon-window .couponWinList .item {
  110. width: 100%;
  111. height: 120rpx;
  112. background-color: #fff;
  113. position: relative;
  114. margin-bottom: 17rpx;
  115. position: relative;
  116. z-index: 99999;
  117. }
  118. .coupon-window .couponWinList .item .left {
  119. border-right: 1px dashed #ccc;
  120. }
  121. .coupon-window .couponWinList .label {
  122. width: 28rpx;
  123. height: 64rpx;
  124. display: block;
  125. position: absolute;
  126. top: 0;
  127. right: 12rpx;
  128. }
  129. .coupon-window .couponWinList .item::after {
  130. content: '';
  131. position: absolute;
  132. width: 18rpx;
  133. height: 18rpx;
  134. border-radius: 50%;
  135. background-color: var(--view-theme);
  136. left: 25.5%;
  137. bottom: 0;
  138. margin-bottom: -9rpx;
  139. }
  140. .coupon-window .couponWinList .item::before {
  141. content: '';
  142. position: absolute;
  143. width: 18rpx;
  144. height: 18rpx;
  145. border-radius: 50%;
  146. background-color: var(--view-theme);
  147. left: 25.5%;
  148. top: 0;
  149. margin-top: -9rpx;
  150. }
  151. .coupon-window .couponWinList .item .money {
  152. width: 130rpx;
  153. text-align: center;
  154. font-size: 26rpx;
  155. font-weight: bold;
  156. }
  157. .coupon-window .couponWinList .item .min_money {
  158. color: #ccc;
  159. font-size: 18rpx;
  160. text-align: center;
  161. }
  162. .coupon-window .couponWinList .item .money .num {
  163. font-size: 40rpx;
  164. }
  165. .coupon-window .couponWinList .item .text {
  166. width: 349rpx;
  167. font-size: 22rpx;
  168. color: #ccc;
  169. padding: 0 29rpx;
  170. box-sizing: border-box;
  171. }
  172. .coupon-window .couponWinList .item .text .image {
  173. width: 32rpx;
  174. height: 32rpx;
  175. display: inline-block;
  176. vertical-align: bottom;
  177. margin-right: 10rpx;
  178. }
  179. .coupon-window .couponWinList .item .text .name {
  180. font-size: 26rpx;
  181. color: var(--view-priceColor);
  182. font-weight: bold;
  183. margin-bottom: 9rpx;
  184. width: 250rpx;
  185. }
  186. .coupon-window .lid {
  187. background: rgba(255,255,255,0.2);
  188. width: 582rpx;
  189. height: 224rpx;
  190. position: fixed;
  191. z-index: 22222;
  192. left: 50%;
  193. top: 0%;
  194. margin: 424rpx 0 0 -296rpx;
  195. }
  196. .coupon-window .lid:after {
  197. width: 920rpx;
  198. height: 280rpx;
  199. position: absolute;
  200. top: -100%;
  201. left: 50%;
  202. z-index: 22222;
  203. margin-left: -460rpx;
  204. content: '';
  205. border-radius: 0 0 50% 50%;
  206. background: var(--view-theme);
  207. }
  208. .coupon-window .lid .bnt {
  209. font-size: 29rpx;
  210. width: 440rpx;
  211. height: 80rpx;
  212. border-radius: 40rpx;
  213. background: linear-gradient(90deg, #FFCA52 0%, #FE960F 100%);
  214. text-align: center;
  215. line-height: 80rpx;
  216. font-weight: bold;
  217. margin: 98rpx auto 0 auto;
  218. color: #fff;
  219. }
  220. .coupon-window .lid .iconfont {
  221. color: #fff;
  222. font-size: 60rpx;
  223. text-align: center;
  224. margin-top: 87rpx;
  225. }
  226. </style>