小程序目录调整完成

src/mods/publicity/AppTopic/AppTopic.vue

@@ -0,0 +1,240 @@
+<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 auto8px;
+    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>