proginn-frontend/pages/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">
                <a
                  v-if="idInfo.has_edit_delete_access"
                  class="delete"
                  @click.stop="handleDelete(art)"
                >删除</a>
                <a
                  v-if="idInfo.has_edit_delete_access"
                  class="edit"
                  :href="`/topics/${art.id}/edit`"
                >编辑</a>
                <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 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 }
    );
    if (!res.data) {
      return {
        title: "的技术圈主页-程序员客栈"
      };
    }
    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" },
        { src: "https://hm.baidu.com/hm.js?18455f493c982100e5a82ec978a8d06e" }
      ]
    };
  },
  mixins: [WxMixin],
  data() {
    return {
      baseUrl: "",
      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.data) {
        document.title = `${res.data.info.nickname}的技术圈主页-程序员客栈`;
        this.idInfo = res.data;
      }
    },
    async handleDelete(topic) {
      console.log(topic);
      await this.needLogin();
      if (!this.idInfo.has_edit_delete_access) {
        this.$message.error("你没有该文章的操作权限");
      }
      this.$confirm(`<p>确认删除该文章吗？</p>`, "提示", {
        dangerouslyUseHTMLString: true
      })
        .then(async () => {
          this.$axios
            .$post("/api/community/topic/delete", { topic_id: topic.id })
            .then(() => {
              this.$message({
                message: "删除成功",
                type: "success"
              });
              this.getDetail();
            })
            .catch(() => {
              this.$message.error("该文章不存在");
              setTimeout(() => location.reload(), 1000);
            });
        })
        .catch(err => {
          console.log("cancel");
        });
    },
    clickLancer({ id }) {
      this.$router.push(baseUrl + `/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 && res.data) {
        this.idInfo.has_follow = res.data.follow_status ? 1 : 0;
      } else {
        this.goLogin(1, true);
      }
    },
    /**
     * 点击文章
     */
    clickArt(art, index) {
      location.href = `/p/${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();
      }
    }
  },
  created() {
    this.baseUrl = process.env.baseUrl;
  }
};
</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;
}
.edit,
.delete {
  display: inline-block;
  margin: 0 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 15px;
  color: rgba(48, 142, 255, 1);
}
.delete {
  color: rgba(153, 153, 153, 1);
}
</style>