html5列表嵌套按钮，click点击事件及传参处理
程序员文章站
2022-05-11 10:24:40
...
<li click事件>
列表第一项<button click事件></button>或<a click事件></a>
</li>
<li click事件>
列表第二项<button click事件></button>或<a click事件></a>
</li>
采用下拉刷新控件mescroll.js实现list
方法：
<div id="mescroll1" class="app_deta_li mescroll" style="display:block;">
<div class="app_empty" style="display:none;">
<b class="iconfont"></b>
<i>暂无数据</i>
</div>
<ul id="dataList1"> <!--
<li>
<p class="app_dl_t">标题<span class="fr col_ob">已完成</span></p>
<p class="app_dl_i">
<label>内容一</label>
<label>内容二</label>
<label>内容三</label>
<i><font class="col_oo">0.39</font>元</i>
</p>
<p class="app_dl_b"><a href="javascript:void(0);" class="fr curr_bt ashide">按钮一</a><a href="javascript:void(0);" class="fr curr_bt">按钮二</a></p>
</li> -->
</ul>
</div>js
//初始化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"> <!--
<li>
<div class="contain">
<div class="app_oper_r_ln">
<span class="app_oper_r_tz">CW1867670561420190916110541</span><span class="app_oper_r_sw">未审批</span>
</div>
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-shoujihao"><span class="app_oper_r_s"> 用户手机号：15524262871</span><br/></use>
</svg>
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-tixianjinezengzhiwan"><span class="app_oper_r_s"> 申请提现金额：33</span><br/></use>
</svg>
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-shenqingshijian"><span class="app_oper_r_s"> 申请时间：2019-10-10 15:30</span><br/></use>
</svg>
</div>
<div class="iconfont icon-xiala-anniu app_oper_r_m"></div>
<div class="app_oper_r_un"></div>
<div class="contain1">
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-tixianjinezengzhiwan"><span class="app_oper_r_s"> 实际提现金额：33</span><br/></use>
</svg>
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-beizhu"><span class="app_oper_r_s"> 备注：没有备注</span><br/></use>
</svg>
</div>
<div class="iconfont icon-shangla-anniu app_oper_r_l"></div>
<div class="app_oper_r_un1"></div>
<div class="app_oper_r_bt_p">
<a class="app_oper_r_bt_s" onclick="withdrawalAgree();">审批</a>
<a class="app_oper_r_bt_b" onclick="withdrawalReject();">驳回</a>
</div>
</li>
<li>
<div class="contain">
<div class="app_oper_r_ln">
<span class="app_oper_r_tz">CW1867670561420190916110541</span><span class="app_oper_r_ss">已审批</span>
</div>
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-shoujihao"><span class="app_oper_r_s"> 用户手机号：15524262871</span><br/></use>
</svg>
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-tixianjinezengzhiwan"><span class="app_oper_r_s"> 申请提现金额：33</span><br/></use>
</svg>
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-shenqingshijian"><span class="app_oper_r_s"> 申请时间：2019-10-10 15:30</span><br/></use>
</svg>
</div>
<div class="iconfont icon-xiala-anniu app_oper_r_m"></div>
<div class="app_oper_r_un"></div>
<div class="contain1">
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-tixianjinezengzhiwan"><span class="app_oper_r_s"> 实际提现金额：33</span><br/></use>
</svg>
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-beizhu"><span class="app_oper_r_s"> 备注：没有备注</span><br/></use>
</svg>
</div>
<div class="iconfont icon-shangla-anniu app_oper_r_l"></div>
<div class="app_oper_r_un1"></div>
</li>
<li>
<div class="contain">
<div class="app_oper_r_ln">
<span class="app_oper_r_tz">CW1867670561420190916110541</span><span class="app_oper_r_st">退回</span>
</div>
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-shoujihao"><span class="app_oper_r_s"> 用户手机号：15524262871</span><br/></use>
</svg>
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-tixianjinezengzhiwan"><span class="app_oper_r_s"> 申请提现金额：33</span><br/></use>
</svg>
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-shenqingshijian"><span class="app_oper_r_s"> 申请时间：2019-10-10 15:30</span><br/></use>
</svg>
</div>
<div class="iconfont icon-xiala-anniu app_oper_r_m"></div>
<div class="app_oper_r_un"></div>
<div class="contain1">
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-tixianjinezengzhiwan"><span class="app_oper_r_s"> 实际提现金额：33</span><br/></use>
</svg>
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-beizhu"><span class="app_oper_r_s"> 备注：没有备注</span><br/></use>
</svg>
</div>
<div class="iconfont icon-shangla-anniu app_oper_r_l"></div>
<div class="app_oper_r_un1"></div>
</li> -->
</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"> <!--
<li>
<div class="contain">
<div class="app_oper_r_ln">
<span class="app_oper_r_tz">RC1552426287120190912113259</span><span class="app_oper_r_sw">服务中</span>
</div>
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-shoujihao"><span class="app_oper_r_s"> 用户手机号：15524262871</span><br/></use>
</svg>
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-jine"><span class="app_oper_r_s"> 实际结算：33</span><br/></use>
</svg>
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-riqi"><span class="app_oper_r_s"> 日期：2019-10-10 15:30</span><br/></use>
</svg>
</div>
<div class="iconfont icon-xiala-anniu app_oper_r_m"></div>
<div class="app_oper_r_un"></div>
<div class="contain1">
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-chongzhijineicon"><span class="app_oper_r_s"> 充值金额：33</span><br/></use>
</svg>
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-youhuijine"><span class="app_oper_r_s"> 优惠金额：0</span><br/></use>
</svg>
<svg class="app_svg_icon" aria-hidden="true">
<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>
</svg>
</div>
<div class="iconfont icon-shangla-anniu app_oper_r_l"></div>
<div class="app_oper_r_un1"></div>
</li>
<li>
<div class="contain">
<div class="app_oper_r_ln">
<span class="app_oper_r_tz">RC1552426287120190912113259</span><span class="app_oper_r_ss">已完成</span>
</div>
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-shoujihao"><span class="app_oper_r_s"> 用户手机号：15524262871</span><br/></use>
</svg>
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-jine"><span class="app_oper_r_s"> 实际结算：33</span><br/></use>
</svg>
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-riqi"><span class="app_oper_r_s"> 日期：2019-10-10 15:30</span><br/></use>
</svg>
</div>
<div class="iconfont icon-xiala-anniu app_oper_r_m"></div>
<div class="app_oper_r_un"></div>
<div class="contain1">
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-chongzhijineicon"><span class="app_oper_r_s"> 充值金额：33</span><br/></use>
</svg>
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-youhuijine"><span class="app_oper_r_s"> 优惠金额：0</span><br/></use>
</svg>
<svg class="app_svg_icon" aria-hidden="true">
<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>
</svg>
</div>
<div class="iconfont icon-shangla-anniu app_oper_r_l"></div>
<div class="app_oper_r_un1"></div>
</li>
<li>
<div class="contain">
<div class="app_oper_r_ln">
<span class="app_oper_r_tz">RC1552426287120190912113259</span><span class="app_oper_r_st">异常</span>
</div>
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-shoujihao"><span class="app_oper_r_s"> 用户手机号：15524262871</span><br/></use>
</svg>
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-jine"><span class="app_oper_r_s"> 实际结算：33</span><br/></use>
</svg>
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-riqi"><span class="app_oper_r_s"> 日期：2019-10-10 15:30</span><br/></use>
</svg>
</div>
<div class="iconfont icon-xiala-anniu app_oper_r_m"></div>
<div class="app_oper_r_un"></div>
<div class="contain1">
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-chongzhijineicon"><span class="app_oper_r_s"> 充值金额：33</span><br/></use>
</svg>
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-youhuijine"><span class="app_oper_r_s"> 优惠金额：0</span><br/></use>
</svg>
<svg class="app_svg_icon" aria-hidden="true">
<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>
</svg>
</div>
<div class="iconfont icon-shangla-anniu app_oper_r_l"></div>
<div class="app_oper_r_un1"></div>
</li> -->
</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"> <!--
<li>
<div class="contain">
<div class="app_oper_r_ln">
<span class="app_oper_r_tz">RF1312897801520190824213004</span><span class="app_oper_r_sw">未处理</span>
</div>
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-shenqinghuiyuan"><span class="app_oper_r_s"> 申请会员：15524262871</span><br/></use>
</svg>
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-shenqingshijian"><span class="app_oper_r_s"> 申请时间：2019-10-10 15:30</span><br/></use>
</svg>
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-tuikuanjine"><span class="app_oper_r_s"> 退款金额：33</span><br/></use>
</svg>
</div>
<div class="iconfont icon-xiala-anniu app_oper_r_m"></div>
<div class="app_oper_r_un"></div>
<div class="contain1">
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-dingdanhao-copy"><span class="app_oper_r_s"> 充电订单编号：S3YF0001001190820105709</span><br/></use>
</svg>
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-jine"><span class="app_oper_r_s"> 充电结算金额：33</span><br/></use>
</svg>
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-beizhu"><span class="app_oper_r_s"> 退款原因：没有原因</span><br/></use>
</svg>
</div>
<div class="iconfont icon-shangla-anniu app_oper_r_l"></div>
<div class="app_oper_r_un1"></div>
<div class="app_oper_r_bt_p">
<a class="app_oper_r_bt_s" onclick="refundAgree();">审批</a>
<a class="app_oper_r_bt_b" onclick="refundReject();">驳回</a>
</div>
</li>
<li>
<div class="contain">
<div class="app_oper_r_ln">
<span class="app_oper_r_tz">RF1312897801520190824213004</span><span class="app_oper_r_ss">已处理</span>
</div>
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-shenqinghuiyuan"><span class="app_oper_r_s"> 申请会员：15524262871</span><br/></use>
</svg>
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-shenqingshijian"><span class="app_oper_r_s"> 申请时间：2019-10-10 15:30</span><br/></use>
</svg>
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-tuikuanjine"><span class="app_oper_r_s"> 退款金额：33</span><br/></use>
</svg>
</div>
<div class="iconfont icon-xiala-anniu app_oper_r_m"></div>
<div class="app_oper_r_un"></div>
<div class="contain1">
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-dingdanhao-copy"><span class="app_oper_r_s"> 充电订单编号：S3YF0001001190820105709</span><br/></use>
</svg>
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-jine"><span class="app_oper_r_s"> 充电结算金额：33</span><br/></use>
</svg>
<svg class="app_svg_icon" aria-hidden="true">
<use xlink:href="#icon-beizhu"><span class="app_oper_r_s"> 退款原因：没有原因</span><br/></use>
</svg>
</div>
<div class="iconfont icon-shangla-anniu app_oper_r_l"></div>
<div class="app_oper_r_un1"></div>
</li> -->
</ul>
</div>
</div>
<!-- 微信dialog -->
<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>
<!-- 微信toast -->
<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>
<!-- loading toast -->
<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> <!--
<script type="text/javascript" src="../js/wx_foot.js"></script> -->
</body>
</html>