00:00
大家好,我是学习地的特约导师高若峰,上节课咱们编写了地址的列表,这还是比较简单的,只要获取到,然后按照他的组件的规则将数据给他,那么他就自动编辑形成我们这样的地址列表,所以呢,用这个组件是比较方便的,那这节课我们看编辑地址,当我们点击这种编辑的时候,会给我们也是转向这种编辑的地址,对吧?添加的时候他俩是一个地方,只不过通过类型来区分是添加还是编辑,然后编辑的时候呢,我们把这个当前的地址ID给传过去,就在ATM里边,在这块。会自动将这个ID给我们传进来,然后呢,给我们传到这里边来,也就是我们这个数据里边,这不有ID吗?它会自动把这个ID在这个列表里面,对吧,里边有这个ID编辑来一个,它就会把这个ID传过来到这来,那我们在这个编辑地址列表里边,那如果我们是编辑的编辑的话,那我们需要。点击这个图标编辑。编辑的时候我们就不能叫新增地址了,对不对,然后呢,保存也可以删除,是这样的一个情况,那就可以变成编辑地址,那我们通过类型来判断,你看这块传过来了是。
01:02
编辑,然后地址ID是五对吧,我们传过来了,所以呢,我们在这里边就得先接收这种啊参数,然后呢,我们来处理,我们先把这个参数呢,声明到我们的状态里面。状态里面在下边声明一个是类型默认的我们就是ADB添加嘛,对吧,然后呢,还有是a DB res sidd,也就是地址的ID。我默默认是空了这个地址ID就可以了,其他的咱们不需要,然后呢,我们在里边页面加载的时候,我们就能收到这个地址,但是地址是在哪里边呢?地址是在这个路由啊,通过这个路由的参数Q里边去获取到的,所以我们在这个地方amount里边获取就行了,初始化直接在这里边做,那我们可以。呃,直接使用cost con ST,这样获取到一个参一个从这个里边。呃,从这个叫做呃路由T1加二加二是不是游戏了,从路由里边QE接收里边的什么接收里边的。
02:05
呃,类型和ID对不对,但是呢,里边我们传过来的就是类型ID,所以呢,直接我们把它解析成这个变量,解构成这个变量,所以呢,我们直接放在这就行,这里边生明两个变量,一个是什么,一个是呃,地址,当然按名称跟数据没关系啊,一个类型一个地址,ADD re sid,当然这块只是接收到这个参数。接收到两个参数啊,接收参数,我们得把接收的参数付给我们状态邮件,我们在任何地方才可以用,对吧,那我们。嗯,这个地方就。当然我们本地也会用到这两个变量啊,用到这两个变量,所以呢,我们ST把它加到状态里边SPE里边的有一个,嗯,TYPE等于TYPE状态折价。然后ad re sidd等于did加到状态里面去。那接收到参数加的状态里边去,那我们就可以做一个做一个计算属性。
03:05
Post,比如标题tle标题我们等于呃,Computer计算属性,我们在计算属性里边,根据我们的类型判断,我们可以返回一个标题。所以我们可以做一个呃,计算属性。当然了,你直接在页面上判断也不是不行的,你在哪判断都行,比如说返回。嗯,返回判断什么。判断这个类型ST里边的type。呃,返回这个类型,如果这个类型等于。Ad,那么我们叫它是。这是一个,再来一个就是呃,新增地址。新增。地址或者叫添加地址都行。进东地址这块我们就叫编辑地址,也别叫修改叫编辑,因为还有删除的对吧,编辑地址。
04:00
这两个。这样的话,我们将这个抬头返回去。接着加上。T,那么我们就可以在页面的这个地方把这个地方换掉,换成什么?换成T,但是呢,默认上的页面新加载这个,然后呢,有可能计算属性还没有执行到呢,对不对,因为毕竟有一些参数咱们是从那个挂载之后出来的,所以呢,先让它显示个空,那我们这块先T就在这块。标记成一个一个空,先有这个,不然的话,他有可能是找不到变量,对不对,因为毕竟是异步处理这样的一个过程,你看这块就变成编辑地址,那我们点击这个就变成新增地址,点击这个。嗯,点击这个就是编辑地址对吧,那还有一个按钮的部分,你看我们这个类型是AB对吧。你看这块是假,如果这块我们改成真,显不显示删除按钮E,如果我们改成真的话。你看这块就有一个删除按钮对吧。
05:03
可以啊,那这块真假怎么判断呢?你看我们这里边会有type吗?如果type等于。这块e did编辑我们传过来这个参数对吧,那它就是真,如果是全增加的是假增加的话,就不能不用它有参数吧,如果类型TYP等于这个中心线。你看它这块就有这个按钮,那我们回来你看,假如说写点新增就没有删除按钮,现在呢,点击编击这块就有删除按钮,那我们就通过这个删除事件就可以做一个把这个删除对吧?那这一部分做完了,那我们下一部分怎么做呢。已经获取到这个状态了,然后标题咱们处理完了,是不是得获取数据,然后把数据加到我们这个页面上来,这个是我们需要去做的,对不对,得获取数据,那获取数据呢,我们也通过接口里边可以有了,对不对,但是这个加载方法默认点添加它也执行,所以呢,我们这块可判断一下,如果T类型等于什么e Di是编辑的时候我们才获取数据,因为都在amount里边写了嘛,对吧,添加的时候不获取,所以判断一下,那我们通过这里边get AB详情,这个我们这块前面已经引入了,对不对,那就从这里边获取,那需要传一个ID,也就是ADB这个ID啊,从这获取到的。
06:15
对吧,才能获取到编辑当前的是哪个ID,然后N,然后。Re,这里边过去。地址,那我们打一下res.rog。这样的话,我们在你看一保存,它就能把我们这里边的当前那个ID是五的。看到当天ID是五的,这个所有的信息给我们拿过来看当天ID是的就可以了。拿过来信息,那我们得要这个信息显示在这个位置上,对吧,把这个信息显示这个置上,那想显示到呃,这个位置上的话,那我们就必须怎么着,在这个里边加的数据。也就是这块这个信息里边如果有数据这块就会显示,所以呢,我们需要把这个信息进行数字化,也就拿过来信息放到那里边去,你放哪边去呢?就是STT。
07:03
这里边儿有个A。Ad地址信息。Info这个方法,我们给它加上一个数据就有了,比如说加上名字,等于那得通过哪获取的这个名字呢?那我们这个is里边一个一个获取太麻烦了,所以呢,我们把它付给一个,比如说把它付给一个变量吧。Cost付给一个a DB res地址的详情,Detal等于res。获取的地址,然后比如说名字,我们是ADB地址详情里边的,你看is里边不这个吗?那名字名字呢,就是这里边的name对吧,一个一个的获取往里加。你看加一个。你看这里边是不是就多了一个名字,然后呢,我们再加TL变化。嗯,电话是ABB,这个里边有一个是PH hoe,你从数据库取出来的嘛,对不对,电话加一个。
08:00
电话就上去了,对不对,然后呢,地区这个区码那个比较麻烦,区码那个比较麻烦,但是呢,我们把信息这个,呃,城市啊信息啊那些都都加上,比如说。呃,都加上完之后,他才能把这些都拿过来,那比如说我们一个一个,呃增加吧,这里边儿不也有省份,北京市城市这些地区吗?那pro。啊,V。PCB。同写,我感觉这个省份写P,连贯写上,写出来AB。地址信息里边P,呃,Vic省份信息,那我们先拿出来省份信息,他也不会把省份信息放在这块,因为我们那边有区域网对应,但是先把这些都拿过来,Ciy城市信息,那AB这个里边的城市CITY拿过来,然后呢,再加上这里边的曲线Co TY曲线信息。拿过来,里边的U。TY曲线拿过来,然后呢,地址详情这个呢,我们不用从那个选择器里边去选择,就是那个呃,列表里边去选择,那我们这块AB地址的详情,地址详情呢就是。
09:10
这个里边我们也有一个ADB。Res。SS这块你看这个拿过来地址详情会有对吧,咱这随便写的118和一六对吧,就拿过来了历史详情,然后是否是缺省的。这块也是一样的,Is before de LT before,当然这里边写的都是这个组件里边需要的这些变量啊,缺省的,那通过这个AB re ss里边的A,它里边是零一对不对,T缺省的所说把它变成真假值对吧?这样就可以啊,这个我们现在默认是甲,咱先不用管这个,那现在唯一现在没有拿出来的是谁啊。就是这里边儿这个区域嘛,因为只有区域嘛,才能设置这个,也就是这里边儿我们还需要设置一个这个属性,就是城市,咱们在。
10:04
省城市这个这块吧,需要一个area区域的靠区码,这区域码怎么获取呢?比较麻烦,这块我们得通过。嗯,我先这会来一个变量啊,叫做area啊Co de,那这个变量咱先格式正确。啊。但是现在没有这个变量啊,没有这个变量,那得指定一个区域码,也就是我们选择的时候,根据我们省市县取出来的信息对吧,然后再组合成这个区域码,指定的区域码,这里边才能选择它选择之后形成的也是区码,那我们选的个区域码,这个比较稍稍微有点复杂一些,那我们。嗯。均码咱们看放在哪个位置上比较方便一些呢?呃,获取。获取地址。地方。嗯。这样吧,咱们在。这个里面。
11:00
这块获取地址详情。这块获取地址信息,那通过这获取地址信息,那咱们就可以把这个地址信息里边省市拿出来组合成这个,呃,这个区域码,那我们先生明一个赖线A这个区域吗。等于一个空的一个拿过来,然后呢,我们需要把我们的这个cos。Pro vice,把我们的所有的省份这个拿出来。啊,省份。TST点,通过这里边的盖位,这样的话我们拿到所有的省份,然后通过省份城市一点点去便历,这我就不给你写了,因为我这块提前准备好代码太多,因为他说峰哥有的是风割字串什么的太长,我拿过来直接给大家讲吧。让我放在了这个。这个地方。这个地方。我们起复制一下到我们的地址管理里边。啊。
12:00
通过对象里边这个方法,这个方法是干嘛的,是既拿到又拿到值,看一下既拿到键又拿到值,因为obg对象里边有什么,你比如说OB这里边有case对吧,是拿到所有的键,然后呢,呃,Videos拿到所有的值,那这个呢,是键和值一起拿这样的一个,那这样的话我们先从你看通过。这个区域里边的这个是咱们在前边获取这个列表的时候,你看已经形成了这三个,对吧,形成这三个,然后把这三个都放在了省区县这个列表里边,那我们现在通过先得反着拿,对吧,你先从我们的城市里边,我们拿到它的ID和test,因为这里边存的不就是ID和test吗?对不对,哪里I如果区域等于我们地址里边这个。你看咱们从这里边不已经就是从数据库取出这个城市,如果这个文本和这个相等的,我们得一点点匹配,对吧,然后呢。匹配到的这个呃内容,然后我们再往下走,也就是找到现在当前你选择的这个区,这个县,比如说咱们选择的是呃,朝阳区,北京朝阳区或者海淀区,如果是海淀区,就是数据库里边取个海淀区,然后我们通过这个省份里边去找。
13:11
对吧。找到这个呃,朝阳区,然后通过省份里边,然后我们去便利通过截取自串啊这样的一个方式,然后呢,找到这个区对应的这个市,把城市找到,那把城市找到呢,最后再形成再找什么,再通过这个城市的过滤成分过滤,我们再找到城市对应的省份。那这样的话就能组合什么,把这个省份啊,这些东西都拿出来,然后呢,我们就能取到这个省份的ID,就是这个区域码。最后呢,就是这个,呃,通过。这里边这个返回来这个区域码这个ID,然后我们复理这个区域码就是城市这个ID区域码,那这个城市的区域码里边找到之后,它就包含什么,包含我们就是这个区啊。这块不是那个,呃县嘛,这个县最后的区域嘛,你是哪个县的,它对应的肯定是固定的那个市的对吧,市对应固定的那个省对吧,所以呢,通过这个能找到这个对应区域嘛,根据我们数据库存的这几个字段。
14:11
过去了,那个声音没看到过去了。没打印,你们打印的我给删掉了吗?啊不管了,你看这样的话,我们就能把这个。你看你看北京市北京区东城区加的区域码,先找到是东城区,然后根据东城区里边倒推,就能把这个北京和北京市它所在市它的小的区域码拿出来,合并成一个区域码,然后把这区域码放到哪块,放到这块我们现在就可以显示这个省市区了。上去,然后我们可以比如设置这个,那它就会把这个值设置成默认,然后我们一天保存的时候。那这个写完只是把数据,现在只是把数据,怎么呢?把数据放到我们表单上,我保存的时候呢,你不能说去增加对不对,你看这里边我们一点保存,不管是添加还是处理都是这个,但是我们把数据放上去了,那内容就在这个里面,那我们还是形成这个。
15:03
还是形成这个对不对。那我们就得,但是这里边我们没取出来这个ID,因为这是用添加的,对不对,现在数据放上去了,和我们手动输入的是一样的,那一样可以形成这样的一个数据,我们只要把这个数据这个是调用添加的接口,对不对,那我们现在判断一下。那如果。这块加上如果类型,也就是TY,就是STT,因为不在里边了,对不对,在这保存里边写了,所以咱把这个嗯,TYP这个类型咱们已经拿过来了,对不对,放到这里了,类型等于eit,如果是编辑的时候我们怎么办,对吧,否则如果st.T如果类型是添加的。你写一个等号,一共写两个等号ABB,我们怎么处理,如果是添加的,那我们要用添加接口。对吧。然后一样可以保存成功那类型,如果是呃编辑地址,那我们就编辑地址调接口里边这个接口咱们已经写完了,它里边需要存两个对吧,一个是传STT里边我们保存的地址的ID,因为咱们在com里面获取地址ID了,对不对。
16:04
一个是DD,看接口是不是这个数据。ID和参数对不对,参数呢,就是我们拿过来的所有的这个信息作为参数在这里边,那就是。参数放进来。这样的话就可以怎么修改。就是修改数据。修改数据。那具体数据在接口里怎么修改,不用当关心防,只关心哪个ID对对传过去,传什么数据给他,接口后端就帮我们修改了,包括这里边我们选择是不是缺什么的,这些呢,他都会在这块拿过来对吧?零一真假值抄过来对吧?这里边我们就要零一真假值给他,再加上零和一就行了。嗯,Conn能力缺省值。假如那里修改真假值,这就真假值对吧。然后呢,这块保存成功,然后跳转回去对吧,从哪来从哪去就OK了,其他的呢,咱们也不需要了,这个方法咱们默认的这块也给他返回了,你们看一下可不可以修改成功。
17:04
啊,这里边比如说改一个,把这详细地址改成。啊。学习原地1199对不对,然后把那地址改成全省的保存。保存成功回到这个地方,但是这个保存它还是不行,这个默认地址这块还是不行,数据库里边还是定义的。呃,参数保存,诶这块应该是啊。形成数据库里的数据内容,里边获取的应该是a de。我们再来一下。嗯,这个。你看这块保存了,但确整地址都还没保存,因为我们这块这个内容获取的是从组件里边,组件里还是这个变量,这是我们数据库里是这个变量,它俩是不对应的啊,然后呢,我们拿回来。嗯,这个变量如果是真,我们就是一,因为它是真假值,我们变成一零,数据库要存的是一零对吧,设置保存保存成功,你看这些是默认地址,然后呢,它是排斥的,比说我们将第一个设置成默认地址。
18:05
那第二个它就会自动取消,这是在接口里边帮我完成的,他会判断,因为同一个地址只能有一个是默认的,所以在接口里就帮我处理,不用我们在前端去判断哪个是默认,哪个不是默认的,所以呢,好多工作得前后都配合的来完成保存。你看第一个变了,第二个就清楚了,是这样的,那如果第三个测试的变了。你就可以。这个。过来。就可以了,对吧,然后编辑其他的数据,你也可以改变省市区地区,跟添加那个是一个道理,对不对,它是把你选择的好多个内容对不对,然后呢,重新去编辑的,所以你选择好的话,这个城是什么,他也会变的,会变的话直接就拿过来就行了。就是这个,然后呢,我们在这里边,咱们就顺便再把这个删除的功能做完,因为只要是编辑类型的,那我们下边还有什么,还有可以把这个删除对吧,这个组件没有提供这个挪过来自个删除对吧,是在编辑里边统一删除。
19:01
那我们就把测试地址,比如说我们把它删除掉,在这块。点击这个按钮删除,先点击按钮肯定会到这里边来,那这里删除呢,我们就直接调接口删除就行了,删除地址那肯定是需要我们传一个里边的地址,这个ID就可以删除了,然后删除成功。我们直接这样吧。点T点。点T1N这边res。转的返回什么呢?总之它都删除了,就这里边肯定会执行,那我们就这块写着删除,删除成功,然后呢,一秒钟调到跳回到原来的位置就可以了。来我们看一下,这个是测试地址,你点删除。确定要删除吗?嗯,因为这个删除它这个本身这个给我们提示了一个确认框,我们取消是不动的,因为删除这个你看咱们自己确认框都有写了,对吧,这个组件多好,里边功能都给你提供全了,然后确定删除。你看删除成功调整回来地址没有了,变成这两个对吧,那这两个我就留做咱们生成订单的时候用了,对吧,你默认地址这块,它也是默认地址对吧。
20:07
啊,这样的话,咱们地址管理咱们就写完了,用了几节课的时间完成一个完完整整一个中山检查,其实还是第三方组件给力,不然的话咱们写样式这块是比较麻烦的啊,然后咱们流程都是按他的写的,那最主要的要想完成这个地址的这样编写,咱对定组件的东西给熟悉,另外呢,在省市县这个数据比较多,对吧,所以呢,还是比较繁琐的,你可以自己去呃看一下啊。好,谢谢大家,这节课我们就讲。
我来说两句