proginn-frontend/pages/community/user/_id.vue

<template>
  <div class="community-u" ref="container" @scroll="containerScroll">
    <div alt="back" class="background"></div>
    <div class="userinfo">
      <img :src="info.icon_url" alt class="header-avatar"/>
      <div class="header-nickname">{{ info.nickname }}</div>
      <div class="header-title">{{ info.title }}</div>
      <div class="count-infos">
        <div class="info">
          {{ idInfo.topics_count }}
          <span>文章</span>
        </div>
        <div class="info">
          {{ idInfo.fans_count }}
          <span>粉丝</span>
        </div>
        <div class="info">
          {{ idInfo.followers_count }}
          <span>关注</span>
        </div>
      </div>
      <button
        class="focu-btn followed"
        v-if="idInfo.has_follow"
        @click="doFollow"
      >
        已关注
      </button>
      <button class="focu-btn" v-else @click="doFollow">关注TA</button>
    </div>
    <div class="content-box">
      <div class="content-left">
        <div class="arts-title">
          一共
          <span style="color: var(--mainColor)">{{ idInfo.topics_count }}</span>
          篇文章
        </div>
        <div
          class="art"
          v-for="(art, index) of arts"
          :key="index"
          @click="clickArt(art, index)"
        >
          <img v-if="art.cover_url" :src="art.cover_url" alt class="art-img"/>
          <section class="art-info">
            <h3 class="art-title">{{ art.title }}</h3>
            <p class="art-summary">{{ art.intro }}</p>
            <div class="art-subinfo">
              <div class="author">
                <img
                  :src="info.icon_url"
                  alt="author-img"
                  class="author-avatar"
                />
                <span style="font-size: 10px">{{ info.nickname }}</span>
                <span class="create-time">{{ art.updated_at }}</span>
              </div>
              <div class="art-counts-info">
                <div class="good">
                  <img src="~@/assets/img/community/good_icon.png"/>
                  <span class="good-count">{{ art.like_count }}</span>
                </div>
                <div class="comment">
                  <img src="~@/assets/img/community/comment_icon.png"/>
                  <span class="comment-count">{{ art.reply_count }}</span>
                </div>
              </div>
            </div>
          </section>
        </div>
        <el-pagination
          v-if="$store.state.isPC"
          background
          layout="prev, pager, next"
          :total="+idInfo.topics_count"
          :page-size="10"
          :current-page="currentPage"
          @current-change="changePagination"
        ></el-pagination>
      </div>
      <div class="content-right">
        关注微信
        <img src="~@/assets/img/wechat.jpg" alt="wechat" class="qr-code"/>
      </div>
    </div>
    <div class="loading" v-if="isLoading">
      <i class="el-icon-loading"></i>
      正在加载
    </div>
    <div class="loading" v-if="noMore">已加载全部内容</div>
  </div>
</template>

