全局个人页 右侧fix

assets/css/frontend/personal.scss

@@ -15,6 +15,11 @@
   width: 730px;
 }
 .personal-side {
+  position: fixed;
+  left: 50%;
+  transform:translateX(-50%);
+  margin-left: 375px;
+  top: 103px;
   width: 350px;
 }
 
@@ -311,4 +316,4 @@
 .ad-item{
   margin:16px;
   display:block;
-}
+}

layouts/header-fix.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="container" id="markIsAppWebview" :data-app="deviceType.app">
+    <proginn-header class="ma-header-fix" v-if="deviceType.pc"/>
+    <wx-header v-else-if="!deviceType.app && (deviceType.android || deviceType.ios) && !isWeixinApp"></wx-header>
+    <nuxt class="header-fix-main"/>
+    <proginn-footer v-if="deviceType.pc && !noneCommonFooter"/>
+  </div>
+</template>
+
+<script>
+  import ProginnHeader from "@/components/header";
+  import ProginnFooter from "@/components/footer";
+  import WxHeader from "@/components/wx_header";
+  import {mapState, mapMutations} from "vuex";
+  import Stats from "@/mixins/stats";
+
+  export default {
+    components: {
+      ProginnHeader,
+      ProginnFooter,
+      WxHeader
+    },
+    data() {
+      return {
+        isWeixinApp: true
+      }
+    },
+    mixins: [Stats],
+    computed: {
+      ...mapState(["isPC", "isWeixin", "deviceType", "noneCommonFooter"])
+    },
+    mounted() {
+      console.log("route.path", this.$route);
+      this.isWeixinApp = navigator.userAgent.indexOf("miniProgram") > -1;
+      this.checkTerminal();
+      window.addEventListener("resize", this.checkInnerWidth);
+      // 修改密码处理
+      if (
+        this.$route.path.includes("/setting/check/change_mobile") ||
+        this.$route.path.includes("/setting/check/real_info")
+      ) {
+        // 如果上页不是验证码页面，则认为是复制地址过来，强制踢出
+        if (
+          localStorage.getItem("proginn-history") !== "/setting/check/old_mobile"
+        ) {
+          this.$message("请验证旧手机号。");
+          setTimeout(() => {
+            this.$router.replace("/setting/check/old_mobile");
+          }, 1500);
+        }
+      } else {
+        localStorage.removeItem("proginn-history");
+      }
+    },
+    methods: {
+      ...mapMutations(["updateIsPC", "updateIsWeixin"]),
+      checkTerminal() {
+        this.updateIsPC({
+          isPC: window.innerWidth > 960
+        });
+        this.updateIsWeixin({
+          isWeixin: window.navigator.userAgent
+            .toLowerCase()
+            .match(/MicroMessenger/i)
+        });
+      }
+    }
+  };
+</script>
+
+
+<style>
+  *,
+  *:before,
+  *:after {
+    box-sizing: border-box;
+    margin: 0;
+  }
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .header-fix-main {
+    min-width: 1000px;
+    min-height: calc(100vh - 376px);
+    margin:0 30px !important;
+    margin-bottom: 30px !important;
+    margin-top: 103px !important;
+  }
+  .ma-header-fix{
+    position:fixed!important;
+    left: 0;
+    width: 100%;
+    top: 0;
+  }
+  .__nuxt-error-page .title {
+    font-size: 100%;
+  }
+
+  @media screen and (max-width: 960px) {
+    .main {
+      min-width: auto;
+    }
+  }
+</style>

pages/frontend/personal/index.vue

@@ -1,202 +1,133 @@
 <template>
-  <div
-    :class="mobile ? 'mobileMain' : ''"
-    :style="{
-      marginTop: mainMarginTop,
-      marginBottom: mobile ? '0px' : '30px !important'
-    }"
-  >
-    <div v-if="!mobile" class="personal-container">
-      <div class="personal-main">
+<div v-if="!mobile" class="personal-container">
+    <div class="personal-main">
         <!-- 个人信息框 -->
         <div class="personal-info-container">
