开发者页面修改

assets/css/developer/index.scss

@@ -117,6 +117,7 @@
   font-size: 0;
   position: relative;
   z-index: 1;
+  margin-top: 20px;
 }
 .developer-order-item {
   width: 333px;
@@ -143,7 +144,7 @@
 .developer-activity-tips{
   position: absolute;
   z-index: 2;
-  left: 349px;
+  left: 0px;
   top: -12px;
 
   width: 118px;

pages/frontend/developer/developData.js

@@ -227,6 +227,8 @@ export default class DealSeoData {
 
     }
 
+    
+
     dealThisMeta() {
         let title = ''
         let descriptionTitle = ''

pages/frontend/developer/index.vue

@@ -6,58 +6,56 @@
     <div class="developer-container" v-if="!mobile">
         <div class="developer-left">
 
+            <!-- 接单流程：start -->
+            <section class="developer-process block" v-if="!isSign">
+                <h3 class="title">接单流程</h3>
+                <div class="developer-process-list">
+                    <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>
+                    </article>
 
-
-          <!-- 接单流程：start -->
-          <section class="developer-process block" v-if="!isSign">
-            <h3 class="title">接单流程</h3>
-            <div class="developer-process-list">
-              <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>
-              </article>
-
-              <article class="developer-process-item" :class="isRealName ? 'cur' : ''">
-                <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>
-                    按国家相关规定，用户需实名，目前{{
+                    <article class="developer-process-item" :class="isRealName ? 'cur' : ''">
+                        <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>
+                                按国家相关规定，用户需实名，目前{{
                     isRealName ? "已实名" : "尚未实名"
                     }}
-                  </p>
-                  <p v-if="!isRealName">
-                    <a :click="this.cnzz('开发者首页','立即实名','')" href="/frontend/name_cert">立即实名</a>
-                  </p>
-                </div>
-              </article>
+                            </p>
+                            <p v-if="!isRealName">
+                                <a :click="this.cnzz('开发者首页','立即实名','')" href="/frontend/name_cert">立即实名</a>
+                            </p>
+                        </div>
+                    </article>
 
-              <article class="developer-process-item" :class="isSign ? 'cur' : ''">
-                <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 v-if="!isSign">尚未签约 <a :click="this.cnzz('开发者首页','立即签约','')" href="/sign/new">立即签约</a></p>
-                  <p v-else>已签约</p>
-                </div>
-              </article>
+                    <article class="developer-process-item" :class="isSign ? 'cur' : ''">
+                        <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 v-if="!isSign">尚未签约 <a :click="this.cnzz('开发者首页','立即签约','')" href="/sign/new">立即签约</a></p>
+                            <p v-else>已签约</p>
+                        </div>
+                    </article>
 
-              <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>
+                    <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>-->
+                    </article>
                 </div>
-                <!--                        <div class="developer-process-tips">内容已通过</div>-->
-              </article>
-            </div>
-          </section>
-          <!-- 接单流程：end -->
+            </section>
+            <!-- 接单流程：end -->
 
             <!-- 新人如何接单：start -->
             <section class="developer-order block">
@@ -66,20 +64,7 @@
                     客栈接单采用智能对接池匹配原则，权重越高优先匹配。当前在“前端”对接池的<span style="color: #308eff;font-weight: bold;">排名{{ userInfo.rand_score || "100+" }}</span>，影响对接池的因素有以下几点：
                 </p>
                 <div class="developer-order-list">
-                    <article class="developer-order-item">
-                        <div class="developer-order-title-area">
-                            <div class="developer-order-title-area-wrap">
-                                <div class="developer-order-icon icon-1"></div>
-                                <h5 class="developer-order-title">完善个人资料</h5>
-                            </div>
-                            <div class="developer-order-link">
-                                <a :click="this.cnzz('开发者首页','立即完善','')" :href="'/wo/'+userinfo.uid">立即完善</a>
-                            </div>
-                        </div>
-                        <p class="developer-order-tips">
-                            账号信息完善度（个人信息+简历+作品）越高，客户信任感更高，也更容易为您精准匹配。
-                        </p>
-                    </article>
+
                     <article class="developer-order-item developer-order-item-activity">
                         <div class="developer-order-title-area">
                             <div class="developer-order-title-area-wrap">
@@ -89,58 +74,73 @@
                                 </h5>
                             </div>
                             <div class="developer-order-link">
-                                <a :click="this.cnzz('开发者首页','立即认证','')"  href="/frontend/skill_cert/profile">立即认证</a>
+                                <a :click="this.cnzz('开发者首页','立即认证','')" 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-title-area-wrap">
-                                <div class="developer-order-icon icon-3"></div>
-                                <h5 class="developer-order-title">Ping一下</h5>
+                                <div class="developer-order-icon icon-4"></div>
+                                <h5 class="developer-order-title">专业认证</h5>
+                            </div>
+                        </div>
+                        <p class="developer-order-tips">
+                            产品经理、项目经理、整包协作开发者、全职自由工作者等
+                        </p>
+                    </article>
+
+                    <article class="developer-order-item">
+                        <div class="developer-order-title-area">
+                            <div class="developer-order-title-area-wrap">
+                                <div class="developer-order-icon icon-5"></div>
+                                <h5 class="developer-order-title">开通开发者会员</h5>
                             </div>
                             <div class="developer-order-link">
-                                <a href="" @click.prevent="ping(1)">Ping一下</a>
+                                <a :click="this.cnzz('开发者首页','会员介绍','')" href="/type/vip/developer">会员介绍</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-title-area-wrap">
-                                <div class="developer-order-icon icon-4"></div>
-                                <h5 class="developer-order-title">客户好评</h5>
+                                <div class="developer-order-icon icon-1"></div>
+                                <h5 class="developer-order-title">完善个人资料<span v-if="userGrade">（{{userGrade}}）</span></h5>
+                            </div>
+                            <div class="developer-order-link">
+                                <a :click="this.cnzz('开发者首页','立即完善','')" :href="'/wo/'+userinfo.uid">立即完善</a>
                             </div>
-                            <!-- <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-title-area-wrap">
-                                <div class="developer-order-icon icon-5"></div>
-                                <h5 class="developer-order-title">开通开发者会员</h5>
+                                <div class="developer-order-icon icon-3"></div>
+                                <h5 class="developer-order-title">Ping一下</h5>
                             </div>
                             <div class="developer-order-link">
-                                <a :click="this.cnzz('开发者首页','会员介绍','')" href="/type/vip/developer">会员介绍</a>
+                                <a href="" @click.prevent="ping(1)">Ping一下</a>
                             </div>
                         </div>
                         <p class="developer-order-tips">
-                            开发者会员出来提高权重，还有更多权益！
+                            每日Ping一下，表达你的接单意愿，将提升你的对接池权重。
                         </p>
                     </article>
-                     <div class="developer-activity-tips">限时100%接单活动</div>
+
+                    <div class="developer-activity-tips">限时100%接单活动</div>
                 </div>
             </section>
             <!-- 新人如何接单：end -->
@@ -240,21 +240,24 @@
         <div class="developer-right">
             <!-- 工作台：start -->
             <section class="developer-workbench block">
-                <div class="developer-workbench-user">
+                <div class="developer-workbench-user" @click='linkToUser' :class="isLogin ? 'developer-workbench-user-logined' : ''">
                     <div class="developer-user-avatar">
                         <img :src="userInfo.icon_url || personalIcon" />
                     </div>
                     <div class="developer-user-info">
-
-
                         <div v-if="isLogin" class="developer-user-name text-line-1">
                             {{ userInfo.nickname }}
                         </div>
                         <div @click="login" v-else class="developer-user-name nologin text-line-1">
-                           登录/注册
+                            登录/注册
+                        </div>
+
+                        <div v-if="isLogin" class="developer-user-level">
+                            <span>uid:{{ userinfo.uid }}</span>
                         </div>
-                        <div class="developer-user-level">
-                            <span>当前等级Lv.{{ userInfo.dynamic_rand || 0 }} </span><span class="arrow_icon"></span>
+                        <div class="developer-user-level" @click.stop="levelIntroduceVisible = true">
+                            <span class="arrow_icon">当前等级Lv.{{ userInfo.dynamic_rand || 0 }}
+                            </span>
                         </div>
                     </div>
                 </div>
@@ -307,7 +310,7 @@
                     <div @click.stop="toggleBanlace" class="developer-reward-show-setting" :class="isShowBablance ? 'show' : 'hide'"></div>
                 </div>
 
-                <div  v-if="isLogin" class="developer-reward-count">
+                <div v-if="isLogin" class="developer-reward-count">
                     {{ isShowBablance ? balanceInfo.historyTotalBalance : "****" }}
                 </div>
                 <div v-else class="developer-reward-count">
@@ -350,6 +353,14 @@
             </div>
         </div>
     </div>
+    <el-dialog title="" custom-class="ma-level-dialog" width="880px" :visible.sync="levelIntroduceVisible">
+        <!-- 
+           level:等级
+           experience：当前经验值
+           experience-diff:距离升级还需多少经验值
+        -->
+        <Level-Introduce :show="levelIntroduceVisible" :level-info="levelInfo"></Level-Introduce>
+    </el-dialog>
 </div>
 </template>
 
@@ -361,11 +372,13 @@ import qs from "qs";
 import DeveloperSeoData from "./developData";
 import Empty from "./empty";
 import personalIcon from "@/assets/img/account/personal.png"
+import LevelIntroduce from "./component/level-introduce.vue";
 
 export default {
     name: "SeoLearnList",
     components: {
-        Empty
+        Empty,
+        LevelIntroduce
     },
     data() {
         return {
@@ -383,7 +396,10 @@ export default {
             isMore: true,
             pageLoading: false,
 
-            personalIcon
+            personalIcon,
+            levelIntroduceVisible: false,
+
+            userGrade:''
         };
     },
     head() {
@@ -452,7 +468,7 @@ export default {
             // return false
         },
         dynamicTranlate() {
-          return ;
+            return;
             let typeList = this.typeList;
             let total = 680;
             let block = parseInt(total / typeList.length);
@@ -499,6 +515,7 @@ export default {
         this.$nextTick(() => {
             this.listenToEnd();
         });
+        this.fetchUserGrade()
     },
     destroy: function () {
         window.onscroll = null;
@@ -512,12 +529,12 @@ export default {
             this.checkLogin(true);
             this.$message("请前往APP查看");
         },
-        goto(url,title="") {
-            this.cnzz("开发者首页",title,"");
+        goto(url, title = "") {
+            this.cnzz("开发者首页", title, "");
             location.href = url;
         },
-        async ping(type="") {
-            this.cnzz("开发者首页","ping"+type,"")
+        async ping(type = "") {
+            this.cnzz("开发者首页", "ping" + type, "")
             let res = await this.$axios.$post("/api/remote/ping");
             if (res.status == 1) {
                 this.$message.success("操作成功");
@@ -602,16 +619,31 @@ export default {
                 this.isExist = false;
             }
         },
-        clickResource(resources){
-            if(resources.resources_status != 1){
+        clickResource(resources) {
+            if (resources.resources_status != 1) {
                 this.$message.info(resources.resources_text)
-            }else{
+            } else {
                 location.href = resources.resources_url
             }
         },
 
-        login(){
+        login() {
             this.goLogin()
+        },
+        linkToUser(){
+            if (this.isLogin) {
+                location.href = '/u/'+this.userinfo.uid
+            }
+        },
+
+        async fetchUserGrade(){
+            let res = await this.$axios.$post("/api/userGrade/userGrade", {
+                uid:this.userinfo.uid
+            });
+            if (Number(res.status) === 1) {
+                this.userGrade = res.data.perfect
+            }
+
         }
     }
 };

pages/frontend/personal/index.vue

@@ -194,9 +194,9 @@ export default {
     },
     head() {
         const {
-            title = "",
-                keyword = "",
-                description = "",
+            title = "程序员客栈-领先的程序员自由远程工作平台",
+                keyword = "软件开发,网站系统,APP小程序,UI设计,web前端,原型产品经理,程序员兼职,程序员招聘",
+                description = "程序员客栈是领先的程序员自由远程工作平台，未来互联网企业用人方式。提供优秀程序员为您进行网站建设制作、测试运维服务、人工智能AI、大数据区块链、软件开发等优质服务。",
                 h1 = "",
                 canonical = "",
                 metaLocation

pages/frontend/personal/personalData.js

@@ -207,5 +207,66 @@ export default class PersonalData {
         return isFollowing
     }
 
+    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
+    }
 
 }