onecric_h5/pages/News/news.vue

<!-- 底部-话题 -->
<template>
  <view class="topic">
    <view class="topic-head">
		  <header-logo></header-logo>
      <div class="bar flex">
        <div class="flex" @click="stepBack">
          <u-icon name="arrow-left" color="#ffffff" size="16px" bold></u-icon>
          <!-- More -->
         {{ $t('more.lab') }}
        </div>
      </div>
      
      <!-- <view class="header">
        <view class="topic-avatar">
          <u--image
            :showLoading="true"
            class="u-skeleton-circle"
            @click="homeShow = true"
            :src="info.avatar || '/static/image/match/teams_avatar_ico@2x.png'"
            width="50rpx"
            height="50rpx"
            shape="circle"
          ></u--image>
        </view>
        <u-tabs
          :list="tabList"
          @click="change"
          lineWidth="180rpx"
          lineHeight="0"
          lineColor="#DC3C23"
          :scrollable="false"
          :itemStyle="{height: '60rpx'}"
          :activeStyle="{
            color: '#fff',
            fontSize: '32rpx',
            fontWeight: 'Bold',
          }"
          :inactiveStyle="{ color: '#fff', fontSize: '32rpx' }"
        ></u-tabs>
      </view> -->
      <view class="topip-tabs flex">
        <view class="ullist" :class="{ 'flex-center': current == 1 }">
          <view class="li-content">
            <view
              class="ulli"
              :class="{ active: index == tabsIndex }"
              v-for="(item, index) in classList"
              :key="index"
              @click="setClass(item, index)"
            >
              {{ item.name }}
            </view>
          </view>
        </view>
        <!-- <image
          src="/static/image/news/more.png"
          mode=""
          @click="toUrl('./list?type=' + current)"
        ></image> -->
      </view>
    </view>
    <view class="" v-if="current == 0">
      <view class="topic-swiper" :class="{'fadeInBtm': animationLoaded}" v-if="tabsIndex == 0 && list.length != 0">
				<swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="2000"
					:duration="500">
					<swiper-item v-for="(item, index) in list" :key="index">
						<u--image
						  mode="scaleToFill"
							:showLoading="true"
							:src="item.img"
							width="100%"
							height="60vw"
						>
							<template v-slot:loading>
								<image class="loading-banner-img" src="/static/image/common/loading-banner.png"></image>
							</template>
						</u--image>
					</swiper-item>
				</swiper>
      </view>
      <!--  :style="{marginTop:show1?'204rpx':'100rpx'}" -->
      <view
        class="topic-list"
        :class="{'fadeInTop': animationLoaded}"
        v-if="current == 0"
        :style="{ marginTop: tabsIndex != 0 ? '18rpx' : '18rpx' }"
      >
        <view
          class="list-li flex"
          v-for="(item, index) in Headlist.data"
          :key="index"
          @click="$toUrl('./news-detail?id=' + item.id)"
        >
          <view class="list-li-left flex-wrap">
            <view class="list-li-left-nav text-clamp2">{{ item.title }}</view>
            <view class="list-li-left-bot flex-start">
              <!-- <text :style="{color:index == 0?'#CC374A':'#999'}">置顶</text> -->
              <text style="color: #cc374a; width: 90rpx" v-if="item.is_top == 1"
                >{{ $t('news.lab6') }}</text
              >
              <view
                class="flex-start"
                style="width: 90rpx"
                v-if="item.comment_count != 0"
              >
                <image
                  src="/static/image/news/topic11.png"
                  mode="aspectFill"
                ></image>
                <text>{{
                  item.comment_count >= 1000000
                    ? (item.comment_count % 1000000) + "M"
                    : item.comment_count
                }}</text>
              </view>

              <text>{{ item.addtime }}</text>
            </view>
          </view>
          <u--image
            :showLoading="true"
            class="list-li-logo"
            radius="12"
            :src="item.img"
            width="240rpx"
            height="136rpx"
          >
					<template v-slot:loading>
						<image class="loading-list-img" src="/static/image/common/loading-banner.png"></image>
					</template>
				</u--image>
          <image
            src="../../static/image/news/hot.png"
            v-if="item.comment_count > 1000000"
            mode=""
            style="width: 25px;height: 20px;position: relative;right: 18px;top: -31px;"></image>
          <!-- <image class="list-li-logo" :src="item.img ?item.img:require('../../static/image/common/none-img.png')" mode="aspectFill"></image> -->
        </view>
      </view>
      <u-empty
        v-if="Headlist.data.length == 0"
        mode="data"
        width="474"
        height="312"
        textSize="28"
        marginTop="100"
        :text="$t('common.nodata')"
        icon="/static/image/common/nodata.png"
      >
      </u-empty>
    </view>

    <view class="Community" v-else>
      <view class="hot" v-if="current == 1 && tabsIndex == 0">
        <view class="hot-title">
          {{ $t("news.title") }}
        </view>
        <!-- <image src="../../static/image/news/hot-title.png" class="hot-title" mode=""></image> -->
        <view class="ul flex-start">
          <view
            class="li"
            v-for="(item, index) in luntanTitle"
            :key="index"
            @click="$toUrl('./news-list?id=' + item.id)"
          >
            <image :src="item.icon" mode=""></image>
            <view class="font24">
              {{ item.name }}
            </view>
          </view>
        </view>
      </view>
      <view
        class="tips font24 flex-start"
        v-if="current == 1 && tabsIndex == 0"
      >
        <text class="t">
          <!-- Fine paste -->
          {{ $t('news.lab7') }}
        </text>
        <text>
          <!-- Important reading: community management norms and user
          instructions -->
          {{ $t('news.lab8') }}
          </text>
      </view>

      <view class="u-demo-block__content">
        <u-empty
          v-if="luntanList.length == 0"
          mode="data"
          width="474"
          height="312"
          textSize="28"
          marginTop="100"
          :text="$t('common.nodata')"
          icon="/static/image/common/nodata.png"
        >
        </u-empty>
        <view
          class="album"
          @click="$toUrl('./community-detail?id=' + item.id)"
          v-for="(item, index) in luntanList"
          :key="index"
        >
          <view class="album_top flex-start">
            <image class="logo" :src="item.avatar" mode=""></image>
            <view class="">
              <u--text :text="item.user_nickname" bold size="32"></u--text>
              <u--text
                margin="6px 0 0 0"
                size="26"
                color="#999"
                :text="item.addtime"
              ></u--text>
            </view>
          </view>
          <!-- <view class="nav font28 text-clamp3" :ref="'text'+index" :style="{'-webkit-line-clamp':lunIndex == index?'initial':3}">
						{{item.title}}
					</view> -->
          <mote-lines-divide
            :line="3"
            @click.stop=""
            :expandText="$t('news.full')"
            :foldHint="$t('news.collapsed')"
          >
            {{ item.title }}
          </mote-lines-divide>
          <!-- <view class="more" :style="{display:getLength(index)?'none':''}" @click.stop="setLunIndex(index)">
						Full text
					</view> -->
          <!-- item.is_flie_type文件格式：1视频 0图片 -->
          <view class="album__content" v-if="item.is_flie_type == 0">
            <u-album multipleSize="200" space="16" :urls="item.img"></u-album>
          </view>

          <view class="album__content" v-else>
            <image
              v-if="item.video[0]"
              :src="item.video[0].img + '?vframe/jpg/offset/0'"
              style="width: 100%"
              mode=""
            ></image>
            <image
              class="play"
              src="/static/image/match/play.png"
              mode=""
            ></image>
          </view>
          <view class="types flex-start">
            <image :src="item.classification_icon" mode=""></image>
            {{ item.classification_name }}
          </view>
          <view class="flex tabbar">
            <view class="">
              <image src="/static/image/news/topic2.png" mode=""></image>
              <u--text color="#999" size="24" :text="item.favorites"></u--text>
            </view>
            <view class="">
              <image src="/static/image/news/topic7.png" mode=""></image>
              <u--text color="#999" size="24" :text="item.comment"></u--text>
            </view>
            <view class="">
              <image src="/static/image/news/topic6.png" mode=""></image>
              <u--text color="#999" size="24" :text="item.click"></u--text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <image
      src="/static/image/news/topic-top.png"
      class="topic-top"
      mode="aspectFill"
      @click="go(4)"
      v-if="current == 1"
    ></image>
    <!-- <image src="/static/image/news/topic-top.png" class="topic-top" mode="aspectFill" @click="$toUrl('./publish')" v-else></image> -->

    <u-popup :show="homeShow" mode="left" @close="close" @open="open">
      <view class="home">
        <view @click="userClick">
          <view class="home-info flex-start">
            <image
              :src="
                info.avatar || '/static/image/match/teams_avatar_ico@2x.png'
              "
              mode="aspectFill"
            >
            </image>
            <view class="font32">
              <!-- Graeme van Buuren -->
              {{ isLogin == 1 ? info.user_nickname : "" }}
            </view>
          </view>
        </view>
        <view class="home-ui">
					<template v-for="(item, index) in homeList">
						<view
            class="home-li flex-start"
            @click="go(index)"
            v-if="index != 0"
            :key="index"
          >
            <image
              :src="'/static/image/match/my-' + index + '.png'"
              mode=""
            ></image>
            <view class="font32">
              {{ item }}
            </view>
          </view>
					</template>
          
        </view>
        <button
          v-if="isLogin == 1"
          type="default"
          class="size28 logout"
          @click="logOut"
        >
          {{ $t("member.out") }}
        </button>
        <button v-else type="default" class="size28 logout" @click="logIn">
          <!-- Log In -->
          {{ $t('login.login') }}
        </button>
      </view>
    </u-popup>
    <div class="news-install">
      <install></install>
    </div>
  </view>
</template>

<script>
// 路径自行修改
import MoteLinesDivide from "@/components/mote-lines-divide/mote-lines-divide";
import animationMixin from '@/pages/mixins/animation'
import install from "@/components/install/install.vue";
export default {
  components: {
    MoteLinesDivide,
    install,
  },
  mixins: [animationMixin],
  data() {
    return {
      show: false,
      lunIndex: null,
      homeShow: false,
      tokenIsLogin: "",
      urls2: [
        "https://cdn.uviewui.com/uview/album/1.jpg",
        "https://cdn.uviewui.com/uview/album/2.jpg",
        "https://cdn.uviewui.com/uview/album/3.jpg",
        "https://cdn.uviewui.com/uview/album/4.jpg",
        "https://cdn.uviewui.com/uview/album/5.jpg",
        "https://cdn.uviewui.com/uview/album/6.jpg",
        "https://cdn.uviewui.com/uview/album/7.jpg",
        "https://cdn.uviewui.com/uview/album/8.jpg",
        "https://cdn.uviewui.com/uview/album/9.jpg",
        "https://cdn.uviewui.com/uview/album/10.jpg",
      ],
      homeList: [
        "Streamer application",
        this.$t("member.concerns"),
        this.$t("member.message"),
        this.$t("member.settings"),
      ],
      bannerList: [
        {
          img: "/static/images/topic/banner.jpg",
        },
      ],
      tabsIndex: 0,
      page: 1,
      status1: "more",
      status2: "more",
      luntanPage: 1,
      swCurrent: 0,
      Headlist: {
        data: [],
      },
      tabsTitle: [],
      HeadlinesList: {},
      current: 0,
      list: [],
      luntanTitle: [],
      luntanList: [],
      classList: [],
    };
  },
  computed: {
    show1: {
      get() {
        return this.$store.state.show;
      },
      set() {
        // this.$store.state.info.midMask = !this.$store.state.info.midMask
      },
    },
    info() {
      return this.$store.state.info;
    },
    isLogin() {
      return this.$store.state.isLogin;
    },
    tabList() {
      let arr = [
        {
          name: this.$t("news.tab1"),
        },
        // {
        //   name: this.$t("news.tab2"),
        // },
      ];
      return arr;
    },
  },
  mounted() {
    this.getclassification();
    this.getLuntan();
    let { token } = this.$store.state.qiuNiu;
    // 判断是否登录
    this.tokenIsLogin = token;
  },
  onReachBottom() {
    //触底加载
    if (this.current == 0) {
      if (JSON.stringify(this.HeadlinesList) == "{}") return;
      if (this.status1 == "more") {
        this.getHeadlines();
      }
    } else {
      if (this.status2 == "more") {
        this.getLuntan();
      }
    }
  },
  methods: {
    // 跳转个人中心
    userClick() {
      uni.navigateTo({
        url: "../../pages/Match/member/infomation",
      });
    },
    /* 退出登录 */
    logOut() {
      this.homeShow = false;
      this.$common.del("information");
      this.$common.del("imTouristAccount");
      this.$store.state.isLogin = 2;
    },
    logIn() {
      this.homeShow = false;
      this.$toUrl('/pages/login/login')
    },
    getLength(i) {
      this.$nextTick((res) => {
        // let text = this.$refs['text'+i];
        setTimeout((res1) => {
          console.log(this.$refs["text" + i][0]);
        }, 100);
        // let rows = this.$refs.text.getClientRects().length // 文本行数
        // let txt = this.introduceOld // 文本
      });
    },

    setLunIndex(i) {
      this.lunIndex = this.lunIndex == i ? null : i;
      console.log(this.lunIndex);
    },
    // 获取论坛的分类
    getLuntan() {
      this.status2 = "loading";
      uni.$u.http
        .get("/api/circle/index", { params: { page: this.luntanPage } })
        .then((res) => {
          this.luntanTitle = res.classification;
          if (this.luntanPage == 1) {
            this.luntanList = res.list.data;
          } else {
            this.luntanList = [...this.luntanList, ...res.list.data];
          }
          if (res.list.total > this.luntanList.length) {
            this.luntanPage++;
            this.status2 = "more";
          } else {
            this.status2 = "nomore";
          }
        });
    },
    /* 获取关注的圈子 */
    getAttentionList() {
      uni.showLoading({
        title: this.$t('common.lab'),
      });
      uni.$u.http.get("/api/Circle/attentionList", {}).then((res) => {
        uni.hideLoading();
        this.luntanList = res.data;
      });
    },

    // 获取头条分类列表
    getclassification() {
      uni.$u.http.get("/api/Headlines/classification", {}).then((res) => {
        this.classList = res;
        this.classList.unshift({ name: this.$t("news.hot"), id: 0 });
        this.tabsTitle = this.classList;
        this.getHeadlines();
        // this.$db.set('system'.res.data)
        // this.HeadlinesList = res
        // this.Headlist.data = [...this.Headlist.data,...res.list.data]
      });
    },
    /* 选择头条分类 */
    setClass(item, i) {
      this.tabsIndex = i;

      if (this.current == 0) {
        this.page = 1;
        this.getHeadlines();
      } else {
        this.luntanPage = 1;
        uni.pageScrollTo({
          duration: 0,
          scrollTop: 0,
        });
        if (i == 0) {
          //热门圈子
          this.getLuntan();
        } else {
          //关注圈子
          this.getAttentionList();
        }
      }
    },

    // 置顶
    top() {
      uni.pageScrollTo({
        duration: 0,
        scrollTop: 0,
      });
    },

    open() {},
    close(event) {
      this.homeShow = false;
    },
    toUrl(url) {
      if (this.isLogin == 2) {
      } else {
        this.$toUrl(url);
      }
    },
    go(type) {
      if (this.isLogin == 2 && type != 5) {
        this.$toUrl('/pages/login/login')
        return
      };
      switch (type) {
        case 1:
          uni.navigateTo({
            url: "../Match/member/author",
          });
          break;
        case 2:
          uni.navigateTo({
            url: "../Match/message/message",
          });
          break;
        case 3:
          uni.navigateTo({
            url: "../Match/setting/setting",
          });
          break;
        case 4:
          uni.navigateTo({
            url: "./publish",
          });
          break;
        case 5:
          if (this.isLogin == 1) {
            this.$toUrl("/pages/Match/member/infomation");
          } else {
            this.$toUrl('/pages/login/login')
          }
      }
    },
    change(e) {
      this.current = e.index;
      this.tabsIndex = 0;
      this.page = 1;
      this.luntanPage = 1;
      if (e.index == 0) {
        this.classList = this.tabsTitle;
        this.getHeadlines();
      } else {
        this.classList = [
          { name: this.$t("news.popular") },
          { name: this.$t("news.follow") },
        ];
        this.getLuntan();
      }
    },
    // 轮播切换
    change1(e) {
      // console.log(e);
      this.swCurrent = e;
    },
    // 点击轮播
    detail(e) {
      // uni.navigateTo({
      // 	url:'./detail?id=' + this.HeadlinesList.banner[e].id
      // })
      console.log(e);
    },
    //获取头条列表
    getHeadlines() {
      this.status1 = "loading";
      uni.$u.http
        .get("/api/Headlines/getList", {
          params: { page: this.page, cid: this.classList[this.tabsIndex].id },
        })
        .then((res) => {
          // this.$db.set('system'.res.data)
          this.HeadlinesList = res;
          if (this.page == 1) {
            this.list = res.banner || [];
            this.Headlist.data = res.list.data;
          } else {
            this.Headlist.data = [...this.Headlist.data, ...res.list.data];
          }

          if (res.list.total > this.Headlist.data.length) {
            this.page++;
            this.status1 = "more";
          } else {
            this.status1 = "nomore";
          }
        }).finally(() => {
          if (this.animationLoaded) {
            return
          }
          this.animationLoaded = true
          this.$nextTick(() => {
            this.scrollFun()
          })
        })
    },
    stepBack() {
      uni.switchTab({
        url: '/pages/more/index'
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.topic {
  color: #333;
  min-height: 100vh;
  padding-bottom: 130rpx;
  background-color: #f3f3f7;
}
.bar {
    background-color: #262E4A;
    height: 40px;
    font-weight: 500;
    font-size: 16px;
    padding: 0 16px;
    color: #fff;
    .u-icon {
      margin-right: 10px;
    }
}
.news-install {
	position: fixed;
  left: 0;
  right: 0;
	bottom: var(--window-bottom);
	z-index: 200;
}
.topip-tabs {
  font-weight: 500;
  font-size: 14px;
  color: #000;
  line-height: 1;
  background-color: #f3f3f7;
  image {
    width: 60rpx;
    height: 60rpx;
    // margin-left: ;
  }

  .ullist {
    // flex: 1;
    width: 100%;
    // overflow: auto;
    overflow-y: scroll;
    // padding-right: 100rpx;
  }

  .li-content {
    width: max-content;
  }

  .ulli {
    display: inline-block;
    // width: 100rpx;
    text-align: center;
    padding: 12px 16px;
    border-bottom: 2px solid transparent;
  }

  .active {
    border-bottom-color: #FF3300;
  }
}

.Community {
  overflow: hidden;
  padding: 0 24rpx;

  .tips {
    padding: 16rpx 20rpx;
    border-radius: 12rpx;
    background-color: white;
    margin-top: 22rpx;

    .t {
      color: $color2;
      padding: 14rpx 12rpx;
      border-radius: 12rpx;
      margin-right: 20rpx;
      border: 2rpx solid $color2;
    }
  }
  .hot {
    margin-top: 24rpx;
    border-radius: 12rpx;
    background-color: white;
    padding: 82rpx 0 20rpx 0;
    position: relative;
    .hot-title {
      color: #fff;
      width: 250rpx;
      height: 54rpx;
      padding-left: 12rpx;
      line-height: 54rpx;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      background: url(/static/image/news/hot-title.png) center top / 100% 100%
        no-repeat;
    }
    .ul {
      overflow-x: scroll;
      .li {
        width: 254rpx;
        text-align: center;
      }
      image {
        width: 72rpx;
        height: 72rpx;
        margin-bottom: 16rpx;
      }
    }
  }

  .album {
    margin-top: 20rpx;
    padding: 32rpx 24rpx;
    border-radius: 12rpx;
    background-color: white;
    .types {
      width: fit-content;
      // display: inline-block;
      color: #e3ac72;
      font-size: 28rpx;
      margin-top: 24rpx;
      padding: 10rpx 16rpx;
      background-color: #fff1e0;
      border-radius: 6rpx;
      image {
        width: 32rpx;
        height: 32rpx;
        margin-right: 10rpx;
      }
    }
    .logo {
      width: 72rpx;
      height: 72rpx;
      border-radius: 50%;
      margin-right: 16rpx;
    }
    .nav {
      padding-top: 20rpx;
    }
    .album__content {
      position: relative;
      margin-top: 30rpx;
      image {
        border-radius: 10rpx;
      }
      .play {
        position: absolute;
        top: 40%;
        left: 50%;
        margin-left: -60rpx;
        width: 80rpx;
        height: 80rpx;
      }
    }
    .tabbar {
      margin-top: 22rpx;
      padding: 0 22rpx;
      image {
        width: 48rpx;
        height: 48rpx;
      }
      view {
        display: flex;
        align-items: center;
        justify-content: flex-start;
      }
    }
  }
}

.topic-head {
  position: sticky;
  top: 0;
  // left: 0;
  // right: 0;
  z-index: 9;
  // padding: 0 200rpx;
  .header {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 20rpx;
  }
  .topic-avatar {
    // padding: 0 20rpx;
    // position: absolute;
    // top: 0;
    // left: 0;
    z-index: 999;
  }
}

.topic-swiper {
  position: relative;
  .topic-swiper-title {
    width: 90%;
    color: #fff;
    position: absolute;
    left: 24rpx;
    bottom: 20rpx;
    font-size: 28rpx;
  }
  .swiper {
    height: 60vw;
  }
	.loading-banner-img {
		display: block;
		width: 100%;
		height: 60vw;
	}
}

.topic-list {
  margin: 0 18rpx;
  padding: 0 24rpx;
  border-radius: 12rpx;
  background-color: white;

  .list-li {
    padding: 32rpx 0;
    border-bottom: 2rpx solid #f0f0f0;
  }

  .list-li-logo {
    width: 242rpx;
    height: 136rpx;
    margin-left: 32rpx;
    border-radius: 12rpx;
  }
	.loading-list-img {
		width: 242rpx;
    height: 136rpx;
    border-radius: 12rpx;
	}
  .list-li-left {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    height: 136rpx;

    image {
      width: 28rpx;
      height: 24rpx;
      margin-right: 8rpx;
    }

    .list-li-left-nav {
      color: #333;
      font-size: 32rpx;
      align-self: flex-start;
    }
  }

  .list-li-left-bot {
    width: 95%;
    font-size: 24rpx;
    // margin: 0 auto;
    margin-left: 20rpx;
    align-self: flex-end;

    text {
      color: #999;
      // margin-right: 32rpx;
    }

    view {
      text {
        color: #999;
      }
    }
  }
}

.topic-top {
  position: fixed;
  bottom: 192rpx;
  right: 32rpx;
  width: 96rpx;
  height: 96rpx;
}
.home {
  width: 80vw;

  .home-info {
    color: #fff;
    padding: 39rpx 29rpx;
    background: url(/static/image/match/home-bg.png) center top / 100% auto
      no-repeat;

    image {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      margin-right: 24rpx;
    }

    view {
      font-weight: bold;
    }
  }

  .home-ui {
    overflow: hidden;
    margin: 0 28rpx;

    .home-li {
      color: #333;
      margin-top: 50rpx;

      image {
        width: 36rpx;
        height: 36rpx;
        margin-right: 17rpx;
      }
    }
  }
  .logout {
    height: 108rpx;
    background-color: #fff;
    margin: 80rpx 20rpx;
    line-height: 108rpx;
    color: #ff7b7f;
  }
}
</style>