|
@@ -0,0 +1,180 @@
|
|
|
+<template>
|
|
|
+ <div class='comprehensive-matter-list'>
|
|
|
+ <van-nav-bar title='政府部门xx' left-arrow @click-left='backPage' />
|
|
|
+ <div class='main'>
|
|
|
+ <van-list class='matters-list' v-model='loading' :finished='finished' finished-text='没有更多了' :immediate-check='false' @load='onLoad'>
|
|
|
+ <div class='card' v-for='(item,index) in list' :key='index'>
|
|
|
+ <div class='date-attachment'>
|
|
|
+ <div class='date'>
|
|
|
+ <span class='label'>日期:</span>
|
|
|
+ <span class='data'>{{item.date}}</span>
|
|
|
+ </div>
|
|
|
+ <div class='attachment'>
|
|
|
+ <span class='label'>附件:</span>
|
|
|
+ <span class='data'>{{item.id}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class='record'>
|
|
|
+ <span class='label'>记录事项:</span>
|
|
|
+ <!-- 该条的showMore为true或者undefined,数据最多显示3行 -->
|
|
|
+ <div
|
|
|
+ class='data'
|
|
|
+ :class='item.showMore || item.showMore === undefined ?"van-multi-ellipsis--l3":"" '
|
|
|
+ >三明万达广场顶层4座空调冷却塔噪声超标 排放(已整改),三明万达广场顶层4座空调冷 却塔噪声超标排放(已整改),三明万达广场 顶层4座空调冷却最多显示4行,显示不下…</div>
|
|
|
+ </div>
|
|
|
+ <div class='work' v-if='item.showMore === false'>
|
|
|
+ <span class='label'>工作要求:</span>
|
|
|
+ <div class='data'>这里是工作要求具体内容</div>
|
|
|
+ </div>
|
|
|
+ <div class='matter' v-if='item.showMore === false'>
|
|
|
+ <span class='label'>整改事项:</span>
|
|
|
+ <div class='data'>三明万达广场顶层4座空调冷却塔噪声超标 排放(已整改),三明万达广场顶层4座空调冷 却塔噪声超标排放(已整改),三明万达广场 顶层4座空调冷却塔噪声超标排放(已整改)</div>
|
|
|
+ </div>
|
|
|
+ <div class='show-more' v-if='item.showMore || item.showMore === undefined ' @click='changeStatus(item,false)'>展开</div>
|
|
|
+ <div class='show-less' v-else @click='changeStatus(item,true)'>
|
|
|
+ <!-- TODO: 收起 箭头 -->
|
|
|
+ <!-- <i></i> -->
|
|
|
+ 收起
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-list>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+/**
|
|
|
+ * 综合事项,政府/其他部门 列表页面
|
|
|
+ */
|
|
|
+import Vue from 'vue'
|
|
|
+import { NavBar, List } from 'vant'
|
|
|
+Vue.use(NavBar).use(List)
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'ComprehensiveMatterList',
|
|
|
+ props: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 列表数据
|
|
|
+ list: [
|
|
|
+ // { index: 0, date: '2020-08-20', id: 1 },
|
|
|
+ // { index: 1, date: '2020-08-20', id: 2 },
|
|
|
+ // { index: 2, date: '2020-08-20', id: 3 },
|
|
|
+ // { index: 3, date: '2020-08-20', id: 4 },
|
|
|
+ ],
|
|
|
+ // 点击条的信息
|
|
|
+ currentInfo: {
|
|
|
+ showMore: true,
|
|
|
+ },
|
|
|
+ loading: false, // list加载中
|
|
|
+ finished: false, //list组件,加载完成
|
|
|
+ page: 1, //页码
|
|
|
+ size: 5, //分页条数
|
|
|
+ count: 0, //总条数
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {},
|
|
|
+ created() {
|
|
|
+ for (let i = 0; i < 6; i++) {
|
|
|
+ this.list.push({ index: i, date: '2020-08-15', id: new Date().getTime() })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeMount() {},
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ // 返回上一个页面
|
|
|
+ backPage() {
|
|
|
+ this.$router.go(-1)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 切换 展开,收起
|
|
|
+ */
|
|
|
+ changeStatus(item, showMore) {
|
|
|
+ this.currentInfo = item
|
|
|
+ this.$set(this.currentInfo, 'showMore', showMore)
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ setTimeout(() => {
|
|
|
+ for (let i = 0; i < 6; i++) {
|
|
|
+ this.list.push({ index: i, date: '2020-08-15', id: new Date().getTime() })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 加载状态结束
|
|
|
+ this.loading = false
|
|
|
+
|
|
|
+ // 数据全部加载完成
|
|
|
+ if (this.list.length >= 40) {
|
|
|
+ this.finished = true
|
|
|
+ }
|
|
|
+ }, 1000)
|
|
|
+ },
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang='less' scoped>
|
|
|
+.comprehensive-matter-list {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #f5f6f7;
|
|
|
+ .main {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 45px);
|
|
|
+ overflow: auto;
|
|
|
+ .card {
|
|
|
+ width: 100%;
|
|
|
+ padding: 15px;
|
|
|
+ background-color: #fff;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ .date-attachment,
|
|
|
+ .record,
|
|
|
+ .work,
|
|
|
+ .matter {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666666;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ .label {
|
|
|
+ width: 70px;
|
|
|
+ }
|
|
|
+ .data {
|
|
|
+ flex: 1;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 日期,附件
|
|
|
+ .date-attachment {
|
|
|
+ .label {
|
|
|
+ // margin-right: 10px;
|
|
|
+ display: inline-block;
|
|
|
+ width: 45px;
|
|
|
+ }
|
|
|
+ .attachment {
|
|
|
+ color: #025baa;
|
|
|
+ .data {
|
|
|
+ color: #025baa;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .show-more,
|
|
|
+ .show-less {
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 72px;
|
|
|
+ height: 30px;
|
|
|
+ text-align: center;
|
|
|
+ background: #e5eef6;
|
|
|
+ border-radius: 2px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #025baa;
|
|
|
+ font-size: 14px;
|
|
|
+ border-radius: 3px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|