前端弹窗手机版 上拉下滑加载
程序员文章站
2022-05-29 08:06:00
...
页面需要包括这些个字段
<section class="aui-searchbar" style="margin-top:2.25rem;" id="search">
<div class="aui-searchbar-input aui-border-radius">
<i class="aui-iconfont aui-icon-search"></i>
<input type="search" placeholder="请输入搜索内容" id="search-input">
<div class="aui-searchbar-clear-btn">
<i class="aui-iconfont aui-icon-close"></i>
</div>
</div>
<div class="aui-searchbar-btn">取消</div>
</section>
<section class="aui-content" id="mescroll" style="height:95%;">
<ul class="aui-list aui-media-list" id="dataList">
</ul>
</section>
<input type="hidden" id="order_input" name="order_input" value="createDesc">
<input type="hidden" id="filter_input" name="filter_input" value="all">
<input type="hidden" id="count_input" name="count_input" value="0">
js部分，需要修改url地址，看情况修改
$(function () {
$('.aui-retrie dt a').click(function () {
var $t = $(this);
if ($t.hasClass('up')) {
$(".aui-retrie dt a").removeClass('up');
$('.downlist').hide();
$('.mask').hide();
} else {
$(".aui-retrie dt a").removeClass('up');
$('.downlist').hide();
$t.addClass('up');
$('.downlist').eq($(".aui-retrie dt a").index($(this)[0])).show();
$('.mask').show();
}
});
$(".sorting ul li a:contains('" + $('#sorting').text() + "')").addClass('selected');
$(".filtrate ul li a:contains('" + $('#filtrate').text() + "')").addClass('selected');
//首页
$('#crm_index').bind('click', function () {
window.location.href = ctx + '/crmIndex';
});
//新增
$('#customer_add').bind('click', function () {
window.location.href = yCtx + '/customerApi/addCustomerPage';
});
//排序
$('#aescOne').bind('click', {'aesc': 'aescOne'}, order);
$('#aescTwo').bind('click', {'aesc': 'aescTwo'}, order);
$('#aescThree').bind('click', {'aesc': 'aescThree'}, order);
$('#aescFour').bind('click', {'aesc': 'aescFour'}, order);
function order(data) {
$('#order_input').val(data.data.aesc);
query();
$(".aui-retrie dt a").removeClass('up');
$('.downlist').hide();
$('.mask').hide();
}
//常用筛选
$('#all').bind('click', {'value': 'all'}, commonlyUsed);
$('#self').bind('click', {'value': 'self'}, commonlyUsed);
$('#participation').bind('click', {'value': 'participation'}, commonlyUsed);
function commonlyUsed(data) {
if (data.data.value == "all") {
$("#all").addClass("aui-btn-info");
$("#all").addClass("aui-btn-outlined");
$("#self").removeClass("aui-btn-info");
$("#self").removeClass("aui-btn-outlined");
$("#participation").removeClass("aui-btn-info");
$("#participation").removeClass("aui-btn-outlined");
} else if (data.data.value == "self") {
$("#all").removeClass("aui-btn-info");
$("#all").removeClass("aui-btn-outlined");
$("#self").addClass("aui-btn-info");
$("#self").addClass("aui-btn-outlined");
$("#participation").removeClass("aui-btn-info");
$("#participation").removeClass("aui-btn-outlined");
} else if (data.data.value == "participation") {
$("#all").removeClass("aui-btn-info");
$("#all").removeClass("aui-btn-outlined");
$("#self").removeClass("aui-btn-info");
$("#self").removeClass("aui-btn-outlined");
$("#participation").addClass("aui-btn-info");
$("#participation").addClass("aui-btn-outlined");
}
$('#commonlyUsed_input').val(data.data.value);
}
//客户分类
$('#allCutomerType').bind('click', {'value': '0'}, cutomerType);
$('#lowUpCutomerType').bind('click', {'value': '3'}, cutomerType);
$('#ordinaryCutomerType').bind('click', {'value': '2'}, cutomerType);
$('#importantCutomerType').bind('click', {'value': '1'}, cutomerType);
function cutomerType(data) {
if (data.data.value == "0") {
$("#allCutomerType").addClass("aui-btn-info");
$("#allCutomerType").addClass("aui-btn-outlined");
$("#lowUpCutomerType").removeClass("aui-btn-info");
$("#lowUpCutomerType").removeClass("aui-btn-outlined");
$("#ordinaryCutomerType").removeClass("aui-btn-info");
$("#ordinaryCutomerType").removeClass("aui-btn-outlined");
$("#importantCutomerType").removeClass("aui-btn-info");
$("#importantCutomerType").removeClass("aui-btn-outlined");
} else if (data.data.value == "3") {
$("#allCutomerType").removeClass("aui-btn-info");
$("#allCutomerType").removeClass("aui-btn-outlined");
$("#lowUpCutomerType").addClass("aui-btn-info");
$("#lowUpCutomerType").addClass("aui-btn-outlined");
$("#ordinaryCutomerType").removeClass("aui-btn-info");
$("#ordinaryCutomerType").removeClass("aui-btn-outlined");
$("#importantCutomerType").removeClass("aui-btn-info");
$("#importantCutomerType").removeClass("aui-btn-outlined");
} else if (data.data.value == "2") {
$("#allCutomerType").removeClass("aui-btn-info");
$("#allCutomerType").removeClass("aui-btn-outlined");
$("#lowUpCutomerType").removeClass("aui-btn-info");
$("#lowUpCutomerType").removeClass("aui-btn-outlined");
$("#ordinaryCutomerType").addClass("aui-btn-info");
$("#ordinaryCutomerType").addClass("aui-btn-outlined");
$("#importantCutomerType").removeClass("aui-btn-info");
$("#importantCutomerType").removeClass("aui-btn-outlined");
} else if (data.data.value == "1") {
$("#allCutomerType").removeClass("aui-btn-info");
$("#allCutomerType").removeClass("aui-btn-outlined");
$("#lowUpCutomerType").removeClass("aui-btn-info");
$("#lowUpCutomerType").removeClass("aui-btn-outlined");
$("#ordinaryCutomerType").removeClass("aui-btn-info");
$("#ordinaryCutomerType").removeClass("aui-btn-outlined");
$("#importantCutomerType").addClass("aui-btn-info");
$("#importantCutomerType").addClass("aui-btn-outlined");
}
$('#cutomerType_input').val(data.data.value);
}
//跟进频率
$('#allFollowUp').bind('click', {'value': 'allFollowUp'}, followUp);
$('#seven').bind('click', {'value': 'seven'}, followUp);
$('#fifteen').bind('click', {'value': 'fifteen'}, followUp);
function followUp(data) {
if (data.data.value == "allFollowUp") {
$("#allFollowUp").addClass("aui-btn-info");
$("#allFollowUp").addClass("aui-btn-outlined");
$("#seven").removeClass("aui-btn-info");
$("#seven").removeClass("aui-btn-outlined");
$("#fifteen").removeClass("aui-btn-info");
$("#fifteen").removeClass("aui-btn-outlined");
} else if (data.data.value == "seven") {
$("#allFollowUp").removeClass("aui-btn-info");
$("#allFollowUp").removeClass("aui-btn-outlined");
$("#seven").addClass("aui-btn-info");
$("#seven").addClass("aui-btn-outlined");
$("#fifteen").removeClass("aui-btn-info");
$("#fifteen").removeClass("aui-btn-outlined");
} else if (data.data.value == "fifteen") {
$("#allFollowUp").removeClass("aui-btn-info");
$("#allFollowUp").removeClass("aui-btn-outlined");
$("#seven").removeClass("aui-btn-info");
$("#seven").removeClass("aui-btn-outlined");
$("#fifteen").addClass("aui-btn-info");
$("#fifteen").addClass("aui-btn-outlined");
}
$('#followUp_input').val(data.data.value);
}
//搜索
$("#search-input").bind('input propertychange', function () {
if ($("#search-input").val() != null) {
$("#btnClose").css("display", "block");
} else {
$("#btnClose").css("display", "none");
}
});
$('#btnClose').click(function () {//清空搜索内容
$("#search-input").val("");
});
$('#search').bind('click', function () {
$(".aui-retrie dt a").removeClass('up');
$('.downlist').hide();
$('.mask').hide();
query();
});
//筛选确定按钮
$('#confirm').bind('click', function () {
$(".aui-retrie dt a").removeClass('up');
$('.downlist').hide();
$('.mask').hide();
query();
});
//根据查询条件查询数据
function query() {
$("#customerCount_input").val(0);
$.ajax({
type: "POST",
url: yCtx + '/customerApi/getCustomerList',
data: $('#queryFrom').serialize(),// 你的formid
async: true,
success: function (data) {
$("#dataList").html("");
setListData(data);
}
});
}
$('#reset').bind('click', reset);//重置
function reset() {
$('#commonlyUsed_input').val("all");
$('#cutomerType_input').val("0");
$('#followUp_input').val("allFollowUp");
$("#all").addClass("aui-btn-info");
$("#all").addClass("aui-btn-outlined");
$("#self").removeClass("aui-btn-info");
$("#self").removeClass("aui-btn-outlined");
$("#participation").removeClass("aui-btn-info");
$("#participation").removeClass("aui-btn-outlined");
$("#allCutomerType").addClass("aui-btn-info");
$("#allCutomerType").addClass("aui-btn-outlined");
$("#lowUpCutomerType").removeClass("aui-btn-info");
$("#lowUpCutomerType").removeClass("aui-btn-outlined");
$("#ordinaryCutomerType").removeClass("aui-btn-info");
$("#ordinaryCutomerType").removeClass("aui-btn-outlined");
$("#importantCutomerType").removeClass("aui-btn-info");
$("#importantCutomerType").removeClass("aui-btn-outlined");
$("#allFollowUp").addClass("aui-btn-info");
$("#allFollowUp").addClass("aui-btn-outlined");
$("#seven").removeClass("aui-btn-info");
$("#seven").removeClass("aui-btn-outlined");
$("#fifteen").removeClass("aui-btn-info");
$("#fifteen").removeClass("aui-btn-outlined");
}
//创建MeScroll对象,内部已默认开启下拉刷新,自动执行up.callback,重置列表数据;
var mescroll = new MeScroll("mescroll", {
down: {
callback: function () {
$("#dataList").html("");
$("#customerCount_input").val(0);
getListData();
}
},
up: {
auto: true,
loadFull: {
use: false, //列表数据过少,是否自动加载下一页,直到满屏或者无更多数据为止;默认false
delay: 500 //延时执行的毫秒数; 延时是为了保证列表数据或占位的图片都已初始化完成,且下拉刷新上拉加载中区域动画已执行完毕;
},
callback: getListData, //上拉回调,此处可简写; 相当于 callback: function (page) { getListData(page); }
isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
clearEmptyId: "dataList", //1.下拉刷新时会自动先清空此列表,再加入数据; 2.无任何数据时会在此列表自动提示空
use: true,
htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">加载中..</p>',
htmlNodata: '<p class="upwarp-nodata">-- 没有更多数据了 --</p>',
offset: 100,
isLock: false
}
});
/*联网加载列表数据 */
function getListData() {
//联网加载数据
getListDataFromNet(function (curPageData) {
//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
mescroll.endBySize(10, curPageData.count);
var cCount = $("#customerCount_input").val() == null || $("#customerCount_input").val() == "" ? 0 : $("#customerCount_input").val();
var hasNext = false;
if (cCount < curPageData.count) {
hasNext = true;
}
mescroll.endSuccess(10, hasNext);
//设置列表数据,因为配置了emptyClearId,第一页会清空dataList的数据,所以setListData应该写在最后;
setListData(curPageData);
}, function () {
//联网失败的回调,隐藏下拉刷新和上拉加载的状态;
mescroll.endErr();
});
}
/*设置列表数据*/
function setListData(data) {
var listDom = document.getElementById("dataList");
if (data != null && data != "") {
$("#noDataList").css("display", "none");
$("#mescroll").css("display", "block");
var html = "";
if ($("#listCount").html() == null) {
var liDom = document.createElement("li");
var li = "<li class=\"aui-list-header\" id=\"listCount\">共有客户：" + data.count + "</li>";
liDom.innerHTML = li;
listDom.appendChild(liDom);
}
if (data != null && data.customerList != null) {
for (var i = 0; i < data.customerList.length; i++) {
html = html + "<div onclick=\"goCustoemrShow(\'" + data.customerList[i]["id"] + "\')\" class=\"aui-media-list-item-inner\"><div class=\"aui-list-item-inner\"><div class=\"aui-list-item-text\"><div class=\"aui-list-item-title\">" + data.customerList[i]["name"] + "</div><div class=\"aui-list-item-right\">" + data.customerList[i]["person_name"] + "</div></div>";
if ((data.customerList[i]["area_name"] != null && data.customerList[i]["address"] == null) || (data.customerList[i]["address"] == "" && data.customerList[i]["area_name"] != "")) {
html = html + "<div class=\"aui-list-item-text\">" + data.customerList[i]["area_name"] + "</div></div></div></li>";
} else if ((data.customerList[i]["area_name"] == null && data.customerList[i]["address"] != null) || (data.customerList[i]["address"] != "" && data.customerList[i]["area_name"] == "")) {
html = html + "<div class=\"aui-list-item-text\">" + data.customerList[i]["address"] + "</div></div></div></li>";
} else if ((data.customerList[i]["area_name"] != null && data.customerList[i]["address"] != null) && (data.customerList[i]["address"] != "" && data.customerList[i]["area_name"] != "")) {
html = html + "<div class=\"aui-list-item-text\">" + data.customerList[i]["area_name"] + "-" + data.customerList[i]["address"] + "</div></div></div></li>";
} else if ((data.customerList[i]["area_name"] == null && data.customerList[i]["address"] == null) || (data.customerList[i]["address"] == "" && data.customerList[i]["area_name"] == "")) {
html = html + "<div class=\"aui-list-item-text\">暂无地址</div></div></div>";
}
}
var liDom = document.createElement("li");
liDom.setAttribute("class", "aui-list-item");
liDom.innerHTML = html;
listDom.appendChild(liDom);
}
$("#customerCount_input").val(data.currentCount);
$("#listCount").html("共有客户：" + data.count);
} else if ((data == null || data == "") && listDom.getRootNode.length == 0) {
$("#noDataList").css("display", "block");
$("#mescroll").css("display", "none");
}
}
/*联网加载列表数据
在您的实际项目中,请参考官方写法: http://www.mescroll.com/api.html#tagUpCallback
请忽略getListDataFromNet的逻辑,这里仅仅是在本地模拟分页数据,本地演示用
实际项目以您服务器接口返回的数据为准,无需本地处理分页.
* */
function getListDataFromNet(successCallback, errorCallback) {
$.ajax({
type: "POST",
url: yCtx + '/customerApi/getCustomerList',
data: {
"search": $("#search-input").val(),
"filter": $('#filter_input').val(),
"order": $('#order_input').val(),
"count": $('#count_input').val()
},
async: true,
success: function (data) {
successCallback(data);
},
error: errorCallback
});
}
});
//客户详情页面
function goCustoemrShow(id) {
window.location.href = yCtx + '/customerApi/showCustomerPage?id=' + id;
}
接口
@ResponseBody
@RequestMapping(value = "getCustomerList", method = RequestMethod.POST, produces = "application/json;charset=UTF-8")
public Map<String, Object> getSalesKit(HttpServletRequest request) {
List<Map<String, Object>> result;
Map<String, Object> resultMap = new HashMap<>();
try {
String order = request.getParameter("order");// 排序 --按最后跟进时间正序:aescOne,按最后跟进时间倒序:aescTwo,按创建时间倒序:aescThree,按创建时间正序:aescFour
String commonlyUsed = request.getParameter("commonlyUsed");// 常用筛选--全部:all,我负责的:self,我参予的:participation
String cutomerType = request.getParameter("cutomerType");// 客户分类--全部:0,低价值客户:3 ,普通客户:2, 重要客户:1
String followUp = request.getParameter("followUp");// 跟进频率--全部:allFollowUp,7天未跟进:seven,15天未跟进:fifteen
String search = request.getParameter("search");
String count = request.getParameter("count");//每次要加载的数量
String openId = request.getSession(false).getAttribute("openId").toString();
if (openId == null) return null;
SysUserExample exm = new SysUserExample();
SysUserExample.Criteria cri = exm.createCriteria();
cri.andOpenIdEqualTo(openId);
List<SysUser> userList = sysUserService.selectByExample(exm);//按条件查询
if (!userList.isEmpty()) {
SysUser user = userList.get(0);
Map<String, Object> map = new HashMap<>();
map.put("companyId", user.getCompanyId());
map.put("userId", user.getId());
if (StringUtils.isNotBlank(order)) {
map.put("order", order);
}
if (StringUtils.isNotBlank(commonlyUsed)) {
map.put("commonlyUsed", commonlyUsed);
}
if (StringUtils.isNotBlank(cutomerType)) {
map.put("cutomerType", cutomerType);
}
if (StringUtils.isNotBlank(followUp)) {
map.put("followUp", followUp);
}
if (StringUtils.isNotBlank(search)) {
map.put("search", search);
}
// 查总数量
result = crmDefinedSQLService.getCustomerListToApp(map);
if (!result.isEmpty()) {
resultMap.put("count", result.size());
} else {
resultMap.put("count", 0);
}
if (StringUtils.isNotBlank(count)) {
map.put("currentCount", Integer.parseInt(count) + 10);
result = crmDefinedSQLService.getCustomerListToApp(map);
if (!result.isEmpty()) {
resultMap.put("currentCount", result.size());
} else {
resultMap.put("currentCount", 0);
}
map.remove("currentCount");
map.put("beginItem", Integer.parseInt(count));
}
result = crmDefinedSQLService.getCustomerListToApp(map);
resultMap.put("customerList", result);
return resultMap;
}
} catch (Exception e) {
e.printStackTrace();
logger.error("轻应用-销售简报查询出错：" + e.getMessage());
}
return null;
}
getCustomerListToApp
public List<Map<String, Object>> getCustomerListToApp(Map<String, Object> map);
@Override
public List<Map<String, Object>> getCustomerListToApp(Map<String, Object> map) {
return crmDefinedSQLMapper.getCustomerListToApp(map);
}
public List<Map<String, Object>> getCustomerListToApp(Map<String, Object> map);
<select id="getCustomerListToApp" resultType="java.util.Map">
SELECT t1.id, t1.name, t1.area_name, t1.address , t1.person_id,t1.person_name
from crm_customer t1 LEFT JOIN crm_followlog t2 on t1.id = t2.customer_id
where 1=1
<if test="userId != '' and userId != null ">
<choose>
<when test="filter !=null and filter !='' and filter == 'self' "><!--常用筛选 ： 我负责的 -->
and t1.person_id = #{userId}
</when>
<when test="filter !=null and filter !='' and filter == 'participation' "><!--常用筛选： 我参予的-->
and t1.id in (SELECT t3.customer_id from crm_customer_share t3 where t3.user_id = #{userId})
</when>
<otherwise>
and t1.create_id = #{userId}
<if test="companyId != '' and companyId != null ">
and t1.company_id = #{companyId}
</if>
</otherwise>
</choose>
</if>
<if test="search !=null and search !='' "><!--客户名称模糊搜索 -->
and t1.name LIKE '%${search}%'
</if>
<if test="cutomerType !=null and cutomerType !='' and cutomerType =='1' or cutomerType =='2' or cutomerType =='3'"><!--客户级别 -->
and t1.customer_level_id = #{cutomerType}
</if>
<choose>
<when test="followUp !=null and followUp !='' and followUp == 'seven' "><!--跟进频率：7天未跟进-->
AND (SELECT TIMESTAMPDIFF(day,t2.follow_date,CURDATE())) > 7
</when>
<when test="followUp !=null and followUp !='' and followUp == 'fifteen' "><!--跟进频率：15天未跟进-->
AND (SELECT TIMESTAMPDIFF(day,t2.follow_date,CURDATE())) > 15
</when>
</choose>
GROUP BY t1.id
<choose>
<when test="order !=null and order !='' and order == 'aescOne' "><!--按最后跟进时间正序-->
ORDER BY t2.follow_date ASC,t1.number ASC
</when>
<when test="order !=null and order !='' and order == 'aescTwo' "><!--按最后跟进时间倒序-->
ORDER BY t2.follow_date DESC,t1.number ASC
</when>
<when test="order !=null and order !='' and order == 'aescThree' "><!--按创建时间倒序-->
ORDER BY t1.create_date DESC,t1.number DESC
</when>
<otherwise><!--aescFour 按创建时间正序-->
ORDER BY t1.create_date ASC,t1.number ASC
</otherwise>
</choose>
<if test="currentCount!= null and currentCount!='' "><!--加载更多 -->
limit 0, #{currentCount}
</if>
<if test="beginItem != null "><!--加载更多 -->
limit #{beginItem}, 10;
</if>
</select>
弹窗调用
layer.open({
title: ['客户'],
type: 2,//0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
content: yCtx + '/customerApi/f7listCustomer',
area: ['320px', '395px'],
maxmin: true,
btn: ['确认', '取消'],
yes: function (index, layero) {
var form = $(layero).find("iframe").contents().find("#dataList");//获取子页面元素
//使用#id就可以获取到弹出层里面的子元素。前面的写法都是固定的。
var chk = form.find('input:checked');
if (chk.length === 0) {
layer.msg('请选中一个');
return false;
}
var li = form.find('input[name="radio"]:checked').parents('li');
var customerId = $(li).find("input[name='customerId']").val();
var customerName = $(li).find("input[name='customerName']").val();
$("#customerId").val(customerId);
$("#customerName").val(customerName);
layer.close(index);
}
});
部分不明白可以参考
下一篇： notebook
推荐阅读