Explorar el Código

修改等级标签
添加活动倒计时
添加cert_type字段
修改开发者页面,提示定位

martin.ma hace 4 años
padre
commit
5245c8c634

+ 4 - 4
assets/css/developer/index.scss

@@ -186,13 +186,13 @@
   .developer-activity-tips{
     position: absolute;
     right: -10px;
-    top: 0;
+    top: -5px;
     transform:translate(100%,-100%);
     padding:0 15px;
-    height:38px;
+    height:32px;
     white-space: nowrap;
-    line-height: 38px;;
-    font-size: 14px;
+    line-height: 32px;;
+    font-size: 12px;
     font-weight: 400;
     color: #fff;
     background-color: #f00;

BIN
assets/img/t_level/T1@3x.png


BIN
assets/img/t_level/T2@3x.png


BIN
assets/img/t_level/T3@3x.png


BIN
assets/img/t_level/T4@3x.png


BIN
assets/img/t_level/T5@3x.png


BIN
assets/img/t_level/T6@3x.png


BIN
assets/img/t_level/T7@3x.png


+ 27 - 0
components/t-level-tag.vue

@@ -0,0 +1,27 @@
+<template>
+<span v-if="level > 1" class="t-user-level" :class="'t-level-'+level"></span>
+</template>
+
+<script>
+export default {
+    props: ['level']
+}
+</script>
+
+<style lang="scss" scoped>
+@for $i from 1 through 7 {
+    .t-level-#{$i} {
+        background-image: url("~@/assets/img/t_level/T#{$i}@3x.png");
+    }
+}
+
+.t-user-level {
+    width: 26px;
+    height: 15px;
+    display: inline-block;
+    background-size: 100% auto;
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    vertical-align: baseline;
+}
+</style>

+ 4 - 3
pages/frontend/skill_cert/add.vue

@@ -109,7 +109,7 @@
       <div class="skill-cert-pay">
         <div class="skill-cert-pay-switch">
           <el-switch
-            v-model="value1"
+            v-model="cert_type"
           >
           </el-switch>
           <span class="skill-cert-pay-label">先认证,后付款</span>
