<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../../css/mui.min.css" rel="stylesheet" />
<link href="../../css/salescommon.css" rel="stylesheet" />
<link href="../../css/iconfontbtn.css" rel="stylesheet" />
<style>
/*跨webview需要手动指定位置*/
#customPopover {
position: fixed;
top: 16px;
right: 6px;
}
#customPopover .mui-popover-arrow {
left: auto;
right: 6px;
}
#yewuyuanPopover {
position: fixed;
top: 16px;
right: 6px;
}
#yewuyuanPopover .mui-popover-arrow {
left: auto;
right: 6px;
}
p {
text-indent: 22px;
}
span.mui-icon {
font-size: 14px;
color: #007aff;
margin-left: -15px;
padding-right: 10px;
}
.mui-popover {
height: 400px;
width: 85%;
}
.mui-content {
padding: 10px;
}
</style>
<style>
.mui-content {
height: 0px;
margin: 0px;
background-color: #FFFFFF;
}
h5.mui-content-padded {
margin-left: 3px;
margin-top: 20px !important;
}
h5.mui-content-padded:first-child {
margin-top: 12px !important;
}
.mui-btn {
font-size: 16px;
padding: 8px;
margin: 3px;
}
.ui-alert {
text-align: center;
padding: 20px 10px;
font-size: 16px;
}
* {
-webkit-touch-callout: none;
-webkit-user-select: none;
}
</style>
<style>
html,
body {
background-color: #FFFFFF;
}
.mui-bar~.mui-content .mui-fullscreen {
top: 44px;
height: auto;
}
.mui-pull-top-tips {
position: absolute;
top: -20px;
left: 50%;
margin-left: -25px;
width: 40px;
height: 40px;
border-radius: 100%;
z-index: 1;
}
.mui-bar~.mui-pull-top-tips {
top: 24px;
}
.mui-pull-top-wrapper {
width: 42px;
height: 42px;
display: block;
text-align: center;
background-color: #efeff4;
border: 1px solid #ddd;
border-radius: 25px;
background-clip: padding-box;
box-shadow: 0 4px 10px #bbb;
overflow: hidden;
}
.mui-pull-top-tips.mui-transitioning {
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
}
.mui-pull-top-tips .mui-pull-loading {
/*-webkit-backface-visibility: hidden;
-webkit-transition-duration: 400ms;
transition-duration: 400ms;*/
margin: 0;
}
.mui-pull-top-wrapper .mui-icon,
.mui-pull-top-wrapper .mui-spinner {
margin-top: 7px;
}
.mui-pull-top-wrapper .mui-icon.mui-reverse {
/*-webkit-transform: rotate(180deg) translateZ(0);*/
}
.mui-pull-bottom-tips {
text-align: center;
background-color: #efeff4;
font-size: 15px;
line-height: 40px;
color: #777;
}
.mui-pull-top-canvas {
overflow: hidden;
background-color: #fafafa;
border-radius: 40px;
box-shadow: 0 4px 10px #bbb;
width: 40px;
height: 40px;
margin: 0 auto;
}
.mui-pull-top-canvas canvas {
width: 40px;
}
.mui-slider-indicator.mui-segmented-control {
background-color: #efeff4;
}
/*---nav的样式*/
.mui-bar .mui-btn {
font-weight: 400;
position: relative;
z-index: 20;
top: 1px;
left: 2px;
right: 2px;
margin-top: 0;
padding: 6px 12px 7px;
}
.mui-card {
/* overflow: hidden; */
margin: 0 15px;
border: 0;
border-radius: 6px;
background-color: white;
background-clip: padding-box;
}
.mui-navigate-right {
right: -2px;
}
.mui-input-row .mui-btn {
width: 100%;
float: none;
}
.mui-input-row label {
width: 50%;
padding: 0;
}
.mui-table-view-cell.mui-checkbox input[type=checkbox],
.mui-table-view-cell.mui-radio input[type=radio] {
top: 30px
}
</style>
</head>
<body>
<div class="mui-collapse-content">
<form class="mui-input-group">
<div class="mui-input-row" style="height:45px;">
<label id="selectUser"><a href="#yewuyuanPopover" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined">选择业务员</a></label>
<p id="userName" style="font-family:simsun;color:#47494c;font-size:15px;line-height:28px;color: red;"></p>
<input type="hidden" id="userid" />
</div>
<div class="mui-input-row" style="height:45px;">
<label id="selectRoad"><a href="#customPopover" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined">选择路线</a></label>
<input type="hidden" id="roadid" />
<p id="roadName" style="font-family:simsun;color:#47494c;font-size:15px;line-height:28px;color: red;"></p>
</div>
</form>
</div>
<div class="mui-content-padded">
<div id="slider" class="mui-slider mui-fullscreen" style="top:90px;">
<div id="pullrefresh" class="mui-scroll-wrapper">
<div class="mui-scroll customlist">
<!--数据列表-->
<ul class="mui-table-view mui-table-view-chevron" id="datalist">
</ul>
</div>
</div>
</div>
<input id="page" value="0" type="hidden" />
<input id="rowscount" value="0" type="hidden" />
</div>
<div id="yewuyuanPopover" class="mui-popover">
<div class="mui-popover-arrow"></div>
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view groupUserUl" id="groupUser">
</ul>
</div>
</div>
</div>
<script type="text/html" id="scriptGroupUser">
{{#for(var i=0;i
<d.length;i++){}} <li class="mui-table-view-cell groupUserli" dataid="{{d[i].userid}}">
<p>
<h4>{{d[i].realname}}</h4><span style="float: right;right:50px;">{{d[i].mobile}}</span></p>
</li>
{{#}}}
</script>
<div id="customPopover" class="mui-popover">
<div class="mui-popover-arrow"></div>
<div class="mui-scroll-wrapper">
<div class="mui-scroll scrollRoadGroup">
<ul class="mui-table-view roadgroup" id="roadlist">
</ul>
</div>
</div>
</div>
<script type="text/html" id="scriptRoadList">
{{#for(var i=0;i
<d.length;i++){}} <li class="mui-table-view-cell roadgroupli" dataid="{{d[i].routesmanageid}}" dataname="{{d[i].roadname}}">
<div class="mui-media-body">
{{d[i].roadname}}<span style="float: right;">{{d[i].entouragename}}</span>
<p>{{d[i].weekday}}</p>
</div>
</li>
{{#}}}
</script>
<script src="../../js/mui.min.js"></script>
<script src="../../js/common.js" type="text/javascript"></script>
<script src="../../js/mui.pullToRefresh.js" type="text/javascript"></script>
<script src="../../js/mui.pullToRefresh.material.js" type="text/javascript"></script>
<script src="../../js/laytpl.js" type="text/javascript"></script>
<script src="huiFang.js" type="text/javascript"></script>
<script>
mui.init();
(function($) {
//阻尼系数
var deceleration = mui.os.ios ? 0.003 : 0.0009;
$('.mui-scroll-wrapper').scroll({
bounce: false,
indicators: true, //是否显示滚动条
deceleration: deceleration
});
$.plusReady(function() {
if(plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_NONE) {
mui.toast(common.netcatchMessage());
} else {
//读取下属业务数据列表
document.getElementById("selectUser").addEventListener("tap", function() {
var postUserUrl = common.serverPath() + "/WebApp/BaseUserApi/GetGroupUser";
var userEntity = JSON.parse(localStorage.getItem("$users") || '[]');
var param = {
UserID: userEntity.UserId
};
mui.ajax(postUserUrl, {
data: param,
type: "post",
timeout: 5000,
success: function(jsondata) {
if(jsondata != "" && jsondata != null) {
var jsonobject = JSON.parse(jsondata);
if(jsonobject.length > 0) {
var gettpl = document.getElementById("scriptGroupUser").innerHTML;
//绑定客户列表信息
laytpl(gettpl).render(jsonobject, function(html) {
document.getElementById("groupUser").innerHTML = html;
});
}
}
},
error: function() {
},
complete: function() {
//ajax请求完成
mui(".mui-scroll").on("tap", ".groupUserUl>li", function() {
document.getElementById("userName").innerText = this.querySelector("h4").innerText;
document.getElementById("userid").value = this.getAttribute("dataid");
document.getElementById("roadName").innerText = "";
document.getElementById("roadid").value = "";
mui('#yewuyuanPopover').popover('hide');
})
}
});
})
document.getElementById("selectRoad").addEventListener("tap", function() {
if(document.getElementById("userName").innerText == "" && document.getElementById("userName").innerText.length == 0) {
mui('#customPopover').popover('hide');
plus.nativeUI.toast("请先选择业务员，再选路线");
} else {
var userID = document.getElementById("userid").value;
var posturl = common.serverPath() + "/WebApp/CustomRoadApi/GetHuiFangRoadListByUserID";
var param = {
UserID: userID
};
mui.ajax(posturl, {
data: param,
type: "post",
timeout: 5000,
success: function(jsondata) {
if(jsondata != "" && jsondata != null && jsondata.length > 4) {
document.getElementById("roadlist").innerHTML = "";
var roadJSON = JSON.parse(jsondata);
if(roadJSON.length > 0) {
var gettpl = document.getElementById("scriptRoadList").innerHTML;
//绑定客户列表信息
laytpl(gettpl).render(roadJSON, function(html) {
document.getElementById("roadlist").innerHTML = html;
});
}
} else {
document.getElementById("roadlist").innerHTML = "";
var ulelement = document.getElementById("roadlist");
var lielement = document.createElement("li");
var lihtml = '<div class="mui-media-body">暂时没有路线!</div>';
lielement.className = "mui-table-cell";
lielement.innerHTML = lihtml;
ulelement.appendChild(lielement);
}
},
error: function(a, b, c) {
plus.nativeUI.toast(common.ajaxErrorMessage());
}
});
}
})
mui(".scrollRoadGroup").on("tap", ".roadgroup>li", function() {
document.getElementById("roadName").innerText = this.getAttribute("dataname");
document.getElementById("roadid").value = this.getAttribute("dataid");
mui('#customPopover').popover('hide');
document.querySelector(".mui-table-view-chevron").innerHTML = "";
pullrefresh();
})
//将客户添加到回访列表中
//循环初始化所有下拉刷新，上拉加载。
var pullrefresh = function() {
$.each(document.querySelectorAll('.mui-slider .customlist'), function(index, pullRefreshEl) {
alert(index);
document.querySelector(".mui-table-view-chevron").innerHTML = "";
var currentPage = 0;
$(pullRefreshEl).pullToRefresh({
up: {
auto: true,
contentdown: '上拉显示更多',
contentrefresh: '正在加载...',
contentnomore: '没有更多数据了',
callback: function() {
alert("callback");
var self = this;
setTimeout(function() {
var ul = self.element.querySelector('.mui-table-view');
ul.innerHTML = "";
//ul.appendChild(createFragment(ul, index, 5));
//self.endPullUpToRefresh();
currentPage++;
getDataList(currentPage, self, 2);
}, 1000);
}
}
});
});
};
var getDataList = function(currentPage, self, type) {
alert("getDataList");
var roadID = document.getElementById("roadid").value;
var ul = document.getElementById("datalist");
//查询路线下面分配的客户信息列表以及客户列表的销售产品
var posturl = common.serverPath() + "/WebApp/CustomRoadApi/GetHuiFangCustomListByRoadID";
var postData = {
RoadID: roadID,
currentPage: currentPage
};
mui.ajax(posturl, {
data: postData,
type: "post",
timeout: 5000,
success: function(strData) {
plus.nativeUI.closeWaiting();
var jsonObject = mui.parseJSON(strData);
var customList = jsonObject;
if(customList.rows.length > 0) {
var page = jsonObject.total;
//document.getElementById("page").value = page;
if(customList != null && customList != undefined && customList.rows.length > 0) {
//存储查询到的数据
//document.getElementById("rowscount").value = jsonObject.rows.length;
for(var i = 0; i < customList.rows.length; i++) {
var lihtml = [];
var li = document.createElement("li");
li.className = "mui-table-view-cell customlist mui-datatable-view-cell mui-checkbox mui-left";
li.setAttribute("dataid", customList.rows[i].salescustomid);
lihtml.push('<input name="checkbox" type="checkbox"/>')
lihtml.push('<div class="mui-table">');
lihtml.push('<div class="mui-table-cell">');
lihtml.push('<div class="mui-media-body">');
lihtml.push('<div class="mui-table">');
lihtml.push('<div class="mui-table-cell mui-col-xs-6">');
lihtml.push('<h4 class="mui-ellipsis" style="padding-top:5px;">' + customList.rows[i].salescustomname + '</h4></div>');
lihtml.push('<div class="mui-table-cell mui-col-xs-6 ct-color-orange">');
lihtml.push('<h4 class="mui-ellipsis" style="padding-top:5px;">' + customList.rows[i].salescustormnumber + '</h4></div>');
lihtml.push('</div>');
lihtml.push('<div class="mui-table">');
lihtml.push('<div class="mui-table-cell mui-col-xs-6">');
lihtml.push('<h5 class="mui-ellipsis">联系人:' + customList.rows[i].salescustormbossname + '</h5></div>');
lihtml.push('<div class="mui-table-cell mui-col-xs-6">');
lihtml.push('<h5 class="mui-ellipsis">电话:' + customList.rows[i].salescustormphone + '</h5></div>');
lihtml.push('</div>');
lihtml.push('<div class="mui-table">');
lihtml.push('<div class="mui-table-cell mui-col-xs-6">');
lihtml.push('<h5 class="mui-ellipsis">客户类型:' + customList.rows[i].salescustomtypename + '</h5></div>');
lihtml.push('<div class="mui-table-cell mui-col-xs-6">');
lihtml.push('<h5 class="mui-ellipsis">配送商:' + customList.rows[i].suppliername + '</h5></div>');
lihtml.push('</div>');
lihtml.push('<div class="mui-table">');
lihtml.push('<div class="mui-table-cell mui-col-xs-12">');
lihtml.push('<h5 class="mui-ellipsis">' + customList.rows[i].salescustormaddress + '</h5></div>');
lihtml.push('</div>');
lihtml.push('</div>');
lihtml.push('</div>');
lihtml.push('</div>');
li.innerHTML = lihtml.join('');
ul.appendChild(li);
}
self.endPullUpToRefresh((currentPage >= page));
}
} else {
self.endPullUpToRefresh((2 > 1));
}
},
error: function() {
mui.toast(common.ajaxErrorMessage());
}
})
};
}
});
})(mui);
var submitHuiFangCustom = function() {
var customIDArr = "";
mui(".customlist").each(function() {
var vinput = this.querySelector("input");
if(vinput.checked) {
customIDArr += this.getAttribute("dataid") + ",";
}
});
if(customIDArr.length > 0) {
//保存事件
huiFang.submitForm(customIDArr, document.getElementById("roadid").value, function(jsondata, state) {
if(!state) {
mui.toast(jsondata);
} else {
if(jsondata != "" && jsondata != null) {
var jsonobject = JSON.parse(jsondata);
if(jsonobject.state) {
//跳转
} else {
mui.toast(jsonobject.Messager);
}
}
}
});
} else {
mui.toast("请选择回访的客户！");
}
}
</script>
</body>
</html> 
仁者
- 发布：2016-08-02 15:42
- 更新：2016-08-02 15:42
- 阅读：2164
关于点击li标签来刷新列表数据的问题，即pullToRefresh,第二次点击li标签后，pullToRefresh中的callback方法 不执行
分类：MUI
0 个回复