认证：支持申请条件判断和按钮逻辑优化

components/header.vue

@@ -178,7 +178,6 @@ export default {
     }
   },
   mounted() {
-    console.log(this.userinfo)
     this.getMessageCount()
   },
   methods: {

pages/cert/apply.vue

@@ -16,6 +16,15 @@
             @click="clickVipPrice"
           >{{`${detail.is_enjoy_vip_discount ? '会员' : '开通会员低至'}￥${detail.vip_price}`}}</span>
         </section>
+        <section class="cert-quals">
+          <section class="cert-qual" v-for="(item, index) of conditions" :key="index">
+            <section class="qual-status" :class="{'qual-completed': item.is_completed}">
+              <div class="qual-point"></div>
+              <span class="qual-status-name">{{item.is_completed ? '已达标' : '未达标'}}</span>
+            </section>
+            <span class="qual-info">{{`${item.text}`}}{{item.target ? `（${item.completed_num}/${item.target}）` : ''}}</span>
+          </section>
+        </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>
@@ -65,6 +74,13 @@ export default {
     }
   },
   computed: {
+    conditions() {
+      let conditions = this.detail.conditions
+      console.log(Object.keys(conditions).map(key => ({
+        [key]: conditions[key]
+      })))
+      return Object.keys(conditions).map(key => conditions[key])
+    },
     userinfo() {
       return this.$store.state.userinfo
     },
@@ -72,13 +88,11 @@ export default {
       return !this.detail.can_click
     },
     isLogin() {
-      debugger
       return this.userinfo
     }
   },
   mounted() {
-    // console.log(this.detail)
-    // console.log(this.userinfo)
+    console.log({ detail: this.detail })
   },
   methods: {
     clickVipPrice() {
@@ -129,20 +143,22 @@ h1 {
   border-bottom: 1px solid #d8d8d8;
 }
 .info {
-  margin: 36px 0;
+  margin: 36px 0 0;
   padding-bottom: 30px;
   border-bottom: 1px solid #d8d8d8;
 }
 .cer-price-info {
   display: flex;
   align-items: center;
-  margin: 20px 0;
+  padding: 20px 0;
+  border-bottom: 1px solid #d8d8d8;
 }
 .price {
   font-size: 24px;
   font-family: PingFangSC-Semibold;
   font-weight: 600;
   color: rgba(34, 34, 34, 1);
+  margin-right: 10px;
 }
 .sub {
   margin: 0 0 0 -6px;
@@ -174,6 +190,38 @@ a {
   background: url(~@/assets/img/cert/vip-tag.png) 0 0 / 100% 100% no-repeat;
   cursor: pointer;
 }
+.cert-quals {
+  font-size: 14px;
+  padding: 10px 0 30px;
+  border-bottom: 1px solid #d8d8d8;
+}
+.cert-qual {
+  display: flex;
+  align-items: center;
+  margin-top: 10px;;
+}
+.qual-status {
+  display: flex;
+  align-items: center;
+  width: 80px;
+}
+.qual-completed .qual-point {
+  background: #11BD6D;
+}
+.qual-completed .qual-status-name {
+  color: #11BD6D;
+}
+.qual-point {
+  --width: 6px;
+  width: var(--width);
+  height: var(--width);
+  border-radius: 50%;
+  background: #999;
+  margin-right: 8px;;
+}
+.qual-status-name {
+  color: #999;
+}
 .cer-ctrl {
   margin: 10px 0 0;
   width: 154px;

plugins/http.js

@@ -63,7 +63,6 @@ const request = async (method, path, data, payload = {}) => {
     params: '',
   }// Object.assign(body, payload.config, { params: '' })
 
-  console.log(`url: ${url}`)
   consoleFormat({ body })
 
   const res = await axios.request(body)
@@ -84,7 +83,6 @@ const consoleFormat = obj => {
   const key = Object.keys(obj)[0]
   console.log(key + ':')
   console.dir(obj[key])
-  // console.log()
 }
 
 Vue.prototype.$get = get