123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142 |
- <template>
- <view>
- <!-- 购物车优惠明细 -->
- <view class="cartDiscount" :class="discountInfo.discount === true ? 'on' : ''">
- <view class="title">优惠明细<text class="iconfont icon-guanbi5" @click="closeDiscount"></text></view>
- <view class="list">
- <view class="item acea-row row-between-wrapper">
- <view>商品总价:</view>
- <view>¥{{selectCountPrice}}</view>
- </view>
- <view class="item acea-row row-between-wrapper">
- <view>优惠抵扣:</view>
- <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>
- <view class="font-color" v-else>-¥{{$util.$h.Add(discountInfo.deduction.coupon_price,discountInfo.deduction.first_order_price)}}</view>
- </view>
- <view class="discountList">
- <view class="coupon acea-row row-between-wrapper" v-if="discountInfo.coupon.true_coupon_price">
- <view>{{discountInfo.coupon.coupon_title}}</view>
- <view v-if="discountInfo.coupon.coupon_type==2">-¥{{$util.$h.Mul(selectCountPrice,(1-$util.$h.Div(discountInfo.coupon.coupon_price,100)))}}</view>
- <view v-else>-¥{{discountInfo.coupon.true_coupon_price}}</view>
- </view>
- <view class="coupon acea-row row-between-wrapper" v-if="discountInfo.deduction.first_order_price">
- <view>新人首单优惠</view>
- <view>-¥{{discountInfo.deduction.first_order_price}}</view>
- </view>
- </view>
- <div class="item">
- <slot name="bottom"></slot>
- </div>
- <view class="bottom">
- <view class="item acea-row row-between-wrapper">
- <view>共优惠:</view>
- <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>
- <view class="font-color" v-else>-¥{{$util.$h.Add(discountInfo.deduction.coupon_price,discountInfo.deduction.first_order_price)}}</view>
- </view>
- <view class="item acea-row row-between-wrapper">
- <view class="total">合计:</view>
- <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>
- <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>
- </view>
- </view>
- </view>
- </view>
- <view class="mask" @touchmove.prevent :hidden="discountInfo.discount === false" @click="closeDiscount"></view>
- </view>
- </template>
- <script>
- export default {
- props: {
- discountInfo: {
- type: Object,
- default: () => {}
- },
- selectCountPrice: {
- type: Number,
- default: 0
- }
- },
- data() {
- return {};
- },
- mounted() {},
- methods: {
- closeDiscount(){
- this.$emit('myevent');
- }
- }
- }
- </script>
- <style scoped lang="scss">
- .discountList{
- background: #F5F5F5;
- }
- .cartDiscount{
- position: fixed;
- bottom: 0;
- width: 100%;
- left: 0;
- background-color: #fff;
- z-index: 9;
- border-radius: 24rpx 24rpx 0 0;
- transform: translate3d(0, 100%, 0);
- transition: all .3s cubic-bezier(.25, .5, .5, .9);
- padding-bottom: 200rpx;
- padding-bottom: calc(200rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
- padding-bottom: calc(200rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
- .title{
- font-size: 32rpx;
- color: #282828;
- text-align: center;
- position: relative;
- background-color: #F5F5F5;
- height: 120rpx;
- line-height: 120rpx;
- border-radius: 24rpx 24rpx 0 0;
- .iconfont{
- position: absolute;
- right: 30rpx;
- top:0;
- font-size: 36rpx;
- }
- }
- .list{
- max-height: 600rpx;
- overflow-x: hidden;
- overflow-y: auto;
- padding-top: 40rpx;
- .discountList{
- width: 692rpx;
- background: #F5F5F5;
- margin: 0 auto;
- border-radius: 12rpx;
- padding: 0 24rpx;
- }
- .coupon{
- height: 70rpx;
- font-size: 24rpx;
- }
- .bottom{
- border-top: 2rpx dotted #EEEEEE;
- margin-top: 30rpx;
- padding-top: 30rpx;
- .total{
- font-size: 30rpx;
- font-weight: 600;
- }
- .money{
- font-size: 36rpx;
- font-weight: 600;
- }
- }
- .item{
- margin: 0 30rpx 30rpx 30rpx;
- }
- }
- }
- .cartDiscount.on{
- transform: translate3d(0, 0, 0);
- }
- </style>
|