refactor: 手机端-标准化动态重构-增加下拉加载功能

This commit is contained in:
zyn
2023-11-27 11:26:53 +08:00
parent 88706b6127
commit 4341b0603a
8 changed files with 744 additions and 0 deletions
@@ -0,0 +1,156 @@
<template>
<div class="root">
<div style="padding: 10px 12px 0;text-align: right">
<van-icon name="filter-o" color="#000" size="20px" style="margin-right: 20px" @click="onOpen" />
</div>
<PhoneScroll
height="calc(100vh - 131px)"
:data="list"
:total="total"
:loading="loading"
:pullingUpHandler="pullingUpHandler">
<div class="card-content" v-for="item in list" :key="item.id" @click="jumpDetails(item)">
<div class="standTitle">
<div class="title">
{{ item.dataTitle && item.dataTitle.length > 40 ? item.dataTitle.slice(0, 39) + "..." : item.dataTitle }}
</div>
</div>
<div class="standContent">
<div class="standState">类型:
<span style="color: #35720B; padding-left: 5px;">
{{ item.dataType && item.dataType.length > 30 ? item.dataType.slice(0, 29) + "..." : item.dataType }}
</span>
</div>
<div class="standSubTime">上传时间:
<span style="padding-left: 5px;">
{{ $moment(item.dataUploadTime).format("YYYY-MM-DD HH:mm:ss") }}
</span>
</div>
</div>
</div>
</PhoneScroll>
<folderPopup ref="folderPopupRef" @checked="setChecked" />
</div>
</template>
<script>
import folderPopup from "./folderPopup";
import PhoneScroll from "@/components/hzwlComponents/phone/PhoneScroll";
export default {
name: "DataCenter",
components: {
folderPopup,
PhoneScroll
},
data () {
return {
searchQuery: {
page: 1,
pageSize: 10,
treeId: ''
},
total: 0,
list: [],
loading: false,
}
},
created() {
this.getData()
},
methods: {
pullingUpHandler () {
if (this.searchQuery.page * this.searchQuery.pageSize <= this.total) {
this.searchQuery.page = this.searchQuery.page + 1
this.getData()
}
},
onOpen () {
this.$refs.folderPopupRef.open(this.searchQuery.treeId || null)
},
setChecked (currentData) {
this.currentSearch = currentData
this.searchQuery.treeId = currentData.id || ''
this.searchQuery.page = 1
this.getData()
},
getData () {
const config = {
_this: this,
loading: 'loading'
}
this.$http._getData('fileMaterialCenter/file-material', this.searchQuery, config).then(res => {
if (res.ok) {
this.total = res.data.total
if (this.searchQuery.page === 1) {
this.list = res.data.records
} else {
this.list = [...this.list, ...res.data.records]
}
}
})
},
jumpDetails(item) {
this.$router.push({
name: "zlzxDetails",
query: {
id: item.id
}
});
},
}
}
</script>
<style scoped lang="less">
.root {
height: 100%;
}
.scroll-wrapper {
height: calc(100vh - 131px);
overflow: hidden;
position: relative;
}
.card-content {
width: 95%;
height: auto;
margin: 10px;
background-color: #FFFFFF;
border-radius: 5px;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
.standTitle {
.title {
font-size: 3.4vw;
color: #333333;
font-weight: 600;
height: auto;
line-height: 20px;
padding: 5px 10px;
text-align: left;
border-bottom: 1px solid #cccccc;
}
}
.standContent {
font-size: 3.4vw;
color: #555555;
font-weight: 450;
margin-top: 5px;
.standState {
padding-left: 10px;
height: 35px;
line-height: 35px;
}
.standSubTime {
font-size: 3.4vw;
padding-left: 10px;
height: 35px;
line-height: 35px;
}
}
}
</style>
@@ -0,0 +1,187 @@
<template>
<div class="root">
<div style="padding: 10px 12px 0;text-align: right">
<van-icon name="filter-o" color="#000" size="20px" style="margin-right: 20px" @click="onOpen" />
</div>
<div class="scroll-wrapper" ref="scroll">
<div class="scroll-content" ref="content">
<div class="card-content" v-for="item in standardReleaseList" :key="item.id">
<div class="standTitle">
<div class="title">
{{ item.dataTitle && item.dataTitle.length > 40 ? item.dataTitle.slice(0, 39) + "..." : item.dataTitle }}
</div>
</div>
<div class="standContent">
<div class="standState">类型:
<span style="color: #35720B; padding-left: 5px;">
{{ item.dataType && item.dataType.length > 30 ? item.dataType.slice(0, 29) + "..." : item.dataType }}
</span>
</div>
<div class="standSubTime">上传时间:
<span style="padding-left: 5px;">
{{ $moment(item.dataUploadTime).format("YYYY-MM-DD HH:mm:ss") }}
</span>
</div>
</div>
</div>
<van-loading
v-if="loading"
type="spinner"
size="16px"
text-size="12px"
color="#3170A8"
style="text-align: center"
>加载中...</van-loading>
<div v-if="toEnd && total > 0" style="font-size: 12px;text-align: center;color: #999">暂无更多数据</div>
<van-empty v-if="total === 0" description="暂无数据" />
</div>
</div>
<folderPopup ref="folderPopupRef" @checked="setChecked" />
</div>
</template>
<script>
import BScroll from '@better-scroll/core'
import ScrollBar from '@better-scroll/scroll-bar'
import Pullup from '@better-scroll/pull-up'
import folderPopup from "./folderPopup";
BScroll.use(ScrollBar)
BScroll.use(Pullup)
export default {
name: "DataCenter",
components: {
folderPopup
},
data () {
return {
searchQuery: {
page: 1,
pageSize: 10,
treeId: ''
},
total: 0,
standardReleaseList: [],
loading: false,
toEnd: false,
}
},
created() {
this.getData()
},
methods: {
refreshScroll () {
this.$nextTick(() => {
if (!this.bs) {
this.bs = new BScroll(this.$refs.scroll, {
probeType: 3,
scrollbar: true,
pullUpLoad: {
threshold: 50
},
click: true
})
this.bs.on('pullingUp', () => {
this.pullingUpHandler()
// 结束上拉加载
this.bs.finishPullUp()
})
} else {
this.bs.refresh()
}
})
},
pullingUpHandler () {
if (this.searchQuery.page * this.searchQuery.pageSize >= this.total) {
// 没有更多数据
this.toEnd = true
} else {
this.searchQuery.page = this.searchQuery.page + 1
this.getData()
}
},
onOpen () {
this.$refs.folderPopupRef.open(this.searchQuery.treeId || null)
},
setChecked (currentData) {
this.currentSearch = currentData
this.searchQuery.treeId = currentData.id || ''
this.searchQuery.page = 1
this.getData()
},
getData () {
const config = {
_this: this,
loading: 'loading'
}
this.$http._getData('fileMaterialCenter/file-material', this.searchQuery, config).then(res => {
if (res.ok) {
this.total = res.data.total
if (this.searchQuery.page === 1) {
this.standardReleaseList = res.data.records
} else {
this.standardReleaseList = [...this.standardReleaseList, ...res.data.records]
}
this.refreshScroll()
}
})
}
}
}
</script>
<style scoped lang="less">
.root {
height: 100%;
}
.scroll-wrapper {
height: calc(100vh - 131px);
overflow: hidden;
position: relative;
}
.card-content {
width: 95%;
height: auto;
margin: 10px;
background-color: #FFFFFF;
border-radius: 5px;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
.standTitle {
.title {
font-size: 3.4vw;
color: #333333;
font-weight: 600;
height: auto;
line-height: 20px;
padding: 5px 10px;
text-align: left;
border-bottom: 1px solid #cccccc;
}
}
.standContent {
font-size: 3.4vw;
color: #555555;
font-weight: 450;
margin-top: 5px;
.standState {
padding-left: 10px;
height: 35px;
line-height: 35px;
}
.standSubTime {
font-size: 3.4vw;
padding-left: 10px;
height: 35px;
line-height: 35px;
}
}
}
</style>
@@ -0,0 +1,145 @@
<template>
<PhoneScroll
height="calc(100vh - 131px)"
:data="list"
:total="total"
:loading="loading"
:pullingUpHandler="pullingUpHandler">
<div class="card-content" v-for="item in list" :key="item.id" @click="jumpDetails(item)">
<div class="standTitle">
<div class="title">{{ item.standardName }}</div>
</div>
<div class="standContent">
<div class="standState">标准状态:
<span style="color: #35720B; padding-left: 5px;">
{{ dict.WBZTCLASS && dict.WBZTCLASS.find(i => i.value === item.textState).label || '-' }}
</span>
</div>
<div class="standSubTime">发布日期:
<span style="padding-left: 5px;">{{ item.releaseDate }}</span>
</div>
</div>
</div>
</PhoneScroll>
</template>
<script>
import PhoneScroll from "@/components/hzwlComponents/phone/PhoneScroll";
export default {
name: "StandardRegulations",
components: {
PhoneScroll
},
data() {
return {
searchQuery: {
page: 1,
pageSize: 10,
messageType: 'GNWBZFG'
},
total: 0,
list: [],
loading: false,
dict: {}
}
},
created() {
this.getDicTypeListCode()
this.getData()
},
methods: {
pullingUpHandler () {
if (this.searchQuery.page * this.searchQuery.pageSize <= this.total) {
this.searchQuery.page = this.searchQuery.page + 1
this.getData()
}
},
getData () {
const config = {
_this: this,
loading: 'loading'
}
this.$http._getData("lawss/NewsFeed/getNewsFeed", this.searchQuery, config).then(res => {
if (res.ok) {
this.total = res.data.total
if (this.searchQuery.page === 1) {
this.list = res.data.records
} else {
this.list = [...this.list, ...res.data.records]
}
}
})
},
getDicTypeListCode () {
this.$http._getData('sys/dictype/getDicTypeListCode').then(res => {
this.dict = {...res.data}
})
},
jumpDetails(item) {
this.$router.push({
name: "domesticDetails",
query: {
id: item.standardId,
pageType: "INLAND_STAND"
}
});
}
}
}
</script>
<style scoped lang="less">
.root {
height: 100%;
}
.scroll-wrapper {
height: calc(100vh - 131px);
overflow: hidden;
position: relative;
}
.card-content {
width: 95%;
height: auto;
margin: 10px;
background-color: #FFFFFF;
border-radius: 5px;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
.standTitle {
.title {
font-size: 3.4vw;
color: #333333;
font-weight: 600;
height: auto;
line-height: 20px;
padding: 5px 10px;
text-align: left;
border-bottom: 1px solid #cccccc;
}
}
.standContent {
font-size: 3.4vw;
color: #555555;
font-weight: 450;
margin-top: 5px;
.standState {
padding-left: 10px;
height: 35px;
line-height: 35px;
}
.standSubTime {
font-size: 3.4vw;
padding-left: 10px;
height: 35px;
line-height: 35px;
}
}
}
</style>
@@ -0,0 +1,145 @@
<template>
<PhoneScroll
height="calc(100vh - 131px)"
:data="list"
:total="total"
:loading="loading"
:pullingUpHandler="pullingUpHandler">
<div class="card-content" v-for="item in list" :key="item.id" @click="jumpDetails(item)">
<div class="standTitle">
<div class="title">{{ item.standardName }}</div>
</div>
<div class="standContent">
<div class="standState">标准状态:
<span style="color: #35720B; padding-left: 5px;">
{{ dict.WBZTCLASS && dict.WBZTCLASS.find(i => i.value === item.textState).label || '-' }}
</span>
</div>
<div class="standSubTime">发布日期:
<span style="padding-left: 5px;">{{ item.releaseDate }}</span>
</div>
</div>
</div>
</PhoneScroll>
</template>
<script>
import PhoneScroll from "@/components/hzwlComponents/phone/PhoneScroll";
export default {
name: "UnderResearchStandards",
components: {
PhoneScroll
},
data() {
return {
searchQuery: {
page: 1,
pageSize: 10,
messageType: 'ZYBZFG'
},
total: 0,
list: [],
loading: false,
dict: {}
}
},
created() {
this.getDicTypeListCode()
this.getData()
},
methods: {
pullingUpHandler () {
if (this.searchQuery.page * this.searchQuery.pageSize <= this.total) {
this.searchQuery.page = this.searchQuery.page + 1
this.getData()
}
},
getData () {
const config = {
_this: this,
loading: 'loading'
}
this.$http._getData("lawss/NewsFeed/getNewsFeed", this.searchQuery, config).then(res => {
if (res.ok) {
this.total = res.data.total
if (this.searchQuery.page === 1) {
this.list = res.data.records
} else {
this.list = [...this.list, ...res.data.records]
}
}
})
},
getDicTypeListCode () {
this.$http._getData('sys/dictype/getDicTypeListCode').then(res => {
this.dict = {...res.data}
})
},
jumpDetails(item) {
this.$router.push({
name: "domesticDetails",
query: {
id: item.standardId,
pageType: "INLAND_STAND"
}
});
}
}
}
</script>
<style scoped lang="less">
.root {
height: 100%;
}
.scroll-wrapper {
height: calc(100vh - 131px);
overflow: hidden;
position: relative;
}
.card-content {
width: 95%;
height: auto;
margin: 10px;
background-color: #FFFFFF;
border-radius: 5px;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
.standTitle {
.title {
font-size: 3.4vw;
color: #333333;
font-weight: 600;
height: auto;
line-height: 20px;
padding: 5px 10px;
text-align: left;
border-bottom: 1px solid #cccccc;
}
}
.standContent {
font-size: 3.4vw;
color: #555555;
font-weight: 450;
margin-top: 5px;
.standState {
padding-left: 10px;
height: 35px;
line-height: 35px;
}
.standSubTime {
font-size: 3.4vw;
padding-left: 10px;
height: 35px;
line-height: 35px;
}
}
}
</style>
+108
View File
@@ -0,0 +1,108 @@
<!--全库检索-->
<template>
<div id="standDynamics">
<div class="search-head">
<div class="head-title">
<span class="left-title" @click="back"> < </span>
<span class="right-title">标准化动态</span>
</div>
<van-tabs v-model="active">
<van-tab name="ZYBZFG" title="在研标准入库">
<UnderResearchStandards v-if="active==='ZYBZFG'"></UnderResearchStandards>
</van-tab>
<van-tab name="GNWBZFG" title="标准法规入库">
<StandardRegulations v-if="active==='GNWBZFG'"></StandardRegulations>
</van-tab>
<van-tab name="ZLZX" title="资料中心">
<DataCenter v-if="active==='ZLZX'"></DataCenter>
</van-tab>
</van-tabs>
</div>
</div>
</template>
<script>
import UnderResearchStandards from "./components/UnderResearchStandards";
import StandardRegulations from "./components/StandardRegulations";
import DataCenter from "./components/DataCenter";
export default {
name: "standDynamics",
components: {
UnderResearchStandards,
StandardRegulations,
DataCenter
},
data() {
return {
active: "ZYBZFG",
};
},
methods: {
//返回上一个页面
back() {
this.$router.push("/phoneHome");
},
},
};
</script>
<style lang="less" scoped>
#standDynamics {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: #F6F6F6;
.search-head {
width: 100%;
height: 100px;
background: #3170A8;
}
.head-title {
color: #FFFFFF;
line-height: 40px;
font-size: 18px;
.left-title {
margin-left: 10px;
}
.right-title {
float: right;
margin-right: 40%;
}
}
.van-tabs {
margin-top: 17px;
}
/deep/ .van-tabs__content {
width: 100%;
height: 95%;
}
.van-tab {
color: #3170A8;
}
/deep/ .van-tab--active {
color: #3170A8;
font-weight: 600;
}
/deep/ .van-tabs__line {
width: 30%;
background-color: #3170A8;
}
/deep/ .van-tab__pane {
height: 95%;
position: fixed;
width: 100%;
}
}
</style>
+3
View File
@@ -105,8 +105,11 @@ const routes = [
{
path: '/standDynamics',
name: 'standDynamics',
component: () => import('@/pages/phone/standDynamics/index')
/*
component: () =>
import('@/pages/phone/standDynamics')
*/
},
{
path: '/domesticStand',