@@ -155,7 +155,7 @@
     },
     data() {
       return {
-        value1:false,
+        cert_type:false,
         rules: [{
           title: '1、认证权益',
           content: '* 平台派单时,将第一优先考虑进行过技术认证的用户,技术等级越高,权重越高' +
@@ -309,7 +309,8 @@
           occupation_id: this.directionFirstLevelValue,//一级方向
           direction_id: this.directionSecondLevelValue,//二级方向
           file: this.fileList.map((ele) => ele.response.filename).join(','),
-          id: this.form.id || ''
+          id: this.form.id || '',
+          cert_type:this.cert_type ? "2": "1"
         };
         this.$axios.$post(`/uapi/cert/add`, form).then((value) => {
           if (value.status === 1) {

+ 66 - 26
pages/frontend/skill_cert/components/job-member-list.vue

@@ -20,7 +20,7 @@
           <img class="job-member-avatar" :src="item.icon_url" />
           <div class="job-member-name">
             <span class="job-member-name-text">{{ item.nickname }}</span>
-            <level-tag :level="item.freework_level" />
+            <t-level-tag :level="item.freework_level" />
           </div>
         </div>
         <div class="job-member-tips">
@@ -44,7 +44,7 @@
           <img class="job-member-avatar" :src="item.icon_url" />
           <div class="job-member-name">
             <span class="job-member-name-text">{{ item.nickname }}</span>
-            <level-tag :level="item.freework_level" />
+            <t-level-tag :level="item.freework_level" />
           </div>
         </div>
         <div class="job-member-tips">
@@ -60,11 +60,11 @@
 
 <script>
 // 接单,已认证
-import LevelTag from "@/components/level-tag.vue";
+import TLevelTag from "@/components/t-level-tag.vue";
 import moment from "moment";
 export default {
   components: {
-    LevelTag
+    TLevelTag
   },
   data() {
     return {
@@ -78,6 +78,45 @@ export default {
     this.fetchData();
   },
   methods: {
+    setKeyframes: function (len) {
+      const style = document.createElement('style');
+      style.setAttribute('type', 'text/css');
+      document.head.appendChild(style);
+
+      const sheet = style.sheet;
+
+      let total = len * (256 + 18)
+      let keyframesStr = `
+        @keyframes move2 {
+          from {
+            -webkit-transform: translateX(0);
+            transform: translateX(0);
+          }
+
+          to {
+            -webkit-transform: translateX(-${total}px);
+            transform: translateX(-${total}px);
+          }
+      }
+      `
+
+      let keyframesStr2 = `
+        @-webkit-keyframes move2 {
+          from {
+            -webkit-transform: translateX(0);
+            transform: translateX(0);
+          }
+
+          to {
+            -webkit-transform: translateX(-${total}px);
+            transform: translateX(-${total}px);
+          }
+      }
+      `
+      
+      sheet.insertRule(keyframesStr, 0);
+      sheet.insertRule(keyframesStr2, 0);
+    },
     async fetchData() {
       let res = await this.$axios.$post("/uapi/cert/cert_user_list");
       if (res.status === 1) {
@@ -103,6 +142,7 @@ export default {
           this.firstGroup = res.data.list.slice(0, mid);
           this.secondGroup = res.data.list.slice(mid);
         }
+         this.setKeyframes(this.firstGroup.length)
       } else {
         this.jobMemberList = [];
       }
@@ -184,33 +224,33 @@ export default {
   margin-left: -137px;
 }
 
-@-webkit-keyframes move {
-  from {
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-  }
+// @-webkit-keyframes move {
+//   from {
+//     -webkit-transform: translateX(0);
+//     transform: translateX(0);
+//   }
 
-  to {
-    -webkit-transform: translateX(-1644px);
-    transform: translateX(-1644px);
-  }
-}
+//   to {
+//     -webkit-transform: translateX(-1644px);
+//     transform: translateX(-1644px);
+//   }
+// }
 
-@keyframes move {
-  from {
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-  }
+// @keyframes move {
+//   from {
+//     -webkit-transform: translateX(0);
+//     transform: translateX(0);
+//   }
 
-  to {
-    -webkit-transform: translateX(-1644px);
-    transform: translateX(-1644px);
-  }
-}
+//   to {
+//     -webkit-transform: translateX(-1644px);
+//     transform: translateX(-1644px);
+//   }
+// }
 
 .start-animte {
-  -webkit-animation-name: move;
-  animation-name: move;
+  -webkit-animation-name: move2;
+  animation-name: move2;
   -webkit-animation-timing-function: linear;
   animation-timing-function: linear;
   -webkit-animation-duration: 30s;

+ 34 - 12
pages/frontend/skill_cert/components/skill-cert-activity.vue

@@ -3,7 +3,7 @@
     <div class="activity-container">
       <div class="activity-title">
         <span class="text">100%接单限时活动</span>
-        <span class="count-time">(剩余{{ text }})</span>
+        <span v-if="isShowCountDown" class="count-time">(剩余{{ text }})</span>
       </div>
 
       <div class="activity-list">
@@ -38,26 +38,48 @@ export default {
   data() {
     return {
       // 模拟结束时间,4月10号0点
-      endTime: 1649520000000,
+      endTime: 0,
       pageNow: Date.now(),
       serverTime: Date.now(),
 
       text: "",
-      timer: null
+      timer: null,
+      isShowCountDown:false
     };
   },
   mounted() {
-    this.startTimer();
+    this.fetchActivityTime()
   },
   methods: {
-    startTimer() {
-      this.timer = setInterval(() => {
-        let now = Date.now();
-        let pageNow = this.pageNow;
-        let desc = now - pageNow;
-        let countDown = this.endTime - (this.serverTime + desc);
-        this.parseCountDownText(countDown);
-      }, 800);
+    async fetchActivityTime(){
+      let result = await this.$axios.$post("/uapi/cert/info");
+      if(result.status == 1){
+        let {
+          endtime
+        } = result.data
+        this.pageNow = Date.now();
+        // 测试倒计时
+        // endtime = 10
+        if(endtime >0){
+          this.isShowCountDown = true
+        }else{
+          this.isShowCountDown = false
+          return
+        }
+
+        this.endTime = endtime * 1000
+        this.timer = setInterval(() => {
+          let now = Date.now();
+          let desc = now - this.pageNow;
+          let countDown = this.endTime - desc;
+          if(countDown <= 0){
+            this.isShowCountDown = false
+            this.clearTimer()
+          }
+          this.parseCountDownText(countDown);
+        }, 1000);
+        
+      }
     },
     clearTimer() {
       clearInterval(this.timer);