Merge branch 'dev-majunjie' into dev

assets/css/developer/index.scss

@@ -48,6 +48,16 @@
   &:nth-last-child(1) {
     flex: 0;
   }
+
+  &.cur {
+    .developer-process-step {
+      background-color: #288bff;
+      color: #fff;
+    }
+    .developer-process-step-icon {
+      background-image: url("~@/assets/img/developer/process1.png") !important;
+    }
+  }
 }
 
 .developer-process-step {
@@ -61,15 +71,22 @@
   font-size: 16px;
   font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
-
-  &.normal {
-    border: 1px solid #ced3d9;
-    background: #ffffff;
-    color: #0b121a;
-  }
-  &.cur {
-    background-color: #288bff;
-    color: #fff;
+  border: 1px solid #ced3d9;
+  background: #ffffff;
+  color: #0b121a;
+  &.line {
+    position: relative;
+    &::after {
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translate(100%, -50%);
+      content: "";
+      width: 43px;
+      height: 1px;
+      //   border-top: 1px solid #ced3d9;
+      background-color: #ced3d9;
+    }
   }
 }
 .developer-process-tips {
@@ -100,10 +117,10 @@
 
 // 新人接单
 
-.develop-order-list {
+.developer-order-list {
   font-size: 0;
 }
-.develop-order-item {
+.developer-order-item {
   width: 333px;
   height: 116px;
   background: #ffffff;
@@ -120,15 +137,15 @@
   }
 }
 
-.develop-order-list {
+.developer-order-list {
   overflow: hidden;
 }
 
-.develop-order-title-area {
+.developer-order-title-area {
   display: flex;
   align-items: center;
 }
-.develop-order-tips {
+.developer-order-tips {
   margin-top: 8px;
   font-size: 14px;
   font-family: PingFangSC-Regular, PingFang SC;
@@ -136,7 +153,7 @@
   color: #4b5d73;
   line-height: 20px;
 }
-.develop-order-icon {
+.developer-order-icon {
   width: 32px;
   height: 32px;
   margin-right: 10px;
@@ -146,12 +163,12 @@
 }
 
 @for $i from 1 through 5 {
-  .develop-order-icon.icon-#{$i} {
+  .developer-order-icon.icon-#{$i} {
     background-image: url("~@/assets/img/developer/order-#{$i}.png");
   }
 }
 
-.develop-order-title {
+.developer-order-title {
   font-size: 16px;
   font-family: PingFangSC-Medium, PingFang SC;
   font-weight: 500;
@@ -160,10 +177,539 @@
   margin-right: 16px;
 }
 
-.develop-order-link{
+.developer-order-link {
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #308eff;
+  line-height: 20px;
+}
+
+// 热门课程
+.developer-hot {
+  overflow: hidden;
+}
+.developer-hot-class {
+  float: left;
+  width: 288px;
+  // height:100px;
+  // background-color: #f00
+}
+.developer-hot-resource {
+  float: left;
+  width: 288px;
+  margin-left: 71px;
+  // background-color: #f00;
+  // height:100px;
+}
+
+.developer-hot-list {
+  margin-top: 20px;
+  height: 160px;
+}
+.developer-hot-item {
+  margin-bottom: 12px;
+
+  font-size: 16px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #0b121a;
+  line-height: 22px;
+  padding-left: 21px;
+  position: relative;
+  a {
+    color: #0b121a;
+  }
+  &:nth-last-child(1) {
+    margin-bottom: 0;
+  }
+  &:nth-child(1) {
+    .index {
+      background: #ff4e33;
+      border-radius: 2px;
+      color: #fff;
+      font-size: 12px;
+    }
+  }
+  &:nth-child(2) {
+    .index {
+      background: #ff4e33;
+      border-radius: 2px;
+      color: #fff;
+      font-size: 12px;
+    }
+  }
+  &:nth-child(3) {
+    .index {
+      background: #ff4e33;
+      border-radius: 2px;
+      color: #fff;
+      font-size: 12px;
+    }
+  }
+  .index {
+    position: absolute;
+    line-height: 1;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 16px;
+    height: 16px;
+    font-size: 16px;
+    font-weight: 600;
+    color: #4a5d74;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.developer-workbench-user {
+  display: flex;
+}
+.developer-user-avatar {
+  width: 48px;
+  height: 48px;
+  margin-right: 6px;
+  img {
+    width: 48px;
+    height: 48px;
+    border-radius: 100%;
+    overflow: hidden;
+  }
+}
+.developer-user-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+.developer-user-name {
+  font-size: 16px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #0b121a;
+  line-height: 22px;
+}
+.developer-user-level {
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #828c99;
+  line-height: 20px;
+}
+
+.user-title {
+  margin-top: 30px;
+  font-size: 16px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #0b121a;
+  line-height: 22px;
+}
+
+.developer-work-list {
+  margin-top: 16px;
+  display: flex;
+  justify-content: space-between;
+}
+.developer-work-item {
+  width: 40px;
+  text-align: center;
+  cursor: pointer;
+}
+.developer-work-count {
+  font-size: 16px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #0b121a;
+  line-height: 22px;
+}
+
+.developer-work-tips {
+  font-size: 13px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #828c99;
+  line-height: 18px;
+}
+
+.developer-setting-area {
+  margin-top: 36px;
+  display: flex;
+  position: relative;
+}
+
+.developer-setting-item {
+  flex: 1;
+  width: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+.developer-setting-icon {
+  width: 22px;
+  height: 22px;
+  margin-right: 5px;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  background-size: 100% auto;
+}
+.setting-icon {
+  background-image: url("~@/assets/img/developer/setting.png");
+}
+.ping-icon {
+  background-image: url("~@/assets/img/developer/ping.png");
+}
+
+.developer-setting-tips {
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #0b111a;
+  line-height: 21px;
+}
+
+.developer-setting-line {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 1px;
+  height: 12px;
+  background: #aeb6ca;
+  // border: 1px solid #AEB6CA;
+}
+
+.developer-reward-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  p {
     font-size: 14px;
-font-family: PingFangSC-Regular, PingFang SC;
-font-weight: 400;
-color: #308EFF;
-line-height: 20px;
-}
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #828c99;
+    line-height: 20px;
+  }
+}
+.developer-reward-show-setting {
+  width: 20px;
+  height: 20px;
+  // border: 1px solid #aeb6ca;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  background-size: 100% auto;
+  cursor: pointer;
+  &.show {
+    background-image: url("~@/assets/img/developer/show.png");
+  }
+  &.hide {
+    background-image: url("~@/assets/img/developer/hide.png");
+  }
+}
+.developer-reward-count {
+  margin-top: 8px;
+  font-size: 20px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #0b121a;
+  line-height: 28px;
+}
+
+.developer-reward-detail {
+  margin-top: 22px;
+  overflow: hidden;
+}
+.developer-reward-item {
+  width: 50%;
+  float: left;
+  font-size: 13px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #828c99;
+  line-height: 18px;
+  margin-bottom: 10px;
+  span {
+    margin-left: 6px;
+    font-size: 16px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #0b121a;
+    line-height: 22px;
+  }
+}
+
+.developer-skill.block {
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.developer-skill-item {
+  width: 175px;
+  height: 55px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  font-size: 16px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #0b121a;
+  cursor: pointer;
+
+  &:nth-child(2n + 1) {
+    border-right: 1px solid #ebeced;
+  }
+  &:nth-last-child(n + 3) {
+    border-bottom: 1px solid #ebeced;
+  }
+
+  &:hover {
+    color: #288bff;
+  }
+}
+
+.developer-skill-icon {
+  width: 18px;
+  height: 18px;
+  margin-right: 6px;
+}
+
+@for $i from 1 through 4 {
+  .developer-skill-item {
+    .icon#{$i} {
+      background-image: url("~@/assets/img/developer/sk_icno_#{$i}.png");
+    }
+    &:hover {
+      .icon#{$i} {
+        background-image: url("~@/assets/img/developer/sk_icno_#{$i}_hover.png");
+      }
+    }
+  }
+}
+
+.developer-tab {
+  background-color: #fff;
+  border-radius: 8px;
+}
+
+.developer-tab-title-list {
+  display: flex;
+  position: relative;
+  border-bottom: 1px solid #ebeced;
+}
+
+.developer-tab-title-item {
+  width: 122px;
+  height: 62px;
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font-size: 16px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #4b5d73;
+
+  cursor: pointer;
+
+  &.cur {
+    font-size: 16px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #0b121a;
+  }
+}
+
+.developer-tab-title-line {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 24px;
+  height: 4px;
+  background: #308eff;
+  border-radius: 3px;
+}
+
+.developer-tab-main {
+  padding: 24px 0;
+}
+.developer-tab-tips {
+  margin-left: 24px;
+  padding-left: 24px;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #828c99;
+  background: url("~@/assets/img/developer/notice.png") no-repeat left 50%;
+}
+
+.developer-dynamic-list {
+  overflow: hidden;
+  margin-top: 24px;
+  padding-left: 24px;
+  padding-right: 24px;
+}
+
+.developer-dynamic-item {
+  margin-bottom: 41px;
+  border-bottom: 1px solid #ebeced;
+  &:nth-last-child(1){
+    border-bottom: none;
+  }
+}
+
+.dynamic-user {
+  display: flex;
+  position: relative;
+  // left: -50px;
+}
+
+.dynamic-user-avatar {
+  width: 40px;
+  height: 40px;
+  font-size: 0;
+  margin-right: 10px;
+  img {
+    width: 40px;
+    height: 40px;
+    overflow: hidden;
+    border-radius: 100%;
+  }
+}
+
+.dynamic-user-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.dynamic-user-nickname {
+  font-size: 14px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #0b121a;
+  line-height: 20px;
+  vertical-align: baseline;
+}
+
+.dynamic-level {
+  display: inline-block;
+  margin-left: 8px;
+  // width: 26px;
+  padding:0 6px;
+  height: 14px;
+  background: #4b5d73;
+  border-radius: 9px;
+  text-align: center;
+  line-height: 16px;
+  font-size: 10px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #ffffff;
+}
+
+.dynamic-job {
+  font-size: 12px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #828c99;
+  line-height: 17px;
+  margin-top: 3px;
+}
+
+.dynamic-margin {
+  margin-left: 50px;
+  margin-right: 24px;
+}
+.dynamic-title {
+  margin-top: 12px;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #0b111a;
+  line-height: 21px;
+}
+
+.dynamic-type-list {
+  margin-top: 10px;
+}
+
+.dynamic-type-item {
+  display: inline-block;
+  padding: 0 10px;
+  height: 23px;
+  background: #ebf4ff;
+  border-radius: 12px;
+  line-height: 23px;
+
+  font-size: 12px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #288bff;
+}
+
+.dynamic-img-area {
+  margin-top: 16px;
+  overflow: hidden;
+}
+
+.dynamic-img-item {
+  float: left;
+  margin-right: 10px;
+  width: 90px;
+  height: 90px;
+  margin-bottom: 10px;
+
+}
+
+.dynamic-link-area {
+  display: flex;
+  height: 50px;
+  background: #f7f8fa;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.dynamic-link-img-area {
+  width: 34px;
+  height: 34px;
+  margin-left: 8px;
+  margin-right: 8px;
+}
+
+.dynamic-link-content {
+  a {
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #0b111a;
+    line-height: 21px;
+  }
+}
+
+.dynamic-control {
+  margin-top: 16px;
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+}
+
+.dynamic-control-item {
+  width: 30%;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #333333;
+  line-height: 20px;
+}

pages/frontend/developer/developData.js

@@ -0,0 +1,252 @@
+export default class DealSeoData {
+    constructor({ $axios, req, app, redirect, error }) {
+        this.$axios = $axios
+        this.req = req
+        this.app = app
+        this.redirect = redirect
+        this.error = error
+        this.from = ''
+        this.isExist = true
+
+        this.pagesize = 1
+    }
+
+    async dealData() {
+        let {
+            name,
+            path,
+            params,
+            fullPath,
+            query
+        } = this.app.context.route
+
+
+        // 重定向
+        // if (path.indexOf('/frontend/consult/user') > -1) {
+        //     this.redirect(301, '/c/' + uid)
+        // }
+
+        let [
+            userInfo,
+            balanceInfo,
+            workPlatInfo,
+            typeList,
+            hotInfo
+        ] = await Promise.all([
+            this._getUserInfo(),
+            this._getUserBalance(),
+            this._getWorkPlatInfo(),
+            this._getTypeList(),
+            this._getHotData()
+        ])
+
+        let firstType = typeList[0]
+        let dynamicList = await this._getDynamicDetail(firstType.typeId)
+
+        let isMore = dynamicList.length < this.pagesize ? false : true
+        return {
+            isExist: this.isExist,
+            mobile: this.app.$deviceType.isMobile(),
+            // head: this.dealThisMeta(),
+
+            userInfo,
+            balanceInfo,
+            workPlatInfo,
+            typeList,
+            hotInfo,
+            dynamicList,
+            firstType,
+            isMore
+        }
+    }
+
+    // 获取用户信息
+    async _getUserInfo() {
+        // let res = await this.$axios.$post('/uapi/user/info')
+
+        let res = await this.$axios.$post('/api/user/getInfo')
+
+        let userInfo = {}
+        if (Number(res.status) === 1) {
+            // let { info, login } = res.data
+            let info = {...res.data}
+            let login = {...res.data}
+
+            userInfo['realname_re'] = info.realname_re;
+            userInfo['realname_verify_status'] = info.realname_verify_status;
+            userInfo['dynamic_rand'] = info.dynamic_rand
+            // userInfo['is_open_mall'] = info.is_open_mall
+            // userInfo['is_open_kill'] = info.is_open_kill
+            // userInfo['is_open_consult'] = info.is_open_consult
+            // userInfo['is_open_kc'] = info.is_open_kc
+
+            userInfo['nickname'] = login.nickname
+            userInfo['icon_url'] = login.icon_url
+            userInfo['freework_level'] = login.freework_level
+            
+        } else if (Number(res.status) === 40001) {
+            this.isExist = false
+        }
+        return userInfo
+    }
+
+    // 获取账户余额
+    async _getUserBalance() {
+        let res = await this.$axios.$post('/api/account/getBalance')
+
+        let balanceInfo = {}
+
+        if (Number(res.status) === 1) {
+            let info = res.data
+            //账户余额	
+            balanceInfo['totalBalance'] = info['totalBalance']
+            //总收入		
+            balanceInfo['historyTotalBalance'] = info['historyTotalBalance']
+            //冻结余额		
+            balanceInfo['frozenBalance'] = info['frozenBalance']
+            //薪资余额			
+            balanceInfo['gongMallBalance'] = info['gongMallBalance']
+
+        } else if (Number(res.status) === 40001) {
+            this.isExist = false
+        }
+        return balanceInfo
+    }
+    // 获取工作台统计数据
+    async _getWorkPlatInfo() {
+        let res = await this.$axios.$post('/api/user/getWorkPlatformCount')
+
+        let workPlatInfo = {}
+
+        if (Number(res.status) === 1) {
+            let info = res.data
+            // 待办
+            workPlatInfo['pendingNumber'] = info['pendingNumber']
+            // 工作
+            workPlatInfo['developerWorkNumber'] = info['developerWorkNumber']
+            // 整包
+            workPlatInfo['developerProjectNumber'] = info['developerProjectNumber']
+            // 沟通
+            workPlatInfo['hireDeveloperProjectNumber'] = info['hireDeveloperProjectNumber']
+
+        } else if (Number(res.status) === 40001) {
+            this.isExist = false
+        }
+        return workPlatInfo
+    }
+
+
+    // 动态列表
+    async _getDynamicDetail(type_id) {
+        let res = await this.$axios.$post('/uapi/dynamic/get_dynamic_detail', {
+            type_id,
+            page: 1,
+            pagesize: this.pagesize
+        })
+
+        let dynamicList = []
+
+        if (Number(res.status) === 1) {
+            let info = res.data.list
+
+            dynamicList = [...info]
+        } else if (Number(res.status) === 40001) {
+            this.isExist = false
+        }
+        return dynamicList
+    }
+
+    // 圈子分类
+    async _getTypeList() {
+        let res = await this.$axios.$post('/uapi/dynamic/get_type_list')
+        let typeList = []
+        if (Number(res.status) === 1) {
+            let info = res.data
+
+            typeList = [...info]
+        } else if (Number(res.status) === 40001) {
+            this.isExist = false
+        }
+        return typeList
+    }
+
+    // 热门资源
+    async _getHotData(){
+        let res = await this.$axios.$get('/sapi/index/index')
+        let hotInfo = {
+            'works':[],
+            'learn':[]
+        }
+        if (Number(res.status) === 1) {
+            let {works,learn} = res.data
+
+            hotInfo['works'] = works.splice(0,5)
+            hotInfo['learn'] = learn.splice(0,5)
+        } else if (Number(res.status) === 40001) {
+            this.isExist = false
+        }
+        return hotInfo
+    }
+
+    dealThisMeta() {
+        let title = ''
+        let descriptionTitle = ''
+        let description = ''
+        let canonical = ''
+
+        if (!this.isExist) {
+            // 页面不存在时
+            return {
+                title: "页面不存在-程序员客栈",
+                keyword: "",
+                description: "",
+                h1: "",
+                canonical: "",
+                metaLocation: ""
+            }
+        }
+        const nickname = this.consultDetail.user.nickname
+
+        this.consultDetail.sale_list.forEach((item, index) => {
+            if (index === 0) {
+                title = item.title.trim()
+                description = item.content.trim()
+            }
+            // if (index !== this.consultDetail.sale_list.length - 1) {
+            //     description += `${item.title}、`
+            // } else {
+            //     description += item.title
+            // }
+        })
+
+        if (description.length > 15) {
+            description = description.substring(0, 15)
+        }
+        if (title.length > 15) {
+            descriptionTitle = title.substring(0, 15)
+        } else {
+            descriptionTitle = title
+        }
+
+        if (this.req) {
+            const { headers: { host }, url } = this.req
+
+            //拼接canonical
+            if (host.indexOf('local') !== -1) {
+                canonical = 'http://' + host + url
+            } else {
+                canonical = 'https://' + host + url
+            }
+        }
+
+        let head = {
+            title: `${title}-程序员客栈咨询服务`,
+            keyword: `${this.consultDetail.user.company},${this.consultDetail.user.direction_name},${title}`,
+            description: `${nickname}可以为您提供：${descriptionTitle}，程序员客栈邀请到国内外互联网名企资深工作者，为您提供1对1技术咨询服务。`,
+            h1: "",
+            canonical: canonical,
+            metaLocation: ""
+        }
+        return head
+    }
+}

pages/frontend/developer/index.vue

@@ -1,103 +1,320 @@
 <template>
-<div :class="mobile ? 'mobileMain' : ''" :style="{marginTop: mainMarginTop, marginBottom: mobile ? '0px' : '30px !important'}">
-
+<div :class="mobile ? 'mobileMain' : ''" :style="{
+      marginTop: mainMarginTop,
+      marginBottom: mobile ? '0px' : '30px !important'
+    }">
     <div class="developer-container" v-if="!mobile">
         <div class="developer-left">
             <!-- 接单流程：start -->
-            <div class="developer-process block">
+            <section class="developer-process block">
                 <h3 class="title">接单流程</h3>
                 <div class="developer-process-list">
-                    <div class="developer-process-item">
-                        <div class="developer-process-step cur">
+                    <article class="developer-process-item cur">
+                        <div class="developer-process-step line">
                             <div class="developer-process-step-icon icon-1"></div>
                             <div class="developer-process-step-content">注册</div>
                         </div>
                         <div class="developer-process-tips">成为客栈注册用户</div>
-                    </div>
+                    </article>
 
-                    <div class="developer-process-item">
-                        <div class="developer-process-step normal">
-                            <div class="developer-process-step-icon icon-2"></div>
+                    <article class="developer-process-item" :class="isRealName ? '' : ''">
+                        <div class="developer-process-step normal line">
+                            <div class="developer-process-step-icon icon-2" :class="isRealName ? 'icon-1' : 'icon-2'"></div>
                             <div class="developer-process-step-content">实名认证</div>
                         </div>
                         <div class="developer-process-tips">
-                            <p>按国家相关规定，用户需实名，目前尚未实名</p>
-                            <p><a href="">立即使命</a></p>
+                            <p>
+                                按国家相关规定，用户需实名，目前{{
+                    isRealName ? "已实名" : "尚未实名"
+                  }}
+                            </p>
+                            <p v-if="!isRealName">
+                                <a href="" @click.prevent="gotoApp">立即实名</a>
+                            </p>
                         </div>
-                    </div>
+                    </article>
 
-                    <div class="developer-process-item">
-                        <div class="developer-process-step normal">
+                    <article class="developer-process-item" :class="isSign ? '' : ''">
+                        <div class="developer-process-step normal line">
                             <div class="developer-process-step-icon icon-3"></div>
                             <div class="developer-process-step-content">签约开发者</div>
                         </div>
                         <div class="developer-process-tips">
-                            <p>尚未签约 <a href="">立即签约</a></p>
+                            <p v-if="!isSign">尚未签约 <a href="/sign/new">立即签约</a></p>
+                            <p v-else>已签约</p>
                         </div>
-                    </div>
+                    </article>
 
-                    <div class="developer-process-item">
+                    <article class="developer-process-item" :class="isSign ? '' : ''">
                         <div class="developer-process-step normal">
                             <div class="developer-process-step-icon icon-4"></div>
                             <div class="developer-process-step-content">开始接单</div>
                         </div>
                         <div class="developer-process-tips">内容已通过</div>
-                    </div>
+                    </article>
                 </div>
-            </div>
+            </section>
             <!-- 接单流程：end -->
 
             <!-- 新人如何接单：start -->
-            <div class="developer-order block">
+            <section class="developer-order block">
                 <h3 class="title">新人如何接单</h3>
-                <p class="tips">客栈接单采用智能对接池匹配原则，权重越高优先匹配。当前在“前端”对接池的排名100，影响对接池的因素有以下几点：</p>
-                <div class="develop-order-list">
-                    <div class="develop-order-item">
-                        <div class="develop-order-title-area">
-                            <div class="develop-order-icon icon-1"></div>
-                            <h5 class="develop-order-title">完善个人资料</h5>
-                            <div class="develop-order-link"><a href="">立即完善</a></div>
-                        </div>
-                        <p class="develop-order-tips">账号信息完善度（个人信息+简历+作品）越高，客户信任感更高，也更容易为您精准匹配。</p>
+                <p class="tips">
+                    客栈接单采用智能对接池匹配原则，权重越高优先匹配。当前在“前端”对接池的排名100，影响对接池的因素有以下几点：
+                </p>
+                <div class="developer-order-list">
+                    <article class="developer-order-item">
+                        <div class="developer-order-title-area">
+                            <div class="developer-order-icon icon-1"></div>
+                            <h5 class="developer-order-title">完善个人资料</h5>
+                            <div class="developer-order-link">
+                                <a href="/setting/work">立即完善</a>
+                            </div>
+                        </div>
+                        <p class="developer-order-tips">
+                            账号信息完善度（个人信息+简历+作品）越高，客户信任感更高，也更容易为您精准匹配。
+                        </p>
+                    </article>
+                    <article class="developer-order-item">
+                        <div class="developer-order-title-area">
+                            <div class="developer-order-icon icon-2"></div>
+                            <h5 class="developer-order-title">技术等级认证</h5>
+                            <div class="developer-order-link">
+                                <a href="/frontend/skill_cert/profile">立即认证</a>
+                            </div>
+                        </div>
+                        <p class="developer-order-tips">
+                            我们会优先匹配进行过技术认证的开发者，如果您是自由职业者还可以进行自由工作者认证。
+                        </p>
+                    </article>
+                    <article class="developer-order-item">
+                        <div class="developer-order-title-area">
+                            <div class="developer-order-icon icon-3"></div>
+                            <h5 class="developer-order-title">Ping一下</h5>
+                            <div class="developer-order-link">
+                                <a href="" @click.prevent="ping">Ping一下</a>
+                            </div>
+                        </div>
+                        <p class="developer-order-tips">
+                            每日Ping一下，表达你的接单意愿，将提升你的对接池权重。
+                        </p>
+                    </article>
+                    <article class="developer-order-item">
+                        <div class="developer-order-title-area">
+                            <div class="developer-order-icon icon-4"></div>
+                            <h5 class="developer-order-title">客户好评</h5>
+                            <!-- <div class="developer-order-link"><a href="">立即完善</a></div> -->
+                        </div>
+                        <p class="developer-order-tips">
+                            成功接单后，服务质量优秀，之后会多多派单哦！
+                        </p>
+                    </article>
+                    <article class="developer-order-item">
+                        <div class="developer-order-title-area">
+                            <div class="developer-order-icon icon-5"></div>
+                            <h5 class="developer-order-title">开通开发者会员</h5>
+                            <div class="developer-order-link">
+                                <a href="/type/vip/developer">查看会员介绍</a>
+                            </div>
+                        </div>
+                        <p class="developer-order-tips">
+                            开发者会员出来提高权重，还有更多权益！
+                        </p>
+                    </article>
+                </div>
+            </section>
+            <!-- 新人如何接单：end -->
+
+            <!-- 热门课程：start -->
+            <section class="developer-hot block">
+                <article class="developer-hot-class">
+                    <h3 class="title">热门课程</h3>
+                    <ul class="developer-hot-list">
+                        <li v-for="(learnItem, index) in hotInfo['learn']" :key="learnItem.link" class="developer-hot-item text-line-1">
+                            <span class="index">{{ index + 1 }}</span>
+                            <a :href="learnItem.link">{{ learnItem.title }}</a>
+                        </li>
+                    </ul>
+                </article>
+                <article class="developer-hot-resource">
+                    <h3 class="title">热门资源</h3>
+                    <ul class="developer-hot-list">
+                        <li v-for="(workItem, index2) in hotInfo['works']" :key="workItem.link" class="developer-hot-item text-line-1">
+                            <span class="index">{{ index2 + 1 }}</span>
+                            <a :href="workItem.link">{{ workItem.title }}</a>
+                        </li>
+                    </ul>
+                </article>
+            </section>
+            <!-- 热门课程：end -->
+
+            <!-- 推荐tab：start -->
+
+            <section class="developer-tab">
+                <div class="developer-tab-title-list">
+                    <!-- cur -->
+                    <div v-for="typeItem in typeList" :key="typeItem.typeId" :data-typeid="typeItem.typeId" class="developer-tab-title-item ">
+                        {{ typeItem.name }}
+                    </div>
+
+                    <div class="developer-tab-title-line"></div>
+                </div>
+
+                <div class="developer-tab-main">
+                    <p class="developer-tab-tips">
+                        PC端圈子发布功能尚未上线，可下载APP体验哦~
+                    </p>
+
+                    <ul class="developer-dynamic-list">
+                        <li v-for="dynamic in list" :key="dynamic.dynamicId" class="developer-dynamic-item">
+                            <div class="dynamic-user">
+                                <div class="dynamic-user-avatar">
+                                    <img :src="dynamic.user_info.icon_url" />
+                                </div>
+                                <div class="dynamic-user-info">
+                                    <p class="dynamic-user-nickname text-line-1">
+                                        <span>{{ dynamic.user_info.nickname }}</span><span v-if="dynamic.user_info.freework_level > 2" class="dynamic-level">F{{ dynamic.user_info.freework_level }}</span>
+                                    </p>
+                                    <p class="dynamic-job">
+                                        {{ dynamic.user_info.tag[0].name }} ·
+                                        {{ dynamic.user_info.tag[1].name }}
+                                    </p>
+                                </div>
+                            </div>
+                            <div class="dynamic-title dynamic-margin">
+                                {{ dynamic.title }}
+                            </div>
+                            <div class="dynamic-type-list dynamic-margin">
+                                <span class="dynamic-type-item">{{ dynamic.type_text }}</span>
+                            </div>
+                            <div class="dynamic-img-area dynamic-margin" v-if="dynamic.img.length > 0">
+                                <div class="dynamic-img-item" v-for="d_img in dynamic.img" :key="d_img.img">
+                                    <img :src="d_img.img" />
+                                </div>
+                            </div>
+                            <div class="dynamic-link-area dynamic-margin">
+                                <div class="dynamic-link-img-area">
+                                    <img :src="dynamic.resources.resources_img" />
+                                </div>
+                                <div class="dynamic-link-content text-line-1">
+                                    <a :href="dynamic.resources.resources_url">{{
+                      dynamic.resources.resources_title
+                    }}</a>
+                                </div>
+                            </div>
+
+                            <div class="dynamic-control">
+                                <div class="dynamic-control-item">分享</div>
+                                <div class="dynamic-control-item">评论</div>
+                                <div class="dynamic-control-item">赞</div>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </section>
+            <!-- 推荐tab：start -->
+        </div>
+        <div class="developer-right">
+            <!-- 工作台：start -->
+            <section class="developer-workbench block">
+                <div class="developer-workbench-user">
+                    <div class="developer-user-avatar">
+                        <img :src="userInfo.icon_url" />
                     </div>
-                    <div class="develop-order-item">
-                        <div class="develop-order-title-area">
-                            <div class="develop-order-icon icon-2"></div>
-                            <h5 class="develop-order-title">技术等级认证</h5>
-                            <div class="develop-order-link"><a href="">立即认证</a></div>
+                    <div class="developer-user-info">
+                        <div class="developer-user-name text-line-1">
+                            {{ userInfo.nickname }}
+                        </div>
+                        <div class="developer-user-level">
+                            当前等级Lv.{{ userInfo.freework_level }}
                         </div>
-                        <p class="develop-order-tips">我们会优先匹配进行过技术认证的开发者，如果您是自由职业者还可以进行自由工作者认证。</p>
                     </div>
-                    <div class="develop-order-item">
-                        <div class="develop-order-title-area">
-                            <div class="develop-order-icon icon-3"></div>
-                            <h5 class="develop-order-title">Ping一下</h5>
-                            <div class="develop-order-link"><a href="">Ping一下</a></div>
+                </div>
+                <h5 class="user-title">工作台</h5>
+                <div class="developer-work-list">
+                    <div class="developer-work-item" @click="goto('/wo/work_todo')">
+                        <div class="developer-work-count">
+                            {{ workPlatInfo.pendingNumber }}
+                        </div>
+                        <div class="developer-work-tips">待办</div>
+                    </div>
+
+                    <div class="developer-work-item" @click="gotoApp">
+                        <div class="developer-work-count">
+                            {{ workPlatInfo.hireDeveloperProjectNumber }}
                         </div>
-                        <p class="develop-order-tips">每日Ping一下，表达你的接单意愿，将提升你的对接池权重。</p>
+                        <div class="developer-work-tips">沟通</div>
                     </div>
-                    <div class="develop-order-item">
-                        <div class="develop-order-title-area">
-                            <div class="develop-order-icon icon-4"></div>
-                            <h5 class="develop-order-title">客户好评</h5>
-                            <!-- <div class="develop-order-link"><a href="">立即完善</a></div> -->
+                    <div class="developer-work-item" @click="goto('/wo/work_hire')">
+                        <div class="developer-work-count">
+                            {{ workPlatInfo.developerWorkNumber }}
                         </div>
-                        <p class="develop-order-tips">成功接单后，服务质量优秀，之后会多多派单哦！</p>
+                        <div class="developer-work-tips">工作</div>
                     </div>
-                    <div class="develop-order-item">
-                        <div class="develop-order-title-area">
-                            <div class="develop-order-icon icon-5"></div>
-                            <h5 class="develop-order-title">开通开发者会员</h5>
-                            <div class="develop-order-link"><a href="">查看会员介绍</a></div>
+                    <div class="developer-work-item" @click="goto('/wo/work_platform')">
+                        <div class="developer-work-count">
+                            {{ workPlatInfo.developerProjectNumber }}
                         </div>
-                        <p class="develop-order-tips">开发者会员出来提高权重，还有更多权益！</p>
+                        <div class="developer-work-tips">整包</div>
                     </div>
                 </div>
-            </div>
-            <!-- 新人如何接单：end -->
-        </div>
-        <div class="developer-right">
+                <div class="developer-setting-area">
+                    <div class="developer-setting-item" @click="goto('/setting/work')">
+                        <div class="developer-setting-icon setting-icon"></div>
+                        <div class="developer-setting-tips ">接单设置</div>
+                    </div>
+                    <div class="developer-setting-item">
+                        <div class="developer-setting-icon ping-icon"></div>
+                        <div class="developer-setting-tips" @click="ping">Ping</div>
+                    </div>
+                    <div class="developer-setting-line"></div>
+                </div>
+            </section>
+            <!-- 工作台：end -->
+
+            <!-- 收入：start -->
+            <section class="developer-reward block" v-if="init">
+                <div class="developer-reward-title">
+                    <p @click="goto('/wo/bills')">总收入 (元) ></p>
+                    <div @click="toggleBanlace" class="developer-reward-show-setting" :class="isShowBablance ? 'show' : 'hide'"></div>
+                </div>
+                <div class="developer-reward-count">
+                    {{ isShowBablance ? balanceInfo.historyTotalBalance : "****" }}
+                </div>
+                <div class="developer-reward-detail">
+                    <div class="developer-reward-item">
+                        账户余额：<span>{{
+                isShowBablance ? balanceInfo.totalBalance : "****"
+              }}</span>
+                    </div>
+                    <div class="developer-reward-item">
+                        薪资余额：<span>{{
+                isShowBablance ? balanceInfo.gongMallBalance : "****"
+              }}</span>
+                    </div>
+                    <div class="developer-reward-item">
+                        冻结余额：<span>{{
+                isShowBablance ? balanceInfo.frozenBalance : "****"
+              }}</span>
+                    </div>
+                </div>
+            </section>
+            <!-- 收入：end -->
 
+            <div class="developer-skill block">
+                <div class="developer-skill-item" @click="goto('/workbench/skill/index')">
+                    <span class="developer-skill-icon icon1"></span>发布技能
+                </div>
+                <div class="developer-skill-item" @click="goto('/workbench/consult/index')">
+                    <span class="developer-skill-icon icon2"></span>发布咨询
+                </div>
+                <div class="developer-skill-item" @click="goto('/workbench/learn/index')">
+                    <span class="developer-skill-icon icon3"></span>上传课程
+                </div>
+                <div class="developer-skill-item" @click="goto('/otherpage/works/create')">
+                    <span class="developer-skill-icon icon4"></span>上传资源
+                </div>
+            </div>
         </div>
     </div>
 </div>
@@ -106,18 +323,27 @@
 <script>
 import {
     mapState
-} from "vuex"
-import qs from "qs"
-
+} from "vuex";
+import qs from "qs";
+import DeveloperSeoData from "./developData";
 export default {
-    name: 'SeoLearnList',
+    name: "SeoLearnList",
     data() {
         return {
-            baseUrl: '',
+            baseUrl: "",
             mobile: false,
             // firstLoad: true,
             isWeixinApp: true,
-        }
+            isShowBablance: 1,
+            init: false,
+
+            tid: "",
+            page: 1,
+            pageSize: 10,
+            list: [],
+            isMore: true,
+            pageLoading: false
+        };
     },
     head() {
         const {
@@ -127,59 +353,171 @@ export default {
                 h1 = "",
                 canonical = "",
                 metaLocation
-        } = this.head || {}
+        } = this.head || {};
         let obj = {
             title: title,
             meta: [{
-                name: "keywords",
-                content: keyword
-            }, {
-                name: "description",
-                content: description
-            }, {
-                name: "h1",
-                content: h1
-            }],
+                    name: "keywords",
+                    content: keyword
+                },
+                {
+                    name: "description",
+                    content: description
+                },
+                {
+                    name: "h1",
+                    content: h1
+                }
+            ],
             link: [{
                 rel: "canonical",
                 href: canonical
             }]
-        }
+        };
         if (metaLocation) {
             obj.meta.push({
                 name: "location",
                 content: metaLocation
-            })
+            });
         }
-        return obj
+        return obj;
     },
     computed: {
         ...mapState(["deviceType"]),
         showWxHeader() {
-            return !this.deviceType.app && !this.isWeixinApp &&
+            return (
+                !this.deviceType.app &&
+                !this.isWeixinApp &&
                 (this.deviceType.android || this.deviceType.ios)
+            );
         },
         mainMarginTop() {
             if (this.mobile && this.showWxHeader) {
-                return '64px !important'
+                return "64px !important";
             } else if (this.mobile) {
-                return '0px !important'
+                return "0px !important";
             } else {
-                return '20px !important'
+                return "20px !important";
             }
         },
-
+        // 是否实名
+        isRealName() {
+            return this.userInfo["realname_verify_status"] == 2 ? true : false;
+        },
+        // 是否签约
+        isSign() {
+            return this.userInfo["realname_re"] == 2 ? true : false;
+        }
     },
