index.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. <template>
  2. <view>
  3. <!-- 购物车优惠明细 -->
  4. <view class="cartDiscount" :class="discountInfo.discount === true ? 'on' : ''">
  5. <view class="title">优惠明细<text class="iconfont icon-guanbi5" @click="closeDiscount"></text></view>
  6. <view class="list">
  7. <view class="item acea-row row-between-wrapper">
  8. <view>商品总价:</view>
  9. <view>¥{{selectCountPrice}}</view>
  10. </view>
  11. <view class="item acea-row row-between-wrapper">
  12. <view>优惠抵扣:</view>
  13. <view class="font-color" v-if="discountInfo.coupon.coupon_type==2">-¥{{$util.$h.Add($util.$h.Mul(selectCountPrice,(1-$util.$h.Div(discountInfo.coupon.coupon_price,100))),discountInfo.deduction.first_order_price)}}</view>
  14. <view class="font-color" v-else>-¥{{$util.$h.Add(discountInfo.deduction.coupon_price,discountInfo.deduction.first_order_price)}}</view>
  15. </view>
  16. <view class="discountList">
  17. <view class="coupon acea-row row-between-wrapper" v-if="discountInfo.coupon.true_coupon_price">
  18. <view>{{discountInfo.coupon.coupon_title}}</view>
  19. <view v-if="discountInfo.coupon.coupon_type==2">-¥{{$util.$h.Mul(selectCountPrice,(1-$util.$h.Div(discountInfo.coupon.coupon_price,100)))}}</view>
  20. <view v-else>-¥{{discountInfo.coupon.true_coupon_price}}</view>
  21. </view>
  22. <view class="coupon acea-row row-between-wrapper" v-if="discountInfo.deduction.first_order_price">
  23. <view>新人首单优惠</view>
  24. <view>-¥{{discountInfo.deduction.first_order_price}}</view>
  25. </view>
  26. </view>
  27. <div class="item">
  28. <slot name="bottom"></slot>
  29. </div>
  30. <view class="bottom">
  31. <view class="item acea-row row-between-wrapper">
  32. <view>共优惠:</view>
  33. <view class="font-color" v-if="discountInfo.coupon.coupon_type==2">-¥{{$util.$h.Add($util.$h.Mul(selectCountPrice,(1-$util.$h.Div(discountInfo.coupon.coupon_price,100))),discountInfo.deduction.first_order_price)}}</view>
  34. <view class="font-color" v-else>-¥{{$util.$h.Add(discountInfo.deduction.coupon_price,discountInfo.deduction.first_order_price)}}</view>
  35. </view>
  36. <view class="item acea-row row-between-wrapper">
  37. <view class="total">合计:</view>
  38. <view class="money" v-if="discountInfo.coupon.coupon_type==2">¥{{$util.$h.Mul($util.$h.Sub(selectCountPrice,discountInfo.deduction.first_order_price),($util.$h.Div(discountInfo.coupon.coupon_price,100)))<=0?0:$util.$h.Mul($util.$h.Sub(selectCountPrice,discountInfo.deduction.first_order_price),($util.$h.Div(discountInfo.coupon.coupon_price,100)))}}</view>
  39. <view class="money" v-else>¥{{$util.$h.Sub(selectCountPrice,$util.$h.Add(discountInfo.deduction.coupon_price,discountInfo.deduction.first_order_price))<=0?0:$util.$h.Sub(selectCountPrice,$util.$h.Add(discountInfo.deduction.coupon_price,discountInfo.deduction.first_order_price))}}</view>
  40. </view>
  41. </view>
  42. </view>
  43. </view>
  44. <view class="mask" @touchmove.prevent :hidden="discountInfo.discount === false" @click="closeDiscount"></view>
  45. </view>
  46. </template>
  47. <script>
  48. export default {
  49. props: {
  50. discountInfo: {
  51. type: Object,
  52. default: () => {}
  53. },
  54. selectCountPrice: {
  55. type: Number,
  56. default: 0
  57. }
  58. },
  59. data() {
  60. return {};
  61. },
  62. mounted() {},
  63. methods: {
  64. closeDiscount(){
  65. this.$emit('myevent');
  66. }
  67. }
  68. }
  69. </script>
  70. <style scoped lang="scss">
  71. .discountList{
  72. background: #F5F5F5;
  73. }
  74. .cartDiscount{
  75. position: fixed;
  76. bottom: 0;
  77. width: 100%;
  78. left: 0;
  79. background-color: #fff;
  80. z-index: 9;
  81. border-radius: 24rpx 24rpx 0 0;
  82. transform: translate3d(0, 100%, 0);
  83. transition: all .3s cubic-bezier(.25, .5, .5, .9);
  84. padding-bottom: 200rpx;
  85. padding-bottom: calc(200rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
  86. padding-bottom: calc(200rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
  87. .title{
  88. font-size: 32rpx;
  89. color: #282828;
  90. text-align: center;
  91. position: relative;
  92. background-color: #F5F5F5;
  93. height: 120rpx;
  94. line-height: 120rpx;
  95. border-radius: 24rpx 24rpx 0 0;
  96. .iconfont{
  97. position: absolute;
  98. right: 30rpx;
  99. top:0;
  100. font-size: 36rpx;
  101. }
  102. }
  103. .list{
  104. max-height: 600rpx;
  105. overflow-x: hidden;
  106. overflow-y: auto;
  107. padding-top: 40rpx;
  108. .discountList{
  109. width: 692rpx;
  110. background: #F5F5F5;
  111. margin: 0 auto;
  112. border-radius: 12rpx;
  113. padding: 0 24rpx;
  114. }
  115. .coupon{
  116. height: 70rpx;
  117. font-size: 24rpx;
  118. }
  119. .bottom{
  120. border-top: 2rpx dotted #EEEEEE;
  121. margin-top: 30rpx;
  122. padding-top: 30rpx;
  123. .total{
  124. font-size: 30rpx;
  125. font-weight: 600;
  126. }
  127. .money{
  128. font-size: 36rpx;
  129. font-weight: 600;
  130. }
  131. }
  132. .item{
  133. margin: 0 30rpx 30rpx 30rpx;
  134. }
  135. }
  136. }
  137. .cartDiscount.on{
  138. transform: translate3d(0, 0, 0);
  139. }
  140. </style>