lsappBms/lss_vue_wx/src/views/my/myInstitution.vue

<template>
	<div class="detail">
        <mt-header class="detail_head" fixed title="管理制度">
            <router-link to="" slot="left">
                <mt-button icon="back" v-on:click="jumpBack()"></mt-button>
            </router-link>
        </mt-header>
        <div class="detail_body">
            <div class="noList" v-if="list.length==0">
                <img src="../../assets/image/noList.png">
            </div>  
            <ul v-else v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
                <li v-for="(item,index) in list">
                    <div class="one_manage" v-on:click="toDetail(item.id)">
                        <div>{{item.title}}</div>
                        <div><img class="rotate" src="../../assets/image/pull_down.png"></div>
                    </div>
                </li>
                <div class="order" v-if="haveMore">
                    <span class="line"></span>
                    <span class="txt">没有更多了</span>
                    <span class="line"></span>
                </div>
            </ul>
        </div>
    </div>
</template>

<script>
	export default {
		data() {
			return {
                user: JSON.parse(sessionStorage.getItem("user")),
                list: [],
                pageNum: 1,
                pages: 1,
                haveMore: false,
			}
		},
		methods: {
            // 消息列表
            getList() {
                this.$indicator.open();
                this.http.post(this.port.my.insList, {
                    'pageNum': 1
                } , 
                res => {
                    this.$indicator.close();
                    if (res.code == "ok") {
                        var list = res.data.list;
                        for(var i in list) {
                            list[i].isShow = 'text-hide';
                        }
                        this.list = list;
                        this.pages = res.data.pages==0?1:res.data.pages;
                    } else {
                        this.$toast({
                            message: res.msg,
                            duration: 2000
                        });
                    }
                }, error => {
                    this.$indicator.close();
                    this.$toast({
                        message: error,
                        duration: 2000
                    });
                })
            },

            loadMore() {
                if(this.pageNum == this.pages) {
                    this.haveMore = true;
                } else if(this.pageNum < this.pages) {
                    this.$indicator.open();
                    this.http.post(this.port.my.insList, {
                        'pageNum': ++this.pageNum
                    } , 
                    res => {
                        this.$indicator.close();
                        if (res.code == "ok") {
                            this.pages = res.data.pages==0?1:res.data.pages;
                            if(res.data.list.length != 0) {
                                for(var i in res.data.list) {
                                    this.list.push(res.data.list[i]);
                                }
                            }
                        } else {
                            this.$toast({
                                message: res.msg,
                                duration: 2000
                            });
                        }
                    }, error => {
                        this.$indicator.close();
                        this.$toast({
                            message: error,
                            duration: 2000
                        });
                    })
                }
            },

            toDetail(id) {
                this.$router.push("/myInstitution/" + id);
            },

            jumpBack() {
                this.$router.go(-1);
            }
        },
        created() {
            this.getList();
        },
		mounted() {
            
		}
	}

</script>

<style scoped>
    body {
        background: #EFEFEF;
    }

    .detail_head {
        background: #fff;
        color: #333;
        height: 0.4rem;
    }

    .detail_body {
        margin-top: 0.4rem;
        padding-bottom: 0.15rem;
    }

    .tab_head {
        position: fixed;
        width: 100%;
        top: 0.4rem;
        z-index: 110;
    }

    .detail {
        background: #EFEFEF;
    }

    .detailBox {
        background: #fff;
        margin-bottom: 0.11rem;
    }

    .recordBox {
        margin: 0.12rem 0 0 0;
    }

    .one_recordBox {
        padding: 0.12rem 0.2rem;
    }

    .record_head {
        float: left;
        color: #5FA1F0;
        margin-right: 0.12rem;
    }

    .record_head img {
        width: 0.6rem;
        height: 0.6rem;
    }

    .record_head > div {
        width: 100%;
        display: inline-block;
        vertical-align: middle;
    }

    .record_head span {
        color: #939393;
        float: right;
        vertical-align: middle;
    }

    .record_body {
        color: #777;
        font-size: 0.12rem;
        line-height: 0.23rem;
    }

    .record_body > div:nth-child(1) {
        font-size: 0.15rem;
        font-weight: 600;
        color: #333;
    }

    .record_body > div:nth-child(3) .text-hide {
        padding: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .record_body > div:nth-child(3) .text-show {
        overflow: auto;
        text-overflow: unset;
        white-space: unset;
    }

    .record_body > div:nth-child(3) .click-show{
        margin-left: 5px;
        font-size: 14px;
        color: #26a2ff;
        text-align: right;
    }

    .noList {
        text-align: center;
        padding: 1.5rem 0;
    }

    .noList img {
        width: 1.2rem;
        height: 1.2rem;
    }

    .one_manage {
        padding: 0.12rem;
        background: #fff;
        color: #444;
    }

    .one_manage div {
        display: inline-block;
        vertical-align: middle;
    }

    .one_manage > div:nth-child(1) {
        width: 89%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .one_manage > div:nth-child(2) {
        float: right;
        text-align: right;
    }

    .one_manage > div:nth-child(2) img {
        width: 0.15rem;
        vertical-align: middle;
    }

    .rotate {
        transform-origin: center center;
        transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transition: transform 0.2s;
        -moz-transition: -moz-transform 0.2s;
        -moz-transition: -moz-transform 0.2s;
        -o-transition: -o-transform 0.2s;
        -ms-transition: -ms-transform 0.2s;
    }
    
    .noList {
        text-align: center;
        padding: 1.5rem 0;
    }

    .noList img {
        width: 1.2rem;
        height: 1.2rem;
    }

    .order {
        height: 0.6rem;
        line-height: 0.6rem;
        text-align: center;
    }

    .order .line {
        display: inline-block;
        width: 1.2rem;
        border-top: 1px solid #ccc ;
        vertical-align: middle;
    }

    .order .txt {
        color: #ccc;
        font-size: 0.13rem;
        vertical-align: middle;
    }
</style>