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="{
                cur: isSign
              }"
            >
              <div class="developer-process-step normal line">
                <div class="developer-process-step-icon icon-2"></div>
                <div class="developer-process-step-content">签约开发者</div>
              </div>
              <div class="developer-process-tips">
                <p v-if="!isSign">
                  尚未签约
                  <a
                    @click="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-3"
                  :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="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="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="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="cnzz('开发者首页', '去添加', '')"
                    href="/otherpage/works/create"
                    >去添加</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
                    @click="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 v-if="dynamic.user_info.is_vip == 1" href="/type/vip/developer" target="view_window" class="dynamic-user-avatar-vip-icon"></a>
                  </a>
                  <div class="dynamic-user-info">
                    <p class="dynamic-user-nickname text-line-1">
                      <span>{{ dynamic.user_info.nickname }}</span
                      ><a
                        href="/frontend/skill_cert/profile"
                        target="view_window"
                        v-if="dynamic.user_info.freework_level > 2"
                        class="dynamic-level"
                        >F{{ dynamic.user_info.freework_level }}</a
                      >
                    </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" v-html="dynamic.title_web">
                </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" />
              <template v-if="isLogin">
                <span
                  class="developer-flag"
                  :class="
                    isDeveloperVip
                      ? 'developer-vip-flag'
                      : 'developer-notvip-flag'
                  "
                ></span>
              </template>
            </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 class="developer-use-vip">
              <a
                class="developer-vip-btn-area"
                @click.stop=""
                href="/type/vip/developer"
                target="view_window"
                :class="
                  isDeveloperVip
                    ? 'developer-vip-renewal-btn'
                    : 'developer-vip-apply-btn'
                "
              >
              </a>
              <!-- 如果已登录 并且 是vip ，显示会员日期 -->
              <div v-if="isVipMode" class="developer-vip-end-date">{{ userinfo.vip_end_date }} 到期</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>
        <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>

    <BindWeChatArticle ref="bindWeChat"></BindWeChatArticle>
  </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";
import BindWeChatArticle from '@/components/bind_wechat_article'

export default {
  name: "SeoLearnList",
  components: {
    Empty,
    LevelIntroduce,
    AdList,
    BindWeChatArticle
  },
  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;
    },
    isVipMode() {
      if (!this.isLogin) {
        return false;
      }
      const { is_vip } = this.$store.state.userinfo || {};
      return !!is_vip;
    },
    isDeveloperVip() {
      const { vip_type_id } = this.$store.state.userinfo || {};
      if (!this.isVipMode) {
        return false;
      }
      // 1 初创会员
      // 2 开发者会员
      // 3 企业版会员
      if (vip_type_id == 2) {
        return true;
      }
      return false;
    }
  },
  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;
      }
    },

    callBindWeChat(){
      this.$refs['bindWeChat'].show({
        name:this.userInfo.nickname,
        uid:this.userinfo.uid,
        avatar:this.userInfo.icon_url
      })
    }
  }
};
</script>

<style lang="scss">
@import "@/assets/css/developer/index.scss";
.no-padding {
  padding: 0;
}
.dynamic-user-avatar-vip{
  position: relative;

}
</style>