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="!is_freework_level">
                <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="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="is_freework_level ? 'cur' : ''">
                    <div class="developer-process-step normal line">
                      <div class="developer-process-step-icon icon-2" :class="is_freework_level ? 'icon-1' : 'icon-2'"></div>
                      <div class="developer-process-step-content">技术等级认证</div>
                    </div>
                    <div class="developer-process-tips">
                      <p>
                        派单第一优先，认证永久保留！ <a v-if="!is_freework_level" :click="this.cnzz('开发者首页','立即认证','')" href="/frontend/skill_cert/profile">立即认证</a>
                      </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 developer-order-item-activity">
                        <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">
                                    <span>开通开发者会员</span>
                                </h5>
                            </div>
                            <div class="developer-order-link">
                                <a :click="this.cnzz('开发者首页','立即认证','')" href="/type/vip/developer">会员介绍</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-4"></div>
                                <h5 class="developer-order-title">专业认证</h5>
                            </div>
                             <div class="developer-order-link">
                                <a :click="this.cnzz('开发者首页','立即认证','')" href="/credit/professional">立即认证</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-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>
                        <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-1"></div>
                                <h5 class="developer-order-title">添加作品</h5>
                            </div>
                            <div class="developer-order-link">
                                <a :click="this.cnzz('开发者首页','去添加','')" href="/otherpage/works/create">去添加</a>
                            </div>
                        </div>
                        <p class="developer-order-tips">
                            添加更多作品，增加对接池权重
                        </p>
                    </article>

                    <div class="developer-activity-tips">100%派单活动</div>
                </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">
                                <a :href="'https://jishuin.proginn.com/u/'+dynamic.user_info.uid" class="dynamic-user-avatar">
                                    <img :src="dynamic.user_info.icon_url" />
                                </a>
                                <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" @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" @click.stop="levelIntroduceVisible = true">
                            <span class="arrow_icon">当前等级Lv.{{ userInfo.dynamic_rand || 0 }}
                            </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(2)">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('https://jishuin.proginn.com/topics/create')">
                    <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 class="developer-ad block no-padding"> -->
                <Ad-List location="developer"></Ad-List>
            <!-- </div> -->
        </div>
    </div>
    <el-dialog title="" custom-class="ma-level-dialog" width="880px" :visible.sync="levelIntroduceVisible">
        <Level-Introduce :show="levelIntroduceVisible" :level-info="levelInfo"></Level-Introduce>
    </el-dialog>
</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"
import LevelIntroduce from "./component/level-introduce.vue";
import AdList from "@/components/ad.vue";

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

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

            personalIcon,
            levelIntroduceVisible: false,

            userGrade: ''
        };
    },
    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
        },
        // 是否技术认证
        is_freework_level() {
          return this.userInfo["freework_level"] >0 ? 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();
        });
        this.fetchUserGrade()
    },
    destroy: function () {
        window.onscroll = null;
    },
    methods: {
        gotoApp() {
            this.checkLogin(true);
            this.$message("请前往APP完成实名");
        },
        gotoAppTips() {
            this.checkLogin(true);
            this.$message("请前往APP查看");
        },
        goto(url, title = "") {
            this.cnzz("开发者首页", title, "");
            location.href = url;
        },
        async ping(type = "") {
            this.cnzz("开发者首页", "ping" + type, "")
            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()
        },
        linkToUser() {
            if (this.isLogin) {
                location.href = 'https://jishuin.proginn.com/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
            }

        }
    }
};
</script>

<style lang="scss">
@import "@/assets/css/developer/index.scss";
.no-padding{
    padding:0
}
</style>