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">
        {{ parkPaperCouponRemark }}
      </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.discountValueMoney | currency
          }}</span>
        </div>
      </div>
    </template>
    <div
      :class="{
        worp_button: true,
        blue_flewx_index3: custTypeId === 1,
        green_flewx_index3: custTypeId === 2,
      }"
      @click="scanCode"
    >
      <img
        :src="require('./static/images/sweep.png')"
        style="width: 35px; height: 35px; margin-right: 20px"
      />
      <div>扫码用劵</div>
    </div>
    <div class="flewx">
      <!-- <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"
        >优惠券可优惠{{ discountFee | currency }}</span
        >
      </div>
      <div
        :class="{
          flewx_index3: true,
          blue_flewx_index3: custTypeId === 1,
          green_flewx_index3: custTypeId === 2,
          'btn-disabled': !parkInfo.servicefee,
        }"
        @click="confirm"
      >
        确定
      </div>
    </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: #064c8a;
  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;

  .flewx-content {
    font-weight: 400;
    position: absolute;
    left: 16px;
    font-size: 28px;
    .num {
      color: #064c8a;
    }
    .discountFee {
      color: #ee4d3f;
    }
  }

  .flewx_index3 {
    width: 150px;
    height: 70px;
    border-radius: 45px;
    text-align: center;
    font-size: 28px;
    line-height: 70px;
    color: #fff;
    // background-image: linear-gradient(to right, #7e4fa1, #433c7f);
    background: #064c8a;
    box-shadow: 2px 3px 5px #888888;
    position: absolute;
    right: 16px;
  }
}

.blue_flewx_index3 {
  .color_flewx_index3('blue');
}

.green_flewx_index3 {
  .color_flewx_index3('green');
}

.color_flewx_index3(@value) {
  @color: 'color-@{value}';
  background-image: none !important;
  background-color: @@color !important;
}
</style>