'use strict'; var vm = new Vue({ el: '#vue', data: { ///全部模块 page1: { page: 0, row: 6, data: [] }, ///未解决 page2: { page: 0, row: 6, data: [] }, ///已解决 page3: { page: 0, row: 6, data: [] }, //问题是否解决标志 status: '', ///检索条件 SearchCondition: { ///查询范围 scope: [{ name: '我的问题', id: 1, active: true }, { name: '本院问题', id: 2, active: false }], time: { TimeBegin: '开始时间', TimeEnd: '结束时间' }, search: '' }, ///下拉刷新对象 refresh: [] }, methods: { initRefresh: function initRefresh() { //从缓存中读取查询条件 var Deft = JSON.parse(getCookie("CustomSearchCondition")); //缓存中的查询范围 if (Deft && Deft.scope) { var scope=this.SearchCondition.scope; for (var i in scope) { if (scope[i].id == Deft.scope) { scope[i].active = true; } else { scope[i].active = false; } } } 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.ready(function () { 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 < 3) { that.refresh.push(self); t++; } setTimeout(function () { var ul = self.element.querySelector('.Problem'); if (index == 0) { //全部选项卡的index是0,当显示它的时候,滑动页面加1,调数据,以下以此类推 that.page1.page += 1; that.createFragment(ul, index, self, that.page1.page); } else if (index == 1) { that.page2.page += 1; that.createFragment(ul, index, self, that.page2.page); } else if (index == 2) { that.page3.page += 1; that.createFragment(ul, index, self, that.page3.page); } }, 1000); } } }); }); }); //底部导航栏 document.getElementById('Home').addEventListener('tap', function () { window.location.href = '/MobileProblem/Home'; }); document.getElementById('my').addEventListener('tap', function () { window.location.href = '/MobileProblem/My'; }); document.getElementById('NewProblem').addEventListener('tap', function () { }); ///顶部下拉导航 var menuWrapper = document.getElementById("menu-wrapper"); var menu = document.getElementById("menu"); var menuWrapperClassList = menuWrapper.classList; var backdrop = document.getElementById("menu-backdrop"); var busying = false; backdrop.addEventListener("swipeup", function () { if (menuWrapperClassList.contains('mui-active')) { $("#slider").removeClass("top0"); document.body.classList.remove('menu-open'); menuWrapper.className = 'menu-wrapper fade-out-up animated'; menu.className = 'menu bounce-out-up animated'; setTimeout(function () { backdrop.style.opacity = 0; menuWrapper.classList.add('hidden'); }, 500); } }); backdrop.addEventListener('tap', function () { if (busying) { return; } busying = true; if (menuWrapperClassList.contains('mui-active')) { $("#slider").removeClass("top0"); document.body.classList.remove('menu-open'); menuWrapper.className = 'menu-wrapper fade-out-up animated'; menu.className = 'menu bounce-out-up animated'; setTimeout(function () { backdrop.style.opacity = 0; menuWrapper.classList.add('hidden'); }, 500); } else { $("#slider").addClass("top0"); document.body.classList.add('menu-open'); menuWrapper.className = 'menu-wrapper fade-in-down animated mui-active'; menu.className = 'menu bounce-in-down animated'; backdrop.style.opacity = 1; } setTimeout(function () { busying = false; }, 500); }); document.getElementById("icon-menu").addEventListener('tap', function () { if (busying) { return; } busying = true; if (menuWrapperClassList.contains('mui-active')) { $("#slider").removeClass("top0"); document.body.classList.remove('menu-open'); menuWrapper.className = 'menu-wrapper fade-out-up animated'; menu.className = 'menu bounce-out-up animated'; setTimeout(function () { backdrop.style.opacity = 0; menuWrapper.classList.add('hidden'); }, 500); } else { $("#slider").addClass("top0"); document.body.classList.add('menu-open'); menuWrapper.className = 'menu-wrapper fade-in-down animated mui-active'; menu.className = 'menu bounce-in-down animated'; backdrop.style.opacity = 1; } setTimeout(function () { busying = false; }, 500); }); ///重置下拉刷新 document.getElementById("reload").addEventListener('tap', function () { ///保存客户配置 var CustomSearchCondition = { scope: that.forech(that.SearchCondition.scope) }; setCookie("CustomSearchCondition", JSON.stringify(CustomSearchCondition), 3); if (busying) { return; } busying = true; //全部 that.page1 = { page: 0, row: 6, data: [] }; ///未解决 that.page2 = { page: 0, row: 6, data: [] }; ///已解决 that.page3 = { page: 0, row: 6, data: [] }; //that.refresh.refresh(true); //that.refresh.pullUpLoading(true); var _iteratorNormalCompletion = true; var _didIteratorError = false; var _iteratorError = undefined; try { for (var _iterator = that.refresh[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done) ; _iteratorNormalCompletion = true) { var ref = _step.value; ref.refresh(true); ref.pullUpLoading(false); } } catch (err) { _didIteratorError = true; _iteratorError = err; } finally { try { if (!_iteratorNormalCompletion && _iterator.return) { _iterator.return(); } } finally { if (_didIteratorError) { throw _iteratorError; } } } if (menuWrapperClassList.contains('mui-active')) { $("#slider").removeClass("top0"); document.body.classList.remove('menu-open'); menuWrapper.className = 'menu-wrapper fade-out-up animated'; menu.className = 'menu bounce-out-up animated'; setTimeout(function () { backdrop.style.opacity = 0; menuWrapper.classList.add('hidden'); }, 500); } else { $("#slider").addClass("top0"); document.body.classList.add('menu-open'); menuWrapper.className = 'menu-wrapper fade-in-down animated mui-active'; menu.className = 'menu bounce-in-down animated'; backdrop.style.opacity = 1; } setTimeout(function () { busying = false; }, 500); }); }, LoadTimeContent: function LoadTimeContent() { var btns = $('.time-btn'); btns.each(function (i, btn) { btn.addEventListener('tap', function () { var _self = this; if (_self.picker) { _self.picker.show(function (rs) { btn.innerHTML = rs.text; _self.picker.dispose(); _self.picker = null; }); } else { var optionsJson = this.getAttribute('data-options') || '{}'; var options = JSON.parse(optionsJson); var id = this.getAttribute('id'); _self.picker = new mui.DtPicker(options); _self.picker.show(function (rs) { btn.innerHTML = rs.text; _self.picker.dispose(); _self.picker = null; }); } }, false); }); }, //重置搜索条件 Deafault: function Deafault() { this.SearchCondition = { ///查询范围 scope: [{ name: '我的问题', id: '1', active: true }, { name: '本院问题', id: '2', active: false }], time: { TimeBegin: '开始时间', TimeEnd: '结束时间' }, search: '' }; $("#TimeBegin").html("开始时间"); $("#TimeEnd").html("结束时间"); }, ///加载问题 createFragment: function createFragment(ul, index, self, pageNum) { var fragment = document.createDocumentFragment(); var page; var status; if (index == 0) { status = ''; //为0的时候是全部 page = this.page1; } else if (index == 1) { status = 0; //为1的时候是未解决 page = this.page2; } else if (index == 2) { status = 1; //为2的时候是已解决 page = this.page3; } var param = { Pages: page.page, //页数 rows: page.row, //想要几条数据 ProblemStatus: status, //状态 SelectType: this.forech(this.SearchCondition.scope), //查询类型 TimeBegins: $("#TimeBegin").html(), TimeEnds: $("#TimeEnd").html(), SelectConditon: this.SearchCondition.search }; ///后台请求数据 $.get('/MobileProblem/QueryMyProblemByCustom', param, function (data) { var info = data; if (info.length == 0) { //当datas.length为0时,表示没有数据了 self.endPullUpToRefresh(true); //当为true时,底部出现没有更多数据,并且不能滑动 } else { var _iteratorNormalCompletion2 = true; var _didIteratorError2 = false; var _iteratorError2 = undefined; try { for (var _iterator2 = info[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done) ; _iteratorNormalCompletion2 = true) { var dd = _step2.value; if (!dd.附件路径) { dd.附件路径 = "/Content/Images/zlpng.png"; } else { dd.附件路径 = "/MobileProblem/ViewProblemImage/" + dd.附件路径 + "?type=s"; } if (dd.是否终止 == '1') { dd.icon = "#icon-yizhongzhi1"; } else if (dd.是否解决 == '1') { dd.icon = "#icon-yijiejue3"; } else { dd.icon = "#icon-weijiejue"; } page.data.push(dd); } } catch (err) { _didIteratorError2 = true; _iteratorError2 = err; } finally { try { if (!_iteratorNormalCompletion2 && _iterator2.return) { _iterator2.return(); } } finally { if (_didIteratorError2) { throw _iteratorError2; } } } self.endPullUpToRefresh(); //当为false或空时,底部出现正在加载,滑动到下一页 } }); }, forech: function forech(obj) { var re; var _iteratorNormalCompletion3 = true; var _didIteratorError3 = false; var _iteratorError3 = undefined; try { for (var _iterator3 = obj[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done) ; _iteratorNormalCompletion3 = true) { var i = _step3.value; if (i.active) { re = i.id; return re; } } } catch (err) { _didIteratorError3 = true; _iteratorError3 = err; } finally { try { if (!_iteratorNormalCompletion3 && _iterator3.return) { _iterator3.return(); } } finally { if (_didIteratorError3) { throw _iteratorError3; } } } ; }, ToActive: function ToActive(sc, i) { var _iteratorNormalCompletion4 = true; var _didIteratorError4 = false; var _iteratorError4 = undefined; try { for (var _iterator4 = sc[Symbol.iterator](), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done) ; _iteratorNormalCompletion4 = true) { var dd = _step4.value; dd.active = false; } } catch (err) { _didIteratorError4 = true; _iteratorError4 = err; } finally { try { if (!_iteratorNormalCompletion4 && _iterator4.return) { _iterator4.return(); } } finally { if (_didIteratorError4) { throw _iteratorError4; } } } i.active = true; }, ///进入详细页面 Deatil: function Deatil(id) { //mui.openWindow({ // url: '/MobileProblem/ProblemDetail/' + id //}); window.location.href = '/MobileProblem/ProblemDetail/' + id; } }, mounted: function mounted() { mui.init(); this.initRefresh(); this.LoadTimeContent(); } });