proginn-frontend/components/type/vip/buy-dialog.vue

<template>
  <el-dialog class="wrapper-buy-dialog" :visible.sync="buyDialog" :before-close="handleClose">
    <div class="buy-dialog">
      <template v-if="type === 'dev'">
        <img src="~@/assets/img/vip/vip_icon.png" alt="vip_icon" />
        <h4>购买开发者会员</h4>
      </template>
      <template v-else-if="type==='com'">
        <img src="~@/assets/img/vip/vip_icon_com.png" alt="vip_icon_com" />
        <h4>购买初创版会员</h4>
      </template>
      <template v-else>
        <img src="~@/assets/img/vip/vip_icon_premium.png" alt="vip_icon_com" />
        <h4>购买企业版会员</h4>
      </template>
      <div class="wrapper-number">
        <div
          v-if="item['can_buy_quarterly'] === '1'"
          @click="clickNumber(3)"
          :class="{number: true, 'is-checked': number==3}"
        >
          <span>
            <strong>3</strong>个月
          </span>
          <span>￥{{item[pricePrefix + 'quarterly_real_price']}}</span>
          <span
            v-if="parseInt(item[pricePrefix + 'quarterly_origin_price']) > parseInt(item[pricePrefix + 'quarterly_real_price'])"
            class="del"
          >￥{{item[pricePrefix + 'quarterly_origin_price']}}</span>
        </div>
        <div
          v-if="item['can_buy_half_yearly'] === '1'"
          @click="clickNumber(6)"
          :class="{number: true, 'is-checked': number==6}"
        >
          <span>
            <strong>6</strong>个月
          </span>
          <span>￥{{item[pricePrefix + 'half_yearly_real_price']}}</span>
          <span
            v-if="parseInt(item[pricePrefix + 'half_yearly_origin_price']) > parseInt(item[pricePrefix + 'half_yearly_real_price'])"
            class="del"
          >￥{{item[pricePrefix + 'half_yearly_origin_price']}}</span>
        </div>
        <div
          v-if="item['can_buy_yearly'] === '1'"
          @click="clickNumber(12)"
          :class="{number: true, 'is-checked': number==12}"
        >
          <span>
            <strong>12</strong>个月
          </span>
          <span>￥{{item[pricePrefix + 'yearly_real_price']}}</span>
          <span
            v-if="parseInt(item[pricePrefix + 'yearly_origin_price']) > parseInt(item[pricePrefix + 'yearly_real_price'])"
            class="del"
          >￥{{item[pricePrefix + 'yearly_origin_price']}}</span>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          class="buy-btn"
          type="primary"
          @click="gotoPay(number)"
        >{{vipDetail.user_info && vipDetail.user_info.vip_type >0 ? "续费" : "开通"}}</el-button>
      </span>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: [
    "handleClose",
    "buyDialog",
    "gotoPay",
    "type",
    "item",
    "vipDetail",
    "pricePrefix"
  ],
  data() {
    return {
      number: 3
    };
  },
  computed: {},
  mounted() {},
  methods: {
    clickNumber(number) {
      this.number = number;
    }
  }
};
</script>

<style lang="scss">
.wrapper-buy-dialog .el-dialog {
  width: 669px;
}
.buy-dialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: -15px;
  width: 650px;
  img {
    width: 44px;
  }
  h4 {
    margin-top: 11px;
    font-size: 23px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    color: rgba(34, 34, 34, 1);
    line-height: 32px;
  }
  .wrapper-number {
    display: flex;
    justify-content: flex-start;
    margin: 35px 0;
    padding: 0 25px;
    width: 100%;
    .number {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 20px;
      margin-right: 30px;
      width: 180px;
      height: 120px;
      border-radius: 2px;
      border: 1px solid rgba(221, 221, 221, 1);
      font-family: PingFangSC-Light;
      font-weight: 300;
      color: rgba(34, 34, 34, 1);
      cursor: pointer;
      strong {
        font-size: 54px;
        line-height: 50px;
      }
      span {
        line-height: 20px;
      }
      .del {
        color: #999;
        text-decoration: line-through;
      }
    }
    .is-checked {
      border: 2px solid rgba(225, 168, 63, 1);
    }
  }
  .buy-btn {
    width: 236px;
    height: 48px;
    background: rgba(34, 34, 34, 1);
    border-radius: 2px;
    font-size: 16px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    color: rgba(232, 190, 79, 1);
    line-height: 22px;
  }
}

@media screen and (max-width: 960px) {
  .wrapper-buy-dialog .el-dialog {
    width: 309px;
  }
  .buy-dialog {
    width: 255px;
    .wrapper-number {
      flex-direction: column;
      padding: 0;
      .number {
        flex-direction: row;
        justify-content: space-between;
        margin-top: 12px;
        padding: 7px 10px;
        width: 255px;
        height: 65px;
        font-size: 12px;
        strong {
          line-height: 50px;
          font-size: 36px;
        }
      }
      span:nth-of-type(1) {
        order: 0;
      }
      span:nth-of-type(2) {
        order: 3;
      }
      span:nth-of-type(3) {
        order: 2;
        margin-left: 60px;
      }
    }
  }
}
</style>