迁移防返贫

src/apps/AppPovertyAlleviation/News.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="news">
+    <div class="tab">
+      <span
+          @click="changeTab(index, item.dictValue)"
+          v-for="(item, index) in tabList"
+          :key="index"
+          :class="[currIndex === index ? 'active' : '']">
+        {{ item.dictName }}
+      </span>
+    </div>
+    <div class="list">
+      <div class="item" v-for="(item, index) in list" :key="index"
+           @click="linkTo('./NewsDetail?id=' + item.id)">
+        <div class="left">
+          <h2>{{ item.title }}</h2>
+          <div class="item-bottom">
+            <span>{{ $dict.getLabel('newsCenterPolicyType', item.policyType) }}</span>
+            <span>{{ item.createTime }}</span>
+          </div>
+        </div>
+        <image v-if="item.coverFile" :src="item.coverFile ? item.coverFile.url : ''"/>
+      </div>
+      <AiEmpty v-if="!list.length && isMore" style="padding-bottom: 20px;"></AiEmpty>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      currIndex: 0,
+      list: [],
+      current: 1,
+      size: 15,
+      type: '',
+      tabList: [],
+      isMore: false
+    }
+  },
+
+
+  onLoad() {
+    uni.showLoading()
+    this.$dict.load(['newsCenterPolicyType']).then(() => {
+      this.tabList = this.$dict.getDict('newsCenterPolicyType')
+      this.type = this.$dict.getDict('newsCenterPolicyType')[0].dictValue
+      this.getList()
+    })
+  },
+
+  methods: {
+    changeTab(index, type) {
+      this.type = type
+      this.currIndex = index
+
+      this.current = 1
+      this.isMore = false
+
+      uni.showLoading()
+      this.$nextTick(() => {
+        this.getList()
+      })
+    },
+
+    linkTo(url) {
+      uni.navigateTo({url})
+    },
+
+    getList() {
+      if (this.isMore) return
+
+      this.$http.post(`/app/appnewscenterinfo/listForWx`, null, {
+        params: {
+          current: this.current,
+          size: this.size,
+          status: 1,
+          policyType: this.type
+        }
+      }).then(res => {
+        if (res.code == 0) {
+          if (this.current > 1) {
+            this.list = [...this.list, ...res.data.records]
+          } else {
+            this.list = res.data.records
+          }
+
+          uni.hideLoading()
+
+          if (res.data.records.length < 10) {
+            this.isMore = true
+
+            return false
+          }
+
+          this.current = this.current + 1
+        } else {
+          uni.hideLoading()
+        }
+      }).catch(() => {
+        uni.hideLoading()
+      })
+    }
+  },
+
+  onReachBottom() {
+    this.getList()
+  }
+}
+</script>
+
+<style lang="scss">
+.news {
+  padding: 96px 0 40px;
+
+  .list {
+    padding: 0 30px;
+    background: #fff;
+
+    .item {
+      display: flex;
+      align-items: center;
+      padding: 32px 0;
+      border-bottom: 1px solid #DDDDDD;
+
+      &:active {
+        background: #ddd;
+      }
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      .left {
+        flex: 1;
+        margin-right: 20px;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+      }
+
+      & > image {
+        width: 200px;
+        height: 140px;
+      }
+
+      h2 {
+        margin-bottom: 32px;
+        color: #333333;
+        font-size: 30px;
+        font-weight: 600;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+      }
+
+      .item-bottom {
+        display: flex;
+        align-items: center;
+
+        span {
+          color: #999999;
+          font-size: 24px;
+
+          &:first-child {
+            margin-right: 32px;
+          }
+        }
+      }
+    }
+  }
+
+  .tab {
+    display: flex;
+    position: fixed;
+    align-items: center;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    height: 96px;
+    background: #FFFFFF;
+    border-bottom: 1px solid #D4D4D4;
+    box-sizing: border-box;
+
+    * {
+      box-sizing: border-box;
+    }
+
+    span {
+      position: relative;
+      flex: 1;
+      height: 96px;
+      line-height: 96px;
+      color: #999999;
+      text-align: center;
+      font-size: 28px;
+
+      &::after {
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        width: 88px;
+        height: 6px;
+        background: transparent;
+        transform: translateX(-50%);
+        content: ' ';
+      }
+
+      &.active {
+        color: #1365DD;
+
+        &::after {
+          background: #1365DD;
+        }
+      }
+    }
+  }
+}
+</style>