proginn-frontend/pages/user/video_collect.vue

<template>
  <div class="flex">
    <div class="box">
      <div class="item">
        <img src="~@/assets/quan/icon/new_article.png" alt="">
        <div>投稿文章</div>
      </div>
      <div class="item">
        <img src="~@/assets/quan/icon/new_video.png" alt="">
        <div>投稿视频</div>
      </div>
    </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 {
        collect_title:'方案名称',
        collect_des:'解决方案名称介绍解决方案名称介绍解决方案名称介绍解决方案名称介绍解决方案名称介绍解决方案名称介绍解决方案名称介绍解决方案名称介绍解决方案名称介',
        company_info:{
          img:'',
          name:'公司的名字'
        },
        baseUrl: "",
        jishuBaseUrl: "",
        list: [],
        currentPage: 1,
        isLoading: false,
        noMore: false,
        idInfo: {},
        item: 'heji'
      };
    },
    computed: {
      info() {
        return this.idInfo.info || {};
      },
      arts() {
        return this.idInfo.topics || [];
      }
    },
    mounted() {
      container = this.$refs.container;
      this.getDetail();
    },
    methods: {
      changeitem(x) {
        this.item = x
      },
      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(`/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.hash_id}`;
      },
      /**
       * 监听滚动
       */
      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 = this.$store.state.domainConfig.siteUrl;
      this.jishuBaseUrl = this.$store.state.domainConfig.jishuinUrl;
    }
  };
</script>
<style>
  body{
    background-color: white;
  }
</style>
<style lang='less' scoped>
 .flex{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .item{
    text-align: center;
    font-size:0.3rem;
    font-family:PingFangSC-Semibold,PingFang SC;
    font-weight:600;
    color:rgba(34,34,34,1);
    line-height:0.35rem;
  }
  .box{
    height:5.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  img{
      width:1.88rem;
      height:1.88rem;
  }
</style>