Merge branch '1xinfeng-dev' of www.gitinn.com:proginn/proginn-frontend into dev

assets/css/credit/header.scss

@@ -0,0 +1,169 @@
+@import '~@/assets/css/scssCommon.scss';
+
+.topArea {
+  position: relative;
+  width: 100%;
+  min-height: 200px;
+  .bgImage {
+    img {
+      width: 100%;
+      vertical-align: middle;
+    }
+  }
+  .topContent {
+    position: absolute;
+    top: 85px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 1000px;
+    left: 50%;
+    transform: translateX(-50%);
+    height: calc(100% - 85px);
+
+    .left {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      text-align: left;
+
+      .titleBox {
+        display: flex;
+        height: 66px;
+        align-items: center;
+
+        .icon {
+          width: 50px;
+          height: 50px;
+          margin-right: 10px;
+        }
+
+        .title {
+          font-size: 47px;
+          font-weight: 600;
+          color: rgba(255, 255, 255, 1);
+          line-height: 66px;
+        }
+      }
+
+      .subWord {
+        margin-top: 12px;
+        font-size: 30px;
+        font-weight: 300;
+        color: rgba(255, 255, 255, 1);
+        line-height: 42px;
+
+        &.sub {
+          font-size:16px;
+          line-height:22px;
+        }
+      }
+    }
+
+    .right {
+      flex-shrink: 0;
+      margin-left: 50px;
+      position: relative;
+      img {
+        width: webPxTvw(382);
+        height: webPxTvw(353);
+      }
+      .buttonArea {
+        top: 0;
+        left: 0;
+        position: absolute;
+        width: webPxTvw(382);
+        height: webPxTvw(353);
+
+        .cell {
+          width: webPxTvw(60);
+          height: webPxTvw(60);
+          position: absolute;
+          cursor: pointer;
+          &.c1 {
+            left:0;
+            top: webPxTvw(120)
+          }
+          &.c2 {
+            left: webPxTvw(162);
+            top: 0;
+          }
+          &.c3 {
+            right: 0;
+            top: webPxTvw(120);
+          }
+          &.c4 {
+            left: webPxTvw(60);
+            bottom: 0;
+          }
+          &.c5 {
+            right: webPxTvw(60);
+            bottom: 0;
+          }
+        }
+      }
+    }
+  }
+
+  &.isMobile {
+    .bgImage {
+      img {
+        width: 100vw;
+        vertical-align: middle;
+      }
+    }
+    .topContent {
+      position: absolute;
+      top: pxtovw(10);
+      width: 100%;
+      height: 175px;
+
+      .left {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        text-align: left;
+        width: 100%;
+
+        .titleBox {
+          display: flex;
+          height: pxtovw(66);
+          align-items: center;
+          justify-content: center;
+          .icon {
+            width: pxtovw(50);
+            height: pxtovw(50);
+            margin-right: pxtovw(px);
+          }
+          .title {
+            font-weight: 600;
+            color: rgba(255, 255, 255, 1);
+            font-size:pxtovw(36);
+            line-height:pxtovw(51);
+          }
+        }
+
+        .subWord {
+          margin-top: pxtovw(6);
+          font-size:pxtovw(16);
+          line-height:pxtovw(22);
+          text-align: center;
+
+          &.sub {
+            font-size:pxtovw(16);
+            line-height:pxtovw(22);
+          }
+        }
+      }
+
+      .right {
+        flex-shrink: 0;
+        margin-left: pxtovw(px);
+        img {
+          width: 21.22vw;
+          height: 19.61vw;
+        }
+      }
+    }
+  }
+}

assets/css/other/report.scss