-          <div class="personal-user">
-            <div class="personal-user-avatar">
-              <img
-                class="personal-user-avatar-img"
-                :src="personalUserInfo.icon"
-              />
-              <span
-                class="personal-user-tag"
-                v-if="personalUserInfo.person_vip_status == 1"
-              ></span>
+            <div class="personal-user">
+                <div class="personal-user-avatar">
+                    <img class="personal-user-avatar-img" :src="personalUserInfo.icon" />
+                    <span class="personal-user-tag" v-if="personalUserInfo.person_vip_status == 1"></span>
+                </div>
+                <div class="personal-user-info">
+                    <div class="personal-user-name">
+                        <span class="name-cotent">
+                            <span>{{ personalUserInfo.nickname}}</span>
+                            <span v-if="personalUserInfo.direction_name!=''">（{{ personalUserInfo.direction_name }}）</span>
+                        </span>
+                        <LevelTag :level="personalUserInfo.fw_freework_level"></LevelTag>
+                    </div>
+                    <div class="personal-user-text">
+                        {{ personalUserInfo.lasttime }} ·
+                        {{ personalUserInfo.dynamic_view_num }}浏览
+                    </div>
+                    <div class="personal-user-text" v-if="registerTime">
+                        {{ registerTime }}加入
+                    </div>
+                </div>
             </div>
-            <div class="personal-user-info">
-              <div class="personal-user-name">
-                <span class="name-cotent">
-                  <span>{{ personalUserInfo.nickname}}</span>
-                  <span v-if="personalUserInfo.direction_name!=''"
-                    >（{{ personalUserInfo.direction_name }}）</span
-                  >
-                </span>
-                <LevelTag
-                  :level="personalUserInfo.fw_freework_level"
-                ></LevelTag>
-              </div>
-              <div class="personal-user-text">
-                {{ personalUserInfo.lasttime }} ·
-                {{ personalUserInfo.dynamic_view_num }}浏览
-              </div>
-              <div class="personal-user-text" v-if="registerTime">
-                {{ registerTime }}加入
-              </div>
-            </div>
-          </div>
-          <div class="personal-user-follow">
-            <p class="personal-report">
-              <a
-                :href="baseUrl+'/otherpage/report/' + personalUserInfo.uid"
-                target="view_window"
-                >举报</a
-              >
-            </p>
-            <div class="personal-share-area">
-              <span
-                v-if="personalUserInfo.github_name"
-                @click="
+            <div class="personal-user-follow">
+                <p class="personal-report">
+                    <a :href="baseUrl+'/otherpage/report/' + personalUserInfo.uid" target="view_window">举报</a>
+                </p>
+                <div class="personal-share-area">
+                    <span v-if="personalUserInfo.github_name" @click="
                   linkToThirdParty(personalUserInfo.github_name, 'github_name')
-                "
-                class="personal-share-btn github"
-              ></span>
-              <span
-                v-if="personalUserInfo.gitee_name"
-                @click="
+                " class="personal-share-btn github"></span>
+                    <span v-if="personalUserInfo.gitee_name" @click="
                   linkToThirdParty(personalUserInfo.gitee_name, 'gitee_name')
-                "
-                class="personal-share-btn gitee"
-              ></span>
-              <span
-                v-if="personalUserInfo.csdn_name"
-                @click="
+                " class="personal-share-btn gitee"></span>
+                    <span v-if="personalUserInfo.csdn_name" @click="
                   linkToThirdParty(personalUserInfo.csdn_name, 'csdn_name')
-                "
-                class="personal-share-btn csdn"
-              ></span>
+                " class="personal-share-btn csdn"></span>
 
-              <span
-                v-if="personalUserInfo.juejin_name"
-                @click="
+                    <span v-if="personalUserInfo.juejin_name" @click="
                   linkToThirdParty(personalUserInfo.juejin_name, 'juejin_name')
-                "
-                class="personal-share-btn juejin"
-              ></span>
-              <span
-                v-if="personalUserInfo.zhihu_name"
-                class="personal-share-btn zhihu"
-              ></span>
-            </div>
-            <div
-              class="personal-follow-btn"
-              @click="toggleFollow"
-              v-if="isShowFollow"
-            >
-              {{ isFollowing ? "已关注" : "关注" }}
+                " class="personal-share-btn juejin"></span>
+                    <span v-if="personalUserInfo.zhihu_name" class="personal-share-btn zhihu"></span>
+                </div>
+                <div class="personal-follow-btn" @click="toggleFollow" v-if="isShowFollow">
+                    {{ isFollowing ? "已关注" : "关注" }}
+                </div>
             </div>
