两个<c:forEach>设计flag 判断执行

最新推荐文章于 2020-07-08 13:51:47 发布
最新推荐文章于 2020-07-08 13:51:47 发布 · 80 阅读 · 0

<c:set var="flag" value="0" />
<c:forEach items="${procommentList }" var="var2">
<c:if
test="${var.product.id==var2.productInfo.id && var.id==var2.orderproduct.id }">
<c:set var="flag" value="1" /> //条件都满足的时候设为1
</c:if>
</c:forEach>
<c:if test="${flag==0 }"> //只要一个条件不满足为0
iteye_8029
关注
循环中请谨慎使用逻辑判断：在for循环中立个flag！并在if...else...语句中小心处理或且非
gavincz的博客
11-27 1616
这两天，在项目中遇到一个实际问题，因为自己的逻辑判断没处理好，花费了我2天的时间处理这个 bug ，因此，在这里记录下，以免以后在犯这样的傻问题： 问题描述： 业务场景： 在一个for循环的表格中，每一行都有一个 select 的下拉框，而这些下拉框 options 的数据，是异步从后端获取的同一份数据，且这份数据有且只有一份（这是重点，即共用一份 options 数据），业务要求是：1.每...
分布式 第四章 Spring Boot 初步
日天家的猫
06-27 528
文章目录1 Spring Boot框架入门2 Spring Boot入门案例3 Spring Boot框架Web开发3.1 Spring Boot集成 MyBatis3.2 Spring Boot事务支持3.3 Spring Boot下的 Spring MVC3.4 Spring Boot实现 ResTful3.5 Spring Boot集成Redis3.6 Spring Boot集成Dubbo3.6.1 开发Dubbo服务接口3.6.2 开发 Dubbo 服务提供者3.6.3 开发 Dubbo 服务消费者
forEach遍历按钮绑定事件
W_qwahaha的博客
01-03 4224
通过C标签forEach迭代出来的按钮等都需要绑定唯一id（代码中acid） jsp: onclick="AddTogo(${activity.acid});" &lt;c:forEach items="${activitylist}" var="activity"&gt; &lt;c:if test="${activity.stdid!=sessionScope.student.stdid}...
JSTL标签用法：<c:choose><c:forEach><c:if><c:when><c:set>
weixin_30399871的博客
07-03 411
JSP 标准标记库（ Standard Tag Library ， JSTL) 是一组以标准化格式实现许多通用的 Web 站点功能的定制标记。 JSP 技术的优势之一在于其定制标记库工具。除了核心 JSP 标记，如 jsp:include 之外，定制标记库工具使您能够创建唯一的标记来描述以站点或应用程序为导向的操作。一旦您创建了定制标记库 ( 简称 taglib) ，当您扩展项目或转向另一个项目...
JSP的<c:choose><c:forEach><c:if><c:when><c:set>标签
ruiguang21的博客
12-10 864
JSTL标签用法： JSP 标准标记库（ Standard Tag Library ， JSTL) 是一组以标准化格式实现许多通用的 Web 站点功能的定制标记。 JSP 技术的优势之一在于其定制标记库工具。除了核心 JSP 标记，如 jsp:include 之外，定制标记库工具使您能够创建唯一的标记来描述以站点或应用程序为导向的操作。一旦您创建了定制标记库 ( 简称 ta
JSP的<c:choose> <c:forEach> <c:if> <c:when> <c:set>标签
xyr05288的专栏
05-28 2618
JSP的 标签   JSP 标准标记库（ Standard Tag Library ， JSTL) 是一组以标准化格式实现许多通用的 Web 站点功能的定制标记。 JSP 技术的优势之一在于其定制标记库工具。除了核心 JSP 标记，如 jsp:include 之外，定制标记库工具使您能够创建唯一的标记来描述以站点或应用程序为导向的操作。一旦您创建了定制标记库
JSTL标签参考手册，JSTL标签用法：<c:choose><c:forEach><c:if><c:when><c:set>
Baple的专栏
01-06 8332
http://elf8848.iteye.com/blog/245559 核心标签库  ========================================================================== JSTL 核心标签库(C标签)标签共有13个，功能上分为4类： 1.表达式控制标签：out、set、remove、catch 2.流程控制标
JSTL标签用法：<c:choose><c:forEach><c:if><...
黑鹰
02-17 2588
JSTL标签用法 关键字：JSTL标签、、、、、、、、、、、、、、 原来一直没有看过，我说过我是新手，但是好多资料上似乎也不重视 JSTL 。我看项目源代码发现其中使用到了这个标签库，感觉其还真是方便，页面看起来更加清爽。减少了 JAVA 程序员亲自写的代码量，还真验证了，不懒不做程序员，程序员如果写代码不想着偷懒，那么生活是很无趣的。 下面总结总结，学习学习。：） JSP 标准标记库（
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="/WEB-INF/tags/inc.jsp"%> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <base href="${ctx }/"></base> <meta http-equiv="X-UA-Compatible" content="IE=8"></meta> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta> <meta http-equiv="pragma" content="no-cache"></meta> <meta http-equiv="cache-control" content="no-cache"></meta> <meta http-equiv="expires" content="0"></meta> <title>非车险承保业务清单</title> <%@ include file="/WEB-INF/tags/css.jsp"%> <%@ include file="/WEB-INF/tags/script.jsp"%> <%@ include file="/WEB-INF/tags/artDialog.jsp"%> <link rel="stylesheet" href="static/rFCUnderLA/rFCUnderLA_list.css"> <!-- 设置导航地址 --> <script type="text/javascript"> $("#locSpan", window.parent.document).html("${dq}"); </script> </head> <body> <div class="impaction"> <div class="institutions"> <form id="form" method="POST"> <input type="hidden" name="dq" value="${dq}"> <table class="form_table"> <tr> <td class="search_title">机构：</td> <td><input id="company" name="company" class="search_input"></input></td> <td class="search_title">产品：</td> <td><input id="risk" name="risk" class="search_input"></input></td> <td class="search_title">核保通过时间：</td> <td> <input id="underdateStart" name="underdateStart" type="text" class="easyui-datebox search_input" data-options="editable:true" value="${params.underdateStart}"></input> ~ <input id="underdateEnd" name="underdateEnd" type="text" class="easyui-datebox search_input" data-options="editable:true" value="${params.underdateEnd}"></input> </td> </tr> <tr> <td class="search_title">保单类型：</td> <td><input id="policytype" name="policytype" class="search_input"></input></td> <td class="search_title">业务来源：</td> <td><input id="source" name="source" class="search_input"></input></td> <td class="search_title">起保日期：</td> <td> <input id="startdateStart" name="startdateStart" type="text" class="easyui-datebox search_input" data-options="editable:true" value="${params.startdateStart}"></input> ~ <input id="startdateEnd" name="startdateEnd" type="text" class="easyui-datebox search_input" data-options="editable:true" value="${params.startdateEnd}"></input> </td> </tr> <tr> <td class="search_title">渠道：</td> <td><input id="channel" name="channel" class="search_input"></input></td> <td class="search_title">业务团队：</td> <td><input id="team" name="team" class="search_input"></input></td> <td class="search_title">核保日期与生效日期大者：</td> <td> <input id="maxdateStart" name="maxdateStart" type="text" class="easyui-datebox search_input" data-options="editable:true" value="${params.maxdateStart}"></input> ~ <input id="maxdateEnd" name="maxdateEnd" type="text" class="easyui-datebox search_input" data-options="editable:true" value="${params.maxdateEnd}"></input> </td> </tr> <tr> <td class="search_title">创新业务标识：</td> <td><input id="surveyind" name="surveyind" class="search_input"></input></td> <td class="search_title">股东业务标识：</td> <td><input id="isshareholder" name="isshareholder" class="search_input"></input></td> <td class="search_title">保险止期：</td> <td> <input id="enddateStart" name="enddateStart" type="text" class="easyui-datebox search_input" data-options="editable:true" value="${params.enddateStart}"></input> ~ <input id="enddateEnd" name="enddateEnd" type="text" class="easyui-datebox search_input" data-options="editable:true" value="${params.enddateEnd}"></input> </td> </tr> <tr> <td class="search_title">业务员代码：</td> <td><input id="handler1code" name="handler1code" class="easyui-textbox search_input" value="${params.handler1code }"></input></td> <td class="search_title">业务员名称：</td> <td><input id="handler1name" name="handler1name" class="easyui-textbox search_input" value="${params.handler1name }"></input></td> <td class="search_title">保险金额：</td> <td> <input id="sumamountStart" name="sumamountStart" type="text" class="easyui-numberbox search_input" data-options="precision:2" value="${params.sumamountStart}"></input> ~ <input id="sumamountEnd" name="sumamountEnd" type="text" class="easyui-numberbox search_input" data-options="precision:2" value="${params.sumamountEnd}"></input> </td> </tr> <tr> <td class="search_title">代理人代码：</td> <td><input id="intermediarycode" name="intermediarycode" class="easyui-textbox search_input" value="${params.intermediarycode }"></input></td> <td class="search_title">代理人名称：</td> <td><input id="intermediaryname" name="intermediaryname" class="easyui-textbox search_input" value="${params.intermediaryname }"></input></td> <td class="search_title">保费收入：</td> <td> <input id="sumpremStart" name="sumpremStart" type="text" class="easyui-numberbox search_input" data-options="precision:2" value="${params.sumpremStart}"></input> ~ <input id="sumpremEnd" name="sumpremEnd" type="text" class="easyui-numberbox search_input" data-options="precision:2" value="${params.sumpremEnd}"></input> </td> </tr> <tr> <td class="search_title">号牌号码：</td> <td><input id="fieldaf" name="fieldaf" class="easyui-textbox search_input" value="${params.fieldaf }"></input></td> <td class="search_title">默认列表：</td> <td><input id="dim" name="dim" class="search_input"></input></td> <td class="search_title">自选列表：</td> <td><input id="val" name="val" class="search_input"></input></td> </tr> <tr> <td class="search_title">客户类型：</td> <td><input id="aInsuredTypeName" name="aInsuredTypeName" class="search_input" /></td> </tr> <tr> <td><input id="searchInput" type="button" class="inquiry fl marg12" value="查询" onclick="searchTable()"></input></td> <td> <input id="downloadInput" type="button" class="inquiry fl marg12" value="下载" onclick="downloadTable()"></input> <input id="inputSum" name="inputSum" type="text"></input> </td> </tr> </table> </form> <script type="text/javascript"> $('#aInsuredTypeName').combobox({ valueField: 'id', textField: 'text', data : [{"id":"","text":"全选"},{"id":"个人","text":"个人"},{"id":"团体","text":"团体"}], multiple : false, editable : false, prompt : "全部交易", onShowPanel : function() { $('.tree-file').remove(); }, onLoadSuccess : function() { if ('${params.aInsuredTypeName}') { $("#aInsuredTypeName").combobox("setValue", '${params.aInsuredTypeName}'); } }, }); <%--$('#aInsuredTypeName').combobox({--%> <%-- valueField: 'id',--%> <%-- textField: 'text',--%> <%-- data : [{"id":"","text":"全选"},{"id":"个人","text":"个人"},{"id":"团体","text":"团体"}],--%> <%-- editable : false,--%> <%-- multiple : false,--%> <%-- prompt : "请选择",--%> <%-- onLoadSuccess : function(){--%> <%-- $('#aInsuredTypeName').combobox('clear');--%> <%-- if('${params.aInsuredTypeName}'){--%> <%-- $('#aInsuredTypeName').combobox('setValue', '${params.aInsuredTypeName}');--%> <%-- }--%> <%-- }--%> <%--});--%> </script> <script type="text/javascript"> $('#company').combotree({ data : JSON.parse('${companys}'), lines : true, editable : true, multiple : true, prompt : "请选择", onShowPanel : function() { $('.tree-folder').remove(); $('.tree-file').remove(); } }); </script> <script type="text/javascript"> $('#risk').combotree({ data : JSON.parse('${risks}'), panelHeight : '400px', lines : true, editable : true, multiple : true, prompt : "请选择", onShowPanel : function() { $('.tree-folder').remove(); $('.tree-file').remove(); } }); </script> <script type="text/javascript"> $('#policytype').combobox({ valueField: 'id', textField: 'text', data : [{"id":"N","text":"最新保单"},{"id":"O","text":"原始保单"},{"id":"E","text":"原始保单+批单"}], editable : false, multiple : false, prompt : "请选择", onLoadSuccess : function(){ if('${params.policytype}'){ $('#policytype').combobox('setValue', '${params.policytype}'); } } }); </script> <script type="text/javascript"> $('#source').combotree({ data : JSON.parse('${sources}'), lines : true, editable : true, multiple : true, prompt : "请选择", onShowPanel : function() { $('.tree-folder').remove(); $('.tree-file').remove(); } }); </script> <script type="text/javascript"> $('#channel').combotree({ valueField: 'id', textField: 'text', data : JSON.parse('${channels}'), editable : true, multiple : true, prompt : "请选择", onLoadSuccess : function(){ if('${params.channel}'){ $('#channel').combotree('setValues', '${params.channel}'.split(',')); } }, onShowPanel : function() { $('.tree-folder').remove(); $('.tree-file').remove(); } }); </script> <script type="text/javascript"> $('#team').combotree({ valueField: 'id', textField: 'text', data : JSON.parse('${teams}'), lines : true, editable : true, multiple : true, prompt : "请选择", onShowPanel : function() { $('.tree-folder').remove(); $('.tree-file').remove(); } }); </script> <script type="text/javascript"> $('#surveyind').combotree({ valueField: 'id', textField: 'text', data : JSON.parse('${surveyinds}'), lines : true, editable : true, multiple : true, prompt : "请选择", onShowPanel : function() { $('.tree-folder').remove(); $('.tree-file').remove(); } }); </script> <script type="text/javascript"> $('#isshareholder').combotree({ valueField: 'id', textField: 'text', data : JSON.parse('${isshareholders}'), editable : true, multiple : true, prompt : "请选择", onLoadSuccess : function(){ if('${params.isshareholder}'){ $('#isshareholder').combotree('setValues', '${params.isshareholder}'.split(',')); } }, onShowPanel : function() { $('.tree-folder').remove(); $('.tree-file').remove(); } }); </script> <script type="text/javascript"> $('#dim').combotree({ valueField: 'id', textField: 'text', data: JSON.parse('${dims}'), editable: true, multiple: true, prompt: "请选择", onLoadSuccess: function () { if ('${params.dim}') { $('#dim').combotree('setValues', '${params.dim}'.split(',')); } }, onShowPanel: function () { $('.tree-folder').remove(); $('.tree-file').remove(); } }); </script> <script type="text/javascript"> $('#val').combotree({ valueField: 'id', textField: 'text', data: JSON.parse('${vals}'), editable: true, multiple: true, prompt: "请选择", onLoadSuccess: function () { if ('${params.val}') { $('#val').combotree('setValues', '${params.val}'.split(',')); } }, onShowPanel: function () { $('.tree-folder').remove(); $('.tree-file').remove(); } }); </script> </div> <div class="physical"> <c:if test="${not empty dimNodesList and dimNodesList != null}"> <table class="datalist"> <tr class="titlehead"> <c:forEach items="${dimNodesList }" var="var"> <c:choose> <c:when test="${var.text == '清单总数'}"> <c:if test="${params.deptid == '0111'}"> <th>清单总数</th> </c:if> </c:when> <c:when test="${var.text == '批单号' && (params.policytype == 'O' || params.policytype == 'N') }"> </c:when> <c:otherwise> <th>${var.text}</th> </c:otherwise> </c:choose> </c:forEach> </tr> <c:forEach items="${rFCUnderLAs}" var="var"> <tr> <c:forEach items="${dimNodesList}" var="var2"> <c:choose> <c:when test="${fn:indexOf(var2.type, 'Val') != -1}"> <c:choose> <c:when test="${var2.id == 'coinsrate' || var2.id == 'commissionratio' || var2.id == 'fsh' || var2.id == 'personalkpiratio' || var2.id == 'commissionpersonalkpiratio' || var2.id == 'reinssharerate' || var2.id == 'coinsissuerate'|| var2.id == 'damageFee'|| var2.id == 'otherPrevention'|| var2.id == 'MARKET_ACQUISITION_COST_RATE'}"> <td class="tdright"><fmt:formatNumber pattern=",##0.00%" value="${var[var2.id] }" /></td> </c:when> <c:when test="${var2.id == 'num'}"> <c:if test="${params.deptid == '0111'}"> <td class="tdright"><fmt:formatNumber pattern=",##0" value="${var[var2.id] }" /></td> </c:if> </c:when> <c:when test="${var2.id == 'installmentno'}"> <td class="tdright"><fmt:formatNumber pattern=",##0" value="${var[var2.id] }" /></td> </c:when> <c:otherwise> <td class="tdright"><fmt:formatNumber pattern=",##0.00" value="${var[var2.id]}" /></td> </c:otherwise> </c:choose> </c:when> <c:when test="${var2.id == 'endorseqno' && (params.policytype == 'O' || params.policytype == 'N') }"> </c:when> <c:otherwise> <td>${var[var2.id]}</td> </c:otherwise> </c:choose> </c:forEach> </tr> </c:forEach> </table> <div id="page" class="easyui-pagination" data-options=" total: ${page.totalResult }, pageNumber:${page.currentPage }, pageSize:${page.showCount }, layout:['list','first','prev','sep','links','sep','next','last','manual'], onSelectPage: function(pageNumber, pageSize){ searchPage(pageNumber, pageSize) }"></div> </c:if> </div> </div> <script type="text/javascript"> function searchTable() { if ($("#dim").combotree("getText") == "" ) { alert("默认列表至少要勾选其中一个值！"); } else { $("#form").attr("action", "${ctx}/rFCUnderLA/list?menuid=${menuid}").submit(); } } </script> <script type="text/javascript"> function searchPage(pageNumber, pageSize) { $("#form").attr( "action", "${ctx}/rFCUnderLA/list?menuid=${menuid}&pageNo=" + pageNumber + "&pageSize=" + pageSize).submit(); } </script> <script type="text/javascript"> //下载 function downloadTable(){ if ("${page.totalResult }" == "") { $("#downloadInput").css("background-color", "gray"); alert("请先查询再下载！"); } else if (parseInt("${page.totalResult }") > 1000000) { $("#downloadInput").css("background-color","gray"); alert("数据记录超过100万，无法下载，请筛选后再重试！"); } else if ($("#dim").combotree("getText") == "") { alert("维度列表或指标列表至少要勾选其中一个值！"); } else { var m = confirm("你确认要进行下载吗？"); if (m == true) { alert("文件正在制作中，请到下载专区下载！"); var underdate = "核保通过时间："+$("#underdateStart").datebox("getText")+"~"+$("#underdateEnd").datebox("getText")+"；\\n"; var startdate = "起保日期："+$("#startdateStart").datebox("getText")+"~"+$("#startdateEnd").datebox("getText")+"；\\n"; var maxdate = "核保日期与生效日期大者："+$("#maxdateStart").datebox("getText")+"~"+$("#maxdateEnd").datebox("getText")+"；\\n"; var enddate = "保险止期："+$("#enddateStart").datebox("getText")+"~"+$("#enddateEnd").datebox("getText")+"；\\n"; var sumamount = "保险金额："+$("#sumamountStart").textbox("getText")+"~"+$("#sumamountEnd").textbox("getText")+"；\\n"; var sumprem = "保费收入："+$("#sumpremStart").textbox("getText")+"~"+$("#sumpremEnd").textbox("getText")+"；\\n"; var company = "机构："+($("#company").combotree("getText")?$("#company").combotree("getText"):"请选择")+"；\\n"; var risk = "产品："+($("#risk").combotree("getText")?$("#risk").combotree("getText"):"请选择")+"；\\n"; var policytype = "保单类型："+$("#policytype").combobox("getText")+"；"; var channel = "渠道："+($("#channel").combotree("getText")?$("#channel").combotree("getText"):"请选择")+"；\\n"; var source = "业务来源："+($("#source").combotree("getText")?$("#source").combotree("getText"):"请选择")+"；\\n"; var team = "业务团队："+($("#team").combotree("getText")?$("#team").combotree("getText"):"请选择")+"；\\n"; var surveyind = "创新业务标识："+$("#surveyind").combotree("getText")+"；\\n"; var isshareholder = "股东业务标识："+($("#isshareholder").combotree("getText")?$("#isshareholder").combotree("getText"):"请选择")+"；\\n"; var handler1code = "业务员代码："+$("#handler1code").textbox("getText")+"；\\n"; var handler1name = "业务员名称："+$("#handler1name").textbox("getText")+"；\\n"; var intermediarycode = "代理人代码："+$("#intermediarycode").textbox("getText")+"；\\n"; var intermediaryname = "代理人名称："+$("#intermediaryname").textbox("getText")+"；\\n"; var dim = "维度列表：" + $("#dim").combotree("getText") + "；\\n"; var val = "指标列表：" + $("#val").combotree("getText") + "；\\n"; var aInsuredTypeName = "客户类型："+$("#aInsuredTypeName").textbox("getText")+"；\\n"; var inputSum = underdate + startdate + maxdate + enddate + sumamount + sumprem + company + risk + policytype + source + channel + team + surveyind + isshareholder + handler1code + handler1name + intermediarycode + intermediaryname + dim + val + aInsuredTypeName; $("#inputSum").val(inputSum); $.ajax({ type : "POST", url : "${ctx}/rFCUnderLA/download", data : $('#form').serialize(), }); } } } </script> <script type="text/javascript"> window.onload = function() { if ("${page.totalResult }" == "" || parseInt("${page.totalResult }") > 1000000 || ($("#dim").combotree("getText") == null || $("#val") .combotree("getText") == null)) { $("#downloadInput").css("background-color", "gray"); } } </script> </body> </html> 请判断为什么 创新业务标识 时常出不来下拉按钮，但是股东业务标识 和业务团队 这些下拉选择没问题
07-10
<c:forEach items="${innovateBizList}" var="item"> <!-- 检查此集合 --> <option value="${item.code}" ${item.code eq selectedValue ? 'selected' : ''}> <!-- 引用[2][^2] --> ${item.name} </option> ...
请完善以下代码：使得在添加新的ul元素时，隐藏之前所有的ul元素 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .box { width: 500px; margin: 200px auto; } ul { width: 392px; padding: 5px; list-style: none; border: 1px solid red; } li:hover { background-color: red; } input { width: 400px; } button { width: 70px; } </style> </head> <body> <div class="box"> <input type="text"/> <button>搜索</button> <!--<ul> <li>aaaa</li> <li>bbb</li> <li>ccc</li> </ul>--> </body> <script> var arr = ["a","ab","abc","abcd","aa","aaa"]; var box=document.getElementsByClassName("box")[0]; var inp=box.children[0]; inp.onkeyup=function(){ var flag=0; console.log(this.value) var newArr=[]; for (var i=0;i<arr.length;i++) { var val=this.value; if(arr[i].indexOf(val)===0){ newArr.push("<li>"+arr[i]+"</li>"); flag=1; } } var str=newArr.join(""); console.log(newArr) var ul=document.createElement("ul"); ul.innerHTML=str; if(flag==1){ box.appendChild(ul); } } </script> </html>
07-15
所以，最终代码修改如下：</think># 实现动态添加UL并隐藏之前的UL 根据您的需求，我将实现一个搜索建议功能：在输入框输入时动态显示匹配的列表，每次添加新UL时隐藏之前的UL元素。 ## 实现思路 1. 在输入框输入...
这是我的 uniapp 制作一个筛选功能 调用组件页面: <fu-filter-dropdown :top="CustomBar" @changeFilter="changeFilter"></fu-filter-dropdown> 组件页面: 还没有写 我希望是 跟图片一样的 右侧弹窗的 , 能够选择 :1.开始时间 2.结束时间 3.快速选择: 本周 上周 本月 上月 近15天 近30天的; 4.仓库列表 ,5.供应商列表,6.订单状态列表 ; 其中4,5,6随便弄点假数据就行 预留出接口位置 , 然后最后还需要 清空所有筛选条件 , 然后这个右侧弹窗的 底部 有两个按钮 确定 和 关闭 ; 目的就是 确定之后 我要进行传给父页面 请求接口数据的 这是组件目前代码: 完全可以替我修改掉 里面代码都是没用不相关的 <template> <view id="wrapper" class="wrapper bg-white solid-bottom" :style="[{top: top+'px'}]"> <view id="content1" class="padding-lr flex content1 " style="height: 108rpx;"> <view class="flex"> <view class=" flex align-center justify-end" @click="drawerhandle"> <!-- <text class="text-999 text-sm">{{i18n['筛选']}}</text> --> <image src="/static/shaixuan.png" style="width: 40rpx;height: 40rpx;" mode=""></image> </view> </view> </view> <fu-popup v-model="showDrawer" mode="right" :safe-area-inset-bottom="true" :border-radius="0" width='70%'> <view class="container " :style="[{paddingTop: StatusBar+'px'}]"> <scroll-view class="pop-content" scroll-y> <view class="title" style="font-size: 36rpx;margin-bottom: 30rpx;text-align: center;"> {{i18n['筛选']}} </view > <view class="brand title" style="font-size: 32rpx;" v-if='brandList.length != 0'> 选购方式 </view> <view class='service serviceItem' v-if='xuangoulist.length !=0'> <text v-for='(items,indexs) in xuangoulist' class="list-item ml-4 padding-tb-xs padding-lr text-sm text-333 radius-16" :class="xuanGouIndex == indexs? 'active2':''" @click='openSelectXuanGou(indexs)'>{{items.name}}</text> <text></text> </view> <view class="brand title" style="font-size: 32rpx;" v-if='brandList.length != 0'> {{i18n['品牌']}} </view> <view class='service serviceItem' v-if='brandList.length !=0'> <text v-for='item in brandList' class="list-item ml-4 padding-tb-xs padding-lr text-sm text-333 radius" :class="[{'active2': item.selected}]" @click='Choice(item)'>{{item.brand_name}}</text> <text></text> </view> <view class="title" style="font-size: 32rpx;"> {{i18n['价格']}} </view> <view class='service serviceItem' v-if='priceList.length !=0'> <text v-for='(item,index) in priceList' class="list-item ml-4 padding-tb-xs padding-lr text-sm text-333 radius-16" :class="priceActiveIndex == index? 'active2':''" @click='ChoicePrice(index,item)'>{{item.name}}</text> <text></text> </view> <view class='price-round flex align-center'> <view class="list-item low-price"> <input :placeholder="i18n['最低价']" type="number" v-model='minVal' maxlength="10" @confirm="getGoodNumber" > </view> <view class="border-center">-</view> <view class="list-item ml-4 low-price"> <input :placeholder="i18n['最高价']" type="number" v-model='maxVal' maxlength="10" @confirm="getGoodNumber" > </view> </view> </scroll-view> <view class="action-box pop-btn"> <view class="action reset" @tap.stop="resetPop">{{i18n['重置']}}</view> <!-- <view class="action confirm" @tap.stop="confirmPop">确定<text v-if='num || num ==0'>({{num | formatNumber('w+')}}件商品)</text></view> --> <view class="action confirm" @tap.stop="confirmPop">{{i18n['确定']}}</view> </view> </view> </fu-popup> </view> </template> <script> export default { props: { top: { type: [String, Number], default: 0, }, filterKeyword:{ type:[String] }, cid:{ type:[String,Number] } }, data() { return { num:0, // 高级搜索结束商品数量显示 minVal:'',// 最小价格 maxVal:'', // 最大价格 goodsSkuList:[], // 高级筛选商品sku列表 goodsServiceLabel:[], // 服务 brandList:[], // 品牌 typeList:[], // 分类 allTypeList:[], // 总分类 typeVal:'', // 高级搜索cid 商品id showDrawer:false, selects: [ { title: global.i18n['综合'], type: 'multiple' } ], // 综合 curSelected: 0, // 综合排序初始值 curFilter: 0, // 价格排序方式 filterType: 'multiple', // 排序类型 order: 'asc', // 升序:asc 倒序:desc model: 'block', // inline block windowWidth: 0, // 页面宽 windowHeight: 0, // 页面高 xuanGouIndex: -1, choose_type: '', xuangoulist: [{ name: '线上购买', type: 0 }, { name: '到店自提', type: 1 }], priceList: [{ name: '0-90'+global.i18n['元'], minVal: '0', maxVal: '99', }, { name: '100-199'+global.i18n['元'], minVal: '100', maxVal: '199', }, { name: '200-299'+global.i18n['元'], minVal: '200', maxVal: '299', }, { name: '300-599'+global.i18n['元'], minVal: '300', maxVal: '599', }, { name: '599'+global.i18n['元']+'+', minVal: '599', maxVal: '9999999', }], }; }, watch:{ // filterKeyword(newVal,oldVal){ // console.log('filterKeyword',newVal) // this.resetPop(); // }, 'filterKeyword':{ handler(newVal,oldVal){ console.log('XXXXXXXXXXXXXXXXXXXXXXXXXX') this.resetPop(); }, immediate:true, } }, mounted(){ // this.getListData() // this.getGoodNumber() }, methods: { openSelectXuanGou(index) { this.xuanGouIndex = index this.choose_type = this.xuangoulist[index].type console.log(this.choose_type); this.$forceUpdate() }, // 选 初始价格 ChoicePrice(index, item) { console.log('----------1111111') if (this.priceActiveIndex == index) { this.priceActiveIndex = '99' this.priceList.maxVal = '' this.priceList.minVal = '' return false } else { this.priceList.maxVal = item.maxVal this.priceList.minVal = item.minVal } this.priceActiveIndex = index this.$forceUpdate() }, // sku筛选 selectSkuListChoice(item){ this.$set(item, 'selected', !item.selected); this.getGoodNumber() }, // 获取商品数量 getGoodNumber(){ // 获取已选中的服务 let goodsServiceLabel =[]; this.goodsServiceLabel.forEach(item=>{ if(item.selected){ goodsServiceLabel.push(item.label_id) } }) // 获取已选中的品牌 let brandList =[]; this.brandList.forEach(item=>{ if(item.selected){ brandList.push(item.brand_id) } }) // 获取已选择的sku内容 let skuList =[]; console.log(this.goodsSkuList ) for(let obj in this.goodsSkuList ){ this.goodsSkuList[obj].forEach(j=>{ if(j.selected){ skuList.push(j.id) } }) } skuList =skuList.join(',') brandList= brandList.join(',') goodsServiceLabel= goodsServiceLabel.join(',') // console.log(this.typeVal,this.minVal,this.maxVal,brandList,goodsServiceLabel) if(this.minVal && this.maxVal){ if(Number(this.minVal) > Number(this.maxVal)){ [this.minVal,this.maxVal] =[this.maxVal,this.minVal] } } // 判断cid存在（分类页过来的时候直接使用） if(this.cid){ this.typeVal = this.cid } let filterObj={ sku_id:skuList, brand_id:brandList, goods_cid:this.typeVal, service_lable_id:goodsServiceLabel, min_price: Number(this.minVal).toFixed(2), max_price: Number(this.maxVal).toFixed(2), keyword:this.filterKeyword } this.$api.post(global.apiUrls.getGoodNumber, filterObj) .then(res => { console.log('搜索商品数量', res.data) if (res.data.code == '1') { this.num = res.data.data } else { this.$message.error(res.data.msg); } }) }, // 品牌筛选 Choice(item){ this.$set(item, 'selected', !item.selected); this.goodsSkuList =[] if(this.allTypeList.allType.length >0){ this.getNewTypeListData() } this.getGoodNumber() }, //分类重置 去重 getNewTypeListData(){ this.typeVal ='' let newTypeData=[]; let deWeightData =[]; this.typeList =[] this.brandList.forEach((item,index)=>{ if(item.selected){ newTypeData = newTypeData.concat(this.allTypeList[item.brand_id]) newTypeData.forEach(item=>{ let flag =false; deWeightData.forEach(j=>{ if(j.cid == item.cid){ flag =true } }) if(!flag){ deWeightData.push(item) } }) } }) // console.log(deWeightData) this.typeList = deWeightData // 获取已选中的品牌 let brandList =[]; this.brandList.forEach(item=>{ if(item.selected){ brandList.push(item.brand_id) } }) // 未选中品牌，显示所有分类 if(brandList.length ==0){ this.typeList = this.allTypeList.allType } }, // 服务筛选 selectServeChoice(item){ this.$set(item, 'selected', !item.selected); this.getGoodNumber() }, // 分类筛选 selectTypeChoice(item){ this.goodsSkuList =[] if(this.typeVal == item.cid){ this.typeVal ='' }else{ this.typeVal = item.cid this.getGoodsSkuList(item.cid) } this.getGoodNumber() }, // 分类获取不同的sku信息 getGoodsSkuList(val){ console.log(1111111111,val) let data ={ goods_cid:val } this.$api.post(global.apiUrls.getGoodsSkuList, data) .then(res => { console.log('sku列表结果', res.data) if (res.data.code == '1') { console.log(res.data.data) this.goodsSkuList =res.data.data } else { this.$message.error(res.data.msg); } }) }, // 获取高级搜索得索引列表 getListData(){ let data ={ keyword: this.filterKeyword, goods_cid:this.cid } this.$api.post(global.apiUrls.advancedSearch, data) .then(res => { console.log('1111111111--------------->',res); if (res.data.code == 1) { data = res.data.data; this.goodsServiceLabel =data.goodsServiceLabel; this.brandList =data.brandList; this.typeList =data.typeList.allType; this.allTypeList =data.typeList } else { this.$message.error(res.data.msg); } }) }, // 重置筛选条件 resetPop() { this.priceList.minVal = '' this.priceList.maxVal = '' this.priceActiveIndex = '99' this.typeVal = '' this.minVal = '' this.maxVal = '' this.goodsSkuList = [] this.brandList = [] this.goodsServiceLabel = [] this.choose_type = '' // setTimeout(()=>{ this.getListData() this.getGoodNumber() this.confirmPop(false) // },200) }, // 提交确认高级筛选 confirmPop(val) { // 获取已选中的服务 let goodsServiceLabel =[]; this.goodsServiceLabel.forEach(item=>{ if(item.selected){ goodsServiceLabel.push(item.label_id) } }) // 获取已选中的品牌 let brandList =[]; this.brandList.forEach(item=>{ if(item.selected){ brandList.push(item.brand_id) } }) // 获取已选择的sku内容 let skuList =[]; console.log(this.goodsSkuList ) for(let obj in this.goodsSkuList ){ this.goodsSkuList[obj].forEach(j=>{ if(j.selected){ skuList.push(j.id) } }) } skuList =skuList.join(',') brandList= brandList.join(',') goodsServiceLabel= goodsServiceLabel.join(',') if(this.minVal && this.maxVal){ if(Number(this.minVal) > Number(this.maxVal)){ [this.minVal,this.maxVal] =[this.maxVal,this.minVal] } } let filterObj={ sku_id:skuList, brand_id:brandList, goods_cid:this.typeVal, service_lable_id:goodsServiceLabel, min_price: Number(this.minVal).toFixed(2), max_price: Number(this.maxVal).toFixed(2), choose_type: this.choose_type } // 判断是否有已选择时间，如有优先生效，并清空输入值 if (this.priceList.maxVal) { this.maxVal = '' this.minVal = '' filterObj.min_price = Number(this.priceList.minVal).toFixed(2) filterObj.max_price = Number(this.priceList.maxVal).toFixed(2) } this.curFilter = 0; this.isSearchShop = false; this.$emit('changeFilter', this.curFilter, this.order,filterObj); console.log(filterObj) if(!val) return ; console.log(val); this.showDrawer = false; // if(skuList!='' || brandList!='' || goodsServiceLabel!='' || Number(this.minVal).toFixed(2) !='0.00' || Number(this.maxVal).toFixed(2)!='0.00' || this.filterKeyword!=''){ // this.$emit('changeFilter', this.curFilter, this.order,filterObj); // if(!val) return ; // this.showDrawer = false; // }else{ // // this.$message.info('请选择或输入内容') // return // } }, // 上层筛选条件 async filterClick(type) { let oldType = this.curFilter; switch (type) { case 0: if (oldType != 0) { this.curFilter = 0; } this.order = 'asc'; break; case 1: // this.curFilter = 1; // this.order = 'desc'; if (oldType == 1) { if (this.order == 'asc') { this.order = 'desc'; } else { this.order = 'asc'; } } else { this.order = 'desc'; this.curFilter = 1; } break; case 2: if (oldType == 2) { if (this.order == 'asc') { this.order = 'desc'; } else { this.order = 'asc'; } } else { this.order = 'asc'; this.curFilter = 2; } break; case 3: this.curFilter = 3; this.order = 'asc'; break; } this.$emit('changeFilter', this.curFilter, this.order); }, // 打开筛选侧边弹窗 drawerhandle() { this.showDrawer = true; }, // 综合排序切换 selectHandle(index) { this.curSelected = index; this.filterType = this.selects[index].type; this.showTopPop = false; }, // 排列布局切换 changeLayout() { if (this.model == 'inline') { this.model = 'block'; } else { this.model = 'inline'; } this.$emit('changeFilter', this.curFilter, this.order); this.$emit('changeLayout', this.model); }, }, created() { let info = uni.getSystemInfoSync(); this.windowWidth = info.windowWidth; this.windowHeight = info.windowHeight; } } </script> <style lang="scss" scoped> .wrapper { position: sticky; z-index: 9999; .content1 { .right { width: 80rpx; position: relative; // padding-left: 20rpx; } // .right::after { // content: ""; // width: 2rpx; // height: 26rpx; // background-color: #999999; // position: absolute; // top: 50%; // left: 50%; // transform: translateX(-50%) translateY(-50%); // } } .content2 { padding: 0 30rpx 20rpx 30rpx; .left { width: calc(100% - 100rpx); white-space: nowrap; } .right { width: 100rpx; } } .masks { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: transparent; display: flex; flex-direction: column; .top { background-color: rgba(0, 0, 0, 0); } .bot { flex: 1; background-color: rgba(0, 0, 0, 0.7); .container { border-radius: 0 0 16rpx 16rpx; background-color: #F5F5F5; padding: 30rpx; .scroll-view { max-height: 300rpx; } } } } .active { /* color: $theme !important; */ color: #FF7298; font-weight: bold; } .active2 { // box-shadow: inset 0 0 2rpx 2rpx $theme; // background-color: rgba(240, 35, 37, 0.1) !important; color: #FFFFFF; background: $theme; } .active3 { color: $theme !important; } .masks2 { position: fixed; top: 0; bottom: 0; right: 0; left: 0; background-color: rgba(0, 0, 0, 0.7); display: flex; justify-content: flex-end; .container { width: 70%; height: 100%; border-radius: 16rpx 0 0 16rpx; background-color: #FFFFFF; } } } .action-box { display: flex; margin-top: 30rpx; .action { flex: 1; height: 72rpx; line-height: 72rpx; border-radius: 62rpx 0px 0px 62rpx;; font-size: 24rpx; text-align: center; } .action+.action { margin-left: 4rpx; border-radius: 0px 62px 62px 0px; } .reset { color: $bgtheme; // background-color: #FFA264; background: rgba($color: #FF7298, $alpha: 0.15); } .confirm { color: #FFFFFF; background: $bgtheme; } } .block-28 { width: 28rpx; height: 28rpx; } .scale { font-size: 32rpx !important; &.cuIcon-triangleupfill{ line-height: 20rpx; } &.cuIcon-triangledownfill{ line-height: 20rpx; } } .translateTop { // transform: translateY(5rpx); /* */ } .translateBot { // transform: translateY(-5rpx); } .pop-btn { position: fixed; width: 100%; bottom: 0; padding: 20rpx; background: #fff; border-top: 1rpx solid #f1f1f1; margin-top: 0; } .pop-content { height: 92%; padding: 20rpx; padding-bottom: 120rpx; } .title { font-weight: 500; color: #333333; margin-top: 20rpx; } .list-item { background-color: #F6F7F9; display: inline-block; margin-bottom: 20rpx; } .low-price{ background: rgba(255, 255, 255, 0.39); border: 1rpx solid #D9D9D9; opacity: 1; border-radius: 8rpx; } .serviceItem{ display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; text{ width: 31%; margin: 0 0 16rpx 0; padding: 20rpx 0; text-align: center; border-radius: 8rpx; } } .ml-20 { margin-left: 20rpx; } .ml-4 { margin-left: 4rpx; } .service { margin-top: 20rpx; } .price-round{ padding: 20rpx 10rpx; .round{ padding: 10rpx 0; text-align: center; background: #fff; border: 1px solid #ccc; } } .price-round input{ font-size: 24rpx; height: 64rpx; padding:0 60rpx; } .border-center{ height: 50rpx; margin: 0 15rpx ; } .scale.cuIcon-triangledownfill{ line-height: 12rpx; } .scale.cuIcon-triangleupfill{ line-height: 12rpx; } </style>
09-26
<think> 根据需求，我们需要实现一个右侧弹窗的筛选组件，包含以下功能： 1. 开始时间和结束时间选择（可以使用日期选择器） 2. 快速选择时间范围：本周、上周、本月、上月、近15天、近30天 3. 仓库列表（假数据） 4...
<template> <view :class="disabled ? 'wrapper form-disable' : 'wrapper'"> <u-form ref="uForm" :model="form" :rules="rules" error-type="toast" label-width="auto" label-position="left" > <view class="model-box"> <u-form-item label="保单号" prop="policyNumber" required borderBottom @longpress="showHighlighPop($event, 'policyNumber')" > <u-input v-model="form.policyNumber" :color="formatterWarn(form.policyNumber, 'policyNumber')" placeholder="请输入保单号" maxlength="128" border="none" input-align="right" ></u-input> <u-icon class="m-l-4" name="edit-pen" color="#999" size="16"></u-icon> </u-form-item> <u-form-item label="保司名称" prop="companyName" required borderBottom @longpress="showHighlighPop($event, 'companyName')" > <view class="input-box flex-row-fe"> <u-input v-model="form.companyName" :color=" formatterWarn(form.companyName, 'employmentType', 'select') " placeholder="请输入或选择保司名称" border="none" input-align="right" ></u-input> <u-icon class="m-l-4" name="edit-pen" color="#999" size="16" ></u-icon> <u-icon name="arrow-right" color="#999" size="14" @click="showPop('companyName', 'companyList', 'id')" ></u-icon> </view> </u-form-item> <!-- 11111111111111111111111111111 --> <u-form-item label="地区" prop="areaInfo" required borderBottom @longpress="showHighlighPop($event, 'areaInfo')" > <view class="input-box flex-row-fe" @click="showPop('areaInfo', 'postalAddressNationCode', 'id')" > <view v-html="formatterWarn(form.areaInfo_name, 'areaInfo', 'select')" ></view> <u-icon name="arrow-right" color="#999" size="14"></u-icon> </view> </u-form-item> <u-form-item label="商户名称" prop="merchantName" required borderBottom @longpress="showHighlighPop($event, 'merchantName')" > <u-icon name="error-circle" color="#333" size="18" @click="showWarn('商户名称', '商户名称')" ></u-icon> <u-input v-model="form.merchantName" :color="formatterWarn(form.merchantName, 'merchantName')" placeholder="请输入商户名称" maxlength="128" border="none" input-align="right" ></u-input> <u-icon class="m-l-4" name="edit-pen" color="#999" size="16"></u-icon> </u-form-item> <u-form-item label="产品分类" prop="productTypeName" required borderBottom @longpress="showHighlighPop($event, 'productTypeName')" > <view class="input-box flex-row-fe" @click="showPop('productTypeName', 'productTypeList', 'id')" > <view v-html=" formatterWarn( form.productTypeName_name, 'productTypeName', 'select' ) " ></view> <u-icon name="arrow-right" color="#999" size="14"></u-icon> </view> </u-form-item> <u-form-item label="投保产品名称" prop="skuName" required borderBottom @longpress="showHighlighPop($event, 'skuName')" > <view class="input-box flex-row-fe"> <u-input v-model="form.skuName" :color="formatterWarn(form.skuName, 'skuName', 'select')" placeholder="请输入或选择产品名称" border="none" input-align="right" ></u-input> <u-icon class="m-l-4" name="edit-pen" color="#999" size="16" ></u-icon> <u-icon name="arrow-right" color="#999" size="14" @click="showPop('skuName', 'skuList', 'id')" ></u-icon> </view> </u-form-item> <view style=" background-color: rgba(244, 245, 247, 1); width: 100%; padding-left: 26rpx; " > <u-form-item label="每期保费" prop="instalmentPremium" required borderBottom @longpress="showHighlighPop($event, 'instalmentPremium')" > <!-- 显示时用格式化后的值，输入时处理为原始值 --> <u-input :value="formatNumber(form.instalmentPremium)" @input="handleInput($event, 'instalmentPremium')" :color=" formatterWarn(form.instalmentPremium, 'instalmentPremium') " placeholder="请输入" maxlength="128" border="none" input-align="right" ></u-input> <u-icon class="m-l-4" name="edit-pen" color="#999" size="16" ></u-icon> </u-form-item> <u-form-item label="保费单位" prop="currency" required borderBottom @longpress="showHighlighPop($event, 'currency')" > <view class="input-box flex-row-fe" @click="showPop('currency', 'currencyList', 'id')" > <view v-html="formatterWarn(form.currency, 'currency', 'select')" ></view> <u-icon name="arrow-right" color="#999" size="14"></u-icon> </view> </u-form-item> <u-form-item label="保额" prop="coverageMoney" borderBottom @longpress="showHighlighPop($event, 'coverageMoney')" > <u-input :value="formatNumber(form.coverageMoney)" @input="handleInput($event, 'coverageMoney')" :color="formatterWarn(form.coverageMoney, 'coverageMoney')" placeholder="请输入" maxlength="128" border="none" input-align="right" ></u-input> <u-icon class="m-l-4" name="edit-pen" color="#999" size="16" ></u-icon> </u-form-item> <u-form-item label="缴费期" prop="paymentNum" required borderBottom @longpress="showHighlighPop($event, 'paymentNum')" > <view class="section"> <view class="options" v-for="(item, index) in payment.options" :key="index" > <radio :checked="form.paymentNumRadio == index" @click="selectOption(payment, index, 'paymentNum')" /> <text>{{ item.label }}</text> <!-- 仅当“交X年”或“交至X岁”选中时，显示输入框 --> <u-input v-model="form.paymentNum" v-show="form.paymentNumRadio == index" :color="formatterWarn(form.paymentNum, 'paymentNum')" @input="inputChange($event, 'paymentNum')" type="number" placeholder="请输入" maxlength="128" border="none" input-align="right" ></u-input> <u-icon class="m-l-4" name="edit-pen" color="#999" size="16" v-show=" item.type !== 'lifetime' && form.paymentNumRadio == index " ></u-icon> <text v-show="form.paymentNumRadio == index && item.type === 'year'" >年</text > <text v-show="item.type === 'age' && form.paymentNumRadio == index" >岁</text > </view> </view> </u-form-item> <u-form-item label="缴费频率" prop="paymentFrequency" required borderBottom @longpress="showHighlighPop($event, 'paymentFrequency')" > <view class="input-box flex-row-fe" @click="showPop('paymentFrequency', 'paymentFrequency', 'id')" > <view v-html=" formatterWarn( form.paymentFrequency_name, 'paymentFrequency', 'select' ) " ></view> <u-icon name="arrow-right" color="#999" size="14"></u-icon> </view> </u-form-item> <u-form-item label="保障期" prop="guaranteeNum" required borderBottom @longpress="showHighlighPop($event, 'guaranteeNum')" > <view class="section"> <view class="options" v-for="(item, index) in coverage.options" :key="index" > <radio :checked="form.guaranteeNumRadio == index" @click="selectOption(coverage, index, 'guaranteeNum')" /> <text>{{ item.label }}</text> <u-input v-model="form.guaranteeNum" v-show="form.guaranteeNumRadio == index" :color="formatterWarn(form.guaranteeNum, 'guaranteeNum')" type="number" placeholder="请输入" maxlength="128" @input="inputChange($event, 'guaranteeNum')" border="none" input-align="right" ></u-input> <u-icon class="m-l-4" name="edit-pen" color="#999" size="16" v-show=" item.type !== 'lifetime' && form.guaranteeNumRadio == index " ></u-icon> <text v-show=" form.guaranteeNumRadio == index && item.type === 'year' " >年</text > <text v-show=" form.guaranteeNumRadio == index && item.type === 'age' " >岁</text > </view> </view> </u-form-item> </view> <u-form-item label="是否预缴" prop="prepayStatus" required borderBottom @longpress="showHighlighPop($event, 'prepayStatus')" > <view class="input-box flex-row-fe" @click="showPop('prepayStatus', 'prepayStatus', 'id')" > <view v-html=" formatterWarn(form.prepayStatus_name, 'prepayStatus', 'select') " ></view> <u-icon name="arrow-right" color="#999" size="14"></u-icon> </view> </u-form-item> <view style=" background-color: rgba(244, 245, 247, 1); width: 100%; padding-left: 26rpx; " v-if="form.prepayStatus == '1'" > <u-form-item label="预缴金额" prop="prepayMoney" required borderBottom @longpress="showHighlighPop($event, 'prepayMoney')" > <u-input :value="formatNumber(form.prepayMoney)" @input="handleInput($event, 'prepayMoney')" :color="formatterWarn(form.prepayMoney, 'prepayMoney')" placeholder="请输入" maxlength="128" border="none" input-align="right" ></u-input> <u-icon class="m-l-4" name="edit-pen" color="#999" size="16" ></u-icon> </u-form-item> <u-form-item label="预缴期数" prop="prepayYear" required borderBottom @longpress="showHighlighPop($event, 'prepayYear')" > <u-input v-model="form.prepayYear" :color="formatterWarn(form.prepayYear, 'prepayYear')" placeholder="请输入" maxlength="128" @input="inputChange($event, 'prepayYear')" border="none" input-align="right" ></u-input> <u-icon class="m-l-4" name="edit-pen" color="#999" size="16" ></u-icon> </u-form-item> </view> <u-form-item label="是否有附加险" prop="additionFlag" required borderBottom @longpress="showHighlighPop($event, 'additionFlag')" > <view class="input-box flex-row-fe" @click="showPop('additionFlag', 'additionFlag', 'id')" > <view v-html=" formatterWarn(form.additionFlag_name, 'additionFlag', 'select') " ></view> <u-icon name="arrow-right" color="#999" size="14"></u-icon> </view> </u-form-item> <view style=" background-color: rgba(244, 245, 247, 1); width: 100%; padding-left: 26rpx; " v-if="form.additionFlag == '1'" > <u-form-item label="附加险名称" prop="additionSkuInfo" required borderBottom @longpress="showHighlighPop($event, 'additionSkuInfo')" > <u-input v-model="form.additionSkuInfo" :color="formatterWarn(form.additionSkuInfo, 'additionSkuInfo')" placeholder="请输入" maxlength="128" border="none" input-align="right" ></u-input> <u-icon class="m-l-4" name="edit-pen" color="#999" size="16" ></u-icon> </u-form-item> </view> </view> </u-form> <view class="tabbar flex-row-sb safe_bottom"> <u-button color="#2F288F" plain text="暂存" @click="submit('Staging')" style="width: 250rpx" ></u-button> <u-button color="#2F288F" text="确定" style="width: 250rpx" @click="submit('save')" ></u-button> </view> <!-- 选择弹窗start --> <view class="popup-wrap"> <u-picker :show="areaCodeshow" :columns="[columns.areaCodeColumns]" confirmColor="#2F288F" @cancel="areaCodeshow = false" @confirm="areaCodeConfirm" ></u-picker> <u-picker :show="popObj.show" :columns="[popObj.selectColumns]" :defaultIndex="[0]" confirmColor="#2F288F" keyName="name" closeOnClickOverlay @confirm="onPickerConfirm" @close="popObj.show = false" @cancel="popObj.show = false" ></u-picker> <u-datetime-picker :show="timePopObj.show" confirmColor="#2F288F" mode="date" :value="timePopObj.defaultDate" :minDate="timePopObj.minDate" :maxDate="timePopObj.maxDate" closeOnClickOverlay @close="timePopObj.show = false" @cancel="timePopObj.show = false" @confirm="confirmTime" ></u-datetime-picker> <u-picker-search :show="popObjSearch.show" :columns="[popObjSearch.selectColumns]" :defaultIndex="[0]" confirmColor="#2F288F" keyName="name" closeOnClickOverlay @confirm="onPickerSearchConfirm" @close="popObjSearch.show = false" @cancel="popObjSearch.show = false" ></u-picker-search> </view> </view> </template> <script> import dayjs from "@/uni_modules/uview-ui/libs/util/dayjs.js"; import { POLICYBASICINFOCHECK } from "@/config/checkRules"; import { DICTS } from "@/config/dictionary"; import { getUuid, formatDictName, isEmpty, goBackByLocalKey, getBirthDayByIdCard, geSexByIdCard, Validator, } from "@/config/utils"; const columns = DICTS; export default { components: {}, data() { return { // 缴费期配置：type区分“交X年”“交至X岁”“终身”；inputVal存储输入值 payment: { options: [ { label: "交", type: "year", isChecked: false, inputVal: "" }, { label: "交至", type: "age", isChecked: false, inputVal: "" }, { label: "终身", type: "lifetime", isChecked: true, inputVal: "" }, ], }, // 保障期配置（结构同缴费期） coverage: { options: [ { label: "保", type: "year", isChecked: false, inputVal: "" }, { label: "保至", type: "age", isChecked: false, inputVal: "" }, { label: "终身", type: "lifetime", isChecked: true, inputVal: "" }, ], }, quicklySelectCustomerModel: false, columns, disabled: false, formType: "baseInfo", form: { dependentsInfo: [], guaranteeNumRadio: "2", paymentNumRadio: "2", instalmentPremium: "", }, rules: {}, popObj: { show: false, formKey: "", selectColumns: [], valueWay: "", }, popObjSearch: { show: false, formKey: "", selectColumns: [], valueWay: "", }, timePopObj: { show: false, minDate: dayjs().subtract(100, "year").valueOf(), maxDate: dayjs().valueOf(), defaultDate: dayjs().subtract(20, "year").valueOf(), }, highlighObj: { show: false, key: "", value: false, style: {}, }, initPolicyCustodyInfos: { companyList: [], currencyList: [], productTypeList: [], skuList: [], }, highlightTabList: [], updateTabList: [], isNew: true, areaCodeshow: false, // areaCodeColumns: columns.areaCodeColumns, idCardPopObj: { show: false, mode: "idCard", formKey: "", valueWay: "", clickY: 0, }, localKey: "", hasSameBtn: false, showOcrForm: false, preOcrFormKey: null, multipleIDs: false, customerId: "", certificateIDModel: false, certificateParams: {}, }; }, watch: { form: { handler(newVal, oldVal) { let vm = this; var tempData = uni.getStorageSync(vm.localKey); let { ...restFrom } = vm.form; tempData.baseInfo = restFrom; tempData.baseInfoDetail = restFrom; tempData.baseInfoHasRead = true; uni.setStorage({ key: vm.localKey, data: tempData, }); }, deep: true, }, }, async onLoad(opt) { this.formType = opt.type; this.disabled = JSON.parse(opt.disabled || "false"); this.isNew = JSON.parse(opt.isNew || "true"); this.highlightTabList = JSON.parse(opt.highlightTabList || "[]"); this.updateTabList = JSON.parse(opt.updateTabList || "[]"); this.localKey = opt.localKey; var localFormData = uni.getStorageSync(opt.localKey); this.form = localFormData.baseInfo; console.log("onload", localFormData.baseInfo); //this.keyIntoText(); this.initPolicyCustody(); uni.setNavigationBarTitle({ title: "保单基础信息", }); }, onUnload() { // uni.$emit("highlightTabList", this.highlightTabList); }, methods: { handleInsurerInput() { // const inputVal = this.form.companyName.trim().toLowerCase(); // const filtered = columns.companyName.filter((item) => // item.name.toLowerCase().includes(inputVal) // ); // // 更新下拉弹窗的选项（如果弹窗已显示，实时刷新列表） // if (this.popObj.show && this.popObj.formKey === "companyName") { // this.popObj.selectColumns = filtered; // } }, onPickerConfirm(e) { let vm = this; let { popObj, form } = this; // 处理保司名称的特殊逻辑 if (popObj.formKey === "companyName") { // 选择下拉选项时，同步ID和名称 this.$set(form, "companyName", e.value[0][popObj.valueWay]); // 保存ID this.$set(form, "companyName", e.value[0].name); // 保存名称 this.popObj.show = false; return; } }, formatNumber(value) { if (!value) return ""; // 先转为数字，再处理千分位 const num = Number(value); if (isNaN(num)) return value; // 非数字保持原样 return num.toLocaleString("zh-CN"); // 千分位格式化 }, // 处理输入，将千分位字符串还原为原始值（纯数字） handleInput(val, key) { // 去除所有非数字字符（保留负号和小数点，根据需求调整） const rawValue = val.replace(/[^\d.-]/g, ""); // 更新原始值（纯数字） this.form[key] = rawValue; }, selectOption(group, index, type) { group.options.forEach((item, i) => { item.isChecked = i === index; }); if (type == "paymentNum") { this.form.paymentNumRadio = index; } else if ((type = "guaranteeNum")) { this.form.guaranteeNumRadio = index; } }, // 输入框值绑定 inputChange(event, type) { const currentValue = event; this.validateNumber(currentValue, type); }, // 通用校验函数 validateNumber(value, type) { if (value === "") { return { valid: true, message: "", suggestedValue: null }; } // 检查是否为有效数字 if (!/^\d+$/.test(value)) { return { valid: false, message: "只能输入数字", suggestedValue: null }; } const num = parseInt(value, 10); // 检查是否在范围内 if ((num < 1 || num > 100) && type == "prepayYear") { uni.$u.toast("数值应该在1-100"); } if ((num < 1 || num > 200) && type != "prepayYear") { uni.$u.toast("数值应该在1-200"); } }, async initPolicyCustody() { const { data } = await uni.$u.http.get("/app/policyCustody/dict"); this.initPolicyCustodyInfos = data; if (this.initPolicyCustodyInfos) { this.initPolicyCustodyInfos.companyList = this.initPolicyCustodyInfos.companyList.map((company) => ({ id: company, name: company, })); this.initPolicyCustodyInfos.currencyList = this.initPolicyCustodyInfos.currencyList.map((company) => ({ id: company, name: company, })); this.initPolicyCustodyInfos.productTypeList = this.initPolicyCustodyInfos.productTypeList.map((company) => ({ id: company, name: company, })); this.initPolicyCustodyInfos.skuList = this.initPolicyCustodyInfos.skuList.map((company) => ({ id: company, name: company, })); } console.log("==========11111111==========", this.form); }, // 弹出弹窗 showPop(formKey, selectColumnsKey, valueWay) { console.log("columns", columns); console.log("this.form", this.form); let selectColumns = ""; if ( selectColumnsKey == "companyList" || selectColumnsKey == "currencyList" || selectColumnsKey == "productTypeList" || selectColumnsKey == "skuList" ) { selectColumns = this.initPolicyCustodyInfos[selectColumnsKey]; } else { selectColumns = columns[selectColumnsKey]; } this.popObj = { show: true, formKey, selectColumns, valueWay, }; }, formatDictName, handleComputeInsure(simple) { let { form } = this; var validator = new Validator(); form.multipleIDs = true; var insureRules = POLICYBASICINFOCHECK(form, simple); insureRules.forEach((ele) => { var currentValue = _.get(form, ele.key); var currentRuleList = [ { strategy: "isNonEmpty", errorMsg: `【保单基础信息】${ele.name}不能为空`, }, ]; if (ele.rules) { for (var i = 0; i < ele.rules.length; i++) { var validateFuncRes = ele.rules[i].func(currentValue); currentRuleList.push({ strategy: "customerFunc", func: () => validateFuncRes == true, errorMsg: `${ele.rules[i].errorMsg}`, }); } } validator.add(currentValue, currentRuleList); }); console.log("insureRules", insureRules); var errorList = _.uniq(validator.checkAll()); return errorList; }, // 弹出提示框 showWarn(title, content) { uni.showModal({ title, content, showCancel: false, }); }, // 确认选择 onPickerConfirm(e) { let vm = this; this.$set(this.form, vm.popObj.formKey, e.value[0][this.popObj.valueWay]); this.$set(this.form, `${vm.popObj.formKey}_name`, e.value[0].name); this.popObj.show = false; }, // 加检索的选择 onPickerSearchConfirm(e) { let vm = this; this.$set(this.form, vm.popObjSearch.formKey, e.value[0]["name"]); this.$set( this.form, vm.popObjSearch.formKey + "Code", e.value[0][this.popObjSearch.valueWay] ); this.popObjSearch.show = false; }, // 确认时间 confirmTime(e) { let vm = this; this.$set( this.form, "birthDate", uni.$u.timeFormat(e.value, "yyyy-mm-dd") ); this.$set(this.form, "age", vm.calculateAge(this.form.birthDate)); this.timePopObj.show = false; }, // 计算年龄 calculateAge(birthDate) { var birthDate = new Date(birthDate); var today = new Date(); var age = today.getFullYear() - birthDate.getFullYear(); var m = today.getMonth() - birthDate.getMonth(); if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) { age--; } return age; }, areaCodeConfirm(e) { this.$set(this.form, "phoneAreaCode", e.value[0].id); this.$set(this.form, "phoneArea", e.value[0].text); this.areaCodeshow = false; }, // 将key转化为文字 keyIntoText() { let otherKeys = [ "observerCardType", "relationStatus", "gender", "maritalStatus", "certificateType", "schooling", "title", "numberDependents", "employmentType", "industryCode", "retireAge", "entryHkCardType", ]; otherKeys.forEach((item) => { if (isEmpty(this.form[item])) { return false; } console.log("columns[item]", columns, item); let res = columns[item].find( (item_son) => item_son.id == this.form[item] ); this.form[`${item}_name`] = res ? res.name : ""; }); console.log(this.form); }, // 提交 async submit(flag) { let { localKey, multipleIDs, form } = this; if (flag != "Staging") { let errorList = this.handleComputeInsure(true, flag); if (errorList.length > 0) { return uni.$u.toast(errorList[0]); } } uni.$emit("baseInfo"); var path = "pages/policy/index"; goBackByLocalKey(localKey, path); }, // 弹出高亮 showHighlighPop(e, key) { if (this.isNew) { return false; } this.highlighObj = { show: true, key, value: this.highlightTabList.findIndex( (item) => item === `${this.formType}.${key}` ) !== -1, style: { top: e.currentTarget.offsetTop + "px", }, }; }, // 设置高亮 async setHighlight() { await uni.$u.http.post("/app/subscribeOrder/scalarData", { fieldName: `${this.formType}.${this.highlighObj.key}`, orderId: this.form.orderId, }); this.highlightTabList.push(`${this.formType}.${this.highlighObj.key}`); this.highlighObj.show = false; }, // 取消高亮 async cancelHighlight() { await uni.$u.http.post("/app/subscribeOrder/cancelScalarData", { fieldName: `${this.formType}.${this.highlighObj.key}`, orderId: this.form.orderId, }); let index = this.highlightTabList.findIndex( (item) => item === `${this.formType}.${this.highlighObj.key}` ); if (index !== -1) { this.$delete(this.highlightTabList, index); } this.highlighObj.show = false; }, // 高亮提示处理函数 formatterWarn(text, keyName, type = "input") { const key = `${this.formType}.${keyName}`; const keyDetail = `${this.formType}Detail.${keyName}`; let highlighFlag = this.highlightTabList.findIndex( (item) => item === key || item === keyDetail ) !== -1; let updateFlag = this.updateTabList.findIndex( (item) => item === key || item === keyDetail ) !== -1; let waitFlag = text === "待确认"; if (type === "input") { // 输入框返回颜色 return updateFlag ? "#FF3141" : waitFlag || highlighFlag ? "#FF7700" : "#333333"; } else { // 上拉选择返回富文本 return `<text class="${ updateFlag ? "cff3" : waitFlag || highlighFlag ? "cff7" : "c333" }">${isEmpty(text) ? "" : text}</text>`; } }, handleSetSamePalce() { this.hasSameBtn = !this.hasSameBtn; if (this.hasSameBtn) { this.form.postalAddress = this.form.residentialAddress; } }, handleResidentialAddressChange() { if (this.hasSameBtn) { this.form.postalAddress = this.form.residentialAddress; } }, formatNumber(value) { if (!value) return ""; // 先去除非数字字符（保留小数点） const num = parseFloat(value.toString().replace(/[^\d.]/g, "")); if (isNaN(num)) return ""; // 格式化千分位 return num.toLocaleString("zh-CN", { minimumFractionDigits: 0, // maximumFractionDigits: 2 // 保留两位小数，可根据需求调整 }); }, }, }; </script> <style lang="scss" scoped> .wrapper { position: relative; } .model-box { margin: 20upx; background-color: white; padding: 0 32upx 16upx; margin-bottom: 200upx; border-radius: 5upx; .model-box-title { font-size: 30upx; font-weight: bold; padding: 20upx 0; border-bottom: 1upx solid rgb(214, 215, 217); } .input-box { flex-grow: 1; } .sameBtn { display: flex; align-items: center; align-content: center; } .square { margin: 0 2rpx; width: 24px; height: 24px; border: 1px solid #d6d7d9; } .memberCountItem { padding: 20upx; border-radius: 10upx; background: #f4f6f9; margin-bottom: 10upx; } } .model-box-son { border-bottom: 20upx solid #f4f6f9; } .highlight-pop { position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 10; .pop-content { position: absolute; right: 40upx; top: 0; background-color: #333333; border-radius: 10upx; transform: translateY(-100%); &::after { content: ""; display: block; position: absolute; right: 16upx; bottom: -8upx; width: 16upx; height: 16upx; background-color: #333333; transform: rotate(45deg); } .item { padding: 10upx 16upx; font-size: 20upx; .circle { width: 20upx; height: 20upx; border-radius: 50%; margin: 0 auto 10upx; background-color: white; } } .active { .circle { background-color: #ff7700; } } } } .tabbar { height: 146upx; position: fixed; z-index: 999; left: 0; right: 0; bottom: 0; background-color: white; padding: 0 30upx; box-sizing: content-box; border-top: 1px solid #f4f6f9; } .tabbar-placeholder { box-sizing: content-box; height: 146upx; } .ocrPic { width: 57upx; height: 45upx; } .multipleIDsItem { position: relative; padding: 0 36rpx; background: #f5f6fa; border: 1rpx solid #2f288f; margin-bottom: 10rpx; border-radius: 10rpx; &:first-of-type { background: #fff; border: none; } .removeBtn { position: absolute; right: -12rpx; top: -12rpx; } } .select-customer-btn { padding: 14rpx 16rpx; border-radius: 8rpx; border: 1rpx solid #2f288f; color: #2f288f; font-size: 28rpx; } .multipleIDsBtn { pointer-events: all; display: flex; justify-content: center; align-content: center; align-items: center; white-space: nowrap; width: 48rpx; height: 48rpx; margin-left: 10rpx; border: 1rpx solid #2f288f; color: #2f288f; font-size: 40rpx; line-height: 50rpx; border-radius: 10rpx; } .title { font-weight: bold; margin-bottom: 10rpx; } .options { display: flex; align-items: center; margin-bottom: 10rpx; } ::v-deep uni-radio .uni-radio-input { -webkit-appearance: none; appearance: none; margin-right: 5px; outline: 0; border: 1px solid #d1d1d1; background-color: #fff; border-radius: 50%; width: 30rpx; height: 30rpx; position: relative; } ::v-deep .uni-radio-input-checked { background: #2f288f !important; border: 1px solid #2f288f !important; } </style> 保司名称的下拉框里加个搜框
11-15
<think> 我们需要在保司名称的下拉选择框中加入搜索框，以便用户能够快速搜索保司名称。根据代码，保司名称的选择是通过`u-picker`组件实现的，但当前代码中并没有使用带搜索的picker。在uView UI中，带搜索的选择器...
foreach方法使用
热门推荐
我的博客
07-08 10万+
用法 foreach方法主要是针对数组而言的，对数组中的每个元素可以执行一次方法 var array = ['a', 'b', 'c', 'e']; array.forEach((a)=> { console.log(a); }); 属性 foreach方法主要有三个参数，分别是数组内容、数组索引、整个数组 var array = ['a', 'b', 'c', 'e']; array.forEach((a,b,c)=> { console.log(a); console
OneRec是一个专注于多源信息融合与知识集成的开源推荐算法库_它旨在打破数据孤岛并极大扩充推荐系统的外部世界知识_通过可插拔的模块化设计整合行为数据_包括多信号与长短期用户行为序.zip
12-04
OneRec是一个专注于多源信息融合与知识集成的开源推荐算法库_它旨在打破数据孤岛并极大扩充推荐系统的外部世界知识_通过可插拔的模块化设计整合行为数据_包括多信号与长短期用户行为序.zip
这是一个旨在构建一个开放协作结构化持续进生的社区驱动型知识库与代码资源集合中心的项目它通过GitHub平台汇聚来自全球开发者学习者及技术爱好者的多元化智慧结晶涵盖从入门.zip
12-04
这是一个旨在构建一个开放协作结构化持续进生的社区驱动型知识库与代码资源集合中心的项目它通过GitHub平台汇聚来自全球开发者学习者及技术爱好者的多元化智慧结晶涵盖从入门.zip
峰值密度聚类matlab代码-Clustering-based-density-peaks.zip
最新发布
12-04
峰值密度聚类matlab代码-Clustering--based--density--peaks.zip
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值