dev-4.22-1.2.41

1、web端技术信用新增社区影响力模块

assets/css/public.css

@@ -0,0 +1,647 @@
+/*******************************************布局*******************************************/
+.app__ps_r {
+  position: relative;
+}
+
+.app__ps_a {
+  position: absolute;
+}
+
+.app__ps_f {
+  position: fixed;
+}
+
+.app__ds_b {
+  display: block;
+}
+
+.app__ds_f {
+  display: flex;
+}
+
+.app__f_w_w {
+  flex-wrap: wrap;
+}
+
+.app__f_r {
+  display: flex;
+  flex-flow: row nowrap;
+}
+
+.app__f_c {
+  display: flex;
+  flex-flow: column nowrap;
+}
+
+.app__als_end {
+  align-self: flex-end;
+}
+
+.app_f_g_1 {
+  flex-grow: 1;
+}
+
+.app__f_g_0 {
+  flex-grow: 0;
+}
+
+.app__f_s_1 {
+  flex-shrink: 1;
+}
+
+.app__f_s_0 {
+  flex-shrink: 0;
+}
+
+.app__al_c {
+  align-items: center;
+}
+
+.app__jf_c {
+  justify-content: center;
+}
+
+.app__jf_sb {
+  justify-content: space-between;
+}
+
+.app__jf_l {
+  justify-content: flex-start;
+}
+
+.app__f_1 {
+  flex: 1;
+}
+
+.app__f_2 {
+  flex: 2;
+}
+
+.app__f_2_5 {
+  flex: 2.3;
+}
+
+.app__f_3 {
+  flex: 3;
+}
+
+.app__as_end {
+  align-self: flex-end;
+}
+
+/*******************************************距离*******************************************/
+.app__mg_0 {
+  margin: 0;
+}
+
+.app__mg_10 {
+  margin: 10px;
+}
+
+.app__ml_0 {
+  margin-left: 0;
+}
+
+.app__ml_10 {
+  margin-left: 10px;
+}
+
+.app__ml_15 {
+  margin-left: 15px;
+}
+
+.app__ml_20 {
+  margin-left: 20px;
+}
+
+.app__ml_30 {
+  margin-left: 30px;
+}
+
+.app__ml_35 {
+  margin-left: 35px;
+}
+
+.app__ml_50 {
+  margin-left: 50px;
+}
+
+.app__ml_60 {
+  margin-left: 60px;
+}
+
+.app__mt_5 {
+  margin-top: 5px;
+}
+
+.app__mt_10 {
+  margin-top: 10px;
+}
+
+.app__mt_13 {
+  margin-top: 13px;
+}
+
+.app__mt_15 {
+  margin-top: 15px;
+}
+
+.app__mt_20 {
+  margin-top: 20px;
+}
+
+.app__mb_10 {
+  margin-bottom: 10px;
+}
+
+.app__mr_5 {
+  margin-right: 5px;
+}
+
+.app__mr_10 {
+  margin-right: 10px;
+}
+
+.app__mr_15 {
+  margin-right: 15px;
+}
+
+.app__mr_20 {
+  margin-right: 20px;
+}
+
+.app__mr_30 {
+  margin-right: 30px;
+}
+
+.app__mr_35 {
+  margin-right: 35px;
+}
+
+.app__mr_40 {
+  margin-right: 40px;
+}
+
+.app__mr_50 {
+  margin-right: 50px;
+}
+
+.app__mr_60 {
+  margin-right: 60px;
+}
+
+.app__pd_0 {
+  padding: 0px;
+}
+
+.app__pd_10 {
+  padding: 10px;
+}
+
+.app__pd_20 {
+  padding: 20px;
+}
+
+.app__pd_30 {
+  padding: 30px;
+}
+
+.app__pl_10 {
+  padding-left: 10px;
+}
+
+.app__pr_10 {
+  padding-right: 10px;
+}
+
+.app__pr_20 {
+  padding-right: 20px;
+}
+
+.app__pt_5 {
+  padding-top: 5px;
+}
+
+.app__pt_10 {
+  padding-top: 10px;
+}
+
+.app__pb_5 {
+  padding-bottom: 5px;
+}
+
+.app__pb_10 {
+  padding-bottom: 10px;
+}
+
+.app__pb_20 {
+  padding-bottom: 20px;
+}
+
+.app__pl_20 {
+  padding-left: 20px;
+}
+
+.app__pt_20 {
+  padding-top: 20px;
+}
+
+/*******************************************颜色*******************************************/
+.app__bg_w {
+  background-color: #ffffff;
+}
+
+.app__bg_5FD4FF {
+  background-image: linear-gradient(138deg, #5fd4ff, #31a9ff);
+}
+
+.app__bg_FF9900 {
+  background-image: linear-gradient(138deg, #ffc900, #ff9900);
+}
+
+.app__bg_308EFF {
+  background: #308eff;
+}
+
+.app_bg_919AA7 {
+  background: #919aa7;
+}
+
+.app__bg_eee {
+  background: #eeeeee;
+}
+
+.app__bg_e8f3ff {
+  background: #e8f3ff;
+}
+
+.app__fc_999 {
+  color: #999999;
+}
+
+.app__fc_666 {
+  color: #666666;
+}
+
+.app_fc_w {
+  color: white;
+}
+
+.app__fc_308EFF {
+  color: #308eff;
+}
+
+/*******************************************尺寸*******************************************/
+.app__img_xxs {
+  width: 10px;
+  height: 10px;
+}
+
+.app__img_15 {
+  width: 15px;
+  height: 15px;
+}
+
+.app__img_xs {
+  width: 20px;
+  height: 20px;
+}
+
+.app__img_s {
+  width: 30px;
+  height: 30px;
+}
+
+.app__img_md {
+  width: 40px;
+  height: 40px;
+}
+
+.app__img_xmd {
+  width: 50px;
+  height: 50px;
+}
+
+.app__img_xxmd {
+  width: 60px;
+  height: 60px;
+}
+
+.app__img_xxxmd {
+  width: 70px;
+  height: 70px;
+}
+
+.app__img_bg {
+  width: 80px;
+  height: 80px;
+}
+
+.app__img_huge {
+  width: 100px;
+  height: 100px;
+}
+
+.app__img_130 {
+  width: 130px;
+  height: 130px;
+}
+
+.app__img_144 {
+  width: 144px;
+  height: 144px;
+}
+
+.app__w_20 {
+  width: 20px;
+}
+
+.app__w_30 {
+  width: 30px;
+}
+
+.app__w_40 {
+  width: 30px;
+}
+
+.app__w_152 {
+  width: 152px;
+}
+
+.app__w_50 {
+  width: 50px;
+}
+
+.app__w_60 {
+  width: 60px;
+}
+
+.app__w_70 {
+  width: 70px;
+}
+
+.app__w_120 {
+  width: 120px;
+}
+
+.app__w_130 {
+  width: 130px;
+}
+
+.app__w_200 {
+  width: 200px;
+}
+
+.app__w_250 {
+  width: 250px;
+}
+
+.app__w_20_p {
+  width: 20%;
+}
+
+.app__w_21_p {
+  width: 21%;
+}
+
+.app__w_24_p {
+  width: 24%;
+}
+
+.app__w_30_p {
+  width: 30%;
+}
+
+.app__w_55_p {
+  width: 55%;
+}
+
+.app__mw_20_p {
+  max-width: 20%;
+}
+
+.app__mw_30_p {
+  max-width: 30%;
+}
+
+.app__mw_35_p {
+  max-width: 35%;
+}
+
+.app__mw_40_p {
+  max-width: 40%;
+}
+
+.app__mw_50_p {
+  max-width: 50%;
+}
+
+.app__w_100p {
+  width: 100%;
+}
+
+.app__h_20 {
+  height: 20px;
+}
+
+.app__h_30 {
+  height: 30px;
+}
+
+.app__h_40 {
+  height: 40px;
+}
+
+.app__h_45 {
+  height: 45px;
+}
+
+.app__h_50 {
+  height: 50px;
+}
+
+.app__h_60 {
+  height: 60px;
+}
+
+.app__h_65 {
+  height: 65px;
+}
+
+.app__h_328 {
+  height: 328px;
+}
+
+.app__h_70 {
+  height: 70px;
+}
+
+.app__h_130 {
+  height: 130px;
+}
+
+.app__lh_20 {
+  line-height: 20px;
+}
+
+.app__lh_30 {
+  line-height: 30px;
+}
+
+.app__lh_40 {
+  line-height: 40px;
+}
+
+.app__lh_50 {
+  line-height: 50px;
+}
+
+.app__lh_08em {
+  line-height: 0.8em;
+}
+
+.app__lh_1em {
+  line-height: 1em;
+}
+
+.app__lh_11em {
+  line-height: 1.1em;
+}
+
+.app__lh_2 {
+  line-height: 2;
+}
+
+.app__lh_3 {
+  line-height: 3;
+}
+
+/*******************************************字体*******************************************/
+.app__fs_12 {
+  font-size: 12px;
+}
+
+.app__fs_13 {
+  font-size: 13px;
+}
+
+.app__fs_14 {
+  font-size: 14px;
+}
+
+.app__fs_15 {
+  font-size: 15px;
+}
+
+.app__fs_16 {
+  font-size: 16px;
+}
+
+.app__fs_17 {
+  font-size: 17px;
+}
+
+.app__fs_18 {
+  font-size: 18px;
+}
+
+.app__fs_19 {
+  font-size: 19px;
+}
+
+.app__fs_20 {
+  font-size: 20px;
+}
+
+.app__fs_21 {
+  font-size: 21px;
+}
+
+.app__fs_25 {
+  font-size: 25px;
+}
+
+.app__fs_30 {
+  font-size: 30px;
+}
+
+.app__fw_400 {
+  font-weight: 400;
+}
+
+.app__fw_500 {
+  font-weight: 500;
+}
+
+.app__fw_600 {
+  font-weight: 600;
+}
+
+.app__fw_bold {
+  font-weight: bold;
+}
+
+/*******************************************其他*******************************************/
+.app__bd_a {
+  border: 1px solid #ebeef5;
+}
+
+.app_bd_b {
+  border-bottom: 1px solid #ebeef5;
+}
+
+.app__bd_b_eee {
+  border-bottom: 1px solid #eeeeee;
+}
+
+.app__bd_none {
+  border: none;
+}
+
+.app_br_50_P {
+  border-radius: 50%;
+}
+
+.app_br_5 {
+  border-radius: 5px;
+}
+
+.app_br_10 {
+  border-radius: 10px;
+}
+
+.app__cursor_point {
+  cursor: pointer;
+}
+
+.app__word_b_a {
+  word-break: break-all;
+}
+
+.app__txt_ellipsis {
+  white-space: nowrap;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+}
+
+.mui-ellipsis-1 {
+  display: -webkit-box;
+  overflow: hidden;
+  white-space: normal !important;
+  text-overflow: ellipsis;
+  word-break: break-word;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+
+.app__ta_c {
+  text-align: center;
+}
+
+.app__tras {
+  transition: 0.5s ease-in-out;
+}
+
+.app__ws_nw {
+  white-space: nowrap;
+}

components/credit/data.js

@@ -11,7 +11,8 @@ export default {
       bgImgMobile: require('@/assets/img/credit/bgTopMobile1.png'),
       mapImg: require('@/assets/img/credit/indexMap.png'),
       isNormal: true,
-      topRightJumpList: {c1: '/credit/identify', c2: '/credit/professional', c3: '/credit/project', c4: '/credit/credit'}
+      topRightJumpList: {c1: '/credit/identify', c2: '/credit/professional', c3: '/credit/project', c4: '/credit/credit', c5: '/credit/social'},
+      creditLevel: "信用极好"
     },
     list: []
   },
@@ -57,8 +58,7 @@ export default {
       subTitle: '我们会从您在程序员客栈上绑定的个人代表性作品，以及在客栈远程工作过程中实际参与开发的项目评价，来考察您的项目经验',
       bgImg: require('@/assets/img/credit/projectBg.png'),
       mapImg: require('@/assets/img/credit/projectMap.png'),
-      topRightJumpList: {c1: '/credit/identify', c2: '/credit/professional', c3: '/credit/project', c4: '/credit/credit'}
-
+      topRightJumpList: {c1: '/credit/identify', c2: '/credit/professional', c3: '/credit/project', c4: '/credit/credit'},
     },
     list: [
       {
@@ -184,6 +184,66 @@ export default {
         rightName: '暂未开放'
       }],
   },
+  /** 社区影响力 */
+  social: {
+    topAreaData: {
+      url: '/credit/social',
+      icon: require('@/assets/img/credit/creditIcon.png'),
+      title: '社区影响力',
+      subTitle: '我们会从您绑定的github、gitee、CSDN、公众号、掘金、RSS、Dribble、zcool等第三方社区账号，来考察您的社区影响力',
+      bgImg: require('@/assets/img/credit/creditBg.png'),
+      mapImg: require('@/assets/img/credit/creditMap.png'),
+      topRightJumpList: {c1: '/credit/identify', c2: '/credit/professional', c3: '/credit/project', c4: '/credit/credit'}
+    },
+    list: [],
+  },
+  socialLines: [
+    {
+      id: 0,
+      name: "技术圈",
+      icon: require('@/assets/img/sign/jishuinIcon@2x.png')
+    },
+    {
+      id: 1,
+      name: "Github",
+      icon: require('@/assets/img/sign/github.png')
+    },
+    {
+      id: 2,
+      name: "Gitee",
+      icon: require('@/assets/img/sign/github.png')
+    },
+    {
+      id: 3,
+      name: "CSDN",
+      icon: require('@/assets/img/sign/csdn.png')
+    },
+    {
+      id: 4,
+      name: "公众号",
+      icon: require('@/assets/img/sign/wechat.png')
+    },
+    {
+      id: 5,
+      name: "掘金",
+      icon: require('@/assets/img/sign/juejin.png')
+    },
+    {
+      id: 6,
+      name: "RSS订阅",
+      icon: require('@/assets/img/sign/juejin.png')
+    },
+    {
+      id: 7,
+      name: "Dribbble",
+      icon: require('@/assets/img/sign/dribbble.png')
+    },
+    {
+      id: 7,
+      name: "ZCOOL",
+      icon: require('@/assets/img/sign/dribbble.png')
+    },
+  ],
   /** 其他 */
   other: null
 }

components/credit/dealData.js

@@ -1,30 +1,30 @@
 export default class DealData {
   constructor({ $axios, req, userinfo }) {
-    this.$axios = $axios
-    this.req = req
-    this.userinfo = userinfo || {}
+    this.$axios = $axios;
+    this.req = req;
+    this.userinfo = userinfo || {};
   }
-  
+
   /**处理专业经历*/
   async professional(list) {
-    const { req, $axios } = this
+    const { req, $axios } = this;
     let headers = req && req.headers;
-    let res, resUser
-    
+    let res, resUser;
+
     if (!this.userinfo.id) {
        [ res, resUser ] = await Promise.all([
         $axios.$get(`/api/user/cert_status`, { headers }),
         $axios.$get(`/api/user/getInfo`, { headers }),
-      ])
+      ]);
       this.userinfo = resUser.data
     } else {
       [ res ] = await Promise.all([
         $axios.$get(`/api/user/cert_status`, { headers }),
       ])
     }
-    
+
     if (res.data && Array.isArray(res.data)) {
-      list = []
+      list = [];
       res.data.forEach(item => {
         let len = list.push({
           icon: item.icon_url,
@@ -55,7 +55,7 @@ export default class DealData {
     }
     return list
   }
-  
+
   /**处理身份*/
   async identify(list) {
     const { req, $axios } = this
@@ -116,21 +116,26 @@ export default class DealData {
         itemEdu.rightStatus = 'ok click' //可点击 灰色
       }
     }
-    
+
     return list
   }
-  
+
   /** 项目经验 */
   async project(list) {
     const { req, $axios } = this
     return list
   }
-  
+
   /** 社会信用 */
   async credit(list) {
     const { req, $axios } = this
     return list
   }
-  
+
+  async social(list) {
+    const { req, $axios } = this
+    return list
+  }
+
 }
 

components/credit/header.vue

@@ -10,6 +10,7 @@
           <p class="title">{{data.title}}</p>
         </div>
         <p :class="'subWord ' + (!data.isNormal && ' sub')">{{data.subTitle}}</p>
+        <p :class="'subWord ' + (!data.isNormal && ' sub')" v-if="data.creditLevel">{{data.creditLevel}}</p>
       </div>
       <div class="right" v-if="!mobile">
         <img :src="data.mapImg" alt="">

pages/credit/_type.vue

@@ -4,7 +4,7 @@
     <section class="contentArea">
       <div class="tabList">
         <div class="cell" v-for="item in typeList" :key="item.type" @click="jumpTo(item.topAreaData.url)">
-          <p class="word">{{item.topAreaData.tabTitle || item.topAreaData.title}}</p>
+          <p class="word" style="white-space: nowrap">{{item.topAreaData.tabTitle || item.topAreaData.title}}</p>
           <p class="line" v-if="item.type === type"></p>
         </div>
       </div>
@@ -64,34 +64,38 @@
       }
     },
     async asyncData({$axios, params, req, store}) {
-      let userinfo = store.state.userinfo
-      const dealData = new DealData({$axios, req, userinfo})
-      const type = params.type || 'identify'
-      let {topAreaData, list} = data[type]
+      console.log("&&&&*****", params);
+      let userinfo = store.state.userinfo;
+      const dealData = new DealData({$axios, req, userinfo});
+      const type = params.type || 'identify';
+      let {topAreaData, list} = data[type];
       //处理数据，假若有 跳转链接, 设置按钮样式
       list.forEach(item => {
         if (item.jumpUrl) {
           item.rightStatus = 'ok click'
         }
-      })
+      });
 
       switch (params.type) {
         case 'professional': //专业经历
-          list = await dealData.professional(list)
-          break
+          list = await dealData.professional(list);
+          break;
         case 'identify': //身份特征
-          list = await dealData.identify(list)
-          break
+          list = await dealData.identify(list);
+          break;
         case 'project': //项目经验
-          list = await dealData.project(list)
-          break
+          list = await dealData.project(list);
+          break;
         case 'credit': //社会信用
-          list = await dealData.credit(list)
-          break
+          list = await dealData.credit(list);
+          break;
+        case 'social': //社区影响力
+          list = await dealData.social(list);
+          break;
       }
 
       //data转化为数组
-      let typeList = []
+      let typeList = [];
       for (let key in data) {
         if (data[key] && data[key].list) {
           typeList.push({
@@ -119,23 +123,23 @@
     },
     methods: {
       jumpTo(url, item) {
-        console.log('点击', "url", url, "item", item)
+        console.log('点击', "url", url, "item", item);
         if (url) {
           switch (url) {
             case 'openRealNameAuth':  //打开实名认证弹窗
-              console.log('openRealNameAuth 打开实名认证弹窗')
-              this.toastType = 'openRealNameAuth'
-              this.toastDataInfo = item || {}
+              console.log('openRealNameAuth 打开实名认证弹窗');
+              this.toastType = 'openRealNameAuth';
+              this.toastDataInfo = item || {};
               break;
             case 'openEducation':  //打开最高学历认证
-              console.log('openEducation 打开最高学历认证')
-              this.toastType = 'openEducation'
-              this.toastDataInfo = item || {}
+              console.log('openEducation 打开最高学历认证');
+              this.toastType = 'openEducation';
+              this.toastDataInfo = item || {};
               break;
             case 'openWorkHistory':  //工作经历弹窗
-              console.log('openWorkHistory 工作经历弹窗')
-              this.toastType = 'openWorkHistory'
-              this.toastDataInfo = item || {}
+              console.log('openWorkHistory 工作经历弹窗');
+              this.toastType = 'openWorkHistory';
+              this.toastDataInfo = item || {};
               break;
             case'/wo/':
               url += this.$store.state.userinfo.uid;
@@ -155,14 +159,14 @@
           $axios: this.$axios,
           res: {header: {}},
           userinfo: this.$store.state.userinfo
-        })
+        });
         switch (type) {
           case 'openWorkHistory':
-            this.list = await dealData.professional(this.list)
-            break
+            this.list = await dealData.professional(this.list);
+            break;
           case 'openEducation':
-            this.list = await dealData.identify(this.list)
-            break
+            this.list = await dealData.identify(this.list);
+            break;
         }
       }
     }