-          </div>
         </div>
 
         <!-- 内容tab -->
         <div class="personal-content-container">
-          <div class="personal-content-tab">
-            <!-- tab框 -->
-            <div
-              class="personal-tab-item"
-              :class="{ 'cur': tabSelected == 1 }"
-              @click="tabSelected = 1"
-            >
-              动态 {{ dynamicCount }}
-            </div>
-            <div
-              class="personal-tab-item"
-              :class="{ 'cur': tabSelected == 2 }"
-              @click="tabSelected = 2"
-            >
-              文章 {{ articleCount }}
+            <div class="personal-content-tab">
+                <!-- tab框 -->
+                <div class="personal-tab-item" :class="{ 'cur': tabSelected == 1 }" @click="tabSelected = 1">
+                    动态 {{ dynamicCount }}
+                </div>
+                <div class="personal-tab-item" :class="{ 'cur': tabSelected == 2 }" @click="tabSelected = 2">
+                    文章 {{ articleCount }}
+                </div>
+                <div class="personal-tab-item" :class="{ 'cur': tabSelected == 3 }" @click="tabSelected = 3">
+                    视频课程 {{ courseCount }}
+                </div>
             </div>
-            <div
-              class="personal-tab-item"
-              :class="{ 'cur': tabSelected == 3 }"
-              @click="tabSelected = 3"
-            >
-              视频课程 {{ courseCount }}
-            </div>
-          </div>
-          <div class="personal-content-main">
-            <template v-if="tabSelected == 1">
-              <div v-for="item in list" :key="item.dynamicId">
-                <DynamicItem :info="item"></DynamicItem>
-              </div>
-            </template>
+            <div class="personal-content-main">
+                <template v-if="tabSelected == 1">
+                    <div v-for="item in list" :key="item.dynamicId">
+                        <DynamicItem :info="item"></DynamicItem>
+                    </div>
+                </template>
 
-            <template v-if="tabSelected == 2">
-              <div v-for="(item) in list" :key="item.hash_id">
-                <ArticleItem :info="item"></ArticleItem>
-              </div>
-            </template>
-            <template v-if="tabSelected == 3">
-              <div v-for="(item) in list" :key="item.id">
-                <CourseItem :info="item"></CourseItem>
-              </div>
-            </template>
+                <template v-if="tabSelected == 2">
+                    <div v-for="(item) in list" :key="item.hash_id">
+                        <ArticleItem :info="item"></ArticleItem>
+                    </div>
+                </template>
+                <template v-if="tabSelected == 3">
+                    <div v-for="(item) in list" :key="item.id">
+                        <CourseItem :info="item"></CourseItem>
+                    </div>
+                </template>
 
-            <div class="data-empty" v-if="list.length == 0 && !pageLoading">
-              <Empty></Empty>
-              <p>暂无内容</p>
-            </div>
+                <div class="data-empty" v-if="list.length == 0 && !pageLoading">
+                    <Empty></Empty>
+                    <p>暂无内容</p>
+                </div>
 
-            <div class="loading" v-if="pageLoading">加载中</div>
+                <div class="loading" v-if="pageLoading">加载中</div>
 
-            <!-- 列表内容 -->
-          </div>
+                <!-- 列表内容 -->
+            </div>
         </div>
-      </div>
-      <div class="personal-side">
-        <a
-          class="personal-page-link"
-          :href="'https://www.proginn.com/wo/' + personUid"
-          target="view_window"
-        >
-          <span>Ta的开发工作主页</span>
-          <span class="arrow"></span>
+    </div>
+    <div class="personal-side">
+        <a class="personal-page-link" :href="'https://www.proginn.com/wo/' + personUid" target="view_window">
+            <span>Ta的开发工作主页</span>
+            <span class="arrow"></span>
         </a>
 
         <div class="personal-follow-info">
