排查问题

pages/frontend/personal/index.vue

@@ -1,138 +1,208 @@
 <template>
-<div :class="mobile ? 'mobileMain' : ''" :style="{
+  <div
+    :class="mobile ? 'mobileMain' : ''"
+    :style="{
       marginTop: mainMarginTop,
       marginBottom: mobile ? '0px' : '30px !important'
-    }">
+    }"
+  >
     <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>
-                    <div class="personal-user-info">
-                        <div class="personal-user-name">
-                            <span class="name-cotent">{{ personalUserInfo.nickname
-                  }}<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="'/otherpage/report/' + personalUserInfo.uid" target="view_window">举报</a>
-                    </p>
-                    <div class="personal-share-area">
-                        <span v-if="personalUserInfo.github_name" @click="
+      <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>
+            <div class="personal-user-info">
+              <div class="personal-user-name">
+                <span class="name-cotent"
+                  >{{ personalUserInfo.nickname
+                  }}<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="'/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>
-                        <span v-if="personalUserInfo.wechat_name" @click="
+                "
+                class="personal-share-btn csdn"
+              ></span>
+              <span
+                v-if="personalUserInfo.wechat_name"
+                @click="
                   linkToThirdParty(personalUserInfo.wechat_name, 'wechat_name')
-                " class="personal-share-btn wechat"></span>
-                        <span v-if="personalUserInfo.juejin_name" @click="
+                "
+                class="personal-share-btn wechat"
+              ></span>
+              <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 ? "已关注" : "关注" }}
-                    </div>
-                </div>
+                "
+                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>
 
-            <!-- 内容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>
-                    <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>
+        <!-- 内容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>
+            <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>
 
-                    <template v-if="tabSelected == 2">
-                        <div v-for="(item, index) in list" :key="index">
-                            <ArticleItem :info="item"></ArticleItem>
-                        </div>
-                    </template>
-                    <template v-if="tabSelected == 3">
-                        <div v-for="(item, index) in list" :key="index">
-                            <CourseItem :info="item"></CourseItem>
-                        </div>
-                    </template>
+            <template v-if="tabSelected == 2">
+              <div v-for="(item, index) in list" :key="index">
+                <ArticleItem :info="item"></ArticleItem>
+              </div>
+            </template>
+            <template v-if="tabSelected == 3">
+              <div v-for="(item, index) in list" :key="index">
+                <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="'/wo/'+personUid" target="view_window">
-                <span>Ta的开发工作主页</span>
-                <span class="arrow"></span>
-            </a>
+      </div>
+      <div class="personal-side">
+        <a
+          class="personal-page-link"
+          :href="'/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-info">
+          <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>
 
-            <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>
-            </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>
         </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";
@@ -144,273 +214,274 @@ 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",
+  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: 1,
-            pageSize: 10,
+      list: [],
+      page: 1,
+      pageSize: 10,
 
-            isMore: true,
-            pageLoading: false,
+      isMore: true,
+      pageLoading: false,
 
-            user: {},
-            personUid: ""
-        };
-    },
-    watch: {
-        tabSelected: function () {
-            this.resetTab();
-        }
-    },
-    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";
-            }
+      user: {},
+      personUid: ""
+    };
+  },
+  watch: {
+    tabSelected: function() {
+      this.resetTab();
+    }
+  },
+  head() {
+    const {
+      title = "程序员客栈-领先的程序员自由远程工作平台",
+      keyword = "软件开发,网站系统,APP小程序,UI设计,web前端,原型产品经理,程序员兼职,程序员招聘",
+      description = "程序员客栈是领先的程序员自由远程工作平台，未来互联网企业用人方式。提供优秀程序员为您进行网站建设制作、测试运维服务、人工智能AI、大数据区块链、软件开发等优质服务。",
+      h1 = "",
+      canonical = "",
+      metaLocation
+    } = this.head || {};
+    let obj = {
+      title: title,
+      meta: [
+        {
+          name: "keywords",
+          content: keyword
         },
-        registerTime() {
-            if (this.personalUserInfo.logintime) {
-                let time = moment(this.personalUserInfo.logintime * 1000).format(
-                    "YYYY年MM月"
-                );
-                return time;
-            } else {
-                return 0;
-            }
+        {
+          name: "description",
+          content: description
         },
-        isShowFollow() {
-            let isLogin = this.userinfo.uid
-            let isMine = this.userinfo.uid == this.personUid ? true : false
-            if (!isLogin) return true
-            return isMine ? false : true
+        {
+          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)
+      );
     },
-
-    mounted() {
-        this.personUid = this.$route.params.uid;
-        this.baseUrl = this.$store.state.domainConfig.siteUrl;
-        this.isWeixinApp = navigator.userAgent.indexOf("miniProgram") > -1;
-
-        this.$nextTick(() => {
-            this.listenToEnd();
-        });
-    },
-    async asyncData({
-        ...params
-    }) {
-        let dealDataObj = new PersonalSeoData(params);
-        let ans = await dealDataObj.dealData();
-
-        return {
-            ...ans
-        };
+    mainMarginTop() {
+      if (this.mobile && this.showWxHeader) {
+        return "64px !important";
+      } else if (this.mobile) {
+        return "0px !important";
+      } else {
+        return "20px !important";
+      }
     },
-    destroy: function () {
-        window.onscroll = null;
+    registerTime() {
+      if (this.personalUserInfo.logintime) {
+        let time = moment(this.personalUserInfo.logintime * 1000).format(
+          "YYYY年MM月"
+        );
+        return time;
+      } else {
+        return 0;
+      }
     },
-    methods: {
-        resetTab() {
-            this.list = [];
-            this.page = 0;
-            this.isMore = true;
-            this.pageSize = 10;
-            this.pageLoading = false;
+    isShowFollow() {
+      let isLogin = this.userinfo.uid;
+      let isMine = this.userinfo.uid == this.personUid ? true : false;
+      if (!isLogin) return true;
+      return isMine ? false : true;
+    }
+  },
 
-            this.fetchData();
-        },
-        async fetchData() {
-            if (this.pageLoading || !this.isMore) return;
-            this.pageLoading = true;
+  mounted() {
+    this.personUid = this.$route.params.uid;
+    this.baseUrl = this.$store.state.domainConfig.siteUrl;
+    this.isWeixinApp = navigator.userAgent.indexOf("miniProgram") > -1;
 
-            let page = this.page + 1;
+    this.$nextTick(() => {
+      this.listenToEnd();
+    });
+  },
+  async asyncData({ ...params }) {
+    let dealDataObj = new PersonalSeoData(params);
+    let ans = await dealDataObj.dealData();
 
-            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;
-            }
+    return {
+      ...ans
+    };
+  },
+  destroy: function() {
+    window.onscroll = null;
+  },
+  methods: {
+    resetTab() {
+      this.list = [];
+      this.page = 0;
+      this.isMore = true;
+      this.pageSize = 10;
+      this.pageLoading = false;
 
-            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;
+      this.fetchData();
+    },
+    async fetchData() {
+      if (this.pageLoading || !this.isMore) return;
+      this.pageLoading = true;
 
-                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;
-            }
+      let page = this.page + 1;
 
-            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++;
-            }
+      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;
+      }
 
-        },
-        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 (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;
+
+        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>