00:00
上节呢,我们已经写到了提交订单,那么点击提交订单呢,它应该去到下一个页面,也就是我们真正要付钱的支付页面了。所以接下来呢,我们先把支付页面的静态组件开发好,然后我们再来考虑做这个线下内容。来到圆形图。打开我们的一个配页面啊,支付页面,那么这就是我们的支付页面,整体结构呢,并不复杂,上面一个这样的一个导航,下面呢三段文字对吧,最好是包一个容器好调这个边距不标的话也行,给他一个上边距,给他个下边距。然后下面是一个容器对吧,然后呢,左边一个图标,右边是一块区域,然后一左引右布局给一个下边框。好了,那么这个整体呢,就是我们目前的一个效果,最后一个确认支付的按钮。那么接下来我们就来去完成这个支付页面。
01:00
呃,我们来截个图。好,然后接下来呢,我们一样的就是打开我们的电视工具。我们在这个配下面新建一个新的组件。叫做配。然后再下面新建一个index。OK。然后里面的名字改成配。The。所有一类名全都去掉。好了,那么接下来呢,我们就可以去开发这个页面了,点击这个左上角,进入这个可视化编程工具啊,我们从同样的选中这个区域,将它高度调为百分百,然后给个背景色。好啊,那么接下来呢,是一个头部的一个导航啊,这个头部导航呢,其实跟之前写法是一样的啊,跟之前写法是基本是一致的,我们也来快速搭建一下吧,所以说这些东西如果你觉得有必要,可以考虑把它分装成一个组件,这样的话呢,我们只要引入传入不同的文字即可实现这个啊头部导航的一个这样的功能,因为点击这个回退的按钮呢,同样的是回退啊,所以说我们可以考虑去分装成相应的组件。
02:27
当然这里呢,我们如果要封装主机的话,我们可能要退出去啊,自己在这里面去完成相应的内容。我们没找到之前的这个订单页面,找到它头部写的这个这一块内容,把它封装成一个组件,啊来,我们把它分装成一个叫做navigator。是一个头部的导航栏,然后结构是这个结构。对吧,样式呢,我们来复制一下样式是。
03:03
Will test1 image1这些。好把它解决走,解决到我们的这一块了。好贴贴过来之后呢,那么后续我们只要把它放在指定的位置就好了,然后中间显示的文字呢,我们用props来传递进来。我们声明接受pros。我们接受的一个内容就叫test,那么它是个string类型。然后接下来呢,我们就在这里显示咱们的这个test。诶就好了,对吧,好了,那么这个组件定义好了之后呢,我们就可以在其他地方去引入,包括这里我们的word页面。还有就是它的一个go back和这个函数啊,我们也需要放到过放过来啊。
04:02
因为点击它要回退。喂,这个方法也不过来,差点忘了。好,来到奥这里面,我们就要引入这个组件。你之后呢,我们把它放到最上面。然后呢,传一个属性test职能为提交订单,OK,那么这一块就会呈现出相应的内容。我们可以看一下这个提交订单到底对不对。也结算。OK,他这里提交订单显示是对的,我们要接下来把下面的样式给去掉。我们再看一下。OK,上面这里就显示了这个提交订单,来我们来看一下,这里就显示的是没有任何问题的提交订单。
05:04
说起啊,接下来呢,我们就是考虑呢,把这个组件呢,在另外一个地方也用一下。在这个navigator。在我们的支付页面。引入,然后使用。OK,然后这里呢,T,我们传的是订单。好呃,做好这一切之后呢,我们收起来,完毕点击。那么它应该就会进入这个区域啊,虽然它显示的可能稍微有些偏差,它没有真正示它具体的内容,但实际上呢,呃,咱们这个组件肯定是可以生效的。啊,实际上肯定是可以的,咱们不用关心,因为在order页面是OK的,好,往下走,我们继续引入几个test文本。这个叫交易的剩余时间。
06:10
好呃,具体剩余的时间呢,后续我们要去对吧,对他做一些操作。而且呢,如果我们希望更新的内容少一点的话呢,其实可以就是我们给他单独整个元素,这样的话呢,它就只会有这个元素在更新,所以说如果你希望它更新的内容少一点,我们要talk view,因为将来这个时间是要倒计时的。这个view呢,它应该要呃肉布局,然后呢,肉里面呢,他们是要center居中。然后往里面塞,就是我们这个文本交易剩余时间。好,呃,同时这个文本呢,我们给一个size。12PS。颜色,Green。
07:01
好给好之后呢,我们再复制生成一份啊。那么这个就是那个倒计时的时间。同时他需要给一个marin。稍微一些间距啊OK,整体容器呢,距上面呢是有些间距的。比方说我们调为20PS啊,20横带不够30PS。好,然后接下来呢,我们继续调下一个文字啊。下一个文字的话呢,它就是一个一个价格,一个左边这个小,右边这个大,所以说一样的是个容器。它里面有两段文字,这个容器呢,要水平排列居中。好给一个test,它的这个test的内容呢,就是一个价格的符号。好,那么我们给它调大小。
08:00
16PS。同时自重加为7万。好呃,那么接下来我们就是要去再调一个,再调一个它呢是具体的价格。字体大小要更大一些。25。好,那么调完之后呢,整体它在这个缪中呢,应该要布局是靠下布局flash。OK flash的话呢,稍微的啊,对齐这个机械好一点啊,这样呢他们就对齐了,对吧,然后上下呢有一些间距。上下都给个。10PS这样的一个大小好了,那么这一块就调好了,接下来最后面的是一个订单的一个文字啊,这个文字实际上应该跟上面这个是。有些线的,所以说我们可以复制一份,把它拖到下面来啊,拖到下面来,然后呢,我们只要让它居中就好了。
09:10
让文字居中。啊t center同时据下面有一个这样的30~40PS的一个间距。好了,我们接下来呢,再调一个view。整个这个view的话呢,它也是一个。上下左右都是十,判定也和十,然后呢有个边框10PS同时。呃呃,圆角是同时它是有一个背景色的。这景色为白色。好了,那么这块区域就出来了,接下来呢,我们要给它。一个容器。两个容器。
10:00
容器里面的是水平排列。然后呢,左边是一个图标,直接上一个图标。整个图片大小呢,我们是设置为16PS看效果。好,待会不够的时候我们再调啊,好,接下来给他一个图片。Image下面的支付页面啊。在支付页面下面呢,我们来看一下这个图片啊,不在支付,在order order里面把阿配给PG。好了,那么我们这个图标就出来了啊。OK,出来之后呢,我们接下来继续右边是一个容器,因为右边要一左右布局,同时它有一个下边框啊。好,右边呢,它应该要水平排列,同时space between对吧,然后呢,塞一个文字进去。
11:01
文字呢,是支付宝支付。OK,然后大小呢,我们调为16P。加速。好,但是这个图标的大小就不够大了,图标大小我们调为20。20差不多啊,我们只要让这个容器它垂直方向是。那么这样它们就能对齐了,同时图片呢,距右边稍微有些间距。对吧,隔开一点点好了,支付宝支付没问题,右手边呢,还有一个图片,所以说我们再拖一个图片到这个区域来。OK,这个区域呢,拖拽失败啊,我们要找一下这个view,找一下里面的这个view啊,再找里面的这view,给里面这个view添加一个图片。
12:01
看看是不是对的,OK,这个图片就添加上了,它大小的话呢,应该和这个是一样的,20PS。OK,这个区域我们再看一下这个区域,它这个space between。好像没有呈现啊。那么应该是它整个宽度不够啊,这个view宽度不够,那么view的话需要宽度的话呢,就是FLASH1就好了,它就会撑满整个负一空间,那么FLA1呢,没办法在这里指定啊,我们得出去指定。来找到这个B5。我们给他一个flash。他就会占满剩下的空间。对吧,这样就会以拿到右手边了,同时他们的垂直方向要center OK,然后这个图片呢,用的是我们之前的那个check的图片啊,找到我们之前的这个,呃。
13:01
不是shop。找到之前的购物车那一块吧,有一个Cha的图片。好,呃,那么这样的话呢,它就有这个check。OK,这个图B它就会在这啊,就会在这。然后呢,下面呢,他们上下稍微有些间距啊,上下稍微有些间距,我们呢,找到整个容器,哎,不要找错了,就是这个密容器上下有些间距。OK,我们调了一下间距啊,同时下面有一个边框,有个下边框。来,呃,我的。
14:00
来一。其他的位置为零颜色的话呢,我们先暂时为。CCC啊,百分百收的。OK,我们再看一下这个容器。没有指定成功啊,我们再来看啊。边框CCC百分百。好了。再看一下。是不是整个容器啊,这个容器指定错了,这个是零。而是后面这个容器,是这个容器。CCC百分百。来看一下。整个楼气它到底有没有给出来这个。呃,应该给出来了啊,这个样式已经生效了。
15:02
Solid的CC,我们再给一个000,可能更明显一点。来他这里还是有些问题啊,这这个写写边框的时候,他我们试着都按下回车,确保它这个样式是能生效的。OKEPS就出来了,那么这个margin的话呢,呃,不应该由这个EPS来指定,应该由这里面的pen来撑开,所以说我们这个样式还是调的稍写有问题。这个十要去掉。OK10去掉的话呢,我们再看一下它这里还是没有去掉,我们手动的删除OK去掉了,我们应该是给这个room的一个喷。对吧,这样呢它才会撑开来,然后找到这个容器呢,我们给颜色改成CCCC。那它就会一个灰色1CC的很的话太深了,那你还会改成一一。
16:02
那么它就会一个比较浅的一个颜色在这啊好了,那么做好了这个之后呢,我们就要把这个容器再复制一份啊,复制一份的时候呢,我们把复制的下面这个容器。的边框给去掉。边框给去掉,然后呢,文字内容改。图标。Got no check。OK,然后呢,图标这里用的是微信支付的图片。微信配。好,那么这样的话呢,我们就基本上把咱们的这个前面上面的结构呢,全都定义好了啊确定好了,我们来看一下这个文字大小,好像下面这些文字稍微的粗一些,稍微的大一些,我们调成14看看。
17:09
会调到14的话呢,那么这些图标啊,就要分别的调小一点。好吧,那我们就这样简单调一下吧,这样就达到这个效果了,最后呢,下面有一个按钮,那这个就简单了。按钮在这啊,我们开启定位。它要定位在下面对吧,LEFT0宽度呢啊宽左右都是十。
18:01
宽度自然就撑开。好,呃,给他一个高度,高度为50。够不够?不是PSOK,然后呢,圆角。是。同时给它一个背景色。好了,然后里面的文字呢,要是黑色大小的大一点。对吧,加粗。好了,大体这个图标就出来了,那么我们可以把文字再调小一点。啊,16应该就差不多了,同时这个高度呢,我们调成40PS看效果。OK,那么这个按钮呢,就出来了啊,最后呢,给按钮里面的文字加一下。
19:03
OK。整个页面呢,我们就搭建完成,那么下面我们要做的就是把我们的背景色去掉。好了,那么去掉背景色整体我们就出现了下面呢,我们就是这个页面开发好之后啊,我们下面就是要点击跳转过去啊,来到订单页面。来,当我们提交订单成功的时候,发order成功的时候呢,我们要等这所有请求都成功,然后再跳转到下一个页面去,我们先把跳转到下一个页面函数写一下。高配。那么下一个页面呢,我们通过刚刚的开发啊,其实发现下个页面它需要我们的一个订单的价格和订单的一个名称这些参数啊,所以说我们需要跳转过去的时候,需要传参的。
20:01
Name呢是配页面呢是顶点斜杠,顶点斜杠pages下面的配下面的in industry.stml那么要船舱用的方式还是配置?对吧,在这里传参,他需要传订单的总价,还有这个。Money。Total price吧,我们就叫price啊,订单的总价和订单的这个标题开头,那么你传给我,我们负责跳转过去的时候,把这两个参数传过去。好,那么这里因为有多个请求啊,我们希望多个请求都做成功的时候,他再跳转,那怎么做呢。我们在这里可以定义一个标识。这个这个或者叫successful的一个请求的。请求的一个数量。是一个成功的请求数量。好,然后呢,每次请求成功,我们在这个else这里就可以让他加一。
21:07
对吧,一旦请求数量。等于我们整个这个卡列表的一个一个。累死,那么说明全部都完成了,全部都完成了之后,咱们就可以去做这个勾配。好,这配的话呢,需要传这个total price总价啊,那么这个总价的话呢,用的就是我们这下面计算的这个总价,所以这里不需要传三了,直接this price就好了。好,但是这个标题需要传啊,到底用什么标题需要传标题呢?我们默认就用第一个商品的标题。也就说用的是呃,就用的是它便利的这个car吧。来这四题看例子,第一项的它的一个title,它的一个标题,那么如果这个这个标题呢,是这样的啊。
22:03
如果它是有多个标题的话,它是有多个值,我们加一个等,如果没有多个值,就直接用这个抬头,所以我们整个写法是这样的,加等于一个值,加等于什么呢?那么我们再判断一下。其实我可以在下面给大家计算,这个可能大家看的更清楚一点。呃,来,在这里去得到一个title。如果他认大于一对吧,说明有多个,那么我们就加一个等。代表是多个订单。如果没有就是一个突。打算就是加个这个啊,那么把这个title传过去。好了,如果是多个订单呢,它就会是什么什么等,如果是一个订单的话,它就是直接就是这个订单名称,就不会再加东西了。好了,下面我们就来看一下效果。
23:02
来,现在是我们的页面啊,我们来到这个购物车页面,现在呢,我交了两个订单,对吧,我们结算。然后呢,点击提交订单。那么它应该要跳转到我们相应的位置。计算请求数量,每次加,加完之后呢,我们进行判断啊,这卡这里写错了,应该是对塔的卡。对吧,啊,那么为了方便操作的话呢,我们最好是把这卡给提取出来,省得呃,我们每次都去这样去查找啊,这样的话呢,性能不太好。好,我们再来看效果。周身。好,他其实成功了,只是最后的跳转出了问题,好吧,呃,我们呢,在这里就先加这一个试试结算。
24:02
OK,一个点击提交订单,诶,它就跳转到支付页面了。对吧,好,跳到支付页面的话呢,咱们这个订单这个图啊,它这个出了点小问题啊,我们看一下是哪里出了问题。六一。Margin top。呃,它这个有个样式没有出现啊,不知道为什么没有出现,我们自己给他写一下,它应该是呃margin top就好了,对,然后呢,文字居中没问题。然后view呢进行定位。开启定位这个也没问题对吧。呃,我们来再看一下这个定位应该是OK的,怎么到这里我们的样式就出了小问题,我们在订单这里,我们再加几个订单。
25:00
好,这里有多个订单了,我们结算。呃,下样式应该更新,没有更新成功啊。我们首先整个效果是出现了啊,包括我们传过来的参数应该也可以使用,我们来到配页面,我们先把这个参数使用一下。来整个这个价格的话呢,我们要的是pro。用一个表达式啊。Total price。准确的讲是API里面的。所以这个表达式我们不能这样写啊,我们得来到这个代码里面去写。在这里呢,我们定义这个total price,它的值为API配置。Total price。同时还有一个叫title。等于配置apid配置p title好,但是你这样设置的话,还会存在一个问题啊。
26:00
啊,我们这里因为用的用的类名是六一,六一和里面的六一冲突的,所以导致这个样式出了问题啊,原因是这个,所以说我们如果想。呃,没有问题的话呢,我们需要给它加类名啊,加navigation。我们给它每一个类名上面加一个nag,这样就不会冲突了。好,呃,那么这样就不会冲突的类比冲突了,OK,这一块呢,我们就先不管了,我们来看一下这两个参数能不能正确的显示。应该来讲还会存在一个问题。Put price。以及这个抬头。来,我们来到购物车啊,没东西,我们加一个,加一个东西就好了。
27:00
点击去结算。提交订单。好,这里就没有显示啊,没有显示的原因就是咱们这个参数呢,在data塔初始化的时候,它并没有得到,所以我们应该怎么做呢?那应该在API ready里面,我们去这一试点点。Total price等于这个值。那么title也是如此啊,要这样设置才能够正确显示。好。我们再来试一下。你看这样就会。显示正确了啊,后面它的后面呢,加一个呃,订单信息。好了,那么到此呢,我们就把这个静态主机开发好。以及这个路由跳转功能也做好了。
28:01
对吧,整个页面我们就开发成功,最后呢,就是这个按钮呢,我们样式最后做一些细微的调整啊,找到最后的按钮。呃,调整就是它的border为no。对吧,不然的话呢,它好像自带一个边框不好看啊,同时它的高度呢,还是调成50PS会好看一些些。好了,最后我们来看效果。好,差不多就是这个样子啊,目前这个订单页面上面也没问题,这里显示也是正确的,下面也是OK的,好了,那么我们就先到这里。
我来说两句