<script>
  import http from "@/plugins/http";
  import WxMixin from "@/mixins/wx";

  let container;
  let page = 1;

  export default {
    layout: "opacity_header",
    async asyncData({$axios, params, req}) {
      let id = params.id;
      let headers = req && req.headers;
      let res = await $axios.$get(
        `/api/user/getUserInfo?id=${id}&page=1&size=10`,
        {headers}
      );
      return {
        title: `${res.data.info.nickname}的技术圈主页-程序员客栈`,
      };
    },
    head() {
      return {
        title: this.title,
        script: [{src: "https://res.wx.qq.com/open/js/jweixin-1.2.0.js"}],
      };
    },
    mixins: [WxMixin],
    data() {
      return {
        list: [],
        currentPage: 1,
        isLoading: false,
        noMore: false,
        idInfo: {},
      };
    },
    computed: {
      info() {
        return this.idInfo.info || {};
      },
      arts() {
        return this.idInfo.topics || [];
      },
    },
    mounted() {
      container = this.$refs.container;
      this.getDetail();
    },
    methods: {
      async getDetail() {
        let res = await this.$axios.$get(
          `/api/user/getUserInfo?id=${this.$route.params.id}&page=1&size=10`
        );
        console.log(res.data);
        if (res) {
          this.idInfo = res.data;
        }
      },
      clickLancer({id}) {
        this.$router.push(`/cert/type/${id}`);
      },
      btnDisabled(item) {
        return item.btn_name !== "申请认证" || !item.can_click;
      },
      async getList() {
        let id = this.$route.params.id;
        this.isLoading = true;
        // console.log(id)
        let res = await this.$axios.$get(
          `/api/user/getUserInfo?id=${id}&page=${this.currentPage}&size=10`,
          {},
          {neverLogout: true}
        );
        this.isLoading = false;
        if (res) {
          if (this.currentPage === 1 || this.$store.state.isPC) {
            this.idInfo = res.data;
          } else {
            if (!res.data.topics.length) {
              this.noMore = true;
              return;
            }
            this.idInfo.topics = [...this.idInfo.topics, ...res.data.topics];
          }
        }
      },
      canApply(item) {
        return item.end_date && item.is_cert_validate && item.cert_no;
      },
      configWx() {
        try {
          let conf = this.$store.state.wxConfig;
          wx.ready(function () {
            //需在用户可能点击分享按钮前就先调用
            wx.config({
              debug: true,
              appId: conf.appId,
              timestamp: conf.timestamp,
              nonceStr: conf.nonceStr,
              signature: conf.signature,
              jsApiList: [
                // 所有要调用的 API 都要加到这个列表中
                "onMenuShareTimeline", // 分享到朋友圈接口
                "onMenuShareAppMessage", //  分享到朋友接口
                "onMenuShareQQ", // 分享到QQ接口
                "onMenuShareWeibo", // 分享到微博接口
              ],
              success: function () {
                alert("wx.config ok");
              },
              error: function (d) {
                alert("wx.config err:" + JSON.stringify(d));
              },
            });
            wx.updateAppMessageShareData({
              title: "开发者资质认证", // 分享标题
              desc: "通过平台审核、认证，将获得更多接单机会", // 分享描述
              link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: "https://stacdn.proginn.com/favicon.ico", // 分享图标
              success: function () {
                // 设置成功
                alert("微信图标设置成功");
              },
            });
          });
        } catch (error) {
          // alert(error)
        }
      },
      /**
       * 修改页码
       */
      changePagination(page) {
        this.currentPage = page;
        this.getList();
      },
      /**
       * 点击关注按钮
       */
      async doFollow() {
        // 移动端处理
        if (!this.$store.state.isPC && !this.$store.getters.isLogin) {
          location.href = "proginn://login";
          return;
        }
        let res = await this.$axios.$post(`/api/user/follow`, {
          follow_id: this.$route.params.id,
        });
        if (res) {
          this.idInfo.has_follow = res.data.follow_status ? 1 : 0;
        }
      },
      /**
       * 点击文章
       */
      clickArt(art, index) {
        location.href = `/topics/${art.id}.html`;
      },
      /**
       * 监听滚动
       */
      containerScroll() {
        if (this.isLoading || this.noMore) return;
        // PC不监听
        if (this.$store.state.isPC) return;
        if (
          container.scrollHeight - container.scrollTop - container.clientHeight <
          50
        ) {
          this.currentPage++;
          this.getList();
        }
      },
    },
  };
</script>

