设计稿如下图

image.png

分析页面结构

1. 小程序头部头 带图标的【湾区租车】头部
2. 组合搜索框一个
3. 走马灯组件一个，图片从接口获取
4. 【豪华商务】【精选婚车】【自驾出行】车型的列表跳转，这里代码逻辑可复用，一个页面就可以了，只是查询的接口不一样，【豪华商务】【精选婚车】【自驾出行】这个是车辆类型，应该从数据库中获取，不应该写死，图标也是，至少做到前端可配置
5. 后面是一个精选列表，每个车辆类型放2条数据，更多按钮跳转跟4的跳转是一样的。数据条数让后端接口控制，前台不写死。

页面交互

1. 进入页面获取定位信息，用户允许后获得定位，根据定位匹配数据库中的城市信息，设置默认选中城市，以上逻辑报错就给默认城市 【深圳】（城市列表接口标记默认城市，或者取第一个）
2. 输入车辆品牌，确认搜索，直接带参数{cityCode,keyword}跳转到【搜索页面】
3. 点击走马灯，跳转到对应的页面
4. 点击【车辆分类】或者【更多】，跳转到对应的【分类详情页面】
5. 点击列表条目，跳转到【车辆详情页面】

编码实现

1. 程序头部
   这里微信小程序是不支持图标的，我们直接配置文字就行了，修改pages.json#pages.style.navigationBarTitleText=湾区租车
2. 组合搜索框
   flex 布局，左右两部分，左边用picker组件 右边用uni-search-bar组件
3. 轮播图
   使用swiper组件
4. 三个导航按钮
   使用flex布局 justify-content: space-between;即可。这里有个地方要注意，如果轮播图是导航到tabbar上 <navigator url="../mine/mine" open-type="switchTab">豪华商务</navigator> 此时 open-type="switchTab"是必须的，否则没办法导航到tabbar
5. 列表
   v-for 循环即可