html5列表嵌套按钮，click点击事件及传参处理

分手后的思念是犯贱 2023-06-25 03:11 9阅读 0赞

列表第一项<button click事件></button>或<a click事件></a>

</li>

--------------------

列表第二项<button click事件></button>或<a click事件></a>

</li>

--------------------

采用下拉刷新控件mescroll.js实现list

方法：

//初始化mescroll1
    function initmescroll1(){
    	if(mescroll1 != null){
    		return;
    	}
    	mescroll1 = new MeScroll("mescroll1", {
    		up: {
    			auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
    			isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
    			callback: upCallback1, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
    			clearEmptyId: "dataList1", //1.下拉刷新时会自动先清空此列表,再加入数据; 2.无任何数据时会在此列表自动提示空
    			page: {
    				num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
    				size: 10 //每页数据条数,默认10
    			},
    			empty: {
    				//列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
    				warpId: "mescroll1", //父布局的id (1.3.5版本支持传入dom元素)
    				icon: "", //图标,默认null,支持网络图
    				tip: "" //提示
    			}
    		}
    	});
    }
    
    //上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 
    function upCallback1(page){
    	ajaxSyncRequest(getContextPath() + "getServiceRecord", {"phone": userPhone, "orderStatus": filter, "pageNo": page.num}, function(data){
    		if(data.success){
    			//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
    			//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
    			//方法一(推荐): 后台接口有返回列表的总页数 totalPage
    			mescroll1.endByPage(data.data.rows.length, data.data.totalPage); //必传参数(当前页的数据个数, 总页数)
    			//设置列表数据
    			if(data.data.totalPage == "1" && data.data.rows.length == 0){
    				$("#mescroll1 .app_empty").show();
    			}else{
    				$("#mescroll1 .app_empty").hide();
    				setListData1(data.data.rows);
    			}
    		}else{
    			//联网失败的回调,隐藏下拉刷新的状态
                mescroll1.endErr();
    		}
    	});
    }
    
    /*设置列表数据*/
    function setListData1(curPageData){
    	var listDom = document.getElementById("dataList1");
    	for (var i = 0; i < curPageData.length; i++) {
    		var data = curPageData[i];
    		var str='<p class="app_dl_t">'+data.station_name+'-'+data.charge_id+'<span class="fr col_ob">'+orderStatus[parseInt(data.order_status)]+'</span></p>';
    		str+='<p class="app_dl_i">';
    		if(data.order_status == "1"){  //充电中
    			str+='<label>充电电量：--【待核算】</label>';
    		}else{
    			str+='<label>充电电量：'+data.charged_capacity+'度'+'</label>';
    		}
    		str+='<label>开始时间：'+data.start_time+'</label>';
    		str+='<label>结束时间：'+data.end_time+'</label>';
    		str+='<i><font class="col_oo">'+data.money+'</font>元</i></p>';
    		str+='<p class="app_dl_b">';
    		if(data.order_status == "1" || DateFormat.compareDate(DateFormat.addDayStr(data.end_time, 7), new Date()) < 1){
    			str+='<a href="javascript:void(0);" class="fr curr_bt ashide">申请售后</a>';
    		}else{
    			var para = data.order_num+","+data.charged_capacity+","+data.money;
    			str+='<a href="javascript:void(0);" class="fr curr_bt" onclick="applyAfterSale(this.type);" type="'+para+'">申请售后</a>';
    		}
    		str+='<a href="javascript:void(0);" class="fr curr_bt">服务评价</a>';
    		str+='</p>';
    		var liDom = document.createElement("li");
    		liDom.innerHTML = str;
    		addClickListener1(liDom, data);
    		listDom.appendChild(liDom);
    	}
    }
    
    /*添加列表点击事件*/
    function addClickListener1(el, data){
    	$(el).find('.app_dl_i').on('click', function(){          
    		if(data.order_status == 2 || data.order_status == 3){
    			//跳转到详情页
    			window.location.href = getContextPath() + "jsp/pay.html?order=" + data.order_num + "&scene=";
    		}else{
    			var para = "code="+data.charge_id+"&pos="+data.position_num+"&scene=";
    			window.location.href = getContextPath() + "jsp/show.html?" + para;
    		}
    	});
    }
    
    //申请售后
    function applyAfterSale(str){
    	var param = str.split(",");
    	var para = "order="+param[0]+"&chgAmount="+param[1]+"&chgMoney="+param[2];
    	window.location.href = getContextPath() + "jsp/aftersales.html?" + para;
    	return false;
    }