@@ -0,0 +1,192 @@
+.Report {
+  width: 100px;
+  min-height: 790px;
+  background:rgba(255,255,255,1);
+
+  .titleArea {
+    width: calc(100% - 40px);
+    height: 90px;
+    margin: 0 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-bottom: 2px solid rgba(0,0,0, 0.06);
+
+    p {
+      font-size:26px;
+      font-weight:500;
+      color:rgba(29,42,58,1);
+      line-height:37px;
+      height: 37px;
+    }
+  }
+
+  .bodyArea {
+    width: 650px;
+    margin: 0 auto;
+
+    .topTips {
+      margin-top: 20px;
+      width: 100%;
+      height: 132px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-bottom: 1px solid rgba(0,0,0, 0.06);
+      p {
+        font-size:14px;
+        font-weight:600;
+        color:rgba(51,51,51,1);
+        line-height:20px;
+        text-align: left;
+        height: 20px;
+      }
+    }
+
+    .reportBox {
+      margin-top: 40px;
+
+      .left {
+        width: 94px;
+        text-align: right;
+        align-self: flex-start;
+        flex-shrink: 0;
+
+        p {
+          font-size:14px;
+          font-weight:500;
+          color:rgba(29,42,58,1);
+          line-height:20px;
+        }
+      }
+
+      .reportUser {
+        display: flex;
+        align-items: center;
+        height: 55px;
+
+        .left {
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+          align-self: center;
+        }
+
+        .right {
+          margin-left: 17px;
+          display: flex;
+          align-items: center;
+          font-size: 0;
+          height: 55px;
+
+          img {
+            width:55px;
+            height:55px;
+            border-radius: 50%;
+          }
+
+          p {
+            height:20px;
+            font-size:14px;
+            font-weight:500;
+            color:rgba(29,42,58,1);
+            line-height:20px;
+            margin-left: 10px;
+          }
+
+        }
+      }
+
+      .reportType {
+        margin-top: 42px;
+        display: flex;
+        align-items: center;
+
+        .left {
+          flex-shrink: 0;
+        }
+
+        .right {
+          margin-left: 17px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          flex-wrap: wrap;
+
+          .cell {
+            display: flex;
+            align-items: center;
+            width: 250px;
+
+            cursor: pointer;
+
+            &:nth-child(0n+3) {
+              margin-top: 22px;
+            }
+
+            .check {
+              width: 20px;
+              height: 20px;
+              background-image: url('~@/assets/img/other/report/noneSelected@2x.png');
+              background-repeat: no-repeat;
+              background-size: cover;
+              &.ok {
+                background-image: url('~@/assets/img/other/report/selected@2x.png');
+              }
+            }
+
+            .word {
+              height:20px;
+              font-size:14px;
+              font-weight:600;
+              color:rgba(29,42,58,1);
+              line-height:20px;
+              margin-left: 7px;
+            }
+          }
+        }
+      }
+
+      .reportDesc {
+        margin-top: 46px;
+        display: flex;
+        align-items: center;
+        min-height: 110px;
+
+        .right {
+          margin-left: 17px;
+        }
+      }
+
+      .reportButton {
+        margin-top: 27px;
+        display: flex;
+        align-items: center;
+        height: 55px;
+
+        .right {
+          margin-left: 17px;
+          width:153px;
+          height:46px;
+          background:rgba(48,142,255,1);
+          box-shadow:0px 2px 6px 0px rgba(48,142,255,0.3);
+          border-radius:2px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          cursor: pointer;
+          p {
+            height:20px;
+            font-size:14px;
+            font-weight:500;
+            color:rgba(255,255,255,1);
+            line-height:20px;
+          }
+
+        }
+
+      }
+    }
+  }
+
+}

assets/css/scssCommon.scss

@@ -2,3 +2,8 @@
 @function pxtovw($px) {
   @return unquote($px / 3.75 + 'vw');
 }
+
+
+@function webPxTvw($px) {
+  @return unquote($px / 18 + 'vw');
+}

components/credit/data.js

@@ -1,4 +1,17 @@
 export default {
+  /** 信用个人首页 **/
+  index: {
+    topAreaData: {
+      icon: '',
+      title: '技术信用',
+      subTitle: '真实可信赖的程序员能力与口碑评估体系',
+      bgImg: require('@/assets/img/credit/bgTop1.png'),
+      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'}
+    },
+  },
   /** 身份特征 */
   identify: {
     topAreaData: {
@@ -7,6 +20,7 @@ export default {
       subTitle: '我们会从您的实名认证信息、学历信息、驾驶证、职业证书等信息，来进行考察您的身份特征',
       bgImg: require('@/assets/img/credit/identifyBg.png'),
       mapImg: require('@/assets/img/credit/identifyMap.png'),
+      topRightJumpList: {c1: '/credit/identify', c2: '/credit/professional', c3: '/credit/project', c4: '/credit/credit'}
     },
     list: [
       {
@@ -37,6 +51,8 @@ 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'}
+  
     },
     list: [
       {
@@ -67,6 +83,8 @@ export default {
       subTitle: '我们会从您在程序员客栈远程工作过程中，专业经历资质认证情况，和其它专业工作经历信息，来考察您的专业经历',
       bgImg: require('@/assets/img/credit/professionalBg.png'),
       mapImg: require('@/assets/img/credit/professionalMap.png'),
+      topRightJumpList: {c1: '/credit/identify', c2: '/credit/professional', c3: '/credit/project', c4: '/credit/credit'}
+  
     },
     list: [
       {
@@ -121,6 +139,8 @@ export default {
       subTitle: '我们会从工商信息、失信记录、金融风险、芝麻信用等第三方信用机构，来考察您的社会信用',
       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: [
       {

components/credit/header.vue

@@ -13,12 +13,21 @@
       </div>
       <div class="right" v-if="!mobile">
         <img :src="data.mapImg" alt="">
+        <div class="buttonArea" v-if="data.topRightJumpList" >
+          <div class="cell"
+            v-for="key in Object.keys(data.topRightJumpList)"
+            :class="key"
+            :key="'c'+key"
+            @click="jumpTo(data.topRightJumpList[key])"
+          />
+        </div>
       </div>
     </div>
   </section>
 </template>
 
 <script>
+
   export default {
     props: {
       data: {
@@ -31,7 +40,8 @@
             bgImg: require('@/assets/img/credit/bgTop1.png'),
             bgImgMobile: require('@/assets/img/credit/bgTopMobile1.png'),
             mapImg: require('@/assets/img/credit/indexMap.png'),
-            isNormal: true
+            isNormal: true,
+            topRightJumpList: null
           }
         }
       }
@@ -42,144 +52,17 @@
       }
     },
     mounted() {
+    },
+    methods: {
+      jumpTo(url) {
+        if (url) {
+          location.href = url
+        }
+      }
     }
   };
 </script>
 
 <style scoped lang="scss">
-  @import '~@/assets/css/scssCommon.scss';
-
-  .topArea {
-    position: relative;
-    width: 100%;
-    min-height: 200px;
-    .bgImage {
-      img {
-        width: 100%;
-        vertical-align: middle;
-      }
-    }
-    .topContent {
-      position: absolute;
-      top: 85px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      width: 1000px;
-      left: 50%;
-      transform: translateX(-50%);
-      height: calc(100% - 85px);
-
-      .left {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        text-align: left;
-
-        .titleBox {
-          display: flex;
-          height: 66px;
-          align-items: center;
-
-          .icon {
-            width: 50px;
-            height: 50px;
-            margin-right: 10px;
-          }
-
-          .title {
-            font-size: 47px;
-            font-weight: 600;
-            color: rgba(255, 255, 255, 1);
-            line-height: 66px;
-          }
-        }
-
-        .subWord {
-          margin-top: 12px;
-          font-size: 30px;
-          font-weight: 300;
-          color: rgba(255, 255, 255, 1);
-          line-height: 42px;
-
-          &.sub {
-            font-size:16px;
-            line-height:22px;
-          }
-        }
-      }
-
-      .right {
-        flex-shrink: 0;
-        margin-left: 50px;
-        img {
-          width: 21.22vw;
-          height: 19.61vw;
-        }
-      }
-    }
-
-    &.isMobile {
-      .bgImage {
-        img {
-          width: 100vw;
-          vertical-align: middle;
-        }
-      }
-      .topContent {
-        position: absolute;
-        top: pxtovw(10);
-        width: 100%;
-        height: 175px;
-
-        .left {
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          text-align: left;
-          width: 100%;
-
-          .titleBox {
-            display: flex;
-            height: pxtovw(66);
-            align-items: center;
-            justify-content: center;
-            .icon {
-              width: pxtovw(50);
-              height: pxtovw(50);
-              margin-right: pxtovw(px);
-            }
-            .title {
-              font-weight: 600;
-              color: rgba(255, 255, 255, 1);
-              font-size:pxtovw(36);
-              line-height:pxtovw(51);
-            }
-          }
-
-          .subWord {
-            margin-top: pxtovw(6);
-            font-size:pxtovw(16);
-            line-height:pxtovw(22);
-            text-align: center;
-
-            &.sub {
-              font-size:pxtovw(16);
-              line-height:pxtovw(22);
-            }
-          }
-        }
-
-        .right {
-          flex-shrink: 0;
-          margin-left: pxtovw(px);
-          img {
-            width: 21.22vw;
-            height: 19.61vw;
-          }
-        }
-      }
-    }
-  }
-
+  @import '~@/assets/css/credit/header.scss';
 </style>

nuxt.config.js

@@ -14,7 +14,7 @@ module.exports = {
 	/**
    * 打包文件
    */
-	build: {
+	build : {
 		vendor: [ 'element-ui' ]
 	},
 
@@ -61,10 +61,6 @@ module.exports = {
 		// 'plugins/http',
 		'plugins/nuxtAxios',
     'plugins/deviceType',
-    // {
-    //   src:'plugins/deviceType',
-    //   ssr: false
-    // },
 		{
 			src:'plugins/rem',
 			ssr: false
@@ -115,6 +111,19 @@ module.exports = {
 		/*
     ** You can extend webpack config here
     */
+    extractCSS: { //提取html中的 css到文件
+      allChunks: true,
+      splitChunks: {
+        cacheGroups: {
+          styles: {
+            name: 'styles',
+            test: /\.(css|vue|scss|less)$/,
+            chunks: 'all',
+            enforce: true
+          }
+        }
+      }
+    },
 		extend(config, ctx) {
 			console.log(config);
 		}

pages/credit/_type.vue

@@ -84,7 +84,7 @@
       return {}
     },
     mounted() {
-
+      this.needLogin();
     },
     methods: {
       jumpTo(url) {

pages/credit/pages/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="creditIndex">
-    <credit-common-title/>
+    <credit-common-title :data="topAreaData"/>
     <section class="contentArea">
       <div class="list">
         <div class="cell" v-for="(item, index) in list" v-key="'creditIndexList' + index" @click="jumpTo(item.jumpUrl)">
@@ -30,7 +30,7 @@
 
 <script>
   import CreditCommonTitle from '@/components/credit/header.vue'
-
+  import data from '../../../components/credit/data'
   /**
    * 首页
    */
@@ -52,6 +52,13 @@
         } ]
       }
     },
+    async asyncData() {
+      console.log('data', data)
+      let { topAreaData } = data.index
+      return {
+        topAreaData,
+      }
+    },
     data() {
       return {
         list: [ {
@@ -82,7 +89,7 @@
       }
     },
     mounted() {
-
+      this.needLogin();
     },
     methods: {
       jumpTo(url) {

pages/credit/projectDetail/_type.vue

@@ -92,6 +92,7 @@
       this.pageChangeHandler()
     },
     mounted() {
+      this.needLogin();
     },
     methods: {
       pageChangeHandler(pageIndex) {

pages/other/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>404 NOT FOUND</div>
+</template>
+
+<script>
+export default {
+}
+</script>
+
+<style>
+</style>

pages/other/report/_uid.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="Report">
+    <div class="titleArea">
+      <p>举报用户</p>
+    </div>
+    <div class="bodyArea">
+      <div class="topTips">
+        <p>程序客栈发布违法违规类信息、个人主页简历造假、个人主页信息侵权等违规违法行为，如您发现对方存在违法违规等行为，请反馈给我们</p>
+      </div>
+      <div class="reportBox">
+        <div class="reportUser">
+          <div class="left">
+            <p>举报对象</p>
+          </div>
+          <div class="right">
+            <img :src="beReportUser.icon_url" alt="" class="img">
+            <p class="name">{{beReportUser.nickname || ''}}</p>
+          </div>
+        </div>
+        <div class="reportType">
+          <div class="left">
+            <p>举报类型</p>
+          </div>
+          <div class="right">
+            <div class="cell"
+              v-for="(item, index) in typeList"
+              :key="'typeListCell' + index"
+              @click="type=item"
+            >
+              <div class="check" :class="{ok: type === item}"/>
+              <div class="word">{{item}}</div>
+            </div>
+          </div>
+        </div>
+        <div class="reportDesc">
+          <div class="left">
+            <p>详情描述</p>
+          </div>
+          <div class="right">
+            <el-input
+              type="textarea"
+              :autosize="{ minRows: 5, maxRows: 30 }"
+              placeholder="请输入..."
+              v-model="detail"
+              resize="none"
+              :show-word-limit="true"
+              :maxlength="maxWordLimit"
+              style="width:540px; min-height: 110px;"
+            >
+            </el-input>
+          </div>
+        </div>
+        <div class="reportButton">
+          <div class="left"></div>
+          <div class="right" @click="submitForm">
+            <p>确认提交</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+  let errMsg = {
+    noneUser: '被举报用户不存在',
+    getUserWrong: '获取被举报用户信息出错'
+  }
+  export default {
+    name: 'Report',
+    data() {
+      return {
+        maxWordLimit: 500,
+        typeList: [],
+        type: '',
+        detail: '',
+        beReportUser: {
+          icon_url: '',
+          nickname: ''
+        },
+        beReportUserId: ''
+      }
+    },
+    async created() {
+
+    },
+    async  mounted() {
+      await this.needLogin()
+      this.getTypeList()
+      this.getBeReportUserInfo()
+    },
+    methods: {
+      /** 获取类型 */
+      getTypeList() {
+        this.$axios.get('/api/report/get_report_type').then(res=>{
+          console.log(res, res.data)
+          if (res.data.status === 1) {
+            this.typeList = [...(res && res.data && res.data.data || []) ]
+            this.type = this.typeList[0]
+          }
+        })
+      },
+      getBeReportUserInfo() {
+        const { uid } = this.$route.params
+        if (!uid) {
+          this.$message.error(errMsg.noneUser)
+          return
+        }
+        this.beReportUserId = uid
+        this.$axios.get(`/api/user/getUserInfo?id=${uid}`).then(res=>{
+          let data = res.data
+          if (data.status === 1) {
+            this.beReportUser = data.data.info
+          } else if (data.status){
+            console.log('res.status', data.status)
+            this.$message.closeAll()
+            this.$message.error(data.status.message || errMsg.getUserWrong)
+          }
+        }).catch(e => {
+          this.$message.closeAll()
+          this.$message.error('')
+        })
+      },
+
+      /** 提交 **/
+      submitForm() {
+        const {type, detail, beReportUserId, beReportUser={}} = this
+        if (!this.beReportUser.nickname) {
+          this.$message.warning(errMsg.noneUser)
+          return
+        }
+
+        if (!type) {
+          this.$message.warning('请选择举报类型')
+          return
+        }
+        if (!detail || detail.length < 10) {
+          this.$message.warning('详情描述不得少于10字符')
+          return
+        }
+        if (detail.length > 500) {
+          this.$message.warning('详情描述不得超过500字符')
+          return
+        }
+        let p = {
+          reported_uid: 11 || beReportUserId,
+          type,
+          detail,
+          from:'web端主页'
+        }
+        this.$axios.post('/api/report/create', p).then(res=>{
+          let data = res.data
+          if (data.status === 1) {
+            this.$message.success('提交成功，客栈将在7日内联系处理')
+          } else {
+            this.$message.error('提交失败')
+          }
+        }).catch(e=> {
+          console.log(e)
+          this.$message.error('提交失败')
+        })
+      }
+    },
+
+  }
+</script>
+<style lang="scss" scoped>
+  @import '../../../assets/css/other/report.scss';
+</style>

plugins/common.js

@@ -28,7 +28,9 @@ Vue.mixin({
     async needLogin() {
       Vue.hasMessage = true
       const userInfo = await this.getUserInfo();
-      if (!userInfo.nickname) {
+      
+      console.log('needLogin,', userInfo)
+      if (!userInfo || !userInfo.nickname) {
         this.goLogin();
       }
     },