proginn-frontend/pages/index/cert/freelancer.vue

<template>
  <section class="freelancer">
    <section class="freelancer-top">
      <h1>{{detail.name}}认证</h1>
      <section class="info" v-html="detail.description"/>
      <section class="cer-price-info">
        <span class="price">
          ￥{{detail.real_price}}
          <sub class="sub">/次</sub>
        </span>
        <span class="origin-price">原价￥{{detail.origin_price}}</span>
        <span
          class="vip-tag"
          v-if="detail.is_vip_discount"
          @click="clickVipPrice"
        >开通会员低至￥{{detail.vip_price}}</span>
      </section>
      <section class="cert-status">
        <button class="cer-ctrl death" v-if="isDeath">{{detail.btn_name}}</button>
        <button class="cer-ctrl" @click="clickBtn" v-else>{{detail.btn_name}}</button>
        <span
          class="userful-time"
          v-if="detail.end_date && detail.is_cert_validate && detail.cert_no"
        >有效期至{{detail.end_date}} <a :href="`/cert/id?no=${detail.cert_no}`">查看证书</a></span>
      </section>
    </section>
    <pre class="pre">
      <span style="color: #333;">说明:</span>
      1、认证申请基本条件：已成为平台签约开发者，无纠纷降权记录；
      2、认证申请将在3到5个工作日内完成审核；
      3、认证申请为付费服务，若因申请者不达标而认证不通过，费用不予退回，3个月内可以免费申请3次；
      4、认证通过后，资质有效期为一年，到期后需要重新提交认证；
      5、认证通过后，如果违反平台相关规则，平台有权取消认证资质；
      6、如有疑问，请联系在线客服，或拨打客服热线 0571-28120931
    </pre>
  </section>
</template>

<script>
import http from '@/plugins/http'

export default {
  async asyncData(ctx) {
    let id = ctx.query.id
      , { data } = await http.post(`${ctx.isDev ? '' : http.host}/api/cert/getDetail`, { id })
    return {
      detail: data,
    }
  },
  data() {
    return {}
  },
  head() {
    return {
      title: `${this.detail.name}认证- 程序员客栈`,
      meta: [
        // { hid: 'description', name: 'description', content: 'My custom description' }
      ]
    }
  },
  computed: {
    isDeath() {
      return this.detail.status === '1' || !this.detail.can_click
    },
    isLogin() {
      return this.detail.user_info
    }
  },
  mounted() {
    console.log(this.detail)
  },
  methods: {
    clickVipPrice() {
      window.open('/type/vip/')
    },
    clickBtn() {
      if(this.isLogin) {
        if(!this.detail.is_free_apply) location.href = `https://dev.test.proginn.com/pay?product_type=12&product_id=${this.detail.id}&next=/cert`
        else {
          this.$post('/api/cert/apply', {user_cert_id: this.detail.user_cert_id})
        }
      } else {
        location.href = `/user/notlogin?next=/cert`///freelancer?id=${this.detail.id}`
      }
    },
  }
}
</script>

<style>
.freelancer {
  width: 1000px;
  border-radius: 4px;
  margin: 20px 0 0;
  padding: 8px;
}
.freelancer-top {
  background: white;
  padding: 20px;
}
h1 {
  font-size: 28px;
  font-weight: 500;
  color: rgba(29, 42, 58, 1);
  text-align: center;
  margin: 16px 12px 0;
  padding: 0 0 25px;
  border-bottom: 2px solid rgb(243, 243, 243);
}
.info {
  margin: 36px 0;
  padding-bottom: 30px;
  border-bottom: 1px solid #d8d8d8;
}
.cer-price-info {
  display: flex;
  align-items: center;
  margin: 20px 0;
}
.price {
  font-size: 24px;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  color: rgba(34, 34, 34, 1);
}
.sub {
  margin: 0 0 0 -6px;
}
p {
  line-height: 28px;
}
.origin-price {
  font-size: 12px;
  font-family: PingFangSC-Regular;
  color: rgba(153, 153, 153, 1);
  line-height: 17px;
  text-decoration: line-through;
  margin: 0 10px;
}
a {
  text-decoration: underline;
}
.vip-tag {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 122px;
  height: 22px;
  font-size: 12px;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  color: #ddaf5a;
  background: url(~@/assets/img/cert/vip-tag.png) 0 0 / 100% 100% no-repeat;
  cursor: pointer;
}
.cer-ctrl {
  margin: 10px 0 0;
  width: 154px;
  height: 40px;
  background: #0093fd;
  font-size: 14px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: white;
}
.cer-ctrl.death {
  background: grey;
  cursor: not-allowed;
}
.userful-time {
  font-size: 13px;
  font-family: PingFangSC-Regular;
  color: rgba(153, 153, 153, 1);
}
.pre {
  line-height: 20px;
  color: #999;
  font-size: 12px;
  margin-top: 15px;
}
</style>