完！！！

str+='<a href="javascript:void(0);" class="fr curr_bt" onclick="applyAfterSale(this.type);" type="'+para+'">申请售后</a>';

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>示例</title>
    <link href="../css/app_comm.css" rel="stylesheet" type="text/css" />
    <link href="../css/app_style.css" rel="stylesheet" type="text/css" />
    <link href="../css/comm.css" rel="stylesheet" type="text/css" />
    <link href="../css/weui.min.css" rel="stylesheet" type="text/css" />
    <link href="../css/iconfont/iconfont.css" rel="stylesheet" type="text/css" />
    <link href="../css/mescroll.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../css/iconfont/iconfont.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/app_comm.js"></script>
    <script type="text/javascript" src="../js/app_func.js"></script>
    <script type="text/javascript" src="../js/common.js"></script>
    <script type="text/javascript" src="../js/wx_weui.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <script type="text/javascript" src="../js/wx_jsapi.js"></script>
    <script type="text/javascript" src="../js/app_menu.js"></script>
    <script type="text/javascript" src="../js/dateformat.js"></script>
    <script type="text/javascript" src="../js/mescroll.min.js"></script>
    <script type="text/javascript" src="../js/ios_adapter2.js"></script>
    <script type="text/javascript">
    //全局变量
    //mescroll对象
    var mescroll1 = null;
    var mescroll2 = null;
    var mescroll3 = null;
    //搜索关键字
    var searchKey = "";
    //当前tab位置
    var currPage = 0;
    //退款id
    var refundId = "";
    
    //就绪时执行
    $(function(){
    	//显示加载toast
    	showLoadingToast();
    	//设置tab监听，横向菜单切换
    	setTabClickListener();
    	//初始化mescrolls
    	initmescrolls();
    	//设置事件监听
    	setEventListener();
    	//隐藏加载toast
    	hideLoadingToast();      
    });
    
    //设置tab监听，横向菜单切换
    function setTabClickListener(){
    	$(".app_q_menu li").unbind("click").click(function(){
    		$(".app_q_menu li").removeClass("app_qm_in");
    		$(this).addClass("app_qm_in");
    		currPage = $(".app_q_menu li").index(this);
    		$(".app_oper_r_li").hide();
    		$(".app_oper_r_li:eq(" + currPage + ")").show();
    		initmescrolls();
    	});
    }
    
    //初始化mescrolls
    function initmescrolls(){
    	switch(currPage){
    	case 0:  //提现
    		initmescroll1();
    		break;
    	case 1:  //充值
    		initmescroll2();
    		break;
    	case 2:  //退款
    		initmescroll3();
    		break;
    	}
    }
    
    //设置列表项默认隐藏
    function initExpandListDef(el){
    	$(el).find(".app_oper_r_l").hide();
    	$(el).find(".app_oper_r_m").show();
    	$(el).find(".app_oper_r_un").show();
    	$(el).find(".app_oper_r_un1").hide();
    	$(el).find(".contain1").hide();
    }
    
    //设置列表扩展状态
    function initExpandList(){
        $(".app_oper_r_m").click(function(){
        	$(this).parent().find(".contain1").slideDown(300);
        	$(this).parent().find(".app_oper_r_m").hide();
        	$(this).parent().find(".app_oper_r_l").show();
        	$(this).parent().find(".app_oper_r_un").hide();
        	$(this).parent().find(".app_oper_r_un1").show();
        });
    	$(".app_oper_r_l").click(function(){
    		$(this).parent().find(".contain1").slideUp(300);
    		$(this).parent().find(".app_oper_r_l").hide();
    		$(this).parent().find(".app_oper_r_m").show();
    		$(this).parent().find(".app_oper_r_un").show();
    		$(this).parent().find(".app_oper_r_un1").hide();
        });
    }
    
    //初始化mescroll1
    function initmescroll1(){
    	if(mescroll1 != null){
    		return;
    	}
    	mescroll1 = new MeScroll("mescroll1", {
    		up: {
    			auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
    			isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
    			callback: upCallback1, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
    			clearEmptyId: "dataList1", //1.下拉刷新时会自动先清空此列表,再加入数据; 2.无任何数据时会在此列表自动提示空
    			page: {
    				num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
    				size: 10 //每页数据条数,默认10
    			},
    			empty: {
    				//列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
    				warpId: "mescroll1", //父布局的id (1.3.5版本支持传入dom元素)
    				icon: "", //图标,默认null,支持网络图
    				tip: "" //提示
    			}
    		}
    	});
    }
    
    //上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 
    function upCallback1(page){
    	ajaxSyncRequest(getContextPath() + "getOperDrawList", {"phone": userPhone, "key": searchKey, "pageNo": page.num}, function(data){
    		if(data.success){
    			//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
    			//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
    			//方法一(推荐): 后台接口有返回列表的总页数 totalPage
    			mescroll1.endByPage(data.data.rows.length, data.data.totalPage); //必传参数(当前页的数据个数, 总页数)
    			//设置列表数据
    			if(data.data.totalPage == "1" && data.data.rows.length == 0){
    				$("#mescroll1 .app_empty").show();
    			}else{
    				$("#mescroll1 .app_empty").hide();
    				setListData1(data.data.rows);
    			}
    		}else{
    			//联网失败的回调,隐藏下拉刷新的状态
                mescroll1.endErr();
    		}
    	});
    }
    
    /*设置列表数据*/
    function setListData1(curPageData){
    	var listDom = document.getElementById("dataList1");
    	for (var i = 0; i < curPageData.length; i++) {
    		var data = curPageData[i];
    		var str='<div class="contain">';
    		str += '<div class="app_oper_r_ln">';
    		str += '<span class="app_oper_r_tz">'+data.orderNum+'</span>';
    		if(data.handleStatus == "1"){
    			str += '<span class="app_oper_r_sw">未审批</span>';
    		}else if(data.handleStatus == "2"){
    			str += '<span class="app_oper_r_ss">已审批</span>';
    		}else if(data.handleStatus == "3"){
    			str += '<span class="app_oper_r_st">已退回</span>';
    		}
    		str += '</div>';
    		str += '<svg class="app_svg_icon" aria-hidden="true">';
    		str += '<use xlink:href="#icon-shoujihao"><span class="app_oper_r_s"> 用户手机号：'+data.orderUser+'</span><br/></use>';
    		str += '</svg>';
    		str += '<svg class="app_svg_icon" aria-hidden="true">';
    		str += '<use xlink:href="#icon-tixianjinezengzhiwan"><span class="app_oper_r_s"> 申请提现金额：'+data.cardMoney+'</span><br/></use>';
    		str += '</svg>';
    		str += '<svg class="app_svg_icon" aria-hidden="true">';
    		str += '<use xlink:href="#icon-shenqingshijian"><span class="app_oper_r_s"> 申请时间：'+DateFormat.format(new Date(data.applyTime), 'yyyy-MM-dd hh:mm:ss')+'</span><br/></use>';
    		str += '</svg>';
    		str += '</div>';
    		str += '<div class="iconfont icon-xiala-anniu app_oper_r_m"></div>';
    		str += '<div class="app_oper_r_un"></div>';
    		str += '<div class="contain1">';
    		str += '<svg class="app_svg_icon" aria-hidden="true">';
    		str += '<use xlink:href="#icon-tixianjinezengzhiwan"><span class="app_oper_r_s"> 实际提现金额：'+data.finalMoney+'</span><br/></use>';
    		str += '</svg>';
    		str += '<svg class="app_svg_icon" aria-hidden="true">';
    		str += '<use xlink:href="#icon-beizhu"><span class="app_oper_r_s"> 备注：'+data.orderDesc+'</span><br/></use>';
    		str += '</svg>';
    		str += '</div>';
    		str += '<div class="iconfont icon-shangla-anniu app_oper_r_l"></div>';
    		str += '<div class="app_oper_r_un1"></div>';
    		if(data.handleStatus == "1"){
    			str += '<div class="app_oper_r_bt_p">';
    			str += '<a href="javascript:void(0);" class="app_oper_r_bt_s" onclick="approvePass(this.type);" type="'+data.id+','+data.orderUser+','+data.refundAccount+','+data.orderNum+'">审批</a>';
    			str += '<a href="javascript:void(0);" class="app_oper_r_bt_b" onclick="approveReject(this.type);" type="'+data.id+','+data.orderUser+','+data.refundAccount+','+data.orderNum+'">驳回</a>';
    			str += '</div>';
    		}
    		var liDom = document.createElement("li");
    		liDom.innerHTML = str;
    		addClickListener1(liDom, data);
    		listDom.appendChild(liDom);
    		//设置列表项默认隐藏
    		initExpandListDef(liDom);
    	}
    	//设置列表扩展状态
    	initExpandList();
    }
    
    /*添加列表点击事件*/
    function addClickListener1(el, data){
    	$(el).on('click', function(){          
    		//点击列表项时，处理
    	});
    }
    
    //审批通过
    function approvePass(str){
    	var param = str.split(",");
    	showDlg("确定批准该会员当前提现订单？", "提示");
    	$("#ok").unbind('click').click(function(){
    		$('#iosDialog2').fadeOut(200); 
    		ajaxSyncRequest(getContextPath() + "operDrawPass", {"phone": userPhone, "id": param[0], "mber": param[1], "guid": param[2], "order": param[3]}, function(data){
    			setTimeout(function(){
    				if(data.success){
    					showToast("操作成功");
    				}else{
    					showDlg(data.msg);
    				}
    			}, 500);
    		});
    	});
    }
    
    //审批驳回
    function approveReject(str){
    	var param = str.split(",");
    	showDlg("确定驳回该会员当前提现订单？", "提示");
    	$("#ok").unbind('click').click(function(){
    		$('#iosDialog2').fadeOut(200); 
    		ajaxSyncRequest(getContextPath() + "operDrawReject", {"phone": userPhone, "id": param[0], "mber": param[1], "guid": param[2], "order": param[3]}, function(data){
    			setTimeout(function(){
    				if(data.success){
    					showToast("操作成功");
    				}else{
    					showDlg(data.msg);
    				}
    			}, 500);
    		});
    	});
    }
    
    //初始化mescroll2
    function initmescroll2(){
    	if(mescroll2 != null){
    		return;
    	}
    	mescroll2 = new MeScroll("mescroll2", {
    		up: {
    			auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
    			isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
    			callback: upCallback2, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
    			clearEmptyId: "dataList2", //1.下拉刷新时会自动先清空此列表,再加入数据; 2.无任何数据时会在此列表自动提示空
    			page: {
    				num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
    				size: 10 //每页数据条数,默认10
    			},
    			empty: {
    				//列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
    				warpId: "mescroll2", //父布局的id (1.3.5版本支持传入dom元素)
    				icon: "", //图标,默认null,支持网络图
    				tip: "" //提示
    			}
    		}
    	});
    }
    
    //上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 
    function upCallback2(page){
    	ajaxSyncRequest(getContextPath() + "getOperRechargeList", {"phone": userPhone, "key": searchKey, "pageNo": page.num}, function(data){
    		if(data.success){
    			//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
    			//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
    			//方法一(推荐): 后台接口有返回列表的总页数 totalPage
    			mescroll2.endByPage(data.data.rows.length, data.data.totalPage); //必传参数(当前页的数据个数, 总页数)
    			//设置列表数据
    			if(data.data.totalPage == "1" && data.data.rows.length == 0){
    				$("#mescroll2 .app_empty").show();
    			}else{
    				$("#mescroll2 .app_empty").hide();
    				setListData2(data.data.rows);
    			}
    		}else{
    			//联网失败的回调,隐藏下拉刷新的状态
                mescroll2.endErr();
    		}
    	});
    }
    
    /*设置列表数据*/
    function setListData2(curPageData){
    	var listDom = document.getElementById("dataList2");
    	for (var i = 0; i < curPageData.length; i++) {
    		var data = curPageData[i];
    		var str='<div class="contain">'; 
    		str += '<div class="app_oper_r_ln">'; 
    		str += '<span class="app_oper_r_tz">'+data.orderNum+'</span>';
    		if(data.orderStatus == "1"){
    			str += '<span class="app_oper_r_sw">服务中</span>';
    		}else if(data.orderStatus == "2"){
    			str += '<span class="app_oper_r_ss">已完成</span>';
    		}else if(data.orderStatus == "3"){
    			str += '<span class="app_oper_r_st">异常中</span>';
    		}
    		str += '</div>';
    		str += '<svg class="app_svg_icon" aria-hidden="true">';
    		str += '<use xlink:href="#icon-shoujihao"><span class="app_oper_r_s"> 用户手机号：'+data.orderUser+'</span><br/></use>';
    		str += '</svg>';
    		str += '<svg class="app_svg_icon" aria-hidden="true">';
    		str += '<use xlink:href="#icon-jine"><span class="app_oper_r_s"> 实际结算：'+data.finalMoney+'</span><br/></use>';
    		str += '</svg>';
    		str += '<svg class="app_svg_icon" aria-hidden="true">';
    		str += '<use xlink:href="#icon-riqi"><span class="app_oper_r_s"> 日期：'+DateFormat.format(new Date(data.createTime), 'yyyy-MM-dd hh:mm:ss')+'</span><br/></use>';
    		str += '</svg>';
    		str += '</div>';
    		str += '<div class="iconfont icon-xiala-anniu app_oper_r_m"></div>';
    		str += '<div class="app_oper_r_un"></div>';
    		str += '<div class="contain1">';
    		str += '<svg class="app_svg_icon" aria-hidden="true">';
    		str += '<use xlink:href="#icon-chongzhijineicon"><span class="app_oper_r_s"> 充值金额：'+data.orderMoney+'</span><br/></use>';
    		str += '</svg>';
    		str += '<svg class="app_svg_icon" aria-hidden="true">';
    		str += '<use xlink:href="#icon-youhuijine"><span class="app_oper_r_s"> 优惠金额：'+data.discountMoney+'</span><br/></use>';
    		str += '</svg>';
    		str += '<svg class="app_svg_icon" aria-hidden="true">';
    		if(data.payStatus == "0"){
    			str += '<use xlink:href="#icon-renwuzhongxin_chulizhuangtai_icon_daiban"><span class="app_oper_r_s"> 支付状态：<span class="app_oper_r_ps_0">未支付</span></span><br/></use>';
    		}else if(data.payStatus == "1"){
    			str += '<use xlink:href="#icon-renwuzhongxin_chulizhuangtai_icon_daiban"><span class="app_oper_r_s"> 支付状态：<span class="app_oper_r_ps_1">已支付</span></span><br/></use>';
    		}else if(data.payStatus == "2"){
    			str += '<use xlink:href="#icon-renwuzhongxin_chulizhuangtai_icon_daiban"><span class="app_oper_r_s"> 支付状态：<span class="app_oper_r_ps_1">已提现</span></span><br/></use>';
    		}else if(data.payStatus == "3"){
    			str += '<use xlink:href="#icon-renwuzhongxin_chulizhuangtai_icon_daiban"><span class="app_oper_r_s"> 支付状态：<span class="app_oper_r_ps_1">已付款</span></span><br/></use>';
    		}
    		str += '</svg>';
    		str += '</div>';
    		str += '<div class="iconfont icon-shangla-anniu app_oper_r_l"></div>';
    		str += '<div class="app_oper_r_un1"></div>';
    		var liDom = document.createElement("li");
    		liDom.innerHTML = str;
    		addClickListener2(liDom, data);
    		listDom.appendChild(liDom);
    		//设置列表项默认隐藏
    		initExpandListDef(liDom);
    	}
    	//设置列表扩展状态
    	initExpandList();
    }
    
    /*添加列表点击事件*/
    function addClickListener2(el, data){
    	$(el).on('click', function(){          
    		//点击列表项时，处理
    	});
    }
    
    //初始化mescroll2
    function initmescroll3(){
    	if(mescroll3 != null){
    		return;
    	}
    	mescroll3 = new MeScroll("mescroll3", {
    		up: {
    			auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
    			isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
    			callback: upCallback3, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
    			clearEmptyId: "dataList3", //1.下拉刷新时会自动先清空此列表,再加入数据; 2.无任何数据时会在此列表自动提示空
    			page: {
    				num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
    				size: 10 //每页数据条数,默认10
    			},
    			empty: {
    				//列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
    				warpId: "mescroll3", //父布局的id (1.3.5版本支持传入dom元素)
    				icon: "", //图标,默认null,支持网络图
    				tip: "" //提示
    			}
    		}
    	});
    }
    
    //上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 
    function upCallback3(page){
    	ajaxSyncRequest(getContextPath() + "getOperRefundList", {"phone": userPhone, "key": searchKey, "pageNo": page.num}, function(data){
    		if(data.success){
    			//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
    			//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
    			//方法一(推荐): 后台接口有返回列表的总页数 totalPage
    			mescroll3.endByPage(data.data.rows.length, data.data.totalPage); //必传参数(当前页的数据个数, 总页数)
    			//设置列表数据
    			if(data.data.totalPage == "1" && data.data.rows.length == 0){
    				$("#mescroll3 .app_empty").show();
    			}else{
    				$("#mescroll3 .app_empty").hide();
    				setListData3(data.data.rows);
    			}
    		}else{
    			//联网失败的回调,隐藏下拉刷新的状态
                mescroll3.endErr();
    		}
    	});
    }
    
    /*设置列表数据*/
    function setListData3(curPageData){
    	var listDom = document.getElementById("dataList3");
    	for (var i = 0; i < curPageData.length; i++) {
    		var data = curPageData[i];
    		var str='<div class="contain">'; 
    		str += '<div class="app_oper_r_ln">'; 
    		str += '<span class="app_oper_r_tz">'+data.afterServiceNum+'</span>';
    		if(data.handleStatus == "1"){
    			str += '<span class="app_oper_r_sw">未处理</span>';
    		}else if(data.handleStatus == "2"){
    			str += '<span class="app_oper_r_ss">已处理</span>';
    		}
    		str += '</div>';
    		str += '<svg class="app_svg_icon" aria-hidden="true">';
    		str += '<use xlink:href="#icon-shenqinghuiyuan"><span class="app_oper_r_s"> 申请会员：'+data.member+'</span><br/></use>';
    		str += '</svg>';
    		str += '<svg class="app_svg_icon" aria-hidden="true">';
    		str += '<use xlink:href="#icon-shenqingshijian"><span class="app_oper_r_s"> 申请时间：'+DateFormat.format(new Date(data.applyTime), 'yyyy-MM-dd hh:mm:ss')+'</span><br/></use>';
    		str += '</svg>';
    		str += '<svg class="app_svg_icon" aria-hidden="true">';
    		str += '<use xlink:href="#icon-tuikuanjine"><span class="app_oper_r_s"> 退款金额：'+data.finalMoney+'</span><br/></use>';
    		str += '</svg>';
    		str += '</div>';
    		str += '<div class="iconfont icon-xiala-anniu app_oper_r_m"></div>';
    		str += '<div class="app_oper_r_un"></div>';
    		str += '<div class="contain1">';
    		str += '<svg class="app_svg_icon" aria-hidden="true">';
    		str += '<use xlink:href="#icon-dingdanhao-copy"><span class="app_oper_r_s"> 充电订单编号：'+data.orderNum+'</span><br/></use>';
    		str += '</svg>';
    		str += '<svg class="app_svg_icon" aria-hidden="true">';
    		str += '<use xlink:href="#icon-jine"><span class="app_oper_r_s"> 充电结算金额：'+data.chargeMoney+'</span><br/></use>';
    		str += '</svg>';
    		str += '<svg class="app_svg_icon" aria-hidden="true">';
    		str += '<use xlink:href="#icon-beizhu"><span class="app_oper_r_s"> 退款原因：'+data.clientReason+'</span><br/></use>';
    		str += '</svg>';
    		str += '</div>';
    		str += '<div class="iconfont icon-shangla-anniu app_oper_r_l"></div>';
    		str += '<div class="app_oper_r_un1"></div>';
    		if(data.handleStatus == "1"){
    			str += '<div class="app_oper_r_bt_p">';
    			var type = data.afterServiceNum+","+data.member+","+DateFormat.format(new Date(data.applyTime), 'yyyy-MM-dd hh:mm:ss')+","+data.finalMoney+","+data.orderNum+","+data.chargeMoney+","+data.clientReason+","+data.id;
    			str += '<a href="javascript:void(0);" class="app_oper_r_bt_s" onclick="refundAgree(this.type);" type="'+type+'">审批</a>';
    			str += '<a href="javascript:void(0);" class="app_oper_r_bt_b" onclick="refundReject(this.type);" type="'+type+'">驳回</a>';
    			str += '</div>';
    		}
    		var liDom = document.createElement("li");
    		liDom.innerHTML = str;
    		addClickListener3(liDom, data);
    		listDom.appendChild(liDom);
    		//设置列表项默认隐藏
    		initExpandListDef(liDom);
    	}
    	//设置列表扩展状态
    	initExpandList();
    }
    
    /*添加列表点击事件*/
    function addClickListener3(el, data){
    	$(el).on('click', function(){          
    		//点击列表项时，处理
    	});
    }
    
    //退款申请审批通过
    function refundAgree(str){
    	var param = str.split(",");
    	refundId = param[7];
    	$(".app_oper_r_fr").eq(0).text(param[4]);
    	$(".app_oper_r_fr").eq(1).text(param[5]);
    	$(".app_oper_r_fr").eq(2).text(param[3]);
    	$(".app_oper_r_fr").eq(3).text(param[6]);
    	$(".app_oper_r_fr").eq(5).text(param[1]);
    	$("#agree").css("display","block");
    	$(".lock").css("display","block");
    }
    
    //退款申请审批驳回
    function refundReject(str){
    	var param = str.split(",");
    	refundId = param[7];
    	$(".app_oper_r_fr").eq(4).text(param[0]);
    	$(".app_oper_r_fr").eq(5).text(param[1]);
    	$(".app_oper_r_fr").eq(6).text(param[4]);
    	$(".app_oper_r_fr").eq(7).text(param[2]);
    	$(".app_oper_r_fr").eq(8).text(param[5]);
    	$(".app_oper_r_fr").eq(9).text(param[3]);
    	$("#reject").css("display","block");
    	$(".lock").css("display","block");
    }
    
    //处理方式选择
    function setHandleWay(value){
    	if(value==2){
    		$('#customRow').show();
    	}else{
    		$('#customRow').hide();
    	}
    }
    
    //设置事件监听
    function setEventListener(){
    	//软键盘回车键搜索
    	$(".app_li_search input").bind('keypress', function (event) { 
        	if (event.keyCode == "13") { 
        		refreshData();
       		}
      	});
    	//搜索框文字变化监听
    	$(".app_li_search input").on('input propertychange', function(){
    		refreshData();
    	});
    	//点击列表，搜索框取消焦点
    	$(".w_all").on("touchstart", function(){
    		$(".app_li_search input").blur();
    	});
    	$(".mescroll").on("touchstart", function(){
    		$(".app_li_search input").blur();
    	});
    	//审批通过事件
    	$("#csm_pass").click(function(){
    		var money, mber;
    		var way = $("#selWay").val();
    		if(way == ""){
    			showDlg("请选择处理方式");
    			return;
    		}
    		if(way == "1"){
    			money = $(".app_oper_r_fr").eq(2).text();
    		}else{
    			money = $('#customRow input').val();
    			if(money == ""){
    				showDlg("请输入自定义金额");
    				return;
    			}
    		}
    		mber = $(".app_oper_r_fr").eq(5).text();
    		//审批通过
    		handleRefundAgree(money, mber);
    	});
    	//审批驳回事件
    	$("#csm_reject").click(function(){
    		var reason = $("#reason").val(); 
    		if(reason == ""){
    			showDlg("请输入驳回原因");
    			return;
    		}
    		//审批驳回
    		handleRefundReject(reason);
    	});
    }
    
    //刷新页面，重新获取页面数据
    function refreshData(){
    	searchKey = $(".app_li_search input").val();
    	//刷新数据
    	if(mescroll1 != null){
    		mescroll1.resetUpScroll();
    	}
    	if(mescroll2 != null){
    		mescroll2.resetUpScroll();
    	}
    	if(mescroll3 != null){
    		mescroll3.resetUpScroll();
    	}
    }
    
    //审批通过
    function handleRefundAgree(money, mber){
    	ajaxSyncRequest(getContextPath() + "operRefundPass", {"phone": userPhone, "id": refundId, "mber": mber, "money": money}, function(data){
    		if(data.success){
    			showToast("操作成功");
    		}else{
    			showDlg(data.msg);
    		}
    	});
    }
    
    //审批驳回
    function handleRefundReject(reason){
    	ajaxSyncRequest(getContextPath() + "operRefundReject", {"phone": userPhone, "id": refundId, "reason": reason}, function(data){
    		if(data.success){
    			showToast("操作成功");
    		}else{
    			showDlg(data.msg);
    		}
    	});
    }
    </script>
    <style type="text/css">
    .mescroll{
    	position: fixed;
    	top: 100px;
    	bottom: 0;
    	height: auto; /*如设置bottom:50px,则需height:auto才能生效*/
    }
    </style>
    </head>
    <body>
    <div class="app_pop_price" style="display:none;" id="agree">
        <div class="app_pop_pt">退款申请详情</div>
        <div class="app_pop_pi">
        	<ul class="app_oper_r_dg">    
            	<li><span class="app_oper_r_fl">订单编号:</span><span class="app_oper_r_fr">S3YF0001001190822153724</span></li>
                <li><span class="app_oper_r_fl">充电结算金额:</span><span class="app_oper_r_fr">33</span></li>
                <li><span class="app_oper_r_fl">申请退款金额:</span><span class="app_oper_r_fr">33</span></li>
                <li><span class="app_oper_r_fl">退款原因:</span><span class="app_oper_r_fr">没有原因</span></li>
                <li>
                	<span class="app_oper_r_fl">处理方式:</span>
                	<select onchange="setHandleWay(this.value)" id="selWay">
    					<option value="" >- 请选择 -</option>
    					<option value="1">以申请退款金额为准</option>
    					<option value="2">自定义金额</option>          
                	</select>
                </li>
                <li id="customRow" style="display:none">
                	<span class="app_oper_r_fl">自定义金额:</span>
                	<input type="number" style="width:100px;"/>
                </li>
            </ul>
        </div>
        <div class="app_oper_r_pb">
        	<button class="app_oper_r_bt_o close_b bg_b" id="csm_pass">确定</button>
        	<button class="app_oper_r_bt_c close_b" id="csm_cancel">取消</button>
        </div>
    </div>
    <div class="app_pop_price" style="display:none;" id="reject">
        <div class="app_pop_pt">退款详情</div>
        <div class="app_pop_pi">
        	<ul class="app_oper_r_dg">
        		<li><span class="app_oper_r_fl">售后编号:</span><span class="app_oper_r_fr">RF1821602819120190822154308</span></li>
        		<li><span class="app_oper_r_fl">申请会员:</span><span class="app_oper_r_fr">15524262871</span></li>
            	<li><span class="app_oper_r_fl">订单编号:</span><span class="app_oper_r_fr">S3YF0001001190822153724</span></li>
            	<li><span class="app_oper_r_fl">申请时间:</span><span class="app_oper_r_fr">2019-08-22 15:43:09</span></li>
                <li><span class="app_oper_r_fl">充电结算金额:</span><span class="app_oper_r_fr">33</span></li>
                <li><span class="app_oper_r_fl">申请退款金额:</span><span class="app_oper_r_fr">33</span></li>
                <li><span class="app_oper_r_fl">驳回原因:</span><input type="text" style="width:150px;" id="reason"/></li>          
            </ul>
        </div>
        <div class="app_oper_r_pb">
        	<button class="app_oper_r_bt_o close_b bg_b" id="csm_reject">确定</button>
        	<button class="app_oper_r_bt_c close_b" id="csm_cancel">取消</button>
        </div>
    </div>
    <div class="lock" style="display:none;"></div>
    <div class="w_all app_main">
    	<div class="app_quick">
        	<b class="iconfont"></b>
            <dl>
            	<dd><a href="javascript:void(0);">扫一扫</a></dd>
                <dd><a href="javascript:void(0);">充电搜索</a></dd>
                <dd><a href="javascript:void(0);">钱包充值</a></dd>
                <dd><a href="javascript:void(0);">服务订单</a></dd>
                <dd><a href="javascript:void(0);">个人中心</a></dd>
            </dl>
        </div>
        <div class="lock" style="display:none;"></div>  
        <div class="app_li_search">
        	<label><b class="iconfont"></b><input type="search" value="" placeholder="输入用户手机号" /></label>
        </div>
        <div class="app_q_menu" style="margin-top:53px;">
        	<ul>
            	<li class="app_qm_in">会员提现订单</li>
                <li>会员充值订单</li>
                <li>会员退款订单</li>
            </ul>
        </div>
        <div id="mescroll1" class="app_oper_r_li mescroll" style="display:block;">
        	<div class="app_empty" style="display:none;">
        		<b class="iconfont"></b>
            	<i>暂无数据</i>
        	</div>
        	<ul id="dataList1">   
            </ul>
        </div>
        <div id="mescroll2" class="app_oper_r_li mescroll">
        	<div class="app_empty" style="display:none;">
        		<b class="iconfont"></b>
            	<i>暂无数据</i>
        	</div>
        	<ul id="dataList2">   
            </ul> 
        </div>
        <div id="mescroll3" class="app_oper_r_li mescroll">
        	<div class="app_empty" style="display:none;">
        		<b class="iconfont"></b>
            	<i>暂无数据</i>
        	</div> 
        	<ul id="dataList3">    
            </ul>
        </div>
    </div>
    
    <div class="js_dialog" id="iosDialog1" style="display:none;">
        <div class="weui-mask"></div>
        <div class="weui-dialog">
            <div class="weui-dialog__bd">弹窗内容，告知当前状态、信</div>
            <div class="weui-dialog__ft">
                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
            </div>
        </div>
    </div>
    <div class="js_dialog" id="iosDialog2" style="display:none;">
        <div class="weui-mask"></div>
        <div class="weui-dialog">
            <div class="weui-dialog__hd"><strong class="weui-dialog__title">提示</strong></div>
            <div class="weui-dialog__bd"></div>
            <div class="weui-dialog__ft">
                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" id="ok">确认</a>
                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">取消</a>
            </div>
        </div>
    </div>
    
    <div id="toast" style="display:none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-icon-success-no-circle weui-icon_toast"></i>
            <p class="weui-toast__content">已完成</p>
        </div>
    </div>
    
    <div id="loadingToast" style="display:none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-loading weui-icon_toast"></i>
            <p class="weui-toast__content">数据加载中</p>
        </div>
    </div>    
    </body>
    </html>