proginn-frontend/components/type/vip/pc.vue

<template>
  <section class="vip">
    <section class="vips">
      <section v-if="com" class="vip-box">
        <img class="vip-back" src="~@/assets/img/vip/back_com.png" alt="back_com" />
        <div class="price">
          ￥{{com.monthly_real_price}}
          <sub>/月</sub>
          <span v-if="com.is_month_discount" class="price-warning">原价{{com.monthly_origin_price}}/月</span>
        </div>
        <div class="prices">
          按季付费
          <span style="margin-left: 5px;">￥{{com.quarterly_real_price}}</span>
        </div>
        <button
          class="apply"
          :class="{death: !com.is_btn_can_click}"
          @click="clickPay('com')"
        >{{com.btn_name}}</button>
        <ul class="services">
          <li class="service-item">
            <span>· 整包项目-平台服务费(减免{{com.project_reduction_rate}}%)</span>
            <section class="service-status">{{com.project_discount}}折</section>
          </li>
          <li class="service-item">
            <span>· 云端工作-平台服务费(减免{{com.job_reduction_rate}}%)</span>
            <section class="service-status">{{com.job_discount}}折</section>
          </li>
          <li class="service-item">
            <span>· 每天50次程序员聊天次数</span>
            <section class="service-check"></section>
          </li>
          <li class="service-item">
            <span>· 优先推荐对接优质的开发者</span>
            <section class="service-check"></section>
          </li>
        </ul>
      </section>
      <section v-if="dev" class="vip-box vip-dev">
        <img class="vip-back" src="~@/assets/img/vip/back.png" alt="back_com" />
        <div class="price">
          ￥{{dev.monthly_real_price}}
          <sub>/月</sub>
          <span v-if="dev.is_month_discount" class="price-warning">原价{{dev.monthly_origin_price}}/月</span>
        </div>
        <div class="prices">
          按季付费
          <span style="margin-left: 5px;">￥{{dev.quarterly_real_price}}</span>
        </div>
        <button
          class="apply"
          :class="{death: !dev.is_btn_can_click}"
          @click="clickPay('dev')"
        >{{dev.btn_name}}</button>
        <ul class="services">
          <li class="service-item">
            <span>· 整包项目-平台服务费(减免{{dev.project_reduction_rate}}%)</span>
            <section class="service-status">{{dev.project_discount}}折</section>
          </li>
          <li class="service-item">
            <span>· 云端工作-平台服务费(减免{{dev.job_reduction_rate}}%)</span>
            <section class="service-status">{{dev.job_discount}}折</section>
          </li>
          <li class="service-item">
            <span>· 认证的自由开发者可同时接2单</span>
            <section class="service-check"></section>
          </li>
          <li class="service-item">
            <span>· Ping接单意愿权重更高</span>
            <section class="service-check"></section>
          </li>
        </ul>
      </section>
    </section>
    <ul class="reminds">
      <h3>会员说明</h3>
      <li class="remind">1.购买会员按季付费；</li>
      <li class="remind">2.开通会员即代表您已同意《程序员客栈会员服务条款》；</li>
      <li class="remind">3.如有任何问题，欢迎咨询在线客服，或拨打热线：0571-28120931 转1。</li>
    </ul>
    <buy-dialog
      :handleClose="handleClose"
      :buyDialog="buyDialog"
      :gotoPay="gotoPay"
      :type="type"
      :item="item"
      :vipDetail="vipDetail"
      :pricePrefix="pricePrefix"
    ></buy-dialog>
  </section>
</template>

<script>
import buyDialog from "./buy-dialog";
export default {
  props: ["com", "dev",'premium', "vipDetail", "isCom"],
  data() {
    return {
      buyDialog: false,
      pricePrefix: "",
      type: "com" // com: 企业会员, dev: 开发者会员
    };
  },
  components: {
    buyDialog
  },
  computed: {
    item: function() {
      return this[this.type] || {};
    }
  },
  mounted() {

    //console.log(this.com, this.dev);
  },
  methods: {
    /**
     * 点击支付
     */
    clickPay(type) {
      this.type = type;
      this.buyDialog = true;
      // location.href = `/vip/pay?product_id=${item.id}&number=3&next=/type/vip/`;
    },
    handleClose() {
      this.buyDialog = false;
    },
    gotoPay(number) {
      const item = this[this.type];
      location.href = `/vip/pay?product_id=${item.id}&number=${number}&next=/type/vip/`;
    },
    // 点击会员计划
    clickProject(index) {
      let vip = this.vipList[index];
      window.open(recommend.seo_uri);
    }
  }
};
</script>

<style scoped lang="scss">
.vip {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 1000px;
  height: 810px;
  margin: 10px 0 0 0;
  padding: 70px 0 0 0;
  background: white;
}
.vips {
  display: flex;
  justify-content: center;
}
.vip-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 394px;
  height: 464px;
  border: 1px solid #cae6ff;
  margin: 0 20px;
}
.vip-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}
.price {
  position: relative;
  margin: 118px 0 0 0;
  font-size: 28px;
  color: #222;
}
.prices {
  position: relative;
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: #333;
  margin: 4px 0;
}
.price-warning {
  position: absolute;
  top: 18px;
  right: -70px;
  text-decoration: line-through;
  font-size: 12px;
}
.apply {
  width: 210px;
  height: 42px;
  background: #1994ff;
  border-radius: 2px;
  font-size: 14px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  outline: none;
  margin: 24px 0 33px;
  cursor: pointer;
  border: 0;
  z-index: 1;
}
.services {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 100%;
  height: 160px;
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
  padding: 20px;
  color: #1d2a3a;
  font-size: 14px;
}
.service-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 23px;
}
.service-status {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 55px;
  height: 23px;
  background: url(~@/assets/img/vip/arrow_com.png) 0 0 / 100% 100% no-repeat;
  font-size: 12px;
  color: #1994ff;
  padding: 0 6px 0 0;
}
.service-check {
  width: 16px;
  height: 11px;
  background: url(~@/assets/img/vip/check_com.png) 0 0 / 100% 100% no-repeat;
  margin: 0 21px 0 0;
}
#vip sub {
  bottom: 0;
  font-size: 60%;
}
.vip-dev {
  border: 1px solid rgba(251, 218, 157, 1);
}
.vip-dev .apply {
  background: #e1a83f;
}
.vip-dev .service-status {
  background: url(~@/assets/img/vip/arrow.png) 0 0 / 100% 100% no-repeat;
  color: #e1a83f;
}
.vip-dev .service-check {
  background: url(~@/assets/img/vip/check.png) 0 0 / 100% 100% no-repeat;
}
.reminds {
  list-style: none;
  padding: 0;
  margin: 0 0 60px 86px;
}
h3 {
  margin: 20px 0 40px;
}
.remind {
  margin: 20px 0 0 0;
}
.death,
.vip-dev .death {
  background: #eee;
  color: #666;
  cursor: not-allowed;
}
</style>