proginn-frontend/pages/frontend/developer/index.vue

<template>
<div :class="mobile ? 'mobileMain' : ''" :style="{
      marginTop: mainMarginTop,
      marginBottom: mobile ? '0px' : '30px !important'
    }">
    <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>

              <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 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 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>
                </div>
                <!--                        <div class="developer-process-tips">内容已通过</div>-->
              </article>
            </div>
          </section>
          <!-- 接单流程：end -->

            <!-- 新人如何接单：start -->
            <section class="developer-order block">
                <h3 class="title">新人如何接单</h3>
                <p class="tips">
                    客栈接单采用智能对接池匹配原则，权重越高优先匹配。当前在“前端”对接池的<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 :href="'/wo/'+userinfo.uid">立即完善</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-2"></div>
                                <h5 class="developer-order-title">技术等级认证</h5>
                            </div>
                            <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-title-area-wrap">
                                <div class="developer-order-icon icon-3"></div>
                                <h5 class="developer-order-title">Ping一下</h5>
                            </div>
                            <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-title-area-wrap">
                                <div class="developer-order-icon icon-4"></div>
                                <h5 class="developer-order-title">客户好评</h5>
                            </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>
                            <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 block">
                <div class="developer-tab-title-list">
                    <!-- cur -->
                    <div v-for="typeItem in typeList" :key="typeItem.typeId" @click="reset(typeItem.typeId)" :data-typeid="typeItem.typeId" :class="tid == typeItem.typeId ? 'cur' : ''" class="developer-tab-title-item">
                        {{ typeItem.name }}
                    </div>
                </div>

                <div class="developer-tab-main">
                    <p class="developer-tab-tips">
                        PC端圈子发布功能尚未上线，可下载APP体验哦~
                    </p>

                    <ul class="developer-dynamic-list" v-if="list.length > 0">
                        <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 && 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" /> -->
                                    <el-image style="width:90px;height:90px" fit="cover" :src="d_img.img" :preview-src-list="dynamic.imgList">
                                    </el-image>
                                </div>
                            </div>
                            <div class="dynamic-link-area dynamic-margin" @click.capture.stop="clickResource(dynamic.resources)" v-if="dynamic.resources.resources_exist == 1">
                                <div class="dynamic-link-img-area">
                                    <img :src="dynamic.resources.resources_img" />
                                </div>
                                <div class="dynamic-link-content text-line-1">
                                    <span :href="dynamic.resources.resources_url">{{dynamic.resources.resources_title}}</span>
                                </div>
                            </div>

                            <div class="dynamic-control">
                                <div class="dynamic-control-item" @click="gotoAppTips"><span class="dynamic-icon icon-share"></span>分享</div>
                                <div class="dynamic-control-item" @click="gotoAppTips"><span class="dynamic-icon icon-comment"></span>评论</div>
                                <div class="dynamic-control-item" @click="gotoAppTips"><span class="dynamic-icon icon-like"></span>赞</div>
                            </div>
                        </li>
                    </ul>

                    <div class="dynamic-empty" v-else>
                        <Empty></Empty>
                        <p>暂无动态</p>
                    </div>
                </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 || 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 class="developer-user-level">
                            <span>当前等级Lv.{{ userInfo.dynamic_rand || 0 }} </span><span class="arrow_icon"></span>
                        </div>
                    </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 || 0 }}
                        </div>
                        <div class="developer-work-tips">待办</div>
                    </div>

                    <div class="developer-work-item" @click="gotoAppTips">
                        <div class="developer-work-count">
                            {{ workPlatInfo.recruitDeveloperCount || 0 }}
                        </div>
                        <div class="developer-work-tips">沟通</div>
                    </div>
                    <div class="developer-work-item" @click="goto('/wo/work_hire')">
                        <div class="developer-work-count">
                            {{ workPlatInfo.developerWorkNumber || 0 }}
                        </div>
                        <div class="developer-work-tips">工作</div>
                    </div>
                    <div class="developer-work-item" @click="goto('/wo/work_platform')">
                        <div class="developer-work-count">
                            {{ workPlatInfo.developerProjectNumber || 0 }}
                        </div>
                        <div class="developer-work-tips">整包</div>
                    </div>
                </div>
                <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 @click.stop="goto('/wo/account')" class="developer-reward block" v-if="init">
                <div class="developer-reward-title">
                    <p>总收入 (元) <span class="arrow_icon"></span></p>
                    <div @click.stop="toggleBanlace" class="developer-reward-show-setting" :class="isShowBablance ? 'show' : 'hide'"></div>
                </div>

                <div  v-if="isLogin" class="developer-reward-count">
                    {{ isShowBablance ? balanceInfo.historyTotalBalance : "****" }}
                </div>
                <div v-else class="developer-reward-count">
                    {{ isShowBablance ? 0 : "****" }}
                </div>
                <div class="developer-reward-detail">
                    <div class="developer-reward-item">
                        <span>账户余额：</span>
                        <span v-if="isLogin" class="num">{{isShowBablance ? balanceInfo.totalBalance : "****"}}</span>
                        <span v-else class="num">{{isShowBablance ? 0 : "****"}}</span>
                    </div>
                    <div class="developer-reward-item">
                        <span>薪资余额：</span>
                        <span v-if="isLogin" class="num">{{isShowBablance ? balanceInfo.gongMallBalance : "****"}}</span>
                        <span v-else class="num">{{isShowBablance ? 0 : "****"}}</span>
                    </div>
                    <div class="developer-reward-item">
                        <span>冻结余额：</span>

                        <span v-if="isLogin" class="num">{{isShowBablance ? balanceInfo.frozenBalance : "****"}}</span>
                        <span v-else class="num">{{isShowBablance ? 0 : "****"}}</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>
