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/personal/pages/my-questions/components/questionItemInfo.vue
+33
View File
@@ -0,0 +1,33 @@
<!--回答框-->
<template>
<div id="answer-item">
<div>
<div class="row">
<div class="item">
<div>回答：
<span>{{question.question}}</span>
</div>
</div>
</div>
<div class="row">
<div class="item">
<div>{{question.person}}
<span>{{question.modifyTime}}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "questionItemInfo"
};
</script>
<style lang="less" scoped>
#answer-item{
}
</style>
src/pages/personal/pages/my-questions/components/questions-item.vue
+20 -31
View File
@@ -1,24 +1,22 @@
<!--问题项的描述-->
<!--问题的描述-->
<template>
<div id="questions-item">
<div>
<div class="row">
<div class="item">
<span>{{question.modifyTime}}</span>
</div>
<div class="item" style="padding-left: 10px;">
<span>{{ resType }}</span>
</div>
</div>
<div class="row" style="margin-top: 10px">
<div class="item">
<span>{{question.resCode}}</span>
<div>
<div class="row">
<div class="item">
<div>提问：
<span>{{question.question}}</span>
</div>
<div class="item" style="padding-left: 10px">
<span>{{question.content}}</span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="item">
<div>{{question.person}}
<span>{{question.modifyTime}}</span>
</div>
</div>
</div>
</div>
</div>
</template>
@@ -27,15 +25,6 @@ export default {
name: "questions-item",
props: ['question'],
computed: {
resType() {
const matcher = {
INLAND_STAND: '国内标准',
FOREIGN_STAND: '国外标准',
FOREIGN_LAWS: '国内外政策',
BUSINESS: '企业标准'
}
return matcher[this.question.resType]
}
},
data(){
return{
@@ -45,8 +34,8 @@ export default {
question: {
immediate: true,
deep: true,
handler(val) {
this.question = val
handler(val){
console.log(val);
}
}
}
@@ -56,10 +45,10 @@ export default {
<style lang="less" scoped>
#questions-item{
width: 100%;
min-width: 130px;
padding:10px 0;
.row {
line-height: 1.2;
line-height: 1.8;
}
.item {
display: inline-block;
src/pages/personal/pages/my-questions/components/stand-item.vue
+54
View File
@@ -0,0 +1,54 @@
<!--标准的描述-->
<template>
<div id="stand-item">
<div>
<div class="row">
<div class="item">
<span>{{stand.resCode}}</span>
</div>
</div>
<div class="row">
<div class="item">
<span>{{stand.resName}}</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "stand-item",
props: ['stand'],
computed: {
},
data(){
return{
}
},
watch:{
stand: {
immediate: true,
deep: true,
handler(val) {
console.log(val);
this.stand = val
}
}
}
};
</script>
<style lang="less" scoped>
#stand-item{
width: 100%;
min-width: 130px;
padding:10px 0;
.row {
line-height: 1.5;
}
.item {
display: inline-block;
}
}
</style>
src/pages/personal/pages/my-questions/index.vue
+133 -60
View File
@@ -23,63 +23,108 @@
</el-form-item>
</el-form>
</div>
<el-tabs
type="border-card"
style="height: 100%"
class="type-tabs"
tab-position="left"
>
<el-tab-pane label="我的提问">
<div style="height: 100%">
<el-tabs
class="question-tabs"
type="border-card"
style="height: 100%"
tab-position="left">
<el-tab-pane label="国内标准">
<el-tabs
class="question-tabs"
type="border-card"
style="height: 100%"
tab-position="left"
>
<template v-for="question in questionList">
<el-tab-pane class="com-box" :name="question.name">
<template slot="label">
<questonsItem :question="question"></questonsItem>
</template>
</el-tab-pane>
</template>
</el-tabs>
</el-tab-pane>
<el-tab-pane label="海外标准">
</el-tab-pane>
<el-tab-pane label="企业标准">
</el-tab-pane>
<el-tab-pane label="公共问题">
</el-tab-pane>
</el-tabs>
</div>
</el-tab-pane>
<el-tab-pane label="我的回答">
<div>
<div class="tab-box">
<el-tabs
type="border-card"
style="height: 100%"
class="type-tabs"
tab-position="left"
>
<el-tab-pane label="我的提问">
<div style="height: 100%">
<el-tabs
class="question-tabs"
type="border-card"
style="height: 100%"
tab-position="left">
<el-tab-pane label="国内标准">
<div v-if="!standList || standList.length === 0">
<div style="padding: 20px;">
暂无数据
</div>
</div>
<div style="height: 100%" v-else>
<el-tabs
class="question-box"
type="border-card"
style="height: 100%"
tab-position="left"
>
<template v-for="stand in standList">
<el-tab-pane class="com-box" :name="stand.name">
<template slot="label">
<stand-item :stand="stand"></stand-item>
</template>
<div v-if="!questionsList || questionsList.length === 0">
<div style="padding: 20px;">
暂无数据
</div>
</div>
<div style="height: 100%" v-else>
<el-tabs
class="question-box"
type="border-card"
style="height: 100%"
tab-position="left"
>
<template v-for="question in questionsList">
<el-tab-pane class="com-box" :name="question.name">
<template slot="label">
<questions-item :question="question"></questions-item>
</template>
<div class="answer-box" >
<template v-for="(item, index) in questionInfo.qaMsgEOListReverse">
<div class="clearfix">
<div class="item" >
<question-item-info ></question-item-info>
</div>
</div>
</template>
</div>
</el-tab-pane>
</template>
</el-tabs>
</div>
</el-tab-pane>
</template>
</el-tabs>
</div>
</el-tab-pane>
<el-tab-pane label="海外标准">
</el-tab-pane>
<el-tab-pane label="企业标准">
</el-tab-pane>
<el-tab-pane label="公共问题">
</el-tab-pane>
</el-tabs>
</div>
</el-tab-pane>
<el-tab-pane label="我的回答">
<div>
</div>
</el-tab-pane>
<el-tab-pane label="我的订阅">
<div>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="我的订阅">
<div>
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import questonsItem from './components/questions-item'
import questionsItem from './components/questions-item'
import questionItemInfo from "@/pages/personal/pages/my-questions/components/questionItemInfo";
import standItem from './components/stand-item'
export default {
name: "index",
components:{
questonsItem,
questionItemInfo,
questionsItem,
standItem
},
data(){
return{
@@ -88,20 +133,27 @@ export default {
standName: '',
keyCode: '',
},
questionList: [{
title: '问题1',
standList: [
{
name: '1',
content: '问题1的内容',
resCode:'GB 17354-XXXX',
resType: 'FOREIGN_STAND',
resName: '机动车安全运行条件',
}, {
name: '2',
resName: '汽车前后端防护装置',
resCode:'GB 14444-1',
}],
questionsList: [
{
name: '1',
question: '标准何时生效？',
person: this.$store.getters.userInfo.userName,
modifyTime: '2022-03-14 14:40:42',
}, {
title: '问题2',
name: '2',
content: '问题2的内容',
resCode:'GB 14444-1',
resType: 'INLAND_STAND',
modifyTime: '2021-08-35 17:45:49',
person: this.$store.getters.userInfo.userName,
question: '第四条范围何时更改？',
modifyTime: '2022-03-14 14:40:42',
}],
}
},
@@ -111,8 +163,13 @@ export default {
<style lang="less" scoped>
#my-questions{
height: 100%;
display: flex;
flex-direction: column;
background: #F5F7FA;
margin-bottom: 10px;
.tab-box{
height: 100%;
}
.type-tabs {
/deep/.el-tabs__header {
margin-right: 0;
@@ -123,6 +180,9 @@ export default {
height: 100%;
}
}
}
.question-box{
}
.question-tabs {
height: 100%;
@@ -132,10 +192,10 @@ export default {
height: calc(~'100% - 50px');
overflow: auto;
}
/deep/ &.el-tabs--border-card .el-tabs__item {
/deep/ &.el-tabs--border-card .el-tabs__item{
height: 65px;
border-color: #d1dbe5 transparent;
text-align: left;
text-align: left !important;
border-top-color: transparent;
&.is-active {
border-top-color: #d1dbe5;
@@ -155,4 +215,17 @@ export default {
}
}
}
/deep/.el-tabs--left .el-tabs__item.is-left {
text-align: left;
height: auto;
}
.answer-box{
height: auto;
min-height: 200px;
width: 100%;
min-width: 300px;
background: #F5F7FA;
float: right;
margin: 20px 10px 0 80px;
}
</style>
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>