proginn-frontend/pages/user/index/article.vue

<template>
  <div class="community-u" ref="container" style="width:100%;" @scroll="containerScroll">
    <vuescroll :ops="ops">
      <template v-for="item in ad">
        <div class="live margin-0-auto">
          <div class="live-top align-center">
            <a :href="item.url" target="_blank">
              <div class="live-title inline-block">{{item.title}}</div>
            </a>
          </div>
          <div class="live-bottom align-center justify-between">
            <div class="align-center">
              <div class="live-statu align-center">
                <img src="~@/assets/quan/icon/live-in.png" />
                <div>活动直播</div>
              </div>
              <div class="live-source align-center">
                <img class="avatar" :src="item.icon_url" />
                <div>{{ item.nickname }}</div>
              </div>
              <div class="live-time gray-153">{{item.updated_at}}</div>
            </div>

            <div class="live-people gray-51 align-center">
              <img class="see icon" src="~@/assets/quan/icon/see.png" />
              <div>{{item.view_count}}人在看</div>
            </div>
          </div>
          <img
            class="close icon"
            src="~@/assets/quan/icon/close.png"
            onclick="$(this).parent().slideUp();"
          />
        </div>
      </template>
      <template v-for="article in list" v-if="active == 'default'">
        <template v-if="article.image">
          <!-- 有图 -->
          <div class="article-box">
            <div class="flex">
              <div class="justify-between">
                <div class="article-title">
                  <a :href="'/p/'+ article.hash_id ">{{article.title}}</a>
                </div>
                <div class="article-info lign-center">
                  <div class="live-source align-center">
                    <img class="avatar" :src="article.user.avatar" />
                    <div>{{article.user?article.user.name:'匿名'}}</div>
                  </div>
                  <div class="live-time gray-153">{{article.updated_at}}</div>
                  <div class="live-people gray-51 align-center">
                    <img class="see icon" src="~@/assets/quan/icon/see.png" />
                    <div>{{article.like_count}}</div>
                  </div>
                  <div class="live-people gray-51 align-center">
                    <img class="see icon" src="~@/assets/quan/icon/common.png" />
                    <div>{{article.reply_count}}</div>
                  </div>
                </div>
              </div>
              <img class="article-img" :src="article.cover_url" />
            </div>
          </div>
        </template>
        <template v-else>
          <!-- 无图 -->
          <div class="article-box">
            <div class="flex">
              <div class="justify-between">
                <div class="article-title">
                  <a :href="'/p/'+ article.hash_id ">{{article.title}}</a>
                </div>
                <div class="article-info align-center">
                  <div class="live-source align-center">
                    <img class="avatar" :src="article.user.avatar" />
                    <div>{{article.user?article.user.name:'匿名'}}</div>
                  </div>
                  <div class="live-time gray-153">{{article.updated_at}}</div>
                  <div class="live-people gray-51 align-center">
                    <img class="see icon" src="~@/assets/quan/icon/see.png" />
                    <div>{{article.like_count}}</div>
                  </div>
                  <div class="live-people gray-51 align-center">
                    <img class="see icon" src="~@/assets/quan/icon/common.png" />
                    <div>{{article.reply_count}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </template>
      <p class="loading">{{ loadingText}}</p>
    </vuescroll>
    <router-view />
    <van-tabbar route>
      <van-tabbar-item replace badge="3" to="/user/index/article">
        <span>文章</span>
        <template #icon="props">
          <img :src="props.active ? icon.article.active : icon.article.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/user/index/video" icon="search">
        <span>视频</span>
        <template #icon="props">
          <img :src="props.active ? icon.video.active : icon.video.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item
        replace
        :to="`/u/`+$store.state.userinfo.uid"
        icon="search"
        v-if="$store.state.userinfo.uid"
      >
        <span>我的</span>
        <template #icon="props">
          <img :src="props.active ? icon.my.active : icon.my.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace @click="goLogin()" icon="search" v-else>
        <span>我的</span>
        <template #icon="props">
          <img :src="props.active ? icon.my.active : icon.my.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { Tabbar, TabbarItem } from "vant";
import vuescroll from "vuescroll";
let container;

export default {
  layout: "opacity_header",
  async asyncData() {
    return {
      title: `选择新建类型-程序员客栈`
    };
  },
  components: {
    vuescroll
  },
  data() {
    return {
      ops: {
        mode: "native",
        sizeStrategy: "percent",
        detectResize: true
      },
      active: "default",
      list: [],
      page: {
        page: 1,
        noMore: 0
      },
      ad: {},
      icon: {
        article: {
          active: require("../../../assets/quan/icon/book_s.png"),
          inactive: require("../../../assets/quan/icon/book.png")
        },
        video: {
          active: require("../../../assets/quan/icon/video_s.png"),
          inactive: require("../../../assets/quan/icon/video.png")
        },
        my: {
          active: require("../../../assets/quan/icon/my_s.png"),
          inactive: require("../../../assets/quan/icon/my.png")
        }
      }
    };
  },
  mounted() {
    container = this.$refs.container;
  },
  created() {
    this.needLogin();
    this.getAD();
    this.getList();
  },
  methods: {
    getAD() {
      let that = this;
      this.$axios.$get("/api/jishuquan/get_ads").then(res => {
        that.ad = res.data;
      });
    },

    getList() {
      let that = this;
      let page = that.page;
      this.$axios
        .$get(
          this.$store.state.domainConfig.jishuinUrl +
            "/list/" +
            this.active +
            "/" +
            page.page
        )
        .then(res => {
          if (res.topics.length > 0) {
            let list = that.list;
            that.list = list.concat(res.topics);
            page++;
          } else {
            page.noMore = 1;
          }

          that.page = page;
        });
    },
    /**
     * 监听滚动
     */
    containerScroll() {
      console.log("999");
      if (this.isLoading || this.noMore) return;
      // PC不监听
      if (this.$store.state.isPC) return;
      if (
        container.scrollHeight - container.scrollTop - container.clientHeight <
        50
      ) {
        this.getList();
      }
    }
  }
};
</script>
<style scoped>
@import "@/assets/css/user/mui.min.css";

body {
  background-color: white;
}

html {
  font-size: 16px !important;
}
</style>
<style lang='less' scoped>
.community-u {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 20px;
}
.avatar {
  border-radius: 50%;
}

.add-con {
  width: 3rem;
  height: 3rem;
  background: rgba(48, 142, 255, 1);
  box-shadow: 0rem 0.12rem 0.54rem 0rem rgba(48, 142, 255, 0.63);
  color: white;
  position: fixed;
  right: 1rem;
  bottom: 4rem;
  line-height: 3rem;
  text-align: center;
  z-index: 1000;
  border-radius: 50%;
  font-size: 2rem;
}

.live,
.article-box {
  margin: 0 0.63rem;
  padding: 1.25rem 0 1.1rem 0;
  position: relative;
}

.live-title {
  width: 20.31rem;
  font-size: 0.94rem;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: rgba(17, 17, 17, 1);
  line-height: 1.31rem;
}

.live-statu {
  height: 1.13rem;
  background: rgba(255, 153, 0, 1);
  border-radius: 0.14rem;
  font-size: 0.56rem;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: rgba(255, 255, 255, 1);
  line-height: 0.81rem;
  padding: 0.13rem 0.18rem;
  margin-right: 0.63rem;
}

.live-statu > img {
  width: 0.61rem !important;
  height: 0.47rem;
  margin-right: 0.25rem;
}

.live-source {
  font-size: 0.69rem;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(34, 34, 34, 1);
  line-height: 1rem;
  margin-right: 0.38rem;
}

.live-source > img {
  width: 1.13rem !important;
  height: 1.13rem;
}

.live-time {
  font-size: 0.69rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  line-height: 1rem;
  margin-right: 0.7rem;
}

.live-people {
  font-size: 0.69rem;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 1rem;
  margin-right: 0.3rem;
}

.live-bottom {
  margin-top: 0.44rem;
  position: relative;
}

.live .close {
  position: absolute;
  top: 1.35rem;
  right: 0px;
  width: 0.75rem !important;
  height: 0.75rem;
}

.see {
  width: 1rem !important;
  height: 1rem;
  margin-right: 0.13rem;
}

.mui-table-view > li {
}

.article-title {
  font-size: 0.94rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(17, 17, 17, 1);
  line-height: 1.31rem;
}

.article-box .justify-between {
  flex-direction: column;
  min-height: 4.5rem;
}

.article-img {
  width: 6.75rem !important;
  height: 5rem;
  border-radius: 0.13rem;
  object-fit: cover;
}

li {
  box-shadow: 0rem -0.03rem 0rem 0rem rgba(243, 243, 243, 1);
}

.mui-active .img-no {
  display: none;
}

.mui-active .img-select {
  display: inline-block;
}

.img-select {
  display: none;
}

.mui-slider-indicator.mui-segmented-control {
  height: 2.81rem;
  background: white;
}

.mui-segmented-control .mui-control-item {
  line-height: 2.81rem;
}

/*.mui-slider-progress-bar {
  	width:1rem;
  	margin-left: 5.45rem;
  }*/
.mui-slider
  .mui-segmented-control.mui-segmented-control-inverted
  ~ .mui-slider-group
  .mui-slider-item {
  border: none;
}

.video2 {
  margin: 0.63rem;
  box-shadow: 0rem 0.06rem 0.24rem 0rem rgba(8, 27, 50, 0.05);
  border-radius: 0.08rem;
  overflow: hidden;
}

.video-box {
  box-shadow: 0rem 0.06rem 0.24rem 0rem rgba(8, 27, 50, 0.05);
  border-radius: 0.08rem;
  overflow: hidden;
}

.video-img {
  position: relative;
  width: 100%;
  height: 12.13rem;
}

.video-img .img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.25rem 0.25rem 0rem 0rem;
}

.video-des {
  font-size: 0.94rem;
  font-family: PingFangSC-Regular, PingFang SC;
  color: rgba(51, 51, 51, 1);
  line-height: 1.31rem;
  margin: 0.63rem 0 0.88rem 0;
}

.video-detail {
  padding: 0.63rem 0.94rem;
  box-shadow: 0rem 0.19rem 0.75rem 0rem rgba(8, 27, 50, 0.05);
  border-radius: 0rem 0rem 0.25rem 0.25rem;
}

.length {
  position: absolute;
  right: 10px;
  bottom: 10px;
  line-height: 22px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0 22px;
  color: white;
}

.play {
  position: absolute;
  width: 2.88rem !important;
  height: 2.88rem;
  top: 4.6rem;
  left: 9.7rem;
}

.live-zan {
  margin-left: 0.75rem;
}
</style>