Skip to content

polysoft-nafmii / polysoft-h5

Go to a project
Commit d9bd368e by sunnyfan
Options

fixed conflict

2 parents 63bc3001 b7493e13
Inline Side-by-side
Showing 8 changed files with 334 additions and 2 deletions
src/components/HomeDataListModule.vue
......@@ -5,7 +5,7 @@
<span class="module-name">{{name}}</span>
<span v-if="showTop" class="module-top-btn" @click="$emit('clickTop')">{{$t('home.top')}}</span>
</div>
<div class="module-more" @click="emit('clickMore')">
<div class="module-more" @click="$emit('clickMore')">
<span>{{$t('home.more')}}</span>
<img src="@/assets/icon/more.png" alt="">
</div>
......
src/components/NafmPageList.vue 0 → 100644
<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 0 → 100644
<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
......@@ -7,6 +7,7 @@ import qulificationRouter from './modules/qualification'
import regIssueRouter from './modules/regIssue'
import infoDisclosureRouter from './modules/infoDisclosure'
import homeRouter from './modules/home'
import newsRouter from './modules/news'
import { NativeMenuApi } from '@/api/NativeApis'
const APP_ENV = process.env.VUE_APP_NODE_ENV
......@@ -60,7 +61,7 @@ const routes = [
},
component: () => import(/* webpackChunkName: "PdfViewTwo" */ '@/views/pdf/two.vue') // 首页
}
].concat(userRouter, memberRouter, qulificationRouter, regIssueRouter, infoDisclosureRouter, homeRouter)
].concat(userRouter, memberRouter, qulificationRouter, regIssueRouter, infoDisclosureRouter, homeRouter, newsRouter)
const router = new VueRouter({
routes
......
src/router/modules/news.js 0 → 100644
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 0 → 100644
<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 0 → 100644
<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 0 → 100644
<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
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!