-          <div class="personal-follow-item">
-            <span class="personal-follow-label">关注了</span>
-            <span class="personal-follow-count">{{
+            <div class="personal-follow-item">
+                <span class="personal-follow-label">关注了</span>
+                <span class="personal-follow-count">{{
               personalUserInfo.my_followers
             }}</span>
-          </div>
-          <div class="personal-follow-item">
-            <span class="personal-follow-label">关注者</span>
-            <span class="personal-follow-count">{{
+            </div>
+            <div class="personal-follow-item">
+                <span class="personal-follow-label">关注者</span>
+                <span class="personal-follow-count">{{
               personalUserInfo.followers_my
             }}</span>
-          </div>
+            </div>
         </div>
 
         <div class="personal-ad-container">
-          <a
-            class="ad-item"
-            v-for="(item, index) in adList"
-            :key="index"
-            :href="item.url"
-            target="view_window"
-          >
-            <el-image
-              style="width:318px;height:233px"
-              fit="cover"
-              :src="item.image"
-            ></el-image>
-          </a>
+            <a class="ad-item" v-for="(item, index) in adList" :key="index" :href="item.url" target="view_window">
+                <el-image style="width:318px;height:233px" fit="cover" :src="item.image"></el-image>
+            </a>
         </div>
-      </div>
     </div>
-  </div>
+</div>
 </template>
 
 <script>
-import { mapState } from "vuex";
+import {
+    mapState
+} from "vuex";
 import qs from "qs";
 import DynamicItem from "./component/dynamic-item.vue";
 import ArticleItem from "./component/article-item.vue";
@@ -208,276 +139,275 @@ import LevelTag from "@/components/level-tag.vue";
 import PersonalSeoData from "./personalData";
 import moment from "moment";
 export default {
-  name: "PersonalIndex",
-  components: {
-    LevelTag,
-    DynamicItem,
-    ArticleItem,
-    CourseItem,
-    Empty
-  },
-  data() {
-    return {
-      baseUrl: "",
-      mobile: false,
-      // firstLoad: true,
-      isWeixinApp: true,
-      tabSelected: 1,
-      tabs: [
-        {
-          id: 1,
-          label: "动态",
-          count: 10
-        },
-        {
-          id: 2,
-          label: "文章",
-          count: 10
-        },
-        {
-          id: 3,
-          label: "视频课程",
-          count: 10
-        }
-      ],
+    name: "PersonalIndex",
+    layout: "header-fix",
+    components: {
+        LevelTag,
+        DynamicItem,
+        ArticleItem,
+        CourseItem,
+        Empty
+    },
+    data() {
+        return {
+            baseUrl: "",
+            mobile: false,
+            // firstLoad: true,
+            isWeixinApp: true,
+            tabSelected: 1,
+            tabs: [{
+                    id: 1,
+                    label: "动态",
+                    count: 10
+                },
+                {
+                    id: 2,
+                    label: "文章",
+                    count: 10
+                },
+                {
+                    id: 3,
+                    label: "视频课程",
+                    count: 10
+                }
+            ],
 
-      list: [],
-      page: 0,
-      pageSize: 10,
+            list: [],
+            page: 0,
+            pageSize: 10,
 
-      isMore: true,
-      pageLoading: false,
+            isMore: true,
+            pageLoading: false,
 
-      user: {},
-      personUid: ""
-    };
-  },
-  watch: {
-    tabSelected: function() {
-      this.resetTab();
-    }
-  },
-  head() {
-    const {
-      title =this.personalUserInfo.nickname+"个人主页-技术圈",
-      keyword = this.personalUserInfo.nickname+"个人主页",
-      description = "技术圈提供"+this.personalUserInfo.nickname+"个人主页，方便对"+this.personalUserInfo.nickname+"感兴趣的人收藏和关注，并及时了解"+this.personalUserInfo.nickname+"的动态，包括最新文章、最新视频！",
-      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
+            user: {},
+            personUid: ""
+        };
+    },
+    watch: {
+        tabSelected: function () {
+            this.resetTab();
         }
-      ]
-    };
-    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";
-      }
+    head() {
+        const {
+            title = this.personalUserInfo.nickname + "个人主页-技术圈",
+                keyword = this.personalUserInfo.nickname + "个人主页",
+                description = "技术圈提供" + this.personalUserInfo.nickname + "个人主页，方便对" + this.personalUserInfo.nickname + "感兴趣的人收藏和关注，并及时了解" + this.personalUserInfo.nickname + "的动态，包括最新文章、最新视频！",
+                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;
     },
-    registerTime() {
-      if (this.personalUserInfo.logintime) {
-        let time = moment(this.personalUserInfo.logintime * 1000).format(
-          "YYYY年MM月"
-        );
-        return time;
-      } else {
-        return 0;
-      }
+    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";
+            }
+        },
+        registerTime() {
+            if (this.personalUserInfo.logintime) {
+                let time = moment(this.personalUserInfo.logintime * 1000).format(
+                    "YYYY年MM月"
+                );
+                return time;
+            } else {
+                return 0;
+            }
+        },
+        isShowFollow() {
+            let isLogin = this.userinfo.uid;
+            let isMine = this.userinfo.uid == this.personUid ? true : false;
+            if (!isLogin) return true;
+            return isMine ? false : true;
+        }
     },
-    isShowFollow() {
-      let isLogin = this.userinfo.uid;
-      let isMine = this.userinfo.uid == this.personUid ? true : false;
-      if (!isLogin) return true;
-      return isMine ? false : true;
-    }
-  },
-
-  mounted() {
-      console.log(111,this.$route.params)
-    this.personUid = this.$route.params.uid;
-    this.baseUrl = this.$store.state.domainConfig.siteUrl;
-    this.isWeixinApp = navigator.userAgent.indexOf("miniProgram") > -1;
 
-    this.$nextTick(() => {
-      this.listenToEnd();
-    });
-    this.fetchData()
-  },
-  async asyncData({ ...params }) {
-    let dealDataObj = new PersonalSeoData(params);
-    let ans = await dealDataObj.dealData();
+    mounted() {
+        console.log(111, this.$route.params)
+        this.personUid = this.$route.params.uid;
+        this.baseUrl = this.$store.state.domainConfig.siteUrl;
+        this.isWeixinApp = navigator.userAgent.indexOf("miniProgram") > -1;
 
-    return {
-      ...ans
-    };
-  },
-  destroy: function() {
-    window.onscroll = null;
-  },
-  methods: {
-    resetTab() {
-      this.list = [];
-      this.page = 0;
-      this.isMore = true;
-      this.pageSize = 10;
-      this.pageLoading = false;
+        this.$nextTick(() => {
+            this.listenToEnd();
+        });
+        this.fetchData()
+    },
+    async asyncData({
+        ...params
+    }) {
+        let dealDataObj = new PersonalSeoData(params);
+        let ans = await dealDataObj.dealData();
 
-      this.fetchData();
+        return {
+            ...ans
+        };
+    },
+    destroy: function () {
+        window.onscroll = null;
     },
-    async fetchData() {
-      if (this.pageLoading || !this.isMore) return;
-      this.pageLoading = true;
+    methods: {
+        resetTab() {
+            this.list = [];
+            this.page = 0;
+            this.isMore = true;
+            this.pageSize = 10;
+            this.pageLoading = false;
 
-      let page = this.page + 1;
+            this.fetchData();
+        },
+        async fetchData() {
+            if (this.pageLoading || !this.isMore) return;
+            this.pageLoading = true;
 
-      let tabSelected = this.tabSelected;
-      let uid = this.personUid;
-      let res;
-      let list = [];
-      if (tabSelected == 1) {
-        res = await this.$axios.post("/uapi/dynamic/get_dynamic_list_my", {
-          to_uid: uid,
-          page: page,
-          pagesize: this.pageSize
-        });
-        list = res.data.data.list;
-      } else if (tabSelected == 2) {
-        res = await this.$axios.post("/uapi/news/index/list", {
-          uid: uid,
-          page: page,
-          pagesize: this.pageSize
-        });
-        list = res.data.data.list;
-      } else if (tabSelected == 3) {
-        res = await this.$axios.post("/uapi/goods/video/list", {
-          to_uid: uid,
-          page: 1,
-          pagesize: 1
-        });
-        list = res.data.data.list;
-      }
+            let page = this.page + 1;
 
-      if (Number(res.data.status) === 1) {
-        setTimeout(() => {
-          this.pageLoading = false;
-        }, 100);
-        this.page = page;
-        this.list.push(...list);
-        this.isMore = list.length < this.pageSize ? false : true;
-      } else if (Number(res.status) === 40001) {
-        this.isExist = false;
-      }
-    },
-    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;
+            let tabSelected = this.tabSelected;
+            let uid = this.personUid;
+            let res;
+            let list = [];
+            if (tabSelected == 1) {
+                res = await this.$axios.post("/uapi/dynamic/get_dynamic_list_my", {
+                    to_uid: uid,
+                    page: page,
+                    pagesize: this.pageSize
+                });
+                list = res.data.data.list;
+            } else if (tabSelected == 2) {
+                res = await this.$axios.post("/uapi/news/index/list", {
+                    uid: uid,
+                    page: page,
+                    pagesize: this.pageSize
+                });
+                list = res.data.data.list;
+            } else if (tabSelected == 3) {
+                res = await this.$axios.post("/uapi/goods/video/list", {
+                    to_uid: uid,
+                    page: 1,
+                    pagesize: 1
+                });
+                list = res.data.data.list;
+            }
 
-        if (scrollHeight - scrollTop - windowHeight < 400) {
-          that.fetchData();
-        }
-      };
-    },
-    linkToThirdParty(content, type) {
-      let link = "";
-      switch (type) {
-        case "github_name":
-          link = `https://github.com/${content}`;
-          break;
-        case "gitee_name":
-          link = `https://gitee.com/${content}`;
-          break;
-        case "csdn_name":
-          link = `https://blog.csdn.net/${content}`;
-          break;
-        case "wechat_name":
-          // link = `https://blog.csdn.net/${content}`;
-          break;
-        case "juejin_name":
-          link = "";
-          break;
-      }
+            if (Number(res.data.status) === 1) {
+                setTimeout(() => {
+                    this.pageLoading = false;
+                }, 100);
+                this.page = page;
+                this.list.push(...list);
+                this.isMore = list.length < this.pageSize ? false : true;
+            } else if (Number(res.status) === 40001) {
+                this.isExist = false;
+            }
+        },
+        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;
 
-      link && window.open(link, "view_window");
-    },
-    toggleFollow() {
-      if (this.isFollowing) {
-        this.unFollow();
-      } else {
-        this.follow();
-      }
-    },
-    async follow() {
-      if (this.pageLoading) return;
-      this.pageLoading = true;
-      let res = await this.$axios.$post("/uapi/dynamic/add_followers", {
-        to_uid: this.personUid
-      });
-      this.pageLoading = false;
-      if (Number(res.status) === 1) {
-        this.isFollowing = true;
-        this.personalUserInfo.followers_my++;
-      }
-    },
-    async unFollow() {
-      if (this.pageLoading) return;
-      this.pageLoading = true;
-      let res = await this.$axios.$post("/uapi/dynamic/del_followers", {
-        to_uid: this.personUid
-      });
-      this.pageLoading = false;
-      if (Number(res.status) === 1) {
-        this.isFollowing = false;
-        this.personalUserInfo.followers_my--;
-      }
+                if (scrollHeight - scrollTop - windowHeight < 400) {
+                    that.fetchData();
+                }
+            };
+        },
+        linkToThirdParty(content, type) {
+            let link = "";
+            switch (type) {
+                case "github_name":
+                    link = `https://github.com/${content}`;
+                    break;
+                case "gitee_name":
+                    link = `https://gitee.com/${content}`;
+                    break;
+                case "csdn_name":
+                    link = `https://blog.csdn.net/${content}`;
+                    break;
+                case "wechat_name":
+                    // link = `https://blog.csdn.net/${content}`;
+                    break;
+                case "juejin_name":
+                    link = "";
+                    break;
+            }
+
+            link && window.open(link, "view_window");
+        },
+        toggleFollow() {
+            if (this.isFollowing) {
+                this.unFollow();
+            } else {
+                this.follow();
+            }
+        },
+        async follow() {
+            if (this.pageLoading) return;
+            this.pageLoading = true;
+            let res = await this.$axios.$post("/uapi/dynamic/add_followers", {
+                to_uid: this.personUid
+            });
+            this.pageLoading = false;
+            if (Number(res.status) === 1) {
+                this.isFollowing = true;
+                this.personalUserInfo.followers_my++;
+            }
+        },
+        async unFollow() {
+            if (this.pageLoading) return;
+            this.pageLoading = true;
+            let res = await this.$axios.$post("/uapi/dynamic/del_followers", {
+                to_uid: this.personUid
+            });
+            this.pageLoading = false;
+            if (Number(res.status) === 1) {
+                this.isFollowing = false;
+                this.personalUserInfo.followers_my--;
+            }
+        }
     }
-  }
 };
 </script>