<style lang='less' scoped>
  @max768: ~"(max-width: 768px)";
  .community-u {
    min-width: 0;
    min-height: 0;
    max-width: 1000px;
  }

  .background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 428px;
    z-index: -1;
    background: url(~@/assets/img/community/u_background.png) 0 0 ~"/" 100% 100% no-repeat;
  }

  .community-u {
    .userinfo {
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 350px;
      overflow: hidden;
      margin-bottom: 10px;
      color: white;
      margin-top: 20px;
    }
  }

  .header-avatar {
    @size: 88px;
    width: @size;
    height: @size;
    border-radius: @size / 2;
  }

  .header-nickname {
    font-size: 16px;
    font-weight: 600;
    margin: 10px 0 2px;
  }

  .header-title {
    font-size: 10px;
    margin-top: 8px;
  }

  .count-infos {
    display: flex;
    align-items: center;
    margin: 23px 0 30px;
  }

  .info {
    display: flex;
    align-items: flex-end;
    align-items: center;
    font-size: 25px;
    font-weight: bold;
    margin: 0 16px;
    border-right: 1px solid white;

    &:last-child {
      border-right: none;
    }

    span {
      font-size: 10px;
      margin: 0 30px 0 6px;
    }
  }

  .create-time {
    font-size: 10px;
    color: #999;
    border-left: 1px solid #999;
    margin-left: 2px;
    padding-left: 2px;
  }

  .focu-btn {
    width: 150px;
    height: 40px;
    background: var(--mainColor);
    color: white;
    border-radius: 20px;
  }

  .followed {
    background: grey;
  }

  .content-box {
    display: flex;
  }

  .content-left {
    width: 740px;
    padding: 20px 20px 40px;
    background: white;
  }

  .art {
    display: flex;
    margin-top: 20px;
    padding-bottom: 20px;
    cursor: pointer;
    border-bottom: 1px solid #f2f2f2;
  }

  .art-img {
    width: 154px;
    height: 114px;
    margin-right: 20px;
  }

  .art-info {
    flex: 1;
  }

  .overflow {
    max-width: 520px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .art-title {
    .overflow;
    font-size: 18px;
  }

  .art-summary {
    .overflow;
    font-size: 10px;
    color: #666;
    margin-top: 10px;
  }

  .art-subinfo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 50px;

    .author-avatar {
      margin-right: 4px;
      border-radius: 10px;
    }

    .author {
      display: flex;
      align-items: center;
    }

    .author-avatar {
      @size: 20px;
      width: @size;
      height: @size;
    }
  }

  .art-counts-info {
    display: flex;
    align-items: center;

    .good-count,
    .comment-count {
      font-size: 10px;
      font-weight: 500;
      color: #999;
    }

    .good,
    .comment {
      display: flex;
      align-items: center;

      img {
        @size: 16px;
        width: @size;
        height: @size;
        margin-right: 4px;
      }
    }

    .comment {
      margin-left: 10px;
    }
  }

  .content-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 250px;
    height: 274px;
    background: white;
    margin-left: 10px;
    padding-top: 20px;

    .qr-code {
      @size: 176px;
      width: @size;
      height: @size;
      margin-top: 20px;
    }
  }

  .arts-title {
    padding-bottom: 10px;
    border-bottom: 1px solid #f2f2f2;
  }

  @media @max768 {
    .community-u {
      width: 100%;
      margin-bottom: 0;
      height: 100vh;
      overflow-y: scroll;
    }

    .background {
      background: url(~@/assets/img/community/u_background_small.png) 0 0 ~"/" 100% 100% no-repeat;
    }

    .followed {
      border: 1px solid white;
      background: transparent;
    }

    .content-left {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px 0 0;
      width: 100%;
    }

    .arts-title {
      width: calc(100% - 40px);
    }

    .art {
      flex-direction: row-reverse;
      border-bottom: 1px solid rgba(244, 244, 244, 1);
      padding-bottom: 10px;
      width: calc(100% - 40px);

      .art-img {
        width: 120px;
        height: 90px;
        margin-left: 20px;
        margin-right: 0;
      }

      .art-info {
        border-bottom: none;
      }

      .art-title {
        white-space: normal;
        font-size: 14px;
        line-height: 20px;
      }

      .art-summary {
        display: none;
      }
    }

    .art-subinfo {
      margin-top: 26px;
    }

    .content-right {
      display: none;
    }

    .el-pagination {
      margin-bottom: 20px;
    }
  }

  .el-pagination {
    margin-top: 40px;
    text-align: center;
  }

  .loading {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
  }
</style>