dvcp_v2_wechat_app/src/mods/publicity/AppTopic/AppTopic.vue

<template>
  <div class="news">
    <div class="header">
      <div class="header-search">
        <u-icon name="search" class="icon-search" size="40" color="rgba(255,255,255,0.5)"></u-icon>
        <input placeholder="请输入标题" v-model="title" @confirm="onConfirm" confirm-type="search"
               placeholder-style="color:rgba(255,255,255,0.5);">
      </div>
    </div>
    <div class="topic-list">
      <div class="topic-item" v-for="(item, index) in list" :key="index" hover-class="bg-hover"
           @click="$linkTo(`./detail?id=${item.id}`)">
        <div class="topic-item__left">
          <h2>{{ item.title }}</h2>
          <p>{{ item.publishTime }}</p>
        </div>
        <image :src="item.thumbUrl" mode="aspectFill"/>
      </div>
    </div>
    <div class="loading">
      <u-loadmore :status="loadingStatus"/>
    </div>
  </div>
</template>

<script>
export default {
  name:"AppTopic",
  appName:"热点话题",
  data() {
    return {
      title: '',
      isLoading: false,
      list: [],
      isShowEmpty: false,
      isMore: false,
      current: 0,
      areaId: '',
      loadingStatus: 'loadmore'
    }
  },

  onLoad() {
    this.areaId = uni.getStorageSync('areaId')
    this.getList(uni.getStorageSync('areaId'))
  },

  methods: {
    onConfirm() {
      this.loadingStatus = 'loadmore'
      this.current = 0
      this.$loading()

      this.$nextTick(() => {
        this.getList(this.areaId)
      })
    },

    getList(areaId) {
      if (this.loadingStatus === 'loading' || this.loadingStatus === 'nomore') return

      this.loadingStatus = 'loading'
      this.$instance.post(`/app/apphotsubject/listForWx?current=${this.current + 1}&size=10&status=1&title=${this.title}`, null, {
        withoutToken: 1
      }).then(res => {
        if (res.code === 0) {
          if (this.current === 0) {
            this.list = []
          }

          const data = res.data.records
          this.list.push(...data)
          this.current = this.current + 1
          this.loadingStatus = 'loadmore'
          if (!res.data.records.length || res.data.records.length < 10) {
            this.loadingStatus = 'nomore'
          }
        } else {
          this.loadingStatus = 'loadmore'
        }
      }).catch(() => {
        this.loadingStatus = 'loadmore'
      })
    },

    toDetail(id) {
      this.$linkTo(`./newsDetail?id=${id}&areaId=${this.areaId}`)
    }
  },

  onReachBottom() {
    this.getList(this.areaId)
  }
}
</script>

<style lang="scss" scoped>
.news {
  min-height: 100vh;
  background: #F3F6F9;
  padding-bottom: 40px;
}

.loading {
  margin-top: 40px;
}

.topic-item {
  display: flex;
  width: 686px;
  height: 208px;
  margin: 32px auto 0;
  padding: 32px;
  background: #FFFFFF;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.02);
  border-radius: 8px;
  overflow: hidden;

  .topic-item__left {
    flex: 1;
    margin-right: 32px h2 {
      height: 88px;
      line-height: 44px;
      margin-bottom: 16px;
      color: #333333;
      font-size: 32px;
      text-align: justify;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    p {
      color: #999999;
      font-size: 28px;
    }
  }

  image {
    flex-shrink: 1;
    width: 192px;
    height: 144px;
  }
}

div {
  box-sizing: border-box;
}

.noMore {
  line-height: 90px;
  text-align: center;
  color: #999;
  font-size: 26px;
}

.topic-list {
  padding-top: 112px;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
  width: 100%;
  height: 112px;
  padding: 20px 0 0 0;
  background: #4181FF;

  .header-search {
    display: flex;
    align-items: center;
    width: 690px;
    height: 60px;
    margin: 0 auto 8px;
    padding: 032px;
    background: rgba(0, 0, 0, .2);
    border-radius: 30px;

    .icon-search {
      flex-shrink: 1;
      width: 32px;
      height: 32px;
      margin-right: 16px;
    }

    input {
      flex: 1;
      height: 100%;
      font-size: 28px;
      color: #fff;
    }
  }

  .header-tab {
    display: flex;
    justify-content: center;
    height: 80px;
    padding-top: 16px;
    background: #2D80FB;

    span {
      margin-right: 50px;
      padding-bottom: 24px;
      font-size: 28px;
      color: #fff;
      border-bottom: 4px solid transparent;

      &:last-child {
        margin-right: 0;
      }

      &.active {
        color: #fff;
        border-bottom: 4px solid #fff;
      }
    }
  }
}

.no-more {
  margin-top: 20px;
  text-align: center;
  color: #999;

  image {
    width: 400px;
    height: 240px;
  }

  p {
    text-align: center;
    color: #999;
    font-size: 28px;
  }
}
</style>