ZLPMS/PMS.WebUI/Views/MobileProblem/NoticeList.cshtml


@{
    ViewBag.Title = "NoticeList";
    Layout = "~/Views/MobileProblem/_APPMain.cshtml";
}
<style>
    .mui-table h4, .mui-table h5, .mui-table .mui-h5, .mui-table .mui-h6, .mui-table p {
        margin-top: 0;
    }

    .mui-table h4 {
        line-height: 21px;
        font-weight: 500;
    }

    .mui-table .oa-icon {
        position: absolute;
        right: 0;
        bottom: 0;
    }

    .mui-table .oa-icon-star-filled {
        color: #f14e41;
    }
    h5,.mui-h5{
        font-size:11px
    }
    .mui-table-view:before,.mui-table-view:after{
        background-color:transparent
    }
</style>

<div id="vue" v-cloak>
    <header class="mui-bar mui-bar-nav" >
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color:#ffffff"></a>
        <h1 class="mui-title" style="color:white">公告列表</h1>
    </header>
    <div class="mui-content mui-scroll-wrapper" id="pullrefresh">
        <div class="mui-scroll">
            <div style="margin-top:10px" >
                <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
                    <li v-for="item in NoticeData" class="mui-table-view-cell" v-on:click="Deatil(item.ID)">
                        <div class="mui-table" >
                            <div  class="mui-table-cell mui-col-xs-10">
                                <h4 class="mui-ellipsis">{{item.标题}}</h4>
                                <h5>发布人：{{item.添加人}}</h5>
                                <p class="mui-h6 mui-ellipsis" >{{item.内容}}</p>
                            </div>
                            <div class="mui-table-cell mui-col-xs-2 mui-text-right">
                                <span class="mui-h5">{{item.发布时间小时}}</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<script>
    var vm = new Vue({
        el: '#vue',
        data: {
            NoticeData: [],
            Pages: 0
        },
        watch: {
        },
        methods: {
            ///进入详细页面
            Deatil: function (id) {
                
                window.location.href = '/MobileProblem/NoticesDetail/' + id
            },
            pullupRefresh: function () {
                var that = this;
                that.Pages++;
                setTimeout(function () {
                    var self = mui('#pullrefresh').pullRefresh(); //参数为true代表没有更多数据了。
                    mui.get('/Notice/HomeGetList',
                        {
                            SelectConditon: that.searchText,
                            page: that.Pages,
                            rows: 7
                        }, function (data) {
                            //获得服务器响应
                          
                            var info = data.rows;
                            if (info.length == 0) {//当datas.length为0时，表示没有数据了
                                self.endPullupToRefresh(true);//当为true时，底部出现没有更多数据，并且不能滑动
                            } else {
                                for (var di in info) {
                                    var dd = info[di];
                                    dd.内容 = that.IgnoHtml(dd.内容)
                                    dd.发布时间小时 = that.GetTime(dd.发布时间小时)
                                }
                                that.NoticeData = info
                                self.endPullupToRefresh(false);//当为false或空时，底部出现正在加载，滑动到下一页
                            }
                        }, 'json');
                }, 1500);


            },
            IgnoHtml(data) {
                
                    var arrEntities = {
                        'lt': '<',
                        'gt': '>',
                        'nbsp': ' ',
                        'amp': '&',
                        'quot': '"'
                    };
                    var t = data.replace(/<[^>]+>/g, "").replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) {
                        return arrEntities[t];
                    });
                    return t
            },
            GetTime(val) {
                if (val < 1) {
                    return parseInt(val * 60) + "分钟前";
                } else if (val < 24) {
                    return val + "小时前";
                } else if (48 > val > 24) {
                    return "昨天";
                } else {
                   return parseInt(val / 24) + '天' + '前';
                }
            }
        },
        mounted: function () {
            var that = this;
            mui.init({
                pullRefresh: {
                    container: '#pullrefresh',
                    up: {
                        auto: true,
                        contentrefresh: '正在加载公告...',
                        callback: that.pullupRefresh,
                    }
                }
            }); 
            mui(".mui-scroll").on('tap', '.mui-table-view-cell', function (event) {
                this.click();
            });
        }
    })
</script>