添加新闻动态页面

src/components/NafmPageList.vue

+<template>
+  <div v-if="isEmpty" class="list-empty">暂无数据</div>
+  <section v-else class="page_list">
+    <van-list
+      v-model="Status.loading"
+      :finished="Status.finished"
+      :error.sync="Status.error"
+      error-text="加载失败，点击重新加载"
+      :immediate-check="false"
+      :offset="10"
+      finished-text="已经到底啦(*^_^*)"
+      @load="fetchData"
+    >
+      <slot v-bind="{ datas }"></slot>
+    </van-list>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'NafmPageList',
+  props: {
+    refresh: {
+      type: Boolean,
+      default: false
+    },
+    emptyType: {
+      type: [String, Number],
+      default: 6
+    },
+    pageSize: {
+      type: [String, Number],
+      default: 10
+    },
+    onLoad: {
+      type: Function,
+      default: (param) => Promise.resolve({ data: [] })
+    }
+  },
+  model: {
+    prop: ['refresh']
+  },
+  data () {
+    return {
+      Status: {
+        loading: true,
+        finished: false,
+        error: false
+      },
+      pageNo: 1,
+      isEmpty: false,
+      datas: []
+    }
+  },
+  watch: {
+    refresh (val) {
+      val && this.resetLoad()
+    }
+  },
+  methods: {
+    fetchData () {
+      this.isEmpty = false
+      Object.assign(this.Status, { loading: true, error: false, finished: false })
+      const { pageNo, pageSize, datas } = this
+      const params = { pageNo, pageSize }
+      this.onLoad(params).then(res => {
+        const { error, Status, statusText, data } = res || {}
+        if (error || (status != 0 && status != undefined)) {
+          Objecta.assign(this.Status, { error: false, loading: false })
+          this.$emit('input', false)
+          return
+        }
+        // 第一页数据请求结果为空时，表示暂无数据
+        if (pageNo == 1 && data.length == 0) {
+          // 页面展示无数据样式
+          Object.assign(this, { isEmpty: true, datas: [] })
+          Object.assign(this.Status, { loading: false })
+          this.$emit('input', false)
+          return
+        }
+
+        // 小于每次分页数, 表示加载完成
+        if (data.length < pageSize) {
+          Object.assign(this.Status, { finished: true })
+        }
+        // 第一页直接赋值，后续下拉刷新会重置pageNo。
+        const newDatas = pageNo == 1 ? data : datas.concat(data)
+        const newPageNo = pageNo + 1
+        Object.assign(this, { pageNo: newPageNo, datas: newDatas })
+        Object.assign(this.Status, { loading: false })
+        this.$emit('input', false)
+      }).catch(e => {
+        Object.assign(this.Status, { error: true, loading: false })
+        this.$emit('input', false)
+      })
+    },
+
+    resetLoad () {
+      Object.assign(this, { pageNo: 1 })
+      this.fetchData()
+    }
+  },
+  mounted () {
+    this.fetchData()
+  }
+}
+</script>
+

src/components/NafmPullRefresh.vue

+<template>
+  <van-pull-refresh v-model="refreshing" @refresh="$emit('refresh')">
+    <slot></slot>
+  </van-pull-refresh>
+</template>
+
+<script>
+export default {
+  name: 'NafmPullRefresh',
+  props: {
+    isLoading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      refreshing: false,
+    }
+  },
+  watch: {
+    isLoading (val, old) {
+      this.refreshing = val
+    },
+    refreshing (val, old) {
+      this.$emit('input', val)
+    }
+  },
+  model: {
+    prop: ['isLoading']
+  }
+}
+</script>
\ No newline at end of file

src/router/index.js

@@ -6,6 +6,7 @@ import memberRouter from './modules/member'
 import qulificationRouter from './modules/qualification'
 import regIssueRouter from './modules/regIssue'
 import homeRouter from './modules/home'
+import newsRouter from './modules/news'
 import { NativeMenuApi } from '@/api/NativeApis'
 
 const APP_ENV = process.env.VUE_APP_NODE_ENV
@@ -59,7 +60,7 @@ const routes = [
     },
     component: () => import(/* webpackChunkName: "PdfViewTwo" */ '@/views/pdf/two.vue') // 首页
   }
-].concat(userRouter, memberRouter, qulificationRouter, regIssueRouter, homeRouter)
+].concat(userRouter, memberRouter, qulificationRouter, regIssueRouter, homeRouter, newsRouter)
 
 const router = new VueRouter({
   routes

src/router/modules/news.js

+const Routers = [
+    {
+        path: '/news',
+        name: 'News',
+        meta: {
+            title: '新闻动态',
+            isLogin: false
+        },
+        component: () => import(/* webpackChunkName: "News" */ '@/views/news/index.vue') // 新闻动态
+    },
+    {
+        path: '/news/search',
+        name: 'NewsSearch',
+        meta: {
+            title: '新闻动态',
+            isLogin: false
+        },
+        component: () => import(/* webpackChunkName: "NewsSearch" */ '@/views/news/search.vue') // 新闻动态搜索
+    },
+]
+
+export default Routers
\ No newline at end of file

src/views/news/components/DataListLayout.vue

+<template>
+  <section class="data-list-layout">
+    <NafmPullRefresh v-model="isRefresh" @refresh="isRefresh = true">
+      <NafmPageList v-model="isRefresh" :onLoad="handleLoad">
+        <template v-slot="{datas}">
+          <DataListItem v-for="(item, idx) in datas" :key="idx" :data="item" :dateText="$t('home.updateDate')" />
+        </template>
+      </NafmPageList>
+    </NafmPullRefresh>
+  </section>
+</template>
+
+<script>
+import NafmPullRefresh from '@/components/NafmPullRefresh'
+import NafmPageList from '@/components/NafmPageList'
+import DataListItem from '@/components/DataListItem'
+export default {
+  name: 'DataListLayout',
+  components: { NafmPullRefresh, NafmPageList, DataListItem },
+  props: {
+    tab: {
+      type: Object,
+      default: () => { return {} }
+    }
+  },
+  data () {
+    return {
+      isRefresh: false,
+    }
+  },
+  methods: {
+    handleLoad (param) {
+      return new Promise(resolve => {
+        setTimeout(() => {
+          resolve({
+            data: [
+              {
+                title: '创新推出碳中和债，助理实现30·60目标',
+                date: '2020-02-02',
+                dataType: '公告',
+              },
+              {
+                title: '创新推出碳中和债，助理实现30·60目标',
+                date: '2020-02-02',
+                dataType: '公告',
+              }
+            ]
+          })
+        }, 2000);
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@PaddingSize: 15px;
+.data-list-layout {
+  height: 100%;
+  padding: 0 @PaddingSize;
+
+  /deep/.van-pull-refresh {
+    height: 100%;
+  }
+}
+</style>
\ No newline at end of file

src/views/news/index.vue

+<template>
+  <div class="news">
+    <nafm-header navClass="nafmii-head-bg3">
+      <template slot="bottom">
+        <SearchInput :placeholder="$t('home.searchPlaceholder')" />
+        <div class="nav-placeholder"></div>
+      </template>
+    </nafm-header>
+    <van-tabs v-model="active" animated scrollspy class="news-tabs">
+      <van-tab :title="item.name" v-for="(item,idx) in tabs" :key="idx">
+        <DataListLayout :tab="item" />
+      </van-tab>
+    </van-tabs>
+  </div>
+</template>
+
+<script>
+import SearchInput from '@/components/SearchInput'
+import DataListLayout from './components/DataListLayout'
+export default {
+  name: 'News',
+  components: { SearchInput, DataListLayout },
+  data () {
+    return {
+      active: 0,
+      tabs: []
+    }
+  },
+  methods: {
+    onGetTabs () {
+      this.tabs = [
+        { type: 1, name: '全部' },
+        { type: 2, name: '公告' },
+        { type: 3, name: '通知' },
+        { type: 4, name: '其他' },
+      ]
+    }
+  },
+  mounted () {
+    this.onGetTabs()
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@PlaceholderHeight: 40px;
+.news {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .nav-placeholder {
+    height: @PlaceholderHeight;
+    width: 100%;
+  }
+  .news-tabs {
+    flex: 1;
+    z-index: 10;
+    margin-top: calc(-@PlaceholderHeight);
+    display: flex;
+    flex-direction: column;
+    /deep/.van-tabs__wrap {
+      height: @PlaceholderHeight;
+      .van-tabs__nav {
+        background: transparent;
+
+        .van-tab {
+          font-size: 15px;
+          color: white;
+        }
+        .van-tab--active {
+          color: white;
+          font-size: 19px;
+        }
+        .van-tabs__line {
+          background: white;
+          bottom: 5px;
+        }
+      }
+    }
+    /deep/.van-tabs__content {
+      flex: 1;
+      .van-tab__pane {
+        height: 100%;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/news/search.vue

+<template>
+  <div class="news-search"></div>
+</template>
+
+<script>
+export default {
+  name: 'NewsSearch'
+}
+</script>
+
+<style lang="less" scoped>
+.news {
+}
+</style>
\ No newline at end of file