template-parking-h5/src/pages/parkingFee/parkingFeePaperCoupon.vue

<template>
  <div :class="['scroll-Y', theme]">
    <div>
      <div class="worp">
        <div class="title">纸质优惠劵减免说明</div>
        <div style="font-size: 28px; color: #808080; padding-top: 12px">
          {{ (orderDetail && orderDetail.parkingRule && orderDetail.parkingRule.paperCouponsDescription) || '' }}
        </div>
      </div>
      <div v-if="paperCouponList.length">
        <div class="worp_index1" v-for="(item, index) in paperCouponList" :key="item.code">
          <div class="worp_index1_index">
            <div class="content">劵码 {{ item.discountCode }}</div>
            <div @click="deleteCoupon(item)"><van-icon name="delete-o" /></div>
          </div>
          <div style="padding-bottom: 25px; margin-left: 20px; margin-top: 20px; font-size: 28px">
            优惠劵金额 :<span style="color: #064c8a">{{ item.discountFee | currency }}</span>
          </div>
        </div>
      </div>
      <div
        :class="{
          worp_button: true,
        }"
        @click="scanCode"
      >
        <img :src="require('./static/images/sweep.png')" style="width: 35px; height: 35px; margin-right: 20px" />
        <div>扫码用劵</div>
      </div>
      <div style="height: 220px;"></div>
    </div>
    <div class="flewx">
      <div style="display: flex; width: 100%; align-items: center">
        <!-- <div class="flewx-content">应付<span style="color: red;font-size: 32px;padding-left: 20px;">{{actualFee |
      currency}}</span> 元 <span style="color: #8d8d8d;padding-left: 30px;font-size: 28px;">已优惠{{discountFee |
          currency}}元</span>
      </div> -->
        <div class="flewx-content">
          已选<span class="num">{{ paperCouponList.length }}张</span>
          <span class="discountFee">优惠券可优惠{{ paperDiscountFee | currency }}</span>
        </div>
        <div class="btn-box">
          <k-button style="width: 100%; max-width: 240px" title="确定" disabledColor="#D1D2D9" @click="confirm" />
        </div>
      </div>
      <!-- 开启底部安全区适配 -->
      <!-- <van-number-keyboard safe-area-inset-bottom /> -->
    </div>
    <!-- 新的toast -->
    <fui-toast ref="toast"></fui-toast>
  </div>
</template>

<script>
import parkingFeePaperCouponJs from './mixins/parkingFeePaperCoupon';
import baseMixins from './mixins/base';
export default {
  mixins: [baseMixins, parkingFeePaperCouponJs],
};
</script>

<style lang="less" scoped>
.scroll-Y {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f4f7ff;
  overflow-y: scroll;
}

.worp {
  padding-left: 30px;
  margin-top: 30px;
  // overflow: hidden;

  .title {
    font-size: 30px;
    font-weight: 600;
    color: #333333;
    line-height: 42px;
  }
}

.worp_index1 {
  width: 92%;
  margin-top: 30px;
  margin-left: 4%;
  font-size: 30px;
  background: #fafbff;
  border-radius: 4px;
  border: 1px solid #d8dae0;
}

.worp_index1_index {
  width: 650px;
  height: 60px;
  margin-left: 20px;
  border-bottom: 1px solid #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;

  .content {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

.worp_button {
  width: 690px;
  height: 80px;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  line-height: 80px;
  color: #fff;
  margin-top: 45px;
  // background-image: linear-gradient(to right, #7e4fa1, #433c7f);
  background: var(--k-color-primary);
  margin-left: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flewx {
  width: 100%;
  height: 100px;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  display: flex;
  align-items: center;
  // padding-bottom: constant(safe-area-inset-bottom);
  // padding-bottom: env(safe-area-inset-bottom);
  padding-bottom: 50px;
  padding-top: 33px;

  .flewx-content {
    font-weight: 400;
    padding-left: 30px;
    font-size: 28px;
    flex: 1;
    color: #999999;
    .num {
      color: var(--k-color-primary);
    }
    .discountFee {
      color: #ee4d3f;
      margin-left: 20px;
    }
  }

  .btn-box {
    display: flex;
    justify-content: flex-end;
    margin-left: 35px;
    margin-right: 24px;
    //flex: 1;
    width: 240px;
    max-width: 240px;
  }
}
</style>