需求
点击添加按钮,弹出弹窗,将信息填入点击确认后,在列表详情中会出现一个只有名字的块,点击出现详情。
点击弹出啊弹窗,填入信息。
点击确认后添加至详情出现色块
点击详情中的色块可以查看、编辑、删除。
代码
弹窗是自己写的没有用框架的。
<div id="popover-dialog" style="height: 250px;">
<form class="mui-input-group lmr-dialog">
<div class="mui-input-row">
<label>姓名</label>
<input type="text" id="addlmr-name" class="mui-input-clear" placeholder="请输入姓名">
</div>
<div class="mui-input-row">
<label>身份证号</label>
<input type="text" id="addlmr-id" class="mui-input-clear" placeholder="请输入证件号码">
</div>
<div class="mui-input-row">
<label>住址</label>
<input type="hidden" id="lmraddressdm">
<input type="text" id="lmraddressmc" class="mui-input" placeholder="请选择住址" readonly unselectable="on">
<span class="mui-icon mui-icon-forward"></span>
</div>
<div class="mui-input-row">
<label>详细住址</label>
<input type="text" id="addlmr-xxzz" class="mui-input-clear" placeholder="请输入详细住址">
</div>
<div class="mui-button-row father-dialogbtn-box">
<div class="dialog-btns">
<button type="button" id="lmradd-confirm" class="mui-btn mui-btn-primary" >确认</button> 
<button type="button" id="lmradd-look-confirm" class="mui-btn mui-btn-primary" >确认</button> 
<button type="button" id="lmradd-cancel" class="mui-btn" >取消</button> 
<button type="button" id="lmradd-del" class="mui-btn mui-btn-danger" >删除</button>
</div>
</div>
</form>
</div>
<div id="lmr-dialog-mask"></div>
document.querySelector("#addLmr").addEventListener('tap', (e)=>{//添加联名人按钮
e.stopPropagation();
openLmrDlg("add");
});
document.querySelector("#lmradd-confirm").addEventListener('tap', (e)=>{//弹窗确定按钮动态添加联名人
e.stopPropagation();
addLmr();
});
document.querySelector("#lmradd-cancel").addEventListener('tap', (e)=>{//取消按钮
e.stopPropagation();
closeLmrDlg();
});
document.querySelector("#lmradd-del").addEventListener('tap', (e)=>{//查看编辑状态下的删除按钮
e.stopPropagation();
delLmr();
closeLmrDlg();
});
let lmrList = [];
let currentEdit = null;
function openLmrDlg(type){
console.log(currentEdit);
document.querySelector("#lmr-dialog-mask").style.display = "block";
document.querySelector("#popover-dialog").style.display = "block";
document.querySelector("#lmradd-confirm").style.display = "inline-block";
if(type=='add'){
document.querySelector("#lmradd-del").style.display = "none";
}else{
document.querySelector("#lmradd-del").style.display = "inline-block";
document.querySelector("#addlmr-name").value = lmrList[currentEdit].xm ;
document.querySelector("#addlmr-id").value = lmrList[currentEdit].sfzh;
document.querySelector("#lmraddressdm").value = lmrList[currentEdit].xzqhdm;
document.querySelector("#lmraddressmc").value = lmrList[currentEdit].xzqhmc;
document.querySelector("#addlmr-xxzz").value = lmrList[currentEdit].zz;
}
}
function closeLmrDlg(){
currentEdit = null;
document.querySelector("#addlmr-name").value = "";
document.querySelector("#addlmr-id").value = "";
document.querySelector("#lmraddressdm").value = "";
document.querySelector("#lmraddressmc").value = "";
document.querySelector("#addlmr-xxzz").value = "";
document.querySelector("#lmr-dialog-mask").style.display = "none";
document.querySelector("#popover-dialog").style.display = "none";
let lmrs = lmrList.length;
document.querySelector("#lmrs").innerText = lmrs;
if(lmrs>0){
document.querySelector("#lmrxq-garden").style.display = "";
}else{
document.querySelector("#lmrxq-garden").style.display = "none";
}
}
function resolveLmr(){
let addlmrName = document.querySelector("#addlmr-name").value;
let addlmrID = document.querySelector("#addlmr-id").value;
let addlmrAdressdm = document.querySelector("#lmraddressdm").value;
let addlmrAdressmc = document.querySelector("#lmraddressmc").value;
let addlmrxxzz = document.querySelector("#addlmr-xxzz").value;
if(addlmrName == "" || addlmrID == "" || addlmrAdressdm == "" || addlmrAdressmc == "" || addlmrxxzz == ""){
mui.toast('请将信息填写完整');
return null;
}
let lmrxx = {};
lmrxx.xm = addlmrName;
lmrxx.sfzh = addlmrID;
lmrxx.xzqhdm = addlmrAdressdm;
lmrxx.xzqhmc = addlmrAdressmc;
lmrxx.zz = addlmrxxzz;
return lmrxx;
}
function addLmr(){
let lmrxx = resolveLmr();
if(!lmrxx){
return;
}
if(currentEdit != null){
lmrList.splice(currentEdit,1,lmrxx);
}else{
lmrList.push(lmrxx);
}
drawLmrDiv();
closeLmrDlg();
}
function delLmr(){
lmrList.splice(currentEdit,1);
drawLmrDiv();
}
function drawLmrDiv(){
document.querySelector(".lmrxq-garden").innerHTML = "";
lmrList.forEach(function(element,index){
var lmrDom = document.createElement("div");
lmrDom.className = "lmrxq-box lmrbox-"+ index;
lmrDom.innerHTML = element.xm;
lmrDom.addEventListener('tap', (e)=>{
currentEdit = index;
openLmrDlg("edit");
});
document.querySelector(".lmrxq-garden").appendChild(lmrDom);
})
}