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

<template>
  <section class="cert-index">
    <h1>开发者资质认证</h1>
    <ul class="cers">
      <li class="cer" v-for="item of list" :key="item.id">
        <section class="cer-box">
          <img :src="item.img" alt="no-img" class="cer-img">
          <section class="cer-info">
            <h2 class="cer-title">{{item.name}}</h2>
            <div class="cer-remind">{{item.introduction}}</div>
            <section class="cer-price-info">
              <span class="price">
                ￥{{item.real_price}}
                <sub class="sub">/次</sub>
              </span>
              <span class="origin-price">原价￥{{item.origin_price}}</span>
              <span class="vip-tag" v-if="item.is_vip_discount">会员￥{{item.vip_price}}</span>
            </section>
            <section class="cert-status">
              <button class="cer-ctrl" :class="{disabled: btnDisabled(item)}" :disabled="btnDisabled(item)" @click="clickLancer(item)">{{item.btn_name}}</button>
              <span class="userful-time">{{item.end_date ? `有效期至${item.end_date}` : ''}}</span>
            </section>
          </section>
        </section>
      </li>
    </ul>
  </section>
</template>

<script>
let page = 1

export default {
  data() {
    return {
      title: '开发者资质认证- 程序员客栈',
      list: [],
    }
  },
  head () {
    return {
      title: this.title,
      meta: [
        { hid: 'description', name: 'description', content: 'My custom description' }
      ]
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    clickLancer({id}) {
      this.$router.push({
        path: '/cert/freelancer',
        query: {
          id,
        }
      })
    },
    btnDisabled(item) {
      return item.btn_name !== "申请认证"
    },
    async getList() {
      let res = await this.$post('/api/cert/getList', {page})
      if(res.status) {
        let list = res.data.list
        this.list = list
      }
    }
  }
}
</script>

<style scoped>
.cert-index {
  width: 1000px;
  height: 591px;
  background: white;
  border-radius: 4px;
  margin: 20px 0 0;
  padding: 8px;
}
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);
}
.cers {
  padding: 20px 0 0;
  height: calc(100% - 75px);
  overflow-y: scroll;
}
.cer-box {
  display: flex;
  margin-top: 26px;
}
.cer-img {
  width: 270px;
  height: 190px;
  margin-right: 6px;
}
.cer-info {
  display: flex;
  flex-direction: column;
}
.cer-title {
  font-size: 18px;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  color: rgba(51, 51, 51, 1);
  line-height: 25px;
}
.cer-remind {
  width: 680px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(153, 153, 153, 1);
  margin: 6px 0 18px;
}
.price {
  font-size: 24px;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  color: rgba(34, 34, 34, 1);
}
.sub {
  margin: 0 0 0 -6px;
}
.origin-price {
  font-size: 12px;
  font-family: PingFangSC-Regular;
  color: rgba(153, 153, 153, 1);
  line-height: 17px;
  text-decoration: line-through;
}
.vip-tag {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 72px;
  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% no-repeat;
}
.cer-ctrl {
  margin: 10px 0 0;
  width: 154px;
  height: 40px;
  background: #0093fd;
  font-size: 14px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: white;
}
.disabled {
  background: grey;
}
.userful-time {
  font-size: 13px;
  font-family: PingFangSC-Regular;
  color: rgba(153, 153, 153, 1);
}
</style>