proginn-frontend/pages/type/vip/enterprise.vue

<template>
  <div class="wrapper" v-if="vipList.length>0">
    <div class="title">企业会员</div>
    <div class="subtitle">新人技术人力解决方案</div>
    <div class="content">
      <div class="explain">
        <div class="explain-title">权益内容</div>
        <div class="explain-content">
          <p>雇佣服务</p>
          <p>雇佣直通车</p>
          <p>程序员聊一聊</p>
          <p>平台服务费减免</p>
          <p>企业认证</p>
          <p>技术背调</p>
          <p>驻场招聘</p>
        </div>
      </div>
      <div class="ordinary">
        <div class="ordinary-title">普通企业方</div>
        <div class="ordinary-avatar">
          <img src="@/assets/img/vip/ordinary_avatar.png" alt="">
        </div>
        <div class="ordinary-content">
          <p>10次/天</p>
          <p>无</p>
          <p>5人次/天</p>
          <p>无</p>
          <p>免费</p>
          <p>无</p>
          <p>无</p>
        </div>
      </div>
      <div class="newly">
        <div class="newly-title">初创版</div>
        <div class="newly-avatar">
          <img src="@/assets/img/vip/newly_avatar.png" alt="">
        </div>
        <div class="newly-content">
          <p>{{this.vipList[0]['hire_times']}}次/天</p>
          <p>敬请期待</p>
          <p>{{this.vipList[0]['chat_times']}}人次/天</p>
          <p>整包服务减免<span>{{this.vipList[0]['project_reduction_rate']}}%</span><br/>云端服务减免<span>{{this.vipList[0]['job_reduction_rate']}}%</span></p>
          <p>免费</p>
          <p>无</p>
          <p>无</p>
        </div>
        <div class="newly-price"><span>￥{{this.vipList[0]['monthly_real_price']}}</span>/月</div>
        <div class="newly-btn" @click="clickPay('com')">{{vipDetail.user_info && vipDetail.user_info.vip_type===2?'立即续费':'立即开通'}}</div>
      </div>
      <div class="enterprise">
        <div class="enterprise-title">企业版</div>
        <div class="enterprise-avatar">
          <img src="@/assets/img/vip/enterprise_avatar.png" alt="">
        </div>
        <div class="newly-content">
          <p>{{this.vipList[2]['hire_times']}}次/天</p>
          <p>敬请期待</p>
          <p>不限次</p>
          <p>整包服务减免<span>{{this.vipList[2]['project_reduction_rate']}}%</span><br/>云端服务减免<span>{{this.vipList[2]['job_reduction_rate']}}%</span></p>
          <p>免费</p>
          <p>敬请期待</p>
          <p>敬请期待</p>
        </div>
        <div class="enterprise-price"><span>￥{{this.vipList[2]['monthly_real_price']}}</span>/月</div>
        <div class="enterprise-btn" @click="clickPay('pre')">{{vipDetail.user_info && vipDetail.user_info.vip_type===3?'立即续费':'立即开通'}}</div>
      </div>
    </div>
    <div class="tips">
      <div class="tips-title">说明</div>
      <div class="tips-content">
        <p>1.最低支持购买3个月，每个月按31天算；</p>
        <p>2.开通会员即代表您已同意<span>《程序员客栈会员服务条款》</span>；</p>
        <p> 3.如有任何问题，欢迎咨询在线客服，或拨打热线：0571-28120931 转1</p>
      </div>
    </div>
    <buy-dialog
      :handleClose="handleClose"
      :buyDialog="buyDialog"
      :gotoPay="gotoPay"
      :type="type"
      :item="item"
      :vipDetail="vipDetail"
      :pricePrefix="pricePrefix"
    ></buy-dialog>
  </div>
</template>

