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>
          <p>
            兼职招聘
          </p>
          <p>企业接单权限</p>
          <p style="display: none" class="questionArea" title>
            解决方案高级服务
            <el-tooltip
              class="item"
              effect="dark"
              content="每天可置顶解决方案5次、支持自定义更换解决方案背景、客户线索管理后台、直接展示企业联系方式"
              placement="top-end"
            >
              <img src="@/assets/img/vip/icon_explain.png" alt title />
            </el-tooltip>
          </p>
          <p style="display: none">解决方案代理运营</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>{{vipList[3].userHire || 0}}次/天</p>
          <p>{{vipList[3].userChat || 0}}次/天</p>
          <p>{{vipList[3].name_card_num || 0}}人/月</p>
          <p>无</p>
          <p>无</p>
          <p>无</p>
          <p>无</p>
          <p>0</p>
          <p>无</p>
          <p style="display: none">无</p>
          <p style="display: none">无</p>
        </div>
      </div>
      <div class="newly">
        <div class="newly-title">
          <div class="st1">初创版</div>
          <!-- <div class="sdesc">(招聘企业)</div> -->
        </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>{{this.vipList[0]['chat_times']}}次/天</p>
          <p>{{this.vipList[0]['name_card_num']}}人/月</p>
          <p>免费</p>
          <p>免费</p>
          <p>
            <span class="promo-tag">限时</span>短信消费全额抵扣
            <el-tooltip class="item" effect="dark" placement="top-end">
              <div slot="content">使用 <a href="https://unisms.apistd.com/?source=pi.pc.vip" target="_blank">UniSMS</a> 短信服务发送验证码或通知类短信，消费达到会员售价即可免费获得会员权益</div>
              <img class="helper-ico" src="@/assets/img/vip/icon_explain.png" alt="" title="">
            </el-tooltip>
          </p>
          <p>无</p>
          <p>最多开放{{vipList[0]['recruit_num']}}个岗位</p>
          <p>无</p>
          <p style="display: none">有</p>
          <p style="display: none">无</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 class="st2">企业版</div>
          <!-- <div class="sdesc">(解决方案技术企业)</div> -->
        </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>{{this.vipList[2]['chat_times']}}次/天</p>
          <p>{{this.vipList[2]['name_card_num']}}人/月</p>
          <p>免费</p>
          <p>免费</p>
          <p>
            <span class="promo-tag">限时</span>短信消费全额抵扣
            <el-tooltip class="item" effect="dark" placement="top-end">
              <div slot="content">使用 <a href="https://unisms.apistd.com/?source=pi.pc.vip" target="_blank">UniSMS</a> 短信服务发送验证码或通知类短信，消费达到会员售价即可免费获得会员权益</div>
              <img class="helper-ico" src="@/assets/img/vip/icon_explain.png" alt="" title="">
            </el-tooltip>
          </p>
          <p>免费</p>
          <p>不限次</p>
          <p>有</p>
          <p style="display: none">有</p>
          <p style="display: none">有</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.开通会员即代表您已同意<a href="https://support.proginn.com/rule/member/" style="color: #308eff;">《程序员客栈会员服务条款》</a>；
        </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);
      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";
          this.cnzz("会员购买","初创版开通","");
          break;
        case "pre":
          this.item = this.vipList[2];
          this.type = "pre";
          this.cnzz("会员购买","企业版开通","");
          break;
      }
      this.buyDialog = true;
    },
    handleClose() {
      this.buyDialog = false;
    },
    gotoPay(number) {
      const item = this.item;
      this.cnzz("会员购买",item.id==1?"初创版":"企业版","前往支付页");
      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: 750px;
  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: 40px;
  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: 114px;
}

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

.explain-content p:nth-child(4) {

}

.ordinary {
  overflow: hidden;
  width: 288px;
  height: 750px;
  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;
  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: 27px;
}

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

.ordinary-content p:nth-child(4) {

}

.newly {
  overflow: hidden;
  width: 260px;
  height: 750px;
  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;

  .st1 {
  }
  .sdesc {
  }
}

.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: 27px;
}

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

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

.newly-price {
  margin-top: 30px;
  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: 750px;
  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;
}

.explain-content p {
  display: flex;
  align-items: center;
  justify-content: center;
}

.explain-content img {
  margin-left: 5px;
  width: 13px;
  height: 13px;
}

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

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

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

.enterprise-price {
  margin-top: 30px;
  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;
}

.questionArea {
  display: flex;
  align-items: center;
  justify-content: center;
  .question {
    margin-left: 5px;
    display: inline-block;
    width: 17px;
    height: 17px;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAB5klEQVQ4T6WTP2gVQRDGv2/tU6VQVLATQSJvZx8qvIgimE5E1EJMMI1R0FLSpg3aKQSrGAsLFQkSEAXxL6i8mzteEMVOENHCyvq9G9njNlwObfS6uZn59tuZ3xL/+bHdXxTFrrIsLwHYA0DqvAL45Jxb6nQ6X5o9mwRU9TyAmwAemtlbkl9jsZntJHkQwEkAl0XkdhLZEFDVSQCvzOxMCOG+qoqZ7Y+FzrkX3vuPWZadJnkPwCEReR1zlUCWZeMAPpM8JiJaFMXhsizvAHgGYAuAoyTPeu9f1sJPAewOIfysBFT1GoAxEZmr44zkivf+Rh1fIDnjve/V8S0Av0TkahJ4QnItNfT7/YVut7vQHJaqmohU9XmeT5vZORGZSlf4AeBiCGH1T1tV1U0O4qZGo9G7EMLW5OAbgDkRWWsK5Hl+BcABM+uRvJ4cDgaDHcPh8L2IbE8Cj8zscQhhqW3bzBZJ3hWR9ZSrtzEtIseTwCKAbSIy03Lw3Ht/pH0tVY0b+i4i85VATd8HM5uNDKQGVY2THmsK1KcvO+f2RiqbIEUKlwGEyEJsam8jMhCxATCbaGyjPGlmqyQfkHxDsqLNzOL/npmdInkiUbhBYsviOMl5ABNmtq8qIgcA1uNAI31/fUz/8rJ/Aw0C8hFPWXYFAAAAAElFTkSuQmCC")
      no-repeat;
    background-size: cover;
  }
}

.promo-tag {
  background: linear-gradient(160deg, #ff0080, #ff6a00);
  text-shadow: 0 1px 2px rgba(255,106,0,0.5);
  color: #fff;
  padding: 0.125em 0.375em;
  font-size: 0.9em;
  border-radius: 4px;
  margin: 0 5px 0 -5px;
}
.helper-ico {
  margin-left: 2px;
  width: 13px;
  height: 13px;
}
</style>