JDD-WXCP/pages/coupon/index.vue

<template>
  <div class="coupon">
    <div class="top">
      <span class="selected" >可使用(9)</span>
      <span>已过期(3)</span>
    </div>
    <div class="bottom">
      <div class="item cash">
        <div class="left">
          <span class="amount">￥<span class="big">100</span></span>
          <span>无门槛</span>
        </div>
        <div class="right">
          <span class="title">立减劵</span>
          <span class="scope">范围：限汽油</span>
          <span class="valid">有效至 2021.03.01</span>
          <span class="use"></span>
        </div>
      </div>
       <div class="item discount">
        <div class="left">
          <span class="amount">￥<span class="big">100</span></span>
          <span>无门槛</span>
        </div>
        <div class="right">
          <span class="title">立减劵</span>
          <span class="scope">范围：限汽油</span>
          <span class="valid">有效至 2021.03.01</span>
          <span class="use"></span>
        </div>
      </div>
       <div class="item exchange">
        <div class="left">
          <span class="amount">￥<span class="big">100</span></span>
          <span>无门槛</span>
        </div>
        <div class="right">
          <span class="title">立减劵</span>
          <span class="scope">范围：限汽油</span>
          <span class="valid">有效至 2021.03.01</span>
          <span class="use"></span>
        </div>
      </div>
      <div class="item invalid">
        <div class="left">
          <span class="amount">￥<span class="big">100</span></span>
          <span>无门槛</span>
        </div>
        <div class="right">
          <span class="title">立减劵</span>
          <span class="scope">范围：限汽油</span>
          <span class="valid">有效至 2021.03.01</span>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import ProductList from "../../components/ProductList";
import moment from "moment";
import { mapGetters } from "vuex";

export default {
  head() {
    return {
      title: "电子卡明细",
    };
  },
  data() {
    return {
      allList: [],
      showList: [],
      type: 0, //0全部 1充值 2支出
      gasolineAmount: 0,
      dieselAmount: 0,
    };
  },
  computed: {
    ...mapGetters({
      userInfo: "authen/userInfo",
    }),
    chargeList() {
      return this.allList.filter((ele) => {
        return ele.usageType === "+";
      });
    },
    payList() {
      return this.allList.filter((ele) => {
        return ele.usageType === "-";
      });
    },
  },
  filters: {
    toFixed: function (value) {
      return (+value).toFixed(2);
    },
  },
  components: {
    ProductList,
  },
  created() {},
  methods: {},
};
</script>

<style lang="scss">
.coupon {
  width: 7.5rem;
  background: #ffffff;
  border: 1px solid #eeeeee;
  .top {
    height: 1rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    span {
      height: 0.45rem;
      font-size: 0.32rem;
      font-weight: 400;
      color: #aaaaaa;
      line-height: 0.45rem;
      letter-spacing: 0.01rem;
    }
    span.selected {
      color: #111111;
    }
  }
  .bottom {
    .item {
      width: 6.9rem;
      height: 1.6rem;
      font-size: .24rem;
      font-weight: 500;
      color: #ffffff;
      line-height: .4rem;
      display: flex;
      justify-content: space-between;
      margin-bottom: .2rem;

      .left {
        width: 1.5rem;
        height: 1.6rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;

        .amount {
          font-size: .2rem;

          .big {
            font-size: .33rem;
          }
        }
      }

      .right {
        width: 5.4rem;
        height: 1.6rem;
        color: #111111;
        position: relative;

        .title {
          position: absolute;
          top: .22rem;
          left: .2rem;
          height: .4rem;
          font-size: .28rem;
          font-weight: 500;
          line-height: .4rem;
        }

        .scope {
          position: absolute;
          top: .72rem;
          left: .2rem;
          height: .28rem;
          font-size: .2rem;
          color: #666666;
          line-height: .28rem;
        }

        .valid {
          position: absolute;
          top: 1.1rem;
          left: .2rem;
          height: .28rem;
          font-size: .20rem;
          color: #666666;
          line-height: .28rem;
        }

        .use {
          position: absolute;
          top: .54rem;
          right: .20rem;
          display: inline-block;
          width: 1.60rem;
          height: .55rem;
        }
      }
    }

    .cash {
      background: url("../../static/coupon/youhuiquan1.2x.png") no-repeat;
      background-size: 100% 100%;
    }
    .discount {
      background: url("../../static/coupon/youhuiquan2.2x.png") no-repeat;
      background-size: 100% 100%;
    }
    .exchange {
      background: url("../../static/coupon/youhuiquan3.2x.png") no-repeat;
      background-size: 100% 100%;
    }
    .invalid{
      background: url("../../static/coupon/youhuiquan0.2x.png") no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>