|
|
@@ -51,9 +51,9 @@
|
|
|
<b-list-group-item
|
|
|
style="font-size:10px"
|
|
|
button
|
|
|
- v-for="item of reportData.reportList.slice((currentPage-1)*perPage,currentPage*perPage)"
|
|
|
+ v-for="item of listData.current.slice((currentPage-1)*perPage,currentPage*perPage)"
|
|
|
:key="item.id"
|
|
|
- @click="showReportDetail(item.id)"
|
|
|
+ @click="showMsgDetail(item.id)"
|
|
|
>
|
|
|
<tr>
|
|
|
<td class="font-weight-bold">
|
|
|
@@ -66,15 +66,48 @@
|
|
|
</div>
|
|
|
|
|
|
<!-- 分页栏 -->
|
|
|
- <div class="mt-2" id='pagin-div'>
|
|
|
+ <div id='pagin-div'>
|
|
|
<b-pagination
|
|
|
- v-model="currentPage"
|
|
|
+ pagination-small
|
|
|
pills
|
|
|
+ v-model="currentPage"
|
|
|
:total-rows="rows"
|
|
|
:per-page="perPage"
|
|
|
- align="center">
|
|
|
+ align="center" class="mt-0 mb-1">
|
|
|
</b-pagination>
|
|
|
+ <!-- <el-row type="flex" class="row-bg" justify="center">
|
|
|
+ <el-pagination
|
|
|
+ :hide-on-single-page="value"
|
|
|
+ :total="5"
|
|
|
+ layout="prev, pager, next">
|
|
|
+ </el-pagination>
|
|
|
+ </el-row> -->
|
|
|
</div>
|
|
|
+
|
|
|
+ <hr class="mt-0 mb-2"/>
|
|
|
+
|
|
|
+ <!-- 标签栏（按钮） -->
|
|
|
+ <div style="text-align:center; margin-bottom: 10px" id='list-btn-div'>
|
|
|
+ <!-- <b-button size="sm" pill variant="outline-success" @click="getNoticeList()">通知</b-button>
|
|
|
+ <b-button size="sm" pill variant="outline-success" @click="getReportList()">报道</b-button>
|
|
|
+ <b-button size="sm" pill variant="outline-success" @click="getCultureList()">文化</b-button>
|
|
|
+ <b-button size="sm" pill variant="outline-success" @click="getOthersList()">更多</b-button> -->
|
|
|
+ <b-form-radio-group
|
|
|
+ id="btn-radios-2"
|
|
|
+ v-model="selected"
|
|
|
+ buttons
|
|
|
+ button-variant="outline-primary"
|
|
|
+ size="sm"
|
|
|
+ name="radio-btn-outline"
|
|
|
+ >
|
|
|
+ <template v-for="option in options">
|
|
|
+ <b-form-radio :value="option.value" :key="option.text" class="rounded-pill mx-1"
|
|
|
+ @change="updateList(option.value)">
|
|
|
+ {{ option.text }}
|
|
|
+ </b-form-radio>
|
|
|
+ </template>
|
|
|
+ </b-form-radio-group>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -94,9 +127,26 @@ export default {
|
|
|
midHeight: window.screen.height * 0.32, // 底部栏中等高度
|
|
|
isExpand: false, // 底部栏伸缩状态
|
|
|
expandClass: 1, // 底部栏拉伸等级，0为最小，1为中，2为最大
|
|
|
- reportData: {
|
|
|
- reportList: [] // 通知列表数据
|
|
|
+
|
|
|
+ selected: 'radio1',
|
|
|
+ options: [
|
|
|
+ { text: '通知', value: 'radio1' },
|
|
|
+ { text: '报道', value: 'radio2' },
|
|
|
+ { text: '文化', value: 'radio3' },
|
|
|
+ { text: '更多', value: 'radio4' }
|
|
|
+ ],
|
|
|
+
|
|
|
+ // 列表数据
|
|
|
+ listData: {
|
|
|
+ current: [], // 当前，为以下4组数据之一
|
|
|
+ notice: [], // 通知
|
|
|
+ report: [], // 报道
|
|
|
+ culture: [], // 文化
|
|
|
+ others: [] // 更多
|
|
|
},
|
|
|
+
|
|
|
+ currentMsgType: 'notice', // 通知列表当前显示的类型 0通知；1报道；2文化；3更多
|
|
|
+
|
|
|
currentPage: 1, // 通知列表当前页数
|
|
|
resetListener: true // 重置监听器的开关
|
|
|
}
|
|
|
@@ -180,6 +230,19 @@ export default {
|
|
|
resize.addEventListener('touchend', touchEnd, false)
|
|
|
},
|
|
|
|
|
|
+ // 获取通知列表
|
|
|
+ getNoticeList: function () {
|
|
|
+ var that = this
|
|
|
+ this.$axios
|
|
|
+ .get('/notice/list')
|
|
|
+ .then(function (response) {
|
|
|
+ that.listData.notice = response.data
|
|
|
+ // 浅拷贝到当前的通知列表数组
|
|
|
+ that.listData.current = JSON.parse(JSON.stringify(that.listData.notice))
|
|
|
+ that.currentMsgType = 'notice'
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
/**
|
|
|
* @description:获取报道列表数据
|
|
|
* @returns {void}
|
|
|
@@ -189,16 +252,71 @@ export default {
|
|
|
this.$axios
|
|
|
.get('/report/list')
|
|
|
.then(function (response) {
|
|
|
- that.reportData.reportList = response.data
|
|
|
+ that.listData.report = response.data
|
|
|
+ // 浅拷贝到当前的通知列表数组
|
|
|
+ that.listData.current = JSON.parse(JSON.stringify(that.listData.report))
|
|
|
+ that.currentMsgType = 'report'
|
|
|
})
|
|
|
},
|
|
|
|
|
|
+ /**
|
|
|
+ * @description:获取文化列表数据
|
|
|
+ */
|
|
|
+ getCultureList: function () {
|
|
|
+ var that = this
|
|
|
+ this.$axios
|
|
|
+ .get('/culture/list')
|
|
|
+ .then(function (response) {
|
|
|
+ that.listData.culture = response.data
|
|
|
+ // 浅拷贝到当前的通知列表数组
|
|
|
+ that.listData.current = JSON.parse(JSON.stringify(that.listData.culture))
|
|
|
+ that.currentMsgType = 'culture'
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * @description:获取更多列表数据
|
|
|
+ */
|
|
|
+ getOthersList: function () {
|
|
|
+ var that = this
|
|
|
+ this.$axios
|
|
|
+ .get('/others/list')
|
|
|
+ .then(function (response) {
|
|
|
+ that.listData.others = response.data
|
|
|
+ // 浅拷贝到当前的通知列表数组
|
|
|
+ that.listData.current = JSON.parse(JSON.stringify(that.listData.others))
|
|
|
+ that.currentMsgType = 'others'
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 按钮点击事件，更新列表
|
|
|
+ updateList: function (value) {
|
|
|
+ switch (value) {
|
|
|
+ case 'radio1':
|
|
|
+ this.getNoticeList()
|
|
|
+ break
|
|
|
+ case 'radio2':
|
|
|
+ this.getReportList()
|
|
|
+ break
|
|
|
+ case 'radio3':
|
|
|
+ this.getCultureList()
|
|
|
+ break
|
|
|
+ case 'radio4':
|
|
|
+ this.getOthersList()
|
|
|
+ break
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
/**
|
|
|
* @description:将id值传给map.vue进行信息提取与渲染
|
|
|
* @param {number} id:报道的id值
|
|
|
*/
|
|
|
- showReportDetail: function (id) {
|
|
|
- bus.$emit('showReportDetail', id)
|
|
|
+ showMsgDetail: function (id) {
|
|
|
+ let that = this
|
|
|
+ bus.$emit('showMsgDetail', {
|
|
|
+ id: id,
|
|
|
+ type: that.currentMsgType
|
|
|
+ })
|
|
|
this.resetListener = false
|
|
|
this.expandClass = 0
|
|
|
},
|
|
|
@@ -209,7 +327,7 @@ export default {
|
|
|
setSize: function () {
|
|
|
let max = this.maxHeight
|
|
|
let el = document.getElementById('list-div')
|
|
|
- el.style.height = max - 24 - 34 - 16 + 'px'
|
|
|
+ el.style.height = max - 110 + 'px'
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
@@ -290,7 +408,7 @@ export default {
|
|
|
* @description: 通知列表总数目
|
|
|
*/
|
|
|
rows: function () {
|
|
|
- return this.reportData.reportList.length
|
|
|
+ return this.listData.notice.length
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
@@ -307,6 +425,7 @@ export default {
|
|
|
return Math.floor((this.maxHeight - 34 - 16 - 24) / 42)
|
|
|
}
|
|
|
},
|
|
|
+
|
|
|
filters: {
|
|
|
/**
|
|
|
* @description:过滤器，超过16位显示省略号
|
|
|
@@ -319,9 +438,10 @@ export default {
|
|
|
return value
|
|
|
}
|
|
|
},
|
|
|
+
|
|
|
mounted () {
|
|
|
this.heightListener('mobilebarBox')
|
|
|
- this.getReportList()
|
|
|
+ this.getNoticeList()
|
|
|
this.setSize()
|
|
|
this.busOnAction()
|
|
|
}
|
|
|
@@ -378,4 +498,5 @@ export default {
|
|
|
#mobilebarBox {
|
|
|
border-radius: 7px;
|
|
|
}
|
|
|
+
|
|
|
</style>
|