</template>

<script>
import {
    mapState
} from "vuex";
import qs from "qs";
import DeveloperSeoData from "./developData";
import Empty from "./empty";
import personalIcon from "@/assets/img/account/personal.png"

export default {
    name: "SeoLearnList",
    components: {
        Empty
    },
    data() {
        return {
            baseUrl: "",
            mobile: false,
            // firstLoad: true,
            isWeixinApp: true,
            isShowBablance: 1,
            init: false,

            tid: "",
            page: 1,
            pageSize: 10,
            list: [],
            isMore: true,
            pageLoading: false,

            personalIcon
        };
    },
    head() {
        const {
            title = "程序员客栈-领先的程序员自由远程工作平台",
                keyword = "软件开发,网站系统,APP小程序,UI设计,web前端,原型产品经理,程序员兼职,程序员招聘",
                description = "程序员客栈是领先的程序员自由远程工作平台，未来互联网企业用人方式。提供优秀程序员为您进行网站建设制作、测试运维服务、人工智能AI、大数据区块链、软件开发等优质服务。",
                h1 = "",
                canonical = "",
                metaLocation
        } = this.head || {};
        let obj = {
            title: title,
            meta: [{
                    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;
    },
    computed: {
        ...mapState(["deviceType"]),
        showWxHeader() {
            return (
                !this.deviceType.app &&
                !this.isWeixinApp &&
                (this.deviceType.android || this.deviceType.ios)
            );
        },
        mainMarginTop() {
            if (this.mobile && this.showWxHeader) {
                return "64px !important";
            } else if (this.mobile) {
                return "0px !important";
            } else {
                return "20px !important";
            }
        },
        // 是否实名
        isRealName() {
            return this.userInfo["realname_verify_status"] == 2 ? true : false;
            // return false
        },
        // 是否签约
        isSign() {
            return this.userInfo["realname_re"] == 2 ? true : false;
            // return false
        },
        dynamicTranlate() {
          return ;
            let typeList = this.typeList;
            let total = 680;
            let block = parseInt(total / typeList.length);
            let half = parseInt(block / 2);
            let line = 24 / 2;
            let curIndex = this.typeList.findIndex(item => {
                return item.typeId == this.tid;
            });
            curIndex = curIndex ? curIndex : 0;

            let result = curIndex * block + half - line;
            return result;
        },
        isLogin() {
            return this.$store.getters.isLogin
        }
    },
    async asyncData({
        ...params
    }) {
        let dealDataObj = new DeveloperSeoData(params);
        let ans = await dealDataObj.dealData();

        return {
            ...ans
        };
    },
    created() {},
    mounted() {
        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.checkLogin(true);
            this.$message("请前往APP完成实名");
        },
        gotoAppTips() {
            this.checkLogin(true);
            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) {
                    that.fetchDynamicData();
                }
            };
        },
        reset(type_id) {
            if (this.pageLoading) return;
            this.page = 0;
            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 type_id = this.tid
            let res = await this.$axios.$post("/uapi/dynamic/get_dynamic_detail", {
                type_id: type_id,
                page: page,
                pagesize: this.pageSize
            });

            setTimeout(() => {
                this.pageLoading = false;
            }, 100);

            if (Number(res.status) === 1) {

                // if (type_id != this.tid) {
                //     return
                // }
                let info = res.data.list;
                info = info.map((item) => {
                    let imgList = item.img
                    imgList = imgList.map(item => {
                        return item.img
                    })
                    return {
                        ...item,
                        imgList
                    }
                })

                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;
            }
        },
        clickResource(resources){
            if(resources.resources_status != 1){
                this.$message.info(resources.resources_text)
            }else{
                location.href = resources.resources_url
            }
        },

        login(){
            this.goLogin()
        }
    }
};
</script>

<style lang="scss">
@import "@/assets/css/developer/index.scss";
</style>