首页接口

ZZJ

2022-04-02 45faaf27722588e92050e2e3eace9b3704377048

 src/components/Price.vue

@@ -1,9 +1,10 @@

<template>
  <div class="Price">
    ￥<span class="newPrice">{{ priceNew1 }}</span
    >.00/年
    <span class="oldPrice">￥{{ priceOld1 }}.00/年</span>
  <div class="Price" v-if="priceNew">
    ￥<span class="newPrice">{{ priceN1 }}</span
    >{{ priceN2 }}/年
    <span class="iconSave" v-if="showIcon">省</span>
    <span class="oldPrice">￥{{ priceO1 }}{{ priceO2 }}/年</span>
  </div>
</template>

@@ -11,23 +12,35 @@
export default {
  props: {
    priceNew: {},
    priceOld: {},
    showIcon: {
      default: false,
    },
  },
  computed: {
    priceNew1() {
      if (this.priceNew) {
        return this.priceNew;
      } else {
        return 0;
      }
    },
    priceOld1() {
      if (this.priceOld) {
        return this.priceOld;
      } else {
        return this.priceNew1 * 2;
      }
    },
  data() {
    return {
      priceN1: "",
      priceN2: "",
      priceO1: "",
      priceO2: "",
    };
  },
  created() {
    const priceO = (this.priceNew * 1.2 + "").split(".");
    const priceN = (this.priceNew + "").split(".");
    if (priceN.length > 1) {
      this.priceN1 = priceN[0];
      this.priceN2 = "." + priceN[1];
    } else {
      this.priceN1 = priceN[0];
      this.priceN2 = ".00";
    }
    if (priceO.length > 1) {
      this.priceO1 = priceO[0];
      this.priceO2 = "." + priceO[1];
    } else {
      this.priceO1 = priceO[0];
      this.priceO2 = ".00";
    }
  },
};
</script>
@@ -37,6 +50,12 @@
  margin: 0 20px 0 20px;
  font-size: 14px;
  text-align: left;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;

  .newPrice {
    font-size: 30px;
@@ -50,5 +69,17 @@
    color: #999999;
    text-decoration: line-through;
  }

  .iconSave {
    display: inline-block;
    width: 18px;
    height: 18px;
    font-size: 12px;
    color: #fff;
    line-height: 18px;
    text-align: center;
    background: #ff6000;
    border-radius: 2px;
  }
}
</style>