家政维修平台实战12搭建服务详情功能

上一篇我们介绍了服务规格的搭建过程，有了后台功能并且维护好数据之后，我们就可以开发服务详情页面了，先看一下我们的原型：

服务详情有如下功能：

• 显示服务的详细信息
• 可以选择规格，不同的规格价格不一样，价格要随着规格的选择进行切换
• 底部相当于购物车的功能，可以看到当前服务的价格，点击立即预约就要写入订单信息

知道需要开发啥内容后，我们来讲解一下开发的过程。

1 创建页面

搭建功能的话，首先需要创建一个页面。打开我们的小程序应用，点击创建页面的图标

创建一个空白页，命名为服务详情

2 搭建布局

页面创建好了之后，就需要搭建布局。像详情页的布局搭建我们使用数据详情组件来读取具体的内容。

数据详情的话需要选择数据模型，配置筛选条件，先选择我们的服务项目表

数据详情组件在读取数据的时候要知道是哪一条数据，需要新建一个URL参数来接收。选择页面组件，新建URL参数


建好URL参数之后，需要配置数据筛选条件，配置为数据标识等于我们的URL参数

这样我们的过滤规则就配好了。接着就是要从首页点击具体的服务项目的时候要传入URL参数。切换回首页，在热门服务的列表里，设置点击事件

点击的时候打开页面，传入我们的URL参数

2.1 搭建背景容器

像这种面向用户的，一般是需要有一定美观度的。所谓的美观也是可以用技术衡量的，他总体上是拆分成几个部分，包括布局、配色、图标、字体几个部分。不管是用AI生成效果图，还是人去设计都是围绕这几个方面进行发挥。

所以我们先把数据详情自带的布局组件都删掉

然后添加一个普通容器作为背景色，通常我们设置一个灰色的背景

可以给背景容器设置宽和高

这样设置的目的是让我们的背景色填充满屏幕，当内容超出后背景色会自动延展

2.2 添加内容区域

有了背景容器之后，我们在里边添加一个普通容器用来放置内容

这个时候我们就需要设置白色的背景色和外边距来进行区分

2.3 配置服务项目图片

在页面的第一部分我们显示服务项目的图片，在普通容器下边添加图片组件

设置图片的宽和高

图片的布局模式设置为裁剪填满

从我们的数据详情的数据里绑定图片字段

2.4 搭建标题和价格

在图片下边我们继续添加普通容器，里边增加两个文本组件

第一个文本绑定服务名称

第二个文本绑定服务价格

2.5 搭建服务详情

第一部分搭建好之后，第二部分就是服务详情，服务详情我们是分为几个部分显示，可以使用顶部选项卡搭建

先添加普通容器，里边添加顶部选项卡

修改一下标签

然后打开切换标签展示不同组件的配置

在服务详情里添加富文本展示，绑定我们的服务详情字段

最终效果

我们目前将页面分为上下两个部分，第一部分显示基本信息，第二部分显示服务详情

总结

本篇我们介绍了服务详情的搭建过程，主要讲述了数据详情组件以及一个基本布局的搭建方法。善用布局组件，结合样式就可以搭建出各种我们需要的效果。