00:00
那接下来我们再来加上最后的两个条件,一个是仅显示有货,一个是我们的价格区间,我们先给这个上架时间,后边来给一个区间的查询,好把这个上架时间来搜到CTRLFCTRLV,这有一个上架时间来写上两个input框,准备输入我们的价格区间input它和它,然后呢,我们来再写一个巴特按钮,来点击确定以后就按照这个价格区间进行查询,那为了好看,期间我们给两个input框,每一个呢都宽度都设置上,比如我们这个100。PX我就来设置成100,然后呢,第二个也一样,我们把这个样式呢拿过来,CTRLF9。来看一下页面的效果,来刷新一下,走,我来刷新,那现在呢,我们这儿有两个音input的框,准备来输入我们的价格区间,那我们让它跟旁边呢隔上一段距离,我们就在这写一个marin left来指定上30PX。
01:01
CTRLF9,我们把这个分号呢,一定来写上,好我们来刷新一下,现在我们在这一块来指定价格区间,比如价格区间我写一个500,那就是查500以内的,我们来点击确定就得跳过去,所我们现在先为这个确定绑定一个单击按钮,好来找这个确定,我为它绑定了单击函数。我们就来给他给一个idd呢,比如我们就叫SKU price search button。把这个按钮为它绑定一个单击事件,好,我来往下翻,一直在下边来刀乐福小括号,我们都使用绑定事件的方式来为这个按钮来绑定一个单击事件,然后我们来写一个回调方式,当我们被点击以后,我们要做的事情就是拼上咱们这个价格区件拼上。价格区间的,咱们这个查询条件,这个价格区间的查询条件,我们来看一下。
02:00
主要呢,要获取到这两个input框的值,所以呢,我们先得找到这两个input框,我们直接把这两个input框给它,每人给一个DD呢,比如我们就叫SKU price price的咱们这个from,我们从哪开始和我们这个SQ price的to,我们把这两个价格区间的值拿过来,SQ price two。而且呢,由于他们只能写数字,所以我们还可以在这来指定他们的type是一个number,哎,只能允许我们填数字。好在这type来指定一个number,那我们来准备获取这两个值CR end到后边,那先来获取两个input框的值,走井号第一个第一个input框的值,那就是我们价格从哪开始,我们调用杰克瑞的点value方法,好,那这个是我们的from价格开始,然后呢,我们再来。获取我们这个价格结束的区间,好把这个价格开始,这还有一个to,这是价格结束,我们这儿呢就叫to,然后呢,我们要拼上这两个,那无论哪个是空串都行,我们最终呢,这两个是拼接成我们的这个条件,比如我们就加query,我们的条件呢,就是from来加上一个我们的短横线,再来加一个to。
03:19
这是我们的条件,然后最终要把这个条件给我们添加到我们原来的URL地址上边,我们这个条件的添加和替换,我们这儿呢,有一个东西啊,把它拿过来条件的添加和替换,我们来调这个方法,把原来我们的。当前链接地址我们来传进去,然后呢,我们现在相当于如果我们是价格区间的话,按照我们以前约定的啊,我们后台这一块约定的查询参数价格区间,我们要传一个SQ price,而且这个东西呢只能传一个,所以呢,我们调用这个添加或替换方法,如果有的话那就替换,没有的话呢,就会添加上它,而它的这个值,那就是我们这个价格区间,好就是我们这个区间,最终这个会返回一个链接地址,我们又跳到这儿,好,我们写一个location.rf。
04:11
包括我们这个值。就算刚一跳过来我们页面呢,这肯定也要回显,我来写一个CTRLF9,好,我们来现在把页面重新给它编译一下,我们来现在来写上一个数值,比如我们来查6000以内的,我们现在的这些有6000以外的,我们来查6000以内的,我点确定,我来看他能不能拼上我们这个条件,我们先来把这块刷新一下,好,我们现在来输一个6000,来查6000以内的,来点击确定好拼上了SQ。杠,六千六千以内的,好,这5799,这都6000以内的没问题,那么再可以来输查5000~6000之间的。我们来点一个确定,发现条件呢,就换成了5000~6000也没问题,那这两个条件我们要回显过来,所以我们来到这一块,我们再把它进行一回显就完事了。好,我们来到这儿条件的这一块,它的真正Y6值,我们来给它进行回显,点Y6,我们使用THY6 THY6我们来给他回显,我们就应该使用我们这一块的值价格区间,这是我们参数查的5000到另千,我们如果能拿到SQ price这个参数,把中间一截取,我们又能回弦了,那么就来把它截取一下,同样的,那么这块截取我先来Dollar服大号。
05:30
我们想要获取我们这个参数,那这个参数呢,就是从P里边获取SQ price,我们先来从里边来获取我们这个SQ price,来看它有没有值,而且呢,我们这个写法就像以前一样,肯定还会出这个问题,只要是从P里边取数据,那肯定就有这个问题,所以呢,我们就在整个这个div里边再来回显条件的时候,把每一个变量我们都声明好。这是来声明第一个变量,P等于第一个,接下来我们来声明第二个变量,那这个语法是什么呢?们来找一下这个TH位置,好,我们来CTRLC,我们来在整个SIM文档里边CTRLF,我们来找一下th with,那th with的写法,这有一个声明了一个变量,它的值是什么?我们现在要声明多个变量,我们来看TH位置有没有我们多个变量的咱们这个示例,好,我们看到这多个变量的话呢,我们用逗号来进行分割就行了。好,那我们第一个变量给它复合值了,第二个变量,比如我们的price price呢,我们也给它复合值,我们就叫price range,好,我们给它复值呢,也叫Dollar符大括号从我们这个请求参数里边取到我们这个参数里边会有一个SQ price,那最终要用它。
06:47
好,然后呢,这一块真正的值就是应该拿到它来进行判断的,好,那这一块要回显的两个价格区间值PHY6,那第一个那就是我们先拿到它,如果它不是空,所以我们调用井,我们这个string的这个方法,string.is empty,如果我们的这个东西price range不是空的,说明有值,那如果有值,它的VALUE6值就应该进行分割,而我们这个分割呢,由于我们这个情况有挺多的,比如我们现在写了一个300-500,或者呢,写了一个杠500,或者写了一个500杠,但是不管怎么说,那这个短横线出现的位置前边的字符串,那就是我们from的开始短横线位置后边的字符串,那就是to的整个完整内容,所以我们要在这做一个整个截创,截创的前提就是我们这个price range不是空的,所以我们在这来判断它是空吗?如果是,那就返回空值,否则。
07:47
的话,我们就来进行截串操作,那截串操作同样参照SIM,我们这个strength这个API,我们点进来,那这呢肯定也有截串来从下边我们来看一下,那下边呢会有一个首先index of。
08:02
来找到我们指定字符串的索引,然后呢,接下来我们来截节串,使用它的sub string方法,从几开始截到几节束,所以我们现在先来找到我们这个短横线的索引,我们把这一个方法拿过来,CTRLC,好,我们真正的截串方法,我们把这一块呢,我写在。我们这这里好,我们先来写上,我们写完以后呢,我们来给它拼接条件,这是我们这个strength的截串API。我把这一块来table转过来,我们在这来看一下我们这个API怎怎么操作,我们应该是我们这个strength index of,我们先price range,我们先来截取我们短横线所在的位置,啊,这个短横线呢,这其实就是我们这个双引号,我们先来截这个双引号,那拿到它的这个位置了,我们再来调用它的这个API来进行我们的回显操作,好,我们继续来调用strength这个API strength API有sub string。
09:01
指定索引从几开始到结束的?但是我们发现呢,这还有一个更快的方法叫substr after。想截取某一个东西之后的内容和截取它之前的内容,那么用它连这个index of都不用了,所以呢,我们应该是subst string after after这个短横杠之后,那就是我们的to值,短横杠之前,那就是我们的from值。所以我们先来把from值拿到好,把这一块呢复制过来,那现在呢就用单引号好,我们把这个呢拿过来,我们最终截串得到我们这个,但是呢,我们这个截串使用subs string,我们这有一个北before,我们截什么之前把它的这个之前的内容来截到,好,这是我们。From的值,好,我们这个to的值,我们也一样使用th value6我们来截它们之后的,好把这一段呢,全部拿过来,CTRLC我来复制放到这,我们来截他们之后的,那接下来呢,还有一个叫。
10:05
After来截这个短横线之后。来看一下整个效果,CTRLF9那页面重新编译,我再来刷新一下,我们看能不能回显,我来刷新。我们发现呢,没有截到直,那没有截到直的原因,我们先来看控制台好还是没有报错,那没有报错,我们发现是这一块问题,那这个截串我们不是用这个短横线,我们是用这个下划线的,好把这个下划线打印过来,好我们用下划线,包括这一块呢,我们如果使用下划线来进行截串,我看能不能打印出内容,CTRLF9好,我们重新来刷新页面走,诶我们发现这一块呢,现在就有回弦了,那我们这个截串呢,那就是对的,把这一块来删掉。这是我们来对页面进行的回显,包括我们来查6000以内的,我们来刷新,我把这个5000我来去掉,我来重新点击确定这个是6000以内,我们这一块呢,也正确回线,我们来查5000以上的或者6000以上的,好,我们来点一个确定好,那这6000以上我们发现呢,都是6000以上,这块也正确回线没问题。
11:08
那按照价格区间查询就好了。接下来就是这个仅显示有货,同样我们把它一选中,相当于我们想要拼装一个有货的查询条件,那这个有货的查询条件呢?这就有一个叫汉字to,如果我们来传了一个一,相当于我们只查是有货,如果我们不管有货无货,我们不够重,就是都查,无论有货无货。所以呢,勾中就给这个属性传一个一就行了,所以们就来选咱们这个属性,我们先来找到它在哪,仅显示有货,把这个呢找到以后,我们来给它绑定,单击事件来CTRLC,好,我们在这找一下CTRLF走,仅显示有货,那就我们调这个方法,那这个调呢,我们还是来使用我们的javascript的调法,但是我们这一块的仅显示有货,我们会有一个这个选择框。
12:03
而这个选择框呢,我们在这儿没有显示,那没有显示的原因,他是拿这个I标签做的,这个I标签呢,他把I自己整了一个选择框的样式。那么就给它留一个真正的选择框,把这个I去掉,我们在这来调用之前,我们先来准备好我们这个选择框,好input它的type呢,就是我们的check box,那么想在这调呢,我也不用在这这么来调了,走,那就给这个input来绑定单机事件就行了,好来给一个ID,这个ID呢,就叫瘦汉字to,哎,仅显示我们这个有货的。我们来为他绑定我们这个事件,我们呢也不绑定单击事件,我们来监听它的改变,好我们来ctrl end,因为它是一个选择框,所以呢,它自己会改变好来监听他的称职事件。Change,那如果它变了,我们就拿到它当前的这个值,那么change以后呢,们一定在这来return一个false,来取消掉默认行为,我们可以来Dollar this,我们先拿到我们当前的值,点一个value,因为这个选中没选中它是一个true false值,来alert一下,来看一下它这个选中没选中的值是什么,或者呢,我们且壳里边直接有一个属性,可以来判断它是否能不能被当前我们这个选中状态,我们可以使用咱们这个prop属性。
13:28
获取某一个选中状态的值啊,而且特别是我们这个选择框,它的这个选中状态就叫check,所以呢,我们这样更精确,我们叫prop,我们来获取check的,它的这个值,那选中了就是处,没选中呢就是false,来CTRLF9。来看一下我们的页面效果好,我来刷新,我现在来选中仅显示有货,诶,这就是处,那我再来取消,那这就是false,没问题,我们就来加上这个效果好,现在呢,如果它是处好,我们把这一块拿来走。
14:02
If,如果它是处,那说明呢,我们要选择有库存的,那否则那就是选择无库存的,那么这块倒不是无库存,那么相当于取消掉我们这个库存的选择条件。好,如果我们被选中,我们就来给他拼上一个条件,还是调用我们这个方法。然后呢,给我们这个当前的URL地址上拼上一个我们指定的条件,那指定的是什么条件呢?那现在有一个叫汉字to的这个条件,这一块呢,来看前端参数有一个叫汉字to,如果想查,只有有库存的,我们传一个一就行了,好我们叫汉字to,它的值呢,那就是一。那么最终就跳转到这个位置好。但如果它是没选中,那没选中状态,那么在这如果没选中,那没选中状态呢,我们还要把这一块。它里边拼的这个条件给它移除掉,我们没选中呢,不是查无库存,而是有无库存我们都查,所以呢。
15:06
我们还要删掉它的这个汉字to条件,那这个删怎么删呢?我们还是调用我们之前的抽取的这个方法好,我们抽取的这个方法,我们呢,主要是使用这段正则,我把它复制过来好,我们来进行删除,如果没选中。把这一块拿过来。这是我们正则表达式,我们想要删哪个,我们想要删除hands字to,所以呢,我们这一块就叫hands字to,我们来匹配handsto的值,然后把汉字to的值最终给它替换成空串,诶这就行了,所以我们把我们老的这个地址,我们把老地址拿过来好,因为老地址呢是一个字符串,我们把它先转成一个字符串,这个老地址这个字符串我们要给它进行替换。You hasto,我们就把它替成空串,得到一个新地址,然后我们跳到这个指定的新地址位置,好。Con f9。
16:01
我们来页面刷新一下,我们来看一下效果来刷新。好,现在我们没有拼上有货的条件,如果我来勾中了,请显示有货,我来选中,诶我发现拼上了汉字TO1,如果我再去掉就应该没有,但是呢,因为我们每次一选中以后,它页面新跳转了。所以页面一刷新,我们这一块的选中状态没有回显过来,所以我们还要回显这一块的选中状态。所以来到我们这个汉字to的这一块。我们看一下那这个input框的这个选择,它到底有没有被选中,我们使用咱们这个叫TH,它有一个叫check,那他到底有没有被选中,那还是拿到请求参数。指定的这个值,好,要获取参数值,我们还是先使用TH位置来声明一个变量,这个变量呢,比如我们就叫check。它的值就等于我们从Dollar大括号从这个PM里边取出的我们这个叫汉字to的值。
17:04
当然取出的这个值有可能为空,所以我们这个check不check,我们还是一个判断,到了大号井号string。4.1个如果it's empty,如果我们取出的这个check是空的,或者呢,我们直接给它判断,管它空不空,来直接对check来进行一个判断,只要它不等于一,那就是不被选中的,等于一就是被选中的,所以呢,我们在这判断它等等于一吗?如果等等我们这个check,那就是被选中的,那就true,否则呢,就是false。好,我来CTRLF9来看一下我们页面的回显效果,我们来在这来刷新一下,我们现在呢是汉字to仅显示有货的,我来刷新来,我发现这一块呢没有回显。我们确定把这个CTRLF9,诶我们这个已经变异了,确定没问题,我来刷新,那这一块呢,就应该有回显,那没回血,我们来看检查元素,我们check的属性呢,相当于判断没进来,我们从power里边获取handsto的,我们来看一下,好,Power里边看hands字to的值,我们将它赋值给了我们的这个check,那么来看一下我们自己获取的这个对不对?来我们来双中括号,自己来获取一下刀符大括号走,我们是P里边的汉字to。
18:21
好,CTRLF9,那先来看页面这一块显示的对不对,我来刷新好,我们页面呢,确定能获取到,那么接下来就判断我们获取到的这个值是不是等等一的。那再来判断它,等等一我们返回到这个结果,CTRLF9我们来刷新一下走。M们发现这个等等一居然是first,但因为我们获取到的这个呢是一个字符串,而等等一呢,我们是一个数字,所以我们这一块的判断,我们还得利用我们这个string工具类,点string里边呢有一个叫equals,我们来看一下它的这个工具类里边。有没有对应的equal方法,好,如果有这个equals我们才能用这种,好我们就应该是判断不能用这个,我们应该是用井号strength里边的equals方法来判断我们汉字stock这个值是不是跟一好这个值是不是跟我们的字符串一诶是相等的,来CTRLF9,我们来现在刷新一下页面走,那现在呢是出,所以我们这块判断不对,把这个判断呢,我们来换成我们这种。
19:27
Dollar福大客号,我把这个拿过来。那么这块的判断呢?也一样,我们把这一块换过来走,如果我们这个check的是等等一的走,我们相当于来检查我们这个check属性,最终这个equals也直接返回true false,那我们在这呢,也不用写三元运算了,好,我来CTRLY把这个删掉,CTRLF9来重新测试一下。好,现在我来刷新走,现在刷新我们这呢就是勾中的,那我们现在不勾中取消,好我们handsto呢就没有了,那我们再来勾中看子斯to呢就又有了,那么这一块效果呢就没问题了,价格区间仅显示有货我们都可以了,那剩下页面的其他细节。
20:11
比如我们这一块多选,那大家就可以给每一个上边加一个咱们这个check box在后边呢,加一个确定也不做那么复杂了,当一点以后把这些值拼在一起给我们提交,大家们把这个细节完善,包括这一块箭头想优化的来优化一下,想加入按照其他东西属性进行排序的,那ES上架的时候呢,把其他属性大家也都可以加上等等等等,这些细化细节呢,我就不做了,那主要呢,把我们整个大体结构做完,但是呢,之前测试好像有一个小小的bug,比如我这华为,我这是第一次来搜华为,我再来搜一下他呢,相当于把keyword给华为这拼了两次。那么华为这一块拼接就应该是替换或者添加,所以我们把我们以前p keyword的地方,我们就来给它变成我们这个替换或者添加,我们来找一下我们进行商品检索的SEARCH8KEYWORD。
21:07
那在这来检索商品,检索商品。但是我们真正的要跳到地址们自己也就不用加这一段判断了,我们直接调用我们的方法remove,哎,Replace and添加,所以我们的URL地址是我们这个当前地址点ref。我们想要添加的值叫keyword keyword,然后呢,我们要添加的这个搜索值就是我们传过来的值,最终跳转到这就行了,走开始第2h ref走。来CTRLF9,我们来刷新一下页面,把这个bug呢,我们先来解决掉,我们把这个刷新之前。把这个Q2的华为把它去掉,好刷新。我现在再来搜索一个华为点,诶,这就一直是华为不可能拼成一个数组了,包括其他的这些属性,有需要我们那种方法的,大家都可以一改。
22:00
那么整个检索页面我们也就渲染结束了。
我来说两句