<script>
  import buyDialog from "@/components/type/vip/buy-dialog";

  export default {
    data() {
      return {
        buyDialog: false,
        pricePrefix: "",
        type: "com", // com: 企业会员, dev: 开发者会员
        vipList: [],
        vipDetail: {},
        item:{}
      }
    },
    components: {
      buyDialog
    },
    async mounted() {
      await this.getList();
      await this.getVipDetail();
    },
    methods: {
      async getList() {
        let extraHeaders = {};
        if (this.deviceType === "ios") {
          extraHeaders = this.getSign();
        }
        let res = await this.$axios.$post(`/api/vip/getList`, extraHeaders);
        if (res) {
          this.vipList = res.data;
        }
      },
      async getVipDetail() {
        let res = await this.$axios.$post("/api/vip/getVipUserDetail");
        this.vipDetail = res && res.data ? res.data : {};
      },
      clickPay(type) {
        switch (type) {
          case 'com':
            this.item = this.vipList[0];
            this.type='com';
            break;
          case 'pre':
            this.item = this.vipList[2];
            this.type='pre';
            break;
        }
        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.item;
        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 lang="scss" scope>
  .wrapper {
    overflow: hidden;
  }

  .title {
    margin-top: 54px;
    line-height: 45px;
    text-align: center;
    font-weight: 600;
    font-size: 32px;
    color: #222222;
  }

  .subtitle {
    margin-top: 4px;
    line-height: 22px;
    text-align: center;
    font-size: 16px;
    color: #999999;
  }

  .content {
    margin: 49px auto 0;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .explain {
    overflow: hidden;
    width: 226px;
    height: 740px;
    border-radius: 2px;
    background-color: #FFFFFF;
    border: 1px solid #D6DBE3;
    box-shadow: 0px 4px 20px 0px rgba(0, 21, 53, 0.05);
    text-align: center;
  }

  .explain-title {
    margin-top: 88px;
    line-height: 28px;
    font-weight: 600;
    font-size: 20px;
    color: #666666;
  }

  .explain-content {
    overflow: hidden;
    line-height: 20px;
    font-size: 14px;
    color: #222222;
  }

  .explain-content p:nth-child(1) {
    margin-top: 85px;
  }

  .explain-content p:nth-child(2) {
    margin-top: 43px;
  }

  .explain-content p:nth-child(3) {
    margin-top: 43px;
  }

  .explain-content p:nth-child(4) {
    margin-top: 33px;
  }

  .explain-content p:nth-child(5) {
    margin-top: 33px;
  }

  .explain-content p:nth-child(6) {
    margin-top: 23px;
  }

  .explain-content p:nth-child(7) {
    margin-top: 23px;
  }

  .ordinary {
    overflow: hidden;
    width: 260px;
    height: 740px;
    border-radius: 2px;
    background-color: #FFFFFF;
    border: 1px solid #D6DBE3;
    box-shadow: 0px 4px 20px 0px rgba(0, 21, 53, 0.05);
    text-align: center;
  }

  .ordinary-title {
    margin-top: 40px;
    line-height: 28px;
    font-weight: 600;
    font-size: 20px;
    color: #666666;
  }

  .ordinary-avatar {
    margin: 21px auto 0;
    width: 66px;
    height: 66px;
  }

  .ordinary-avatar img {
    width: 100%;
    height: 100%;
  }

  .ordinary-content {
    overflow: hidden;
    line-height: 20px;
    font-size: 14px;
    color: #666666;
  }

  .ordinary-content p:nth-child(1) {
    margin-top: 46px;
  }

  .ordinary-content p:nth-child(2) {
    margin-top: 43px;
  }

  .ordinary-content p:nth-child(3) {
    margin-top: 43px;
  }

  .ordinary-content p:nth-child(4) {
    margin-top: 33px;
  }

  .ordinary-content p:nth-child(5) {
    margin-top: 33px;
  }

  .ordinary-content p:nth-child(6) {
    margin-top: 23px;
  }

  .ordinary-content p:nth-child(7) {
    margin-top: 23px;
  }

  .newly {
    overflow: hidden;
    width: 260px;
    height: 740px;
    border-radius: 2px;
    background-color: #F6FAFF;
    border: 1px solid #308EFF;
    box-shadow: 0px 4px 20px 0px rgba(48, 142, 255, 0.15);
    text-align: center;
  }

  .newly-title {
    margin-top: 40px;
    line-height: 28px;
    font-weight: 600;
    font-size: 20px;
    color: #308EFF;
  }

  .newly-avatar {
    margin: 21px auto 0;
    width: 66px;
    height: 66px;
  }

  .newly-avatar img {
    width: 100%;
    height: 100%;
  }

  .newly-content {
    overflow: hidden;
    line-height: 20px;
    font-size: 14px;
    color: #111111;
  }

  .newly-content p:nth-child(1) {
    margin-top: 46px;
  }

  .newly-content p:nth-child(2) {
    margin-top: 43px;
  }

  .newly-content p:nth-child(3) {
    margin-top: 43px;
  }

  .newly-content p:nth-child(4) {
    margin-top: 23px;
  }

  .newly-content p:nth-child(4) span {
    color: #308EFF;
  }

  .newly-content p:nth-child(5) {
    margin-top: 23px;
  }

  .newly-content p:nth-child(6) {
    margin-top: 23px;
  }

  .newly-content p:nth-child(7) {
    margin-top: 23px;
  }

  .newly-price {
    margin-top: 52px;
    font-size: 15px;
    color: #222222;
  }

  .newly-price span {
    line-height: 40px;
    font-weight: 600;
    font-size: 28px;
    color: #222222;
  }

  .newly-btn {
    margin: 21px auto 0;
    width: 195px;
    height: 44px;
    background-color: #308EFF;
    line-height: 44px;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    color: #FFFFFF;
    cursor: pointer;
  }

  .enterprise {
    overflow: hidden;
    width: 260px;
    height: 740px;
    border-radius: 2px;
    background-color: #F3FFFA;
    border: 1px solid #00C469;
    box-shadow: 0px 4px 20px 0px rgba(0, 196, 105, 0.14);
    text-align: center;
  }

  .enterprise-title {
    margin-top: 40px;
    line-height: 28px;
    font-weight: 600;
    font-size: 20px;
    color: #00C469;
  }

  .enterprise-avatar {
    margin: 21px auto 0;
    width: 66px;
    height: 66px;
  }

  .enterprise-avatar img {
    width: 100%;
    height: 100%;
  }

  .enterprise-content {
    overflow: hidden;
    line-height: 20px;
    font-size: 14px;
    color: #111111;
  }

  .enterprise-content p:nth-child(1) {
    margin-top: 46px;
  }

  .enterprise-content p:nth-child(2) {
    margin-top: 23px;
  }

  .enterprise-content p:nth-child(3) {
    margin-top: 23px;
  }

  .enterprise-content p:nth-child(4) {
    margin-top: 23px;
  }

  .enterprise-content p:nth-child(4) span {
    color: #00C469;
  }

  .enterprise-content p:nth-child(5) {
    margin-top: 23px;
  }

  .enterprise-content p:nth-child(6) {
    margin-top: 23px;
  }

  .enterprise-content p:nth-child(7) {
    margin-top: 23px;
  }

  .enterprise-price {
    margin-top: 52px;
    font-size: 15px;
    color: #222222;
  }

  .enterprise-price span {
    line-height: 40px;
    font-weight: 600;
    font-size: 28px;
    color: #222222;
  }

  .enterprise-btn {
    margin: 21px auto 0;
    width: 195px;
    height: 44px;
    background-color: #00C469;
    line-height: 44px;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    color: #FFFFFF;
    cursor: pointer;
  }

  .tips {
    margin-top: 38px;
  }

  .tips-title {
    line-height: 20px;
    font-weight: 600;
    font-size: 14px;
    color: #666666;
  }

  .tips-content {
    margin-top: 3px;
    line-height: 28px;
    font-size: 14px;
    color: #919AA7;
  }

  .tips-content span {
    color: #308EFF;
  }
</style>