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


@{
    ViewBag.Title = "MyComments";
    Layout = "~/Views/MobileProblem/_APPMain.cshtml";
    var url = HttpContext.Current.Request.Url;
    var webSite = String.Concat(url.Scheme, "://", url.Authority);
}

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="~/Content/Style/MobileProductRegist/iconfont.css" rel="stylesheet" />
<link href="~/Content/Style/MobileProductRegist/QueryProblemCustom.css?v=1.0" rel="stylesheet" />
<link href="~/Content/Scripts/plugins/mui/css/mui.indexedlist.css" rel="stylesheet" />

<script src="~/Content/Scripts/browser.js"></script>
<script src="~/Content/Scripts/browser-polyfill.min.js"></script>
<script src="~/Content/Scripts/plugins/mui/js/iconfont.deal.js"></script>
<script src="~/Content/Scripts/plugins/mui/js/mui.pullToRefresh.js"></script>
<script src="~/Content/Scripts/plugins/mui/js/mui.pullToRefresh.material.js"></script>
<script src="~/Content/Scripts/plugins/mui/js/mui.indexedlist.js"></script>
<script src="~/Content/Style/MobileProductRegist/ProblemIcon.js"></script>
<script src="//at.alicdn.com/t/font_2441118_8ayi9upcnd7.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>

<style>
    .moremini {
        padding: 2px 7px 2px 7px;
        margin-bottom: 5px;
        font-size: 11px;
    }

    .mui-card {
        margin: 5px 0px 0px;
    }

    .mui-card-media img {
        height: 35px !important;
        width: auto !important;
        border-radius: 50px;
    }

    .my-content {
        padding: 5px 10px;
        font-size: 13px;
        color: #8f8f94;
        max-height: 80px;
        overflow: hidden;
    }

    .svg-float {
        position: absolute;
        top: 0;
        right: 6px;
    }

    p {
        font-size: 13px;
    }

    .mui-btn.mui-icon {
        font-size: 12px;
        line-height: 1.42;
        padding: 3px 7px;
        border: solid 1px #d7d7dc;
        margin-right: 5px;
        border-radius: 7px;
    }

    .mui-card-footer {
        justify-content: flex-end
    }

    .mui-media-body div {
        font-size: 13px;
        color: #6f6f6f;
        background-color: #ffffff;
        position: absolute;
        z-index: 999999;
        right: 8px;
    }
</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 ">

        <div class="blueHeaderBg"></div>
        <div id="slider" class="mui-slider mui-fullscreen">
            <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                <div class="titleList" style="border-bottom: solid 1px #e1e1e6;">
                    <a class="mui-control-item paddingNone mui-active " href="#all" data-id="0" id="myProblem">
                        待评价
                    </a>
                    <a class="mui-control-item paddingNone" href="#Unsolve" data-id="1">
                        已评价
                    </a>
                </div>
            </div>

            <div class="mui-slider-group">

                <!--待评价-->
                <div id="all" class="mui-slider-item mui-control-content mui-active">
                    <div class="mui-scroll-wrapper">
                        <div class="mui-scroll bo30">
                            <div class="Problem">
                                <div v-for="p1 in page[0].data" class="mui-card">
                                    <div v-on:click="Deatil(p1.ID)" class="mui-card-header mui-card-media">
                                        <img src="~/Content/Images/Account/wtx.jpg" />
                                        <div class="mui-media-body">
                                            {{p1.性质}}-{{p1.登记人}}
                                            <p style="font-size:12px">登记于 {{p1.登记日期}}</p>
                                            <div>{{p1.编号}}</div>
                                            <svg class='icon svg-float' aria-hidden='true'><use v-bind:xlink:href='p1.icon'></use></svg>
                                        </div>
                                    </div>
                                    <div v-on:click="Deatil(p1.ID)" class="mui-card-content my-content">
                                        <div class="overf" style="-webkit-line-clamp: 1;">标题：{{p1.问题标题}}</div>
                                        <div v-html="p1.问题描述" class="overf" style="-webkit-line-clamp: 2;">{{p1.问题描述}}</div>
                                    </div>
                                    <div v-if="p1.按钮权限=='1'" class="mui-card-footer">
                                        <button v-on:click="TryAcceptProblem(p1.是否为当前处理人,p1.ID,1)" type="button" class="mui-btn mui-btn-danger mui-icon mui-icon-plusempty" style="background-color: rgb(234, 146, 58);border: none;">
                                            受理
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--已评价-->
                <div id="Unsolve" class="mui-slider-item mui-control-content">
                    <div class="mui-scroll-wrapper">
                        <div class="mui-scroll bo30">
                            <div class="Problem">
                                <div v-on:click="Deatil(p2.ID)" v-for="p2 in page[1].data" class="mui-card">
                                    <div class="mui-card-header mui-card-media">
                                        <img src="~/Content/Images/Account/wtx.jpg" />
                                        <div class="mui-media-body">
                                            {{p2.性质}}-{{p2.登记人}}
                                            <p style="font-size:12px">登记于 {{p2.登记日期}}</p>
                                            <div>{{p2.编号}}</div>
                                            <svg class='icon svg-float' aria-hidden='true'><use v-bind:xlink:href='p2.icon'></use></svg>
                                        </div>
                                    </div>
                                    <div class="mui-card-content my-content">
                                        <div class="overf" style="-webkit-line-clamp: 1;">标题：{{p2.问题标题}}</div>
                                        <div v-html="p2.问题描述" class="overf" style="-webkit-line-clamp: 2;">{{p2.问题描述}}</div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>
<script>
        var PersonPropert=@ViewBag.PersonPropert;
        var currentWorkFlowId='';
        'use strict';
        var vm = new Vue({
            el: '#vue',
            data: {
                page: [
                ///新登记
                {
                        pageindex: 0,
                        pagesize: 6,
                    data: []
                },
                ///我登记
                {
                    pageindex: 0,
                    pagesize: 6,
                    data: []
                    }

                ],
                //问题是否解决标志
                status: '',
                ///下拉刷新对象
                refresh: [],
             
            },
            watch: {
             
            },
            methods: {
                initRefresh: function initRefresh() {
                    var that = this;
                    var t = 0;
                    var deceleration = mui.os.ios ? 0.003 : 0.0009;
                    mui('.mui-scroll-wrapper').scroll({
                        bounce: false,
                        indicators: true, //是否显示滚动条
                        deceleration: deceleration
                    });
                    mui.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function (index, pullRefreshEl) {
                        mui(pullRefreshEl).pullToRefresh({
                            up: {
                                auto: true, //自动执行一次上拉加载，可选；
                                show: true, //显示底部上拉加载提示信息，可选；
                                contentrefresh: '正在加载...', //上拉进行中提示信息
                                contentnomore: '没有更多数据了', //上拉无更多信息时提示信息
                                callback: function callback() {
                                    var self = this;
                                    if (t < 5) {
                                        that.refresh.push(self);
                                        t++;
                                    }
                                    setTimeout(function () {
                                        var ul = self.element.querySelector('.Problem');
                                        //全部选项卡的index是0，当显示它的时候，滑动页面加1，调数据，以下以此类推
                                        if (index < 5) {
                                            that.page[index].pageindex += 1;
                                            that.createFragment(ul, index, self);
                                        } else {
                                            self.endPullUpToRefresh(true);
                                        }
                                    }, 1000);
                                }
                            }
                        });
                    });
                },
                ///加载未评价问题
                createFragment: function createFragment(ul, index, self) {
                    var fragment = document.createDocumentFragment();
                    var that = this;
                    var param = {
                        pageindex: this.page[index].pageindex,
                        pagesize: this.page[index].pagesize,
                        Tab: index + 1
                    };
                    ///后台请求数据
                    $.post('/MobileProblem/GetQuestionList', param, function (data) {
                        var info = data;
                        if (info.length == 0) {
                            //当datas.length为0时，表示没有数据了
                            self.endPullUpToRefresh(true); //当为true时，底部出现没有更多数据，并且不能滑动
                        } else {
                            var _iteratorNormalCompletion14 = true;
                            var _didIteratorError14 = false;
                            var _iteratorError14 = undefined;

                            try {
                                for (var _iterator14 = info[Symbol.iterator](), _step14; !(_iteratorNormalCompletion14 = (_step14 = _iterator14.next()).done); _iteratorNormalCompletion14 = true) {
                                    var dd = _step14.value;
                                    if (dd.问题描述) dd.问题描述 = '描述：' + dd.问题描述.replace(/<[^>]+>/g, "");
                                    if (!dd.附件路径) {
                                        dd.附件路径 = "/Content/Images/zlpng.png";
                                    } else {
                                        dd.附件路径 = "/MobileProblem/ViewProblemImage/" + dd.附件路径 + "?type=s";
                                    }
                                    if (dd.是否评价 == '0') {
                                        dd.icon = "#icon-weipingjia";
                                    } else {
                                        dd.icon = "#icon-yipingjia";
                                    }
                                    that.page[index].data.push(dd);
                                }
                            } catch (err) {
                                _didIteratorError14 = true;
                                _iteratorError14 = err;
                            } finally {
                                try {
                                    if (!_iteratorNormalCompletion14 && _iterator14.return) {
                                        _iterator14.return();
                                    }
                                } finally {
                                    if (_didIteratorError14) {
                                        throw _iteratorError14;
                                    }
                                }
                            }

                            self.endPullUpToRefresh(); //当为false或空时，底部出现正在加载，滑动到下一页
                        }
                    });
                },
                forech: function forech(obj) {
                    var re;
                    var _iteratorNormalCompletion15 = true;
                    var _didIteratorError15 = false;
                    var _iteratorError15 = undefined;

                    try {
                        for (var _iterator15 = obj[Symbol.iterator](), _step15; !(_iteratorNormalCompletion15 = (_step15 = _iterator15.next()).done); _iteratorNormalCompletion15 = true) {
                            var i = _step15.value;

                            if (i.active) {
                                re = i.id;
                                return re;
                            }
                        }
                    } catch (err) {
                        _didIteratorError15 = true;
                        _iteratorError15 = err;
                    } finally {
                        try {
                            if (!_iteratorNormalCompletion15 && _iterator15.return) {
                                _iterator15.return();
                            }
                        } finally {
                            if (_didIteratorError15) {
                                throw _iteratorError15;
                            }
                        }
                    }

                    ;
                },



                ///进入详细页面
                Deatil: function Deatil(id) {
                    //mui.openWindow({
                    //    url: '/MobileProblem/ProblemDetail/' + id
                    //});
                    window.location.href = '/MobileProblem/ProblemReamrk/' + id;
                },
        

            },
            computed: {
              

            },
            mounted: function mounted() {
                mui.init();
                this.$nextTick(function () {
                    this.initRefresh();
                });
            }
        });
</script>