+    async asyncData({
+        ...params
+    }) {
+        let dealDataObj = new DeveloperSeoData(params);
+        let ans = await dealDataObj.dealData();
 
+        return {
+            ...ans
+        };
+    },
+    created() {},
     mounted() {
-        //  console.log(444,)
-        this.baseUrl = this.$store.state.domainConfig.siteUrl
-        this.isWeixinApp = navigator.userAgent.indexOf("miniProgram") > -1
+        let isShowBablance = window.localStorage.getItem("banlanceShow");
+        if (isShowBablance === null || isShowBablance === undefined) {
+            isShowBablance = 1;
+        }
+
+        this.isShowBablance = Number(isShowBablance);
+        this.init = true;
+
+        this.baseUrl = this.$store.state.domainConfig.siteUrl;
+        this.isWeixinApp = navigator.userAgent.indexOf("miniProgram") > -1;
+
+        this.tid = this.firstType.typeId;
+        this.list = [...this.dynamicList];
+
+        this.$nextTick(() => {
+            this.listenToEnd()
+        })
+    },
+    destroy: function () {
+        window.onscroll = null;
     },
     methods: {
+        gotoApp() {
+            this.$message("请前往APP完成实名");
+        },
+        goto(url) {
+            location.href = url;
+        },
+        async ping() {
+            let res = await this.$axios.$post("/api/remote/ping");
+            if (res.status == 1) {
+                this.$message.success("操作成功");
+            }
+        },
+        toggleBanlace() {
+            if (this.isShowBablance) {
+                this.hideBanlance();
+            } else {
+                this.showBanlance();
+            }
+        },
+        hideBanlance() {
+            this.isShowBablance = 0;
+            window.localStorage.setItem("banlanceShow", 0);
+        },
+        showBanlance() {
+            this.isShowBablance = 1;
+            window.localStorage.setItem("banlanceShow", 1);
+        },
+
+        listenToEnd() {
+            let that = this;
+            window.onscroll = function () {
+                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+                var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
+                var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
+
+                if (scrollHeight - scrollTop - windowHeight < 400) {
+                    console.log(1231)
+                    that.fetchDynamicData()
+                }
+
+            }
+        },
+        reset(type_id) {
+            this.page = 1;
+            this.isMore = true;
+            this.tid = type_id;
+            this.list = [];
+            this.pageLoading = false;
+            this.fetchDynamicData();
+        },
+        async fetchDynamicData() {
+            if (this.pageLoading || !this.isMore) return
+            this.pageLoading = true;
+            let page = this.page + 1;
+            let res = await this.$axios.$post("/uapi/dynamic/get_dynamic_detail", {
+                type_id: this.tid,
+                page: page,
+                pagesize: this.pageSize
+            });
+
+            setTimeout(() => {
+                this.pageLoading = false;
+            }, 300)
 
+            if (Number(res.status) === 1) {
+                let info = res.data.list;
+                this.page = page
+                this.list = [...this.list, ...info];
+                this.isMore = info.length < this.pageSize ? false : true;
+            } else if (Number(res.status) === 40001) {
+                this.isExist = false;
+            }
+        }
     }
-}
+};
 </script>
 
 <style lang="scss">