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

<template>
  <div :class="['scroll-Y', theme]">
    <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>
    <template v-if="paperCouponList.length">
      <div
        class="worp_index1"
        v-for="(item, index) in paperCouponList"
        :key="item.discountCode"
      >
        <div class="worp_index1_index">
          <div class="content">劵码 {{ item.discountCode }}</div>
          <div @click="deleteCoupon(index)"><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>
    </template>
    <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 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;
}

.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: 20px;
  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>