FT/foton-laws-system-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

手机端页面

Browse Source
This commit is contained in:
宋伟佳
2022-06-01 13:17:59 +08:00
parent db199241f8
commit 10752da4b4
6 changed files with 514 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/phone/databaseSearch.vue
+88 -13
View File
@@ -23,7 +23,9 @@
</div>
<div v-else-if="!loading && standList.length" class="card-content" v-for="item in standList" :key="item.id" @click="jumpDetails(item) ">
<div class="standTitle">
<div class="title">{{item.title}}</div>
<div class="title">
<span v-html="item.title"></span>
</div>
</div>
<div class="standContent">
<div class="standState">标准类别:
@@ -38,6 +40,12 @@
<van-empty description="暂无数据" />
</div>
</div>
<div v-if="moreFlag" class="bottom-box">
<div v-if="listFlag && !loading" class="list-box">没有更多数据了...</div>
<div v-else-if="!listFlag && moreFlag" @click="moreList" >点击加载更多</div>
<!-- <van-button v-else-if="!listFlag && moreFlag" @click="moreList" >加载新数据</van-button>-->
<van-loading v-else size="24px" color="#3170A8">加载中...</van-loading>
</div>
</div>
</template>
@@ -48,28 +56,48 @@ export default {
return{
scrolled: '',
moreFlag: false,
loadingFlag: false,
searchKey: '',
standList: [],
loading: true,
listFlag: false,
page: 1,
addFlag: 0,
}
},
watch:{
scrolled:{
handler(val){
if(val === 0){
console.log('滚动条消失');
}
}
},
},
methods: {
scrool(){
let scrolled = this.$refs.cardBox.scrollTop
this.scrolled = this.$refs.cardBox.scrollTop
// console.log(this.scrolled);
//获得可视区的高度
const windowHeight = this.$refs.cardBox.clientHeight
//获取滚动条的总高度
const scrollHeight = this.$refs.cardBox.scrollHeight
let windowScrolled = scrolled + windowHeight
this.scrolled = scrolled
if(scrollHeight - windowScrolled < 600 ){
//把距离顶部的距离加上可视区域的高度 等于或者大于滚动条的总高度就是到达底部
let windowScrolled = this.scrolled + windowHeight
if(scrollHeight - windowScrolled < 100 && this.scrolled !== 0){
//把距离顶部的距离加上可视区域的高度
this.moreFlag = true
this.page++
}else{
this.moreFlag = false
}
},
onSearch(){
moreList(){
this.moreFlag = false
this.loadingFlag = true
this.page++
this.standSearch()
},
standSearch(){
this.listFlag = false
this.moreFlag = false
this.$http.post('search/searchCenter/searchSarBykey',{
selectIndex: 'fulltextserch',
@@ -80,12 +108,36 @@ export default {
},{
_this: this,
}, res => {
if(this.standList.length){
this.standList = this.standList.concat(res.data.list)
if(res.data.list.length){
if(this.standList.length){
this.standList = this.standList.concat(res.data.list)
}else{
this.standList = res.data.list
}
this.loading = false
}else{
this.standList = res.data.list
this.listFlag = true
}
console.log(this.standList);
}, e => {
console.log(e)
})
},
//点击搜索触发事件
onSearch(){
this.moreFlag = false
this.loading = true
this.standList = []
this.page = 1
this.$http.post('search/searchCenter/searchSarBykey',{
selectIndex: 'fulltextserch',
selectValue: this.searchKey,
selectType: 'titleSearch',
page: this.page,
pageSize: 20
},{
_this: this,
}, res => {
this.standList = res.data.list
this.loading = false
}, e => {
console.log(e)
@@ -107,7 +159,7 @@ export default {
},
mounted(){
this.searchKey = this.$route.query.searchKey
this.onSearch()
this.standSearch()
this.$refs.cardBox.addEventListener('scroll', this.scrool);
},
};
@@ -205,5 +257,28 @@ export default {
top: 40%;
left: 37%;
}
.bottom-box{
height: 40px;
width: 91%;
position: absolute;
bottom: 0;
text-align: center;
color: #3170A8;
.list-box{
color: #3170A8;
text-align: center;
}
.van-loading {
position: absolute;
left: 37%;
}
}
.card-content:last-child{
margin-bottom: 30px;
}
.van-button--normal{
float: left;
margin-left: 35%;
}
}
</style>
src/pages/phone/domesticStand.vue
+186 -9
View File
@@ -17,14 +17,15 @@
</template>
</van-search>
</div>
<div class="card-box">
<div class="card-box" ref="cardBox" @scroll="scrool">
<div v-if="loading">
<van-loading size="24px" color="#3170A8">加载中...</van-loading>
</div>
<div v-else-if="!loading && standList.length" class="card-content" v-for="item in standList" :key="item.id">
<div class="standTitle">
<div v-if="titleType === 'POLICY'" class="title">{{item.lawsNumber}}</div>
<div v-else class="title">{{item.standSortShow + '&nbsp&nbsp' + item.standNumber + '-' + item.standYear }}</div>
<div v-else-if="titleType !== 'POLICY' && item.standYear" class="title">{{item.standSortShow + '&nbsp&nbsp' + item.standNumber + '-' + item.standYear }}</div>
<div v-else class="title">{{item.standSortShow + '&nbsp&nbsp' + item.standNumber }}</div>
</div>
<div class="standContent">
<div class="standState">{{item.standName}}</div>
@@ -63,6 +64,17 @@
<span v-else style=" padding-left: 5px;">
{{ textStatusMap[item.textStatus] }}
</span>
<!-- <span v-if="item.textStatusName === '废止' || item.textStatusName === '被代替'"-->
<!-- style="color: #F56C6C; padding-left: 5px;">-->
<!-- {{item.textStatusName}}-->
<!-- </span>-->
<!-- <span v-else-if="item.textStatusName === '参考' || item.textStatusName === '现行有效'"-->
<!-- style="color: #98E165; padding-left: 5px;">-->
<!-- {{item.textStatusName }}-->
<!-- </span>-->
<!-- <span v-else style=" padding-left: 5px;">-->
<!-- {{ item.textStatusName }}-->
<!-- </span>-->
</div>
</div>
<div class="content-time">
@@ -79,6 +91,11 @@
<van-empty description="暂无数据" />
</div>
</div>
<div v-if="moreFlag" class="bottom-box">
<div v-if="listFlag && !loading" class="list-box">没有更多数据了...</div>
<div v-else-if="!listFlag && moreFlag" @click="moreList" >点击加载更多</div>
<van-loading v-else size="24px" color="#3170A8">加载中...</van-loading>
</div>
</div>
</template>
@@ -87,10 +104,15 @@ export default {
name: "domesticStand",
data(){
return{
scrolled: '',
moreFlag: false,
loadingFlag: false,
listFlag: false,
searchKey: '',
titleType: '',
titleName: '',
loading: true,
page: 1,
standList: [],
standStateOptions: [], //标准文本状态
lawsTextStateOptions: [], //政策文本状态
@@ -101,10 +123,35 @@ export default {
}
},
methods:{
scrool(){
this.scrolled = this.$refs.cardBox.scrollTop
//获得可视区的高度
const windowHeight = this.$refs.cardBox.clientHeight
//获取滚动条的总高度
const scrollHeight = this.$refs.cardBox.scrollHeight
let windowScrolled = this.scrolled + windowHeight
if(scrollHeight - windowScrolled < 100 && this.scrolled !== 0){
//把距离顶部的距离加上可视区域的高度
this.moreFlag = true
}else{
this.moreFlag = false
}
},
moreList(){
this.moreFlag = false
this.loadingFlag = true
this.page++
this.standSearch()
},
onSearch(){
this.moreFlag = false
this.loading = true
this.standList = []
this.page = 1
if(this.titleType === 'INLAND'){
this.$http.get('sarStandardsInfo/sar-standards-info/getSarStandardsInfoPage',{
page: 1,
page: this.page,
standNumber: this.searchKey,
pageSize: 20,
standType: 'INLAND'
},{
@@ -122,6 +169,7 @@ export default {
this.$http.get('sarStandardsInfo/sar-standards-info/getSarStandardsInfoPage',{
page: 1,
pageSize: 20,
standNumber: this.searchKey,
standType: 'FOREIGN'
},{
_this: this
@@ -134,16 +182,115 @@ export default {
}
},e=>{
})
}else if(this.titleType === 'POLICY'){
this.$http.get('lawss/sarLawsInfo/page',{
page: 1,
pageSize: 20,
lawsNumber: this.searchKey,
},{
_this: this
}, res => {
if (res.ok){
this.standList = res.data.list
this.loading = false
}else {
this.$message.error(res.message)
}
}, e =>{
console.log(e);
})
}else{
this.$http.get("/lawss/NewsFeed/getNewsFeed", {
messageType: 'ZYBZFG',
standard: this.searchKey,
page: 1,
paeSize: 10
}, {
_this: this
}, res => {
if (res.ok){
this.standList = res.data
this.loading = false
}else {
this.$message.error(res.message)
}
}, e => {
console.log(e);
});
}
},
standSearch(){
this.listFlag = false
this.moreFlag = false
if(this.titleType === 'INLAND'){
this.$http.get('sarStandardsInfo/sar-standards-info/getSarStandardsInfoPage',{
page: this.page,
pageSize: 20,
standNumber: this.searchKey,
standType: 'INLAND'
},{
_this: this
},res=>{
if (res.ok){
if(res.data.list.length){
if(this.standList.length){
this.standList = this.standList.concat(res.data.list)
}else{
this.standList = res.data.list
}
this.loading = false
}else{
this.listFlag = true
}
}else {
this.$message.error(res.message)
}
},e=>{
})
}else if(this.titleType === 'FOREIGN'){
this.$http.get('sarStandardsInfo/sar-standards-info/getSarStandardsInfoPage',{
page: 1,
pageSize: 20,
standNumber: this.searchKey,
standType: 'FOREIGN'
},{
_this: this
},res=>{
if (res.ok){
if(res.data.list.length){
if(this.standList.length){
this.standList = this.standList.concat(res.data.list)
}else{
this.standList = res.data.list
}
this.loading = false
}else{
this.listFlag = true
}
}else {
this.$message.error(res.message)
}
},e=>{
})
}else if(this.titleType === 'POLICY'){
this.$http.get('lawss/sarLawsInfo/page',{
lawsNumber: this.searchKey,
page: 1,
pageSize: 20,
},{
_this: this
}, res => {
if (res.ok){
this.standList = res.data.list
this.loading = false
if(res.data.list.length){
if(this.standList.length){
this.standList = this.standList.concat(res.data.list)
}else{
this.standList = res.data.list
}
this.loading = false
}else{
this.listFlag = true
}
}else {
this.$message.error(res.message)
}
@@ -153,14 +300,23 @@ export default {
}else{
this.$http.get("/lawss/NewsFeed/getNewsFeed", {
messageType: 'ZYBZFG',
standard: this.searchKey,
page: 1,
paeSize: 10
}, {
_this: this
}, res => {
if (res.ok){
this.standList = res.data
this.loading = false
if(res.data.length){
if(this.standList.length){
this.standList = this.standList.concat(res.data)
}else{
this.standList = res.data
}
this.loading = false
}else{
this.listFlag = true
}
}else {
this.$message.error(res.message)
}
@@ -193,7 +349,8 @@ export default {
mounted() {
this.titleType = this.$route.query.standType
this.titleName = this.titleType === 'INLAND' ? '国内标准法规库' : (this.titleType === 'FOREIGN' ? '海外标准法规库' : this.titleType === 'POLICY' ? '国内外政策库' : '标准化动态库' )
this.onSearch()
this.standSearch()
this.$refs.cardBox.addEventListener('scroll', this.scrool);
//从数据库中查询下拉框数据
this.$http.get("sys/dictype/getDicTypeListCode", {}, {
_this: this
@@ -249,8 +406,9 @@ export default {
color: #FFFFFF;
}
.card-box{
height: 100%;
height: 85%;
position: relative;
overflow-y: scroll;
top: 100px;
}
.card-content{
@@ -298,6 +456,25 @@ export default {
top: 40%;
left: 37%;
}
.bottom-box{
height: 40px;
width: 91%;
position: absolute;
bottom: 0;
text-align: center;
color: #3170A8;
.list-box{
color: #3170A8;
text-align: center;
}
.van-loading {
position: absolute;
left: 37%;
}
}
.card-content:last-child{
margin-bottom: 30px;
}
}
</style>