|
@@ -2,7 +2,41 @@
|
|
<div class='comprehensive-matter'>
|
|
<div class='comprehensive-matter'>
|
|
<!-- <van-list v-model='loading' :finished='finished' finished-text='加载到底了' @load='onLoad'>
|
|
<!-- <van-list v-model='loading' :finished='finished' finished-text='加载到底了' @load='onLoad'>
|
|
<van-cell v-for='item in list' :key='item' :title='item' />
|
|
<van-cell v-for='item in list' :key='item' :title='item' />
|
|
- </van-list> -->
|
|
|
|
|
|
+ </van-list>-->
|
|
|
|
+ <div class='time'>
|
|
|
|
+ <van-button round size='small' :class='active === 0?"active":""' @click='changeTime(0)'>一个月内</van-button>
|
|
|
|
+ <van-button round size='small' :class='active === 1?"active":""' @click='changeTime(1)'>半年内</van-button>
|
|
|
|
+ <van-button round size='small' :class='active === 2?"active":""' @click='changeTime(2)'>一年内</van-button>
|
|
|
|
+ <van-button round size='small' :class='active === 3?"active":""' @click='changeTime(3)'>全部</van-button>
|
|
|
|
+ </div>
|
|
|
|
+ <div class='main'>
|
|
|
|
+ <van-list class='matters-list' v-model='loading' :finished='finished' finished-text='没有更多了' :immediate-check='false' @load='onLoad'>
|
|
|
|
+ <div class='container' v-for='(item,index) in 15' :key='index'>
|
|
|
|
+ <div class='government-department' v-if='true'>
|
|
|
|
+ <van-cell :title='`政府部门${index}`' is-link :value='`${index}项`' @click='goToMattersFetail(item)' />
|
|
|
|
+ </div>
|
|
|
|
+ <div class='other-department' v-if='index==4'>
|
|
|
|
+ <van-cell title='其他' :arrow-direction='arrowDirection' is-link @click='changeOtherShowStatus' />
|
|
|
|
+ <div class='other-container' v-show='showOther'>
|
|
|
|
+ <van-cell
|
|
|
|
+ :title='`自定义其他部门${index}`'
|
|
|
|
+ title-class='other-cell'
|
|
|
|
+ :value='`${index}项`'
|
|
|
|
+ is-link
|
|
|
|
+ @click='goToMattersFetail(item)'
|
|
|
|
+ />
|
|
|
|
+ <van-cell
|
|
|
|
+ :title='`自定义其他部门${index}`'
|
|
|
|
+ title-class='other-cell'
|
|
|
|
+ :value='`${index}项`'
|
|
|
|
+ is-link
|
|
|
|
+ @click='goToMattersFetail(item)'
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </van-list>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<script>
|
|
<script>
|
|
@@ -10,22 +44,33 @@
|
|
* 综合事项
|
|
* 综合事项
|
|
*/
|
|
*/
|
|
import Vue from 'vue'
|
|
import Vue from 'vue'
|
|
-import { List, Cell } from 'vant'
|
|
|
|
-Vue.use(List).use(Cell)
|
|
|
|
|
|
+import { List, Cell, Button } from 'vant'
|
|
|
|
+Vue.use(List).use(Cell).use(Button)
|
|
export default {
|
|
export default {
|
|
name: 'ComprehensiveMatter',
|
|
name: 'ComprehensiveMatter',
|
|
props: {},
|
|
props: {},
|
|
components: {},
|
|
components: {},
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
|
|
+ active: 0,
|
|
list: [],
|
|
list: [],
|
|
loading: false,
|
|
loading: false,
|
|
finished: false,
|
|
finished: false,
|
|
|
|
+ page: 1,
|
|
|
|
+ count: 0,
|
|
|
|
+ arrowDirection: 'up', //其他 箭头方向
|
|
|
|
+ showOther: true,
|
|
}
|
|
}
|
|
},
|
|
},
|
|
beforeMount() {},
|
|
beforeMount() {},
|
|
mounted() {},
|
|
mounted() {},
|
|
methods: {
|
|
methods: {
|
|
|
|
+ /**
|
|
|
|
+ * 更改时间
|
|
|
|
+ */
|
|
|
|
+ changeTime(active) {
|
|
|
|
+ this.active = active
|
|
|
|
+ },
|
|
onLoad() {
|
|
onLoad() {
|
|
// 异步更新数据
|
|
// 异步更新数据
|
|
// setTimeout 仅做示例,真实场景中一般为 ajax 请求
|
|
// setTimeout 仅做示例,真实场景中一般为 ajax 请求
|
|
@@ -43,19 +88,107 @@ export default {
|
|
}
|
|
}
|
|
}, 1000)
|
|
}, 1000)
|
|
},
|
|
},
|
|
|
|
+ /**
|
|
|
|
+ * 点击其他右侧上下箭头,显隐其他部门
|
|
|
|
+ */
|
|
|
|
+ changeOtherShowStatus() {
|
|
|
|
+ if (this.showOther) {
|
|
|
|
+ this.showOther = false
|
|
|
|
+ this.arrowDirection = 'down'
|
|
|
|
+ } else {
|
|
|
|
+ this.showOther = true
|
|
|
|
+ this.arrowDirection = 'up'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ /**
|
|
|
|
+ * 跳转 列表页面
|
|
|
|
+ */
|
|
|
|
+ goToMattersFetail(data) {
|
|
|
|
+ this.$router.push({ name: 'ComprehensiveMatterList', params: data })
|
|
|
|
+ },
|
|
},
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
<style lang='less' scoped>
|
|
<style lang='less' scoped>
|
|
.comprehensive-matter {
|
|
.comprehensive-matter {
|
|
width: 100%;
|
|
width: 100%;
|
|
- height: calc(100% - 50px);
|
|
|
|
|
|
+ height: 100%;
|
|
|
|
+ background-color: #f5f6f7;
|
|
overflow: auto;
|
|
overflow: auto;
|
|
- background-color: lightblue;
|
|
|
|
- /deep/.van-list {
|
|
|
|
|
|
+ // 时间切换按钮
|
|
|
|
+ .time {
|
|
width: 100%;
|
|
width: 100%;
|
|
- height: calc(100%- 150px);
|
|
|
|
- background-color: lightgreen;
|
|
|
|
|
|
+ height: 60px;
|
|
|
|
+ padding: 15px;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ align-items: center;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ background-color: #f5f6f7;
|
|
|
|
+ /deep/ .van-button {
|
|
|
|
+ width: 75px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ color: #333333;
|
|
|
|
+ background: #f1f1f1;
|
|
|
|
+ border-radius: 16px;
|
|
|
|
+ border: 1px solid #dcdcdc;
|
|
|
|
+ }
|
|
|
|
+ .active {
|
|
|
|
+ background-color: #025baa !important;
|
|
|
|
+ color: #fff;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .main {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: calc(100% - 60px);
|
|
|
|
+ overflow: auto;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ color: #333333;
|
|
|
|
+ .matters-list {
|
|
|
|
+ width: 100%;
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ overflow: auto;
|
|
|
|
+ .container {
|
|
|
|
+ width: 100%;
|
|
|
|
+ .government-department {
|
|
|
|
+ width: 100%;
|
|
|
|
+ padding: 0 15px;
|
|
|
|
+ }
|
|
|
|
+ /deep/ .van-cell {
|
|
|
|
+ height: 55px;
|
|
|
|
+ border-bottom: 1px solid #e6e6e6;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ padding-left: 0;
|
|
|
|
+ padding-right: 0;
|
|
|
|
+ .van-cell__title {
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ color: #333333;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ // 其他部门
|
|
|
|
+ .other-department {
|
|
|
|
+ width: 100%;
|
|
|
|
+ padding: 0 15px;
|
|
|
|
+ .other-container {
|
|
|
|
+ width: 100%;
|
|
|
|
+ padding-left: 15px;
|
|
|
|
+ border-bottom: 1px solid #e6e6e6;
|
|
|
|
+ /deep/ .van-cell:last-child {
|
|
|
|
+ border-bottom: none;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
+ // /deep/.van-list {
|
|
|
|
+ // width: 100%;
|
|
|
|
+ // height: calc(100%- 150px);
|
|
|
|
+ // }
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|