APICloud AVM多端开发 | 生鲜电商App开发：个人资料页功能开发（四）原创

这节我们看一下更粗心的实现。个人中心呢，主要包括啊，我的订单账户啊，优惠券，社会地址消息客服设置啊等等这么多功能。然后我们看一下这个代码。主要分为啊，我们这个导航栏啊。然后有一个。用户信息一个区别，然后下面是我们的一个啊列表一个。功能列表。这块是通过我们微for循环实现。这里我跟大家讲一下这个啊，选择这个图片啊，这个权限的一个申请。我们首先看一下这个啊GS代码。

选择头像。首先我们会弹出一个RP啊，通过api.r shit。来弹出一个啊，底部弹出的一个选择器。这里啊，我们。以选相册为例。我们选择相册。这个时候啊。我们会先判断。有没有相册这个权限？如果有的话。我们就会调用A。Get picture方法。没有，如果没有的话，我们就会。提示一个对话框提示啊，应用需要您的授权才能访问。这里我们点击去设置。由于是第一次啊，第一次的系统会啊，每次访问权限的时候，系统会弹出一个提示框。啊，提示用户啊，是否允许这个权限。

这里我们先选择不允许。然后我们再看一下。如果是。啊，这个时候。啊，因为我们刚才拒绝了，所以说这个时候啊，还会谈这个。然后这个时候我们再点区域设置。啊，可以看到我们就啊自动的跳转到了我们这个应用设置里面这个啊应用的设置界面，然后在这里面我们可以。提示用户啊，就是啊，重新去选择这个照片的权限。比如说我们这里在选择专业照片。这点返回啊，这点返回要重新启动，这是系统的一个机制。这个时我们在。选择啊，这个是具有权限的。

比如说我们。换一个。啊，这就是上传头像的一个功能。快看到我的订单了啊。里面。这个导航切换可以，还可以滑动。那这个我们看一下是。啊，这一块是我们的这个导航栏这部分。啊，也是一个简单的一个for的一个实现。那我们来看一下这个下面的这个滑动的这个我们是通过一个swaper。通过swape来实现的。Sweeper。然后里面per里面我们这个per item里面还有又有一个my water frame的这么一个啊自组件。

而这这个子组件是我们从啊。这个my waterf frame里面给引进来了。那我们这里用了三个。有微for啊。实际上啊，它就相当于v for，然后这个v for的那个数据源呢，有三项，然后这样静态型三项其实是啊等效的。啊，当然这里我我的订单啊，我们这里是啊，采用了一个静态的一个数据没有实现的订单系统啊，所以说没有数据。这就是我的订单。然后我们看一下我的账户。可以看到我我的账户和刚才我的订单啊，这个实现效果其实是一致的。也也是啊，导航栏切换，然后啊下面的页面跟着切换。我的账户我们看一下。

啊，大家可以看到这块其实是啊，跟刚刚刚才那个啊，我的订单页面是一致的。啊，实际上效果也是通过swaper。啊，分别。里面引用了三个不同的一个自助券。我们我们看一下这个啊，冲刺友谊这一项。这有个九宫格的一个实现方式。这个是Richard。我们看一下Richard。这是一个。我们简单的把这个给它收起来，这样简单简单的指示官的来看一下。它实际上也是一个啊，For一个模板。

为了保持左边右边中间的这个啊间隙的空隙一致，这里是这个啊，动态的通过这个style。来计算的这个wise he。我们看一下这个container这个啊样式。这个样式啊，它是啊，实际上就是一个flex布局。然后是一个横向的布局。啊。然后指定的这个flex rap啊，就是为就是到模尾呢自动换行，这样的话，我们就实现了一个简单的一个啊这种宫格的一个布局。优惠券也是一个啊，简单的一个列表。

大家可以看。啊，是一个也是一个我们统一的一个自定义导航栏。然后这一块啊，这里有一个输入框。我们是专门用给它啊，包裹起来。也是为了啊，不让整个页面啊，在这个输入框弹出以后啊。然后跟着滚动，所以说我们单独用一个。来给这个输入框啊给啊给包裹起来。然后下面是通过一个，也是通过一个v for。那循环的一个列表。具体啊，关于这个样式的这些，大家可以有兴趣就自己下去可以看一下。

然后这个收货地址，首先进入收货地址是有一个收货地址一个列表。这个是从我们服务器动态获取的。然后点添加就可以啊，添加新地址，或者是点这个啊，如果有的话，我们就点这个地址进去的话。他就会把当前的信息给带进来。这实际上是啊，同一个页面。Sage。Address。这就是我们这个啊，具体的填写收货地址的这个页面。首先是一个男。然后我们用SC，依然用SC啊。来，把这整个内容区域给它包裹住。这样的话，我们弹出输入框。

啊，只是这个区域进行滚动。然后我们定义了。啊，几项。收货人啊，手机号码。所在区域具体地址、门牌号、地址类型等等这么几项。这几个其他的几个都是一个输入框啊，我们就不多讲了，我们主要看一下这个，这里有个选择所在区域的。啊，这是一个啊，弹出的一个选择器。一个类似于啊，多级城市选择器的一个。那这个我们是用。Peer这个组件。来实现。Pick可以分为单选和多选，就是单列和多列。

现在啊，我们指定这个目的位啊，多选就是这个多列。然后指定这个数据源啊，是我们的这个定的这个data list。就是这个皮的一个数据源，是我们的定义的一个date list的一个。然后这个range k k的意思就是什么呢？就是说这个历的可能是一个对象。那我们想要显示对象里面的这个啊。哪个字段呢，就由这个啊K来指定，比如说我们选定这个这历史里面每一项，它里面有个内有个name这个字段，那我们就会显示这里指定这个name，那么就会显示这个啊name。然后value。指定就是当前选择的这个。一列、两列、三列。我们就会指定。

啊，就是当前选择的这个index一个项。这个selective value啊，它也是一个。宿主。可以看到我们这个啊，默认值是啊000，也就是默认选中啊。每一每一列都是选中第一个，这是我们的一个默认值。然后啊，每一列的就是。这样滚动的时候就会触发这个unchang这个事件。改一个。东城区。再说保存。啊，我们可以看到这边啊，已经。变化北京市东城区。这是我们的这个收货地址。消息呢，也就是啊，一个普通的一个。那个实现。

Message。依然是一个奶爸。我们的这一导航栏，然后下面是我们的啊，微付实现的这个列表啊。可以看到。客服里面呢，我们是一个简单的一个聊天列表。可以看到客服是在customer service。我们看下客服界面的怎么实现。首先是一个达男。啊。然后是一个我们的这个。中间部分。有个scarvil z部分。

这是我们的这个啊。聊天记录的这么一个页面。然后下面是我们的。这一部分是我们的这个底部的这个输入框去。Take safe area。我们。看一下。我们之前也讲过这个的作用啊，是啊。让内容显示在那个安全区域内，这个时候如果我们不加这个的话，这个底部啊。这个输入框就会被这个虚拟home键给遮住。所以说我们还是。得加上这个。啊，在实时预览，我们点这个可以退出实时预览。

然后我们看一下这个输入框。可以看到它是会通过我们的输入啊，然后会啊自动增高的有回车。那这个是怎么实现的，其实就是啊一个属性。我这个Texas area。有一个what he的一个属性。又表示。啊，自动换行自动增高。然后我们看一下这个on FOX这个事件，也就是说当啊这个输入框获取焦点以后触发的事件。啊，在这个事件里面我们会啊，调用这个sc to这个方法，然后。

啊，有一个。获取我们这个列表这个SC，然后让它滚动到。啊，最底部。弄什么效果呢？就是说比如说我们是这个。啊，就是说我们会让它自动啊，滚动到底部。就这样啊，我们就实现了一个简单的一个文字聊天的一个列一个列表。然后我们看一下设置页面。设置页面有一个清除缓存的功能。清除缓存的，我们是。调用API，点开启方法。来清除缓存。那缓存缓存的获取呢，我们是通过。

啊，来获取这个缓存大小。然后这就是我们的设置页面。啊，基本上就是我们整个的一个个人中心的一个，啊，实现就是这样一个。