4.11 信用体系 前端界面

assets/css/credit/projectType.scss

@@ -66,35 +66,127 @@
 
     .starBox {
       margin-top: 21px;
-      display: flex;
-      .star {
-        &.icon {
-          width: 21px;
-          height: 21px;
-          background-size: cover;
-          background-repeat: no-repeat;
-
-          &.fill {
-            background-image: url("~@/assets/img/credit/starFill.png");
+    }
+  }
+
+  .bodyArea {
+    margin: auto;
+    width: 1000px;
+
+    .evaluateList {
+      margin-top: 3px;
+      .cell {
+        margin-top: 10px;
+        width: 100%;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        height: 100%;
+        padding: 43px 30px;
+        background-color: #fff;
+
+        .left {
+          width: 54px;
+          height: 54px;
+          flex-shrink: 0;
+          font-size: 0;
+          img {
+            width: 54px;
+            height: 54px;
+            border-radius: 27px;
           }
+        }
 
-          &.none {
-            background-image: url("~@/assets/img/credit/starNone.png");
+        .center {
+          margin-left: 10px;
+          display: flex;
+          justify-content: space-around;
+          flex-direction: column;
+          width: 650px;
+          height: 54px;
+
+          .nameBox {
+            display: flex;
+            height: 22px;
+
+            .name {
+              font-size:16px;
+              font-weight:600;
+              color:rgba(51,51,51,1);
+              line-height:22px;
+            }
+            .tips {
+              margin-left: 5px;
+              height:22px;
+              background:rgba(243,243,243,1);
+              border-radius:2px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              p {
+                padding: 0 10px ;
+                font-size: 12px;
+                transform-origin: center;
+                transform: scale(11/12);
+                font-weight:500;
+                color:rgba(136,136,136,1);
+              }
+            }
           }
 
-          &.half {
-            background-image: url("~@/assets/img/credit/starHalf.png");
+          .eva {
+            font-size:14px;
+            font-weight:400;
+            color:rgba(51,51,51,1);
+            line-height:20px;
+            text-align: left;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
           }
         }
-      }
+        .right {
+          width: 210px;
+          display: flex;
+          justify-content: space-around;
+          align-items: flex-end;
+          flex-direction: column;
+
+          .time {
+            font-size:12px;
+            font-weight:400;
+            color:rgba(153,153,153,1);
+            line-height:17px;
+          }
 
+          .starBox {
+            margin-top: 10px;
+            display: flex;
+            .star {
+              margin-left: 14px;
+              &.icon {
+                width: 21px;
+                height: 21px;
+                background-size: cover;
+                background-repeat: no-repeat;
+
+                &.fill {
+                  background-image: url("~@/assets/img/credit/starFill.png");
+                }
+
+                &.none {
+                  background-image: url("~@/assets/img/credit/starNone.png");
+                }
+
+                &.half {
+                  background-image: url("~@/assets/img/credit/starHalf.png");
+                }
+              }
+            }
+          }
+        }
+      }
     }
-
-
-  }
-
-  .bodyArea {
-
   }
 
   .bottonArea {

assets/css/credit/type.scss

@@ -56,6 +56,7 @@
             align-items: center;
             background:rgba(236,236,236,1);
             border-radius:2px;
+            cursor: not-allowed;
             p {
               font-size:14px;
               font-weight:500;
@@ -67,6 +68,7 @@
               background:rgba(48,142,255,1);
               box-shadow:0 2px 6px 0 rgba(48,142,255,0.3);
               border-radius:2px;
+              cursor: pointer;
 
               p {
                 color: #fff;

components/credit/star.vue

@@ -0,0 +1,60 @@
+<template>
+  <section class="starComponent">
+    <i class="star icon fill"
+      v-for="(m,i) in calcNum.fill" :key="'fill' + i"></i>
+    <i class="star icon half"
+      v-for="(m,i) in calcNum.half" :key="'half' + i"></i>
+    <i class="star icon none"  v-for="(m,i) in calcNum.none" :key="'none' + i">
+    </i>
+  </section>
+</template>
+
+<script>
+  export default {
+    props: {
+      score: {
+        type: [ Number, String ],
+        default: 0
+      }
+    },
+    computed: {
+      calcNum() {
+        let score = Number(this.score)
+        let fill = [], half = [], none = []
+        fill = Array.from({length: parseInt(score)})
+        half = Array.from({length: Math.round(score) - Math.floor(score)})
+        none = Array.from({length: 5 -  Math.round(score)})
+        return {
+          fill, half, none
+        }
+      }
+    }
+  };
+</script>
+
+<style scoped lang="scss">
+  .starComponent {
+    display: flex;
+    .star {
+      margin-left: 14px;
+      &.icon {
+        width: 21px;
+        height: 21px;
+        background-size: cover;
+        background-repeat: no-repeat;
+
+        &.fill {
+          background-image: url("~@/assets/img/credit/starFill.png");
+        }
+
+        &.none {
+          background-image: url("~@/assets/img/credit/starNone.png");
+        }
+
+        &.half {
+          background-image: url("~@/assets/img/credit/starHalf.png");
+        }
+      }
+    }
+  }
+</style>

components/header.vue

@@ -40,25 +40,13 @@
           <el-dropdown-item>
             <a
               class="workstation"
-              :href="'/job'"
+              :href="'/credit'"
               style="display: flex; align-items: center;"
             >
               <img
-                src="@/assets/img/header/present_job.png"
+                src="@/assets/img/header/creditIconMore.png"
                 style="width: 24px;height: 24px;margin-right: 5px;"
-              />驻场招聘
-            </a>
-          </el-dropdown-item>
-          <el-dropdown-item>
-            <a
-              class="workstation"
-              :href="baseUrl+'/type/partners?from=top_nav'"
-              style="display: flex; align-items: center;"
-            >
-              <img
-                src="@/assets/img/header/partners.png"
-                style="width: 24px;height: 24px;margin-right: 5px;"
-              />技术服务商
+              />技术信用
             </a>
           </el-dropdown-item>
         </el-dropdown-menu>
@@ -191,6 +179,9 @@
               <a class="vip-item" :href="baseUrl+'/index/app'">
                 <i class="el-icon-view"></i>关注微信
               </a>
+              <a class="vip-item" :href="'/credit/pages'">
+                <i class="el-icon-credit"></i>技术信用
+              </a>
               <a class="vip-item divider" @click="clickQuit">
                 <i class="el-icon-back"></i>退出
               </a>
@@ -387,6 +378,14 @@ export default {
   color: grey;
   cursor: pointer;
 }
+.el-icon-credit {
+  background: url('~@/assets/img/header/creditIconMine.png') no-repeat;
+  background-size: cover;
+  width: 18px;
+  height: 18px;
+  vertical-align: middle;
+  margin: 0 8px;
+}
 .el-icon-search::before {
   font-size: 14px;
   font-weight: 800;

pages/credit/_type.vue

@@ -12,7 +12,9 @@
               <p class="title">{{item.title}}</p>
               <p class="subTitle">{{item.subTitle}}</p>
             </div>
-            <div :class="'right ' + (item.jumpUrl && ' ok') ">
+            <div
+              :class="'right ' + (item.jumpUrl && ' ok') "
+              @click="jumpTo(item.jumpUrl)">
               <p>{{item.rightName}}</p>
             </div>
           </div>
@@ -56,12 +58,18 @@
       }
     },
     data() {
-      return {}
+      return {
+
+      }
     },
     mounted() {
 
     },
-    methods: {}
+    methods: {
+      jumpTo(url) {
+        location.href = url
+      }
+    }
   }
 </script>
 

pages/credit/data.js

@@ -43,18 +43,18 @@ export default {
         icon: require('@/assets/img/credit/projectIcon1.png'),
         title: '整包项目',
         subTitle: '做过的整包项目',
-        jumpUrl: '1',
+        jumpUrl: './projectDetail/whole',
         rightName: '查看详情'
       }, {
         icon: require('@/assets/img/credit/projectIcon2.png'),
         title: '云端项目',
         subTitle: '做过的云端项目',
-        jumpUrl: '1',
+        jumpUrl: './projectDetail/cloud',
         rightName: '查看详情'
       }, {
         icon: require('@/assets/img/credit/projectIcon3.png'),
         title: '雇佣项目',
-        subTitle: '做过的雇佣项目',
+        subTitle: './projectDetail/employ',
         jumpUrl: '1',
         rightName: '查看详情'
       }],

pages/credit/projectDetail/_type.vue

@@ -1,24 +1,41 @@
 <template>
   <div class="projectType">
     <div class="topArea">
-      <div class="title">尽心焉尔的云端项目评价</div>
+      <div class="title">{{myInfo.nickname}}</div>
       <div class="line" />
       <div class="userImg">
-        <img src="" alt="">
+        <img :src="myInfo.icon_url" alt="">
       </div>
       <div class="starBox">
-        <i class="star icon fill"></i>
-        <i class="star icon fill"></i>
-        <i class="star icon half"></i>
-        <i class="star icon none"></i>
-        <i class="star icon none"></i>
+        <Star :score="3.3"/>
       </div>
       <div class="score">
         3.5<span>分</span>
       </div>
       <div class="tips"><span>109</span>人参与评价</div>
     </div>
-    <div class="bodyArea"></div>
+    <div class="bodyArea">
+      <div class="evaluateList">
+        <div class="cell" v-for="(item, index) in list" :key="'cellList' + index">
+          <div class="left">
+            <img :src="item.icon_url" alt="">
+          </div>
+          <div class="center">
+            <div class="nameBox">
+              <p class="name">{{item.name}}</p>
+              <div class="tips"><p>{{item.tip}}</p></div>
+            </div>
+            <p class="eva">{{item.eva}}</p>
+          </div>
+          <div class="right">
+            <p class="time">{{formatTime(item.time)}}</p>
+            <div class="starBox">
+              <Star :score="item.score"/>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
     <div class="bottonArea">
       <el-pagination class="pagination" background layout="prev, pager, next" :total="countSecond" :page-size="15" @current-change="pageChangeHandler"/>
     </div>
@@ -26,13 +43,15 @@
 </template>
 
 <script>
+  import moment from 'moment'
   import CreditCommonTitle from '@/components/credit/header.vue'
+  import Star from '@/components/credit/star.vue'
 
   /**
    * 首页
    */
   export default {
-    components: { CreditCommonTitle },
+    components: { CreditCommonTitle, Star },
     head() {
       return {
         title: '驻场工作招聘，2019年最新驻场工作招聘信息-程序员客栈',
@@ -51,15 +70,33 @@
     data() {
       return {
         countSecond: 1,
-        list: []
+        list: [{
+          name: '程序员客栈',
+          icon_url: 'https://inn.proginn.com/useralbum/186213/icon1862131561103144.jpg!mediumicon',
+          score: 3.5,
+          eva: '程序员客栈提供全国各地城市IT驻场工作最新招聘信息，核实企业资质，让有工作需求的程序员能得到一份满意的驻场工作；对程序员从业者能力进行严格把关，保障企业能在驻场招聘平台找到靠谱的程序员，确保项目',
+          tip: '云端项目',
+          time: new Date().getTime()
+        }]
       }
     },
+    computed: {
+      myInfo() {
+        return this.$store.state.userinfo;
+      },
+    },
     mounted() {
 
     },
     methods: {
-      pageChangeHandler() {
-
+      pageChangeHandler(pageIndex) {
+        this.getInfo(pageIndex)
+      },
+      getInfo(pageIndex = 1) {
+        
+      },
+      formatTime(s) {
+        return moment(s).format('YYYY-MM-DD')
       }
     }
   }