yicangzongtai_app_240321/components/news/index.vue

<template>
  <view class="news">
    <view class="news-box">
      <!-- 置顶 -->
      <template v-if="dataList.length > 0">
        <view class="news-item" v-for="(item, index) in dataList" :key="item.id" @click="goNewsDetail(item)">
          <template v-if="item.thumbnail && item.thumbnail.length > 1">
            <view class="item-imgs-box">
              <view class="txt">
                <view class="title">
                  {{item.title}}
                </view>
              </view>
              <view class="imgs">
                <image v-for="(el, j) in item.thumbnail" :key="j" class="img" :src="el" mode="aspectFill">
                </image>
              </view>
              <view class="tag-time">
                <image class="top" v-if="item.stick" src="/static/common/top.png" mode="widthFix"></image>
                <text class="time">{{item.publisher||'松河公益'}} {{$u.timeFormat(item.create_time, 'yyyy-mm-dd')}}</text>
                <text class="browse_sum">{{item.browse_sum || 0}} 浏览量</text>
              </view>
            </view>
          </template>
          <template v-else>
            <view class="item-img-box">
              <view class="txt">
                <view class="title">{{item.title}}</view>
                <view class="tag-time">
                  <image class="top" v-if="item.stick" src="/static/common/top.png" mode="widthFix"></image>
                  <text class="time">{{item.publisher||'松河公益'}} {{$u.timeFormat(item.create_time, 'yyyy-mm-dd')}}</text>
                  <text class="browse_sum">{{item.browse_sum || 0}} 浏览</text>
                </view>
              </view>
              <view class="imgs" v-if="item.thumbnail && item.thumbnail.length">
                <image class="img" :src="item.thumbnail[0]" mode="aspectFill"></image>
              </view>
            </view>
          </template>
        </view>
      </template>
      <template v-else>
        <noData :config="{top:0}"></noData>
      </template>
      <view class="loadmoreBox" v-if="dataList.length>0">
        <u-loadmore :status="status" />
      </view>
    </view>
  </view>
</template>

<script>
  import noData from "@/components/noData/nodata.vue"
  export default {
    components: {
      noData
    },
    name: 'news',
    props: {
      classify_id: {
        type: [Number, String],
        default: ''
      }
    },
    data() {
      return {
        dataList: [],
        params: {
          page: 1,
          limit: 10,
        },
        totalCount: 0,
        totalPage: 0,
        currPage: 0,
        status: ''
      }
    },
    methods: {
      // 获取资讯分类列表
      loadData(e, type) {
        if (type == 'more') {
          if (this.currPage < this.totalPage) {
            this.params.page++
          } else {
            return false
          }
        } else if (type == 'refresh') {
          this.params.page = 1
        }
        if (e == 0) this.params.recommend = 1
        if (this.params.page == 1) this.dataList = []
        uni.showLoading({
          title: '加载中..'
        })
        this.$http.get('/information/page', {
          ...this.params,
          classify_id: this.classify_id,
        }).then(res => {
          if (res && res.code == 200) {
            this.dataList = [...this.dataList, ...res.page.list]
            this.totalCount = res.page.totalCount
            this.totalPage = res.page.totalPage
            this.currPage = res.page.currPage
            this.status = this.dataList.length >= res.page.totalCount ? 'nomore' : 'loadmore'
            this.$emit('getSwiperHeight')
            setTimeout(() => {
              uni.hideLoading()
            }, 300)
          }
        }).catch(err => {
          setTimeout(() => {
            uni.hideLoading()
          }, 300)
        })
      },
      goNewsDetail(item) {
        uni.navigateTo({
          url: `/pages/index/news_detail?id=${item.id}`
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .news-box {
    padding: 30rpx;

    .news-item {
      width: 100%;
      padding: 40rpx 0;
      border-bottom: 1rpx solid #e6e6e6;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;

      &:nth-child(1) {
        padding-top: 0;
      }

      .txt {
        font-size: 28rpx;
        color: #1a1a1a;

        .title {
          margin-bottom: 10rpx;
          word-break: break-all;
          text-overflow: ellipsis;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;

          .top {
            width: 72rpx;
            height: 33rpx;
            font-size: 0;
            margin-right: 22rpx;
            flex-shrink: 0;
            vertical-align: middle;
            margin-bottom: 2rpx;

            // image {
            //   width: 100%;
            //   height: 100%;
            // }
          }
        }
      }

      .tag-time {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #999999;

        .time {
          max-width: 70%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .top {
          width: 72rpx;
          height: 33rpx;
          font-size: 0;
          margin-right: 22rpx;
          flex-shrink: 0;
          vertical-align: middle;
          // margin-bottom: 2rpx;
        }
      }

      // 无图及一张图片
      .item-img-box {
        display: flex;
        justify-content: space-between;

        .txt {
          flex: 1;
          width: 0;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          
          .title {
            margin-bottom: 0;
          }
        }

        .imgs {
          margin-left: 40rpx;
          font-size: 0;
          flex-shrink: 0;

          .img {
            width: 240rpx;
            height: 160rpx;
            border-radius: 10rpx;
          }
        }
      }

      // 多图
      .item-imgs-box {
        .imgs {
          display: flex;
          margin-bottom: 10rpx;
          font-size: 0;

          .img {
            width: 225rpx;
            height: 150rpx;
            margin-right: 8rpx;
            border-radius: 10rpx;
          }

          .img:nth-child(3n) {
            margin-right: 0;
          }
        }
      }

      .browse_sum {
        flex-shrink: 0;
        margin-left: 20rpx;
      }
    }
  }
</style>