zy_lalala

uniapp微信小程序项目-优购商城

原网页笔记文档：

https://www.escook.cn/docs-uni-shop/

1. 起步

#1.1 uni-app 简介

uni-app 是一个使用 Vue.js 开发所有前端应用的框架。开发者编写一套代码，可发布到 iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wj9eJbhW-1670856744366)(imgs/1-7.43264ae4.png)]

详细的 uni-app 官方文档，请翻阅 https://uniapp.dcloud.net.cn/

#1.2 开发工具

uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目。主要好处：

模板丰富
完善的智能提示
一键运行

当然，你依然可以根据自己的喜好，选择使用 VS Code、Sublime、~~记事本~~… 等自己喜欢的编辑器！

#1.2.1 下载 HBuilderX

访问 HBuilderX 的官网首页 https://www.dcloud.io/hbuilderx.html
点击首页的 DOWNLOAD 按钮
选择下载 正式版 -> App 开发版

#1.2.2 安装 HBuilderX

将下载的 zip包 进行解压缩
将解压之后的文件夹，存放到纯英文的目录中（且不能包含括号等特殊字符）
双击 HBuilderX.exe 即可启动 HBuilderX

#1.2.3 安装 scss/sass 编译

为了方便编写样式（例如：），建议安装 scss/sass 编译 插件。插件下载地址：

https://ext.dcloud.net.cn/plugin?name=compile-node-sass

进入插件下载页面之后，点击右上角的 使用 HBuilderX 导入插件 按钮进行自动安装，截图如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mcVMM576-1670856744368)(imgs/1-1.74fed64c.png)]

#1.2.4 快捷键方案切换

操作步骤：工具 -> 预设快捷键方案切换 -> VS Code

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZBoAPHBz-1670856744368)(imgs/1-2.1c0c98c6.png)]

#1.2.5 修改编辑器的基本设置

操作步骤：工具 -> 设置 -> 打开 Settings.json 按需进行配置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e8uAjTD1-1670856744369)(imgs/1-3.b48ee161.png)]

源码视图下可用的参考配置：

{
  "editor.colorScheme": "Default",
  "editor.fontSize": 12,
  "editor.fontFamily": "Consolas",
  "editor.fontFmyCHS": "微软雅黑 Light",
  "editor.insertSpaces": true,
  "editor.lineHeight": "1.5",
  "editor.minimap.enabled": false,
  "editor.mouseWheelZoom": true,
  "editor.onlyHighlightWord": false,
  "editor.tabSize": 2,
  "editor.wordWrap": true,
  "explorer.iconTheme": "vs-seti",
  "editor.codeassist.px2rem.enabel": false,
  "editor.codeassist.px2upx.enabel": false
}

Tips：可以使用 Ctrl + 鼠标滚轮 缩放编辑器

#1.3 新建 uni-app 项目

文件 -> 新建 -> 项目

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hKr4Ggcn-1670856744370)(imgs/1-4.b7efec14.png)]
填写项目基本信息

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ro0ONORz-1670856744372)(imgs/1-5.585d746d.png)]
项目创建成功

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xr2KTxaE-1670856744372)(imgs/1-6.01c783f2.png)]

#1.4 目录结构

一个 uni-app 项目，默认包含如下目录及文件：

┌─components            uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置小程序的全局样式、生命周期函数等
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
└─pages.json            配置页面路径、页面窗口样式、tabBar、navigationBar 等页面类信息

#1.5 把项目运行到微信开发者工具

填写自己的微信小程序的 AppID：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oMs3k0UB-1670856744374)(imgs/1-8.4c14eb68.png)]
在 HBuilderX 中，配置“微信开发者工具”的安装路径：

D:\wechat_devtools

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gWbcLHuY-1670856744374)(imgs/1-9.deca7c09.png)]
在微信开发者工具中，通过 设置 -> 安全设置 面板，开启“微信开发者工具”的服务端口：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Nd0BSXvu-1670856744375)(data:image/png;base64,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)]
在 HBuilderX 中，点击菜单栏中的 运行 -> 运行到小程序模拟器 -> 微信开发者工具，将当前 uni-app 项目编译之后，自动运行到微信开发者工具中，从而方便查看项目效果与调试：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IgjlipzG-1670856744377)(imgs/1-11.2637002b.png)]
初次运行成功之后的项目效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8E9YmgjD-1670856744377)(imgs/1-12.1b33864e.png)]

#1.6 使用 Git 管理项目

#1.6.1 本地管理

在项目根目录中新建 .gitignore 忽略文件，并配置如下：

# 忽略 node_modules 目录
/node_modules
/unpackage/dist

注意：由于我们忽略了 unpackage 目录中仅有的 dist 目录，因此默认情况下， unpackage 目录不会被 Git 追踪

此时，为了让 Git 能够正常追踪 unpackage 目录，按照惯例，我们可以在 unpackage 目录下创建一个叫做 .gitkeep 的文件进行占位

打开终端，切换到项目根目录中，运行如下的命令，初始化本地 Git 仓库：

git init

将所有文件都加入到暂存区：

git add .

本地提交更新：

git commit -m "init project"

#1.6.2 把项目托管到码云

注册并激活码云账号（注册页面地址：https://gitee.com/signup ）
生成并配置 SSH 公钥
创建空白的码云仓库
把本地项目上传到码云对应的空白仓库中

2. tabBar

#2.0 创建 tabBar 分支

运行如下的命令，基于 master 分支在本地创建 tabBar 子分支，用来开发和 tabBar 相关的功能：

git checkout -b tabbar

git branch // 查看分支 当前所在分支前有*

#2.1 创建 tabBar 页面

在 pages 目录中，创建首页(home)、分类(cate)、购物车(cart)、我的(my) 这 4 个 tabBar 页面。在 HBuilderX 中，可以通过如下的两个步骤，快速新建页面：

在 pages 目录上鼠标右键，选择新建页面
在弹出的窗口中，填写页面的名称、勾选 scss 模板之后，点击创建按钮。截图如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hyAlSsST-1670856744378)(imgs/2-1.a57d1b5c.png)]

#2.2 配置 tabBar 效果

将 资料 目录下的 static 文件夹 拷贝一份，替换掉项目根目录中的 static 文件夹

修改项目根目录中的 pages.json 配置文件，新增 tabBar 的配置节点如下：

{
  "tabBar": {
    "selectedColor": "#C00000",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "static/tab_icons/home.png",
        "selectedIconPath": "static/tab_icons/home-active.png"
      },
      {
        "pagePath": "pages/cate/cate",
        "text": "分类",
        "iconPath": "static/tab_icons/cate.png",
        "selectedIconPath": "static/tab_icons/cate-active.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "static/tab_icons/cart.png",
        "selectedIconPath": "static/tab_icons/cart-active.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "static/tab_icons/my.png",
        "selectedIconPath": "static/tab_icons/my-active.png"
      }
    ]
  }
}

#2.3 删除默认的 index 首页

在 HBuilderX 中，把 pages 目录下的 index首页文件夹 删除掉
同时，把 page.json 中记录的 index 首页 路径删除掉
为了防止小程序运行失败，在微信开发者工具中，手动删除 pages 目录下的 index 首页文件夹
同时，把 components 目录下的 uni-link 组件文件夹 删除掉

#2.4 修改导航条的样式效果

打开 pages.json 这个全局的配置文件

修改 globalStyle 节点如下：

{
  "globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "黑马优购",
    "navigationBarBackgroundColor": "#C00000",
    "backgroundColor": "#FFFFFF"
  }
}

注意：配置了app.json公共导航条的样式后，注意看下单个页面的.json文件是否单独配置了导航条样式，避免公共配置不起作用，

eg：需要删除页面.json文件中的"navigationBarTitleText": "",，否则配置的文本不显示

#2.5 分支的提交与合并

将本地的 tabbar 分支进行本地的 commit 提交：

git add .
git commit -m "完成了 tabBar 的开发"

将本地的 tabbar 分支推送到远程仓库进行保存：

git push -u origin tabbar

将本地的 tabbar 分支合并到本地的 master 分支：

git checkout master
git merge tabbar
# 将本地master主分支推送到远程仓库
git push

删除本地的 tabbar 分支：

-d代表删除本地分支，我们保留远程分支（要删除分支，需要跳到别的分支，不能删除当前所在分支）

git branch -d tabbar

3. 首页

#3.0 创建 home 分支

运行如下的命令，基于 master 分支在本地创建 home 子分支，用来开发和 home 首页相关的功能：

git checkout -b home

#3.1 配置网络请求

由于平台的限制，小程序项目中不支持 axios，而且原生的 wx.request() API 功能较为简单，不支持拦截器等全局定制的功能。因此，建议在 uni-app 项目中使用 @escook/request-miniprogram 第三方包发起网络数据请求。

请参考 @escook/request-miniprogram 的官方文档进行安装、配置、使用

官方文档：https://www.npmjs.com/package/@escook/request-miniprogram

最终，在项目的 main.js 入口文件中，通过如下的方式进行配置：

import { $http } from '@escook/request-miniprogram'

uni.$http = $http
// 配置请求根路径
$http.baseUrl = 'https://www.uinav.com'

// 请求开始之前做一些事情
$http.beforeRequest = function (options) {
  uni.showLoading({
    title: '数据加载中...',
  })
}

// 请求完成之后做一些事情
$http.afterRequest = function () {
  uni.hideLoading()
}

#3.2 轮播图区域

#3.2.1 请求轮播图的数据

实现步骤：

在 data 中定义轮播图的数组
在 onLoad 生命周期函数中调用获取轮播图数据的方法
在 methods 中定义获取轮播图数据的方法

示例代码：

export default {
  data() {
    return {
      // 1. 轮播图的数据列表，默认为空数组
      swiperList: [],
    }
  },
  onLoad() {
    // 2. 在小程序页面刚加载的时候，调用获取轮播图数据的方法
    this.getSwiperList()
  },
  methods: {
    // 3. 获取轮播图数据的方法
    async getSwiperList() {
      // 3.1 发起请求
      const { data: res } = await uni.$http.get('/api/public/v1/home/swiperdata')
      // 3.2 请求失败
      if (res.meta.status !== 200) {
        return uni.showToast({
          title: '数据请求失败！',
          duration: 1500,
          icon: 'none',
        })
      }
      // 3.3 请求成功，为 data 中的数据赋值
      this.swiperList = res.message
    },
  },
}

#3.2.2 渲染轮播图的 UI 结构

渲染 UI 结构：

<template>
  <view>
    
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
      
      <swiper-item v-for="(item, i) in swiperList" :key="i">
        <view class="swiper-item">
          
          <image :src="item.image_src">image>
        view>
      swiper-item>
    swiper>
  view>
template>

美化 UI 结构：

#3.2.3 配置小程序分包

分包可以减少小程序首次启动时的加载时间

为此，我们在项目中，把 tabBar 相关的 4 个页面放到主包中，其它页面（例如：商品详情页、商品列表页）放到分包中。在 uni-app 项目中，配置分包的步骤如下：

在项目根目录中，创建分包的根目录，命名为 subpkg

在 pages.json 中，和 pages 节点平级的位置声明 subPackages 节点，用来定义分包相关的结构：

{
  "pages": [
    {
      "path": "pages/home/home",
      "style": {}
    },
    {
      "path": "pages/cate/cate",
      "style": {}
    },
    {
      "path": "pages/cart/cart",
      "style": {}
    },
    {
      "path": "pages/my/my",
      "style": {}
    }
  ],
  "subPackages": [
    {
      "root": "subpkg",
      "pages": []
    }
  ]
}

在 subpkg 目录上鼠标右键，点击 新建页面 选项，并填写页面的相关信息：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hq52jG4w-1670856744380)(imgs/2-2.e5e761c8.png)]

#3.2.4 点击轮播图跳转到商品详情页面

将节点内的 view 组件，改造为 navigator 导航组件，并动态绑定 url 属性 的值。

改造之前的 UI 结构：

<swiper-item v-for="(item, i) in swiperList" :key="i">
  <view class="swiper-item">
    
    <image :src="item.image_src">image>
  view>
swiper-item>

改造之后的 UI 结构：

<swiper-item v-for="(item, i) in swiperList" :key="i">
    <navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id">
      
      <image :src="item.image_src">image>
    navigator>
swiper-item>

#3.2.5 封装 uni.$showMsg() 方法

当数据请求失败之后，经常需要调用 uni.showToast({ /* 配置对象 */ }) 方法来提示用户。此时，可以在全局封装一个 uni.$showMsg() 方法，来简化 uni.showToast() 方法的调用。具体的改造步骤如下：

在 main.js 中，为 uni 对象挂载自定义的 $showMsg() 方法：

// 封装的展示消息提示的方法
uni.$showMsg = function (title = '数据加载失败！', duration = 1500) {
  uni.showToast({
    title,
    duration,
    icon: 'none',
  })
}

今后，在需要提示消息的时候，直接调用 uni.$showMsg() 方法即可：

async getSwiperList() {
   const { data: res } = await uni.$http.get('/api/public/v1/home/swiperdata')
   if (res.meta.status !== 200) return uni.$showMsg()
   this.swiperList = res.message
}

#3.3 分类导航区域

#3.3.1 获取分类导航的数据

实现思路：

定义 data 数据
在 onLoad 中调用获取数据的方法
在 methods 中定义获取数据的方法

示例代码如下：

export default {
  data() {
    return {
      // 1. 分类导航的数据列表
      navList: [],
    }
  },
  onLoad() {
    // 2. 在 onLoad 中调用获取数据的方法
    this.getNavList()
  },
  methods: {
    // 3. 在 methods 中定义获取数据的方法
    async getNavList() {
      const { data: res } = await uni.$http.get('/api/public/v1/home/catitems')
      if (res.meta.status !== 200) return uni.$showMsg()
      this.navList = res.message
    },
  },
}

#3.3.2 渲染分类导航的 UI 结构

定义如下的 UI 结构：


<view class="nav-list">
   <view class="nav-item" v-for="(item, i) in navList" :key="i">
     <image :src="item.image_src" class="nav-img">image>
   view>
view>

通过如下的样式美化页面结构：

.nav-list {
  display: flex;
  justify-content: space-around;
  margin: 15px 0;

  .nav-img {
    width: 128rpx;
    height: 140rpx;
  }
}

#3.3.2 点击第一项，切换到分类页面

为 nav-item 绑定点击事件处理函数：

<!-- 分类导航区域 -->
<view class="nav-list">
  <view class="nav-item" v-for="(item, i) in navList" :key="i" @click="navClickHandler(item)">
    <image :src="item.image_src" class="nav-img"></image>
  </view>
</view>

定义 navClickHandler 事件处理函数：

// nav-item 项被点击时候的事件处理函数
navClickHandler(item) {
  // 判断点击的是哪个 nav
  if (item.name === '分类') {
    uni.switchTab({
      url: '/pages/cate/cate'
    })
  }
}

#3.4 楼层区域

#3.4.1 获取楼层数据

实现思路：

定义 data 数据
在 onLoad 中调用获取数据的方法
在 methods 中定义获取数据的方法

示例代码如下：

export default {
  data() {
    return {
      // 1. 楼层的数据列表
      floorList: [],
    }
  },
  onLoad() {
    // 2. 在 onLoad 中调用获取楼层数据的方法
    this.getFloorList()
  },
  methods: {
    // 3. 定义获取楼层列表数据的方法
    async getFloorList() {
      const { data: res } = await uni.$http.get('/api/public/v1/home/floordata')
      if (res.meta.status !== 200) return uni.$showMsg()
      this.floorList = res.message
    },
  },
}

#3.4.2 渲染楼层的标题

定义如下的 UI 结构：


<view class="floor-list">
  
  <view class="floor-item" v-for="(item, i) in floorList" :key="i">
    
    <image :src="item.floor_title.image_src" class="floor-title">image>
  view>
view>

美化楼层标题的样式：

.floor-title {
  height: 60rpx;
  width: 100%;
  display: flex;
}

#3.4.3 渲染楼层里的图片

定义楼层图片区域的 UI 结构：


<view class="floor-img-box">
  
  <view class="left-img-box">
    <image :src="item.product_list[0].image_src" :style="{width: item.product_list[0].image_width + 'rpx'}" mode="widthFix">image>
  view>
  
  <view class="right-img-box">
    <view class="right-img-item" v-for="(item2, i2) in item.product_list" :key="i2" v-if="i2 !== 0">
      <image :src="item2.image_src" mode="widthFix" :style="{width: item2.image_width + 'rpx'}">image>
    view>
  view>
view>

美化楼层图片区域的样式：

.right-img-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.floor-img-box {
  display: flex;
  padding-left: 10rpx;
}

#3.4.4 点击楼层图片跳转到商品列表页

在 subpkg 分包中，新建 goods_list 页面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-exFEJS9R-1670856744381)(imgs/2-3.de0b01ae.png)]

楼层数据请求成功之后，通过双层 forEach 循环，处理 URL 地址：

// 获取楼层列表数据
async getFloorList() {
  const { data: res } = await uni.$http.get('/api/public/v1/home/floordata')
  if (res.meta.status !== 200) return uni.$showMsg()

  // 通过双层 forEach 循环，处理 URL 地址
  res.message.forEach(floor => {
    floor.product_list.forEach(prod => {
      prod.url = '/subpkg/goods_list/goods_list?' + prod.navigator_url.split('?')[1]
    })
  })

  this.floorList = res.message
}

把图片外层的 view 组件，改造为 navigator 组件，并动态绑定 url 属性 的值：


<view class="floor-img-box">
  
  <navigator class="left-img-box" :url="item.product_list[0].url">
    <image :src="item.product_list[0].image_src" :style="{width: item.product_list[0].image_width + 'rpx'}" mode="widthFix">image>
  navigator>
  
  <view class="right-img-box">
    <navigator class="right-img-item" v-for="(item2, i2) in item.product_list" :key="i2" v-if="i2 !== 0" :url="item2.url">
      <image :src="item2.image_src" mode="widthFix" :style="{width: item2.image_width + 'rpx'}">image>
    navigator>
  view>
view>

#3.5 分支的合并与提交

将本地的 home 分支进行本地的 commit 提交：

git add .
git commit -m "完成了 home 首页的开发"

将本地的 home 分支推送到远程仓库进行保存：
```
git push -u origin home
```
将本地的 home 分支合并到本地的 master 分支：
```
git checkout master
git merge home

git push
```
删除本地的 home 分支：
```
git branch -d home
```

4. 分类

#4.0 创建 cate 分支

运行如下的命令，基于 master 分支在本地创建 cate 子分支，用来开发分类页面相关的功能：

git checkout -b cate

#4.1 渲染分类页面的基本结构

定义页面结构如下：

<template>
  <view>
    <view class="scroll-view-container">
      
      <scroll-view class="left-scroll-view" scroll-y :style="{height: wh + 'px'}">
        <view class="left-scroll-view-item active">xxxview>
        <view class="left-scroll-view-item">xxxview>
        <view class="left-scroll-view-item">xxxview>
        <view class="left-scroll-view-item">xxxview>
        <view class="left-scroll-view-item">xxxview>
        <view class="left-scroll-view-item">多复制一些节点，演示纵向滚动效果...view>
      scroll-view>
      
      <scroll-view class="right-scroll-view" scroll-y :style="{height: wh + 'px'}">
        <view class="left-scroll-view-item">zzzview>
        <view class="left-scroll-view-item">zzzview>
        <view class="left-scroll-view-item">zzzview>
        <view class="left-scroll-view-item">zzzview>
        <view class="left-scroll-view-item">多复制一些节点，演示纵向滚动效果view>
      scroll-view>
    view>
  view>
template>

动态计算窗口的剩余高度：

<script>
  export default {
    data() {
      return {
        // 窗口的可用高度 = 屏幕高度 - navigationBar高度 - tabBar 高度
        wh: 0
      };
    },
    onLoad() {
      // 获取当前系统的信息
      const sysInfo = uni.getSystemInfoSync()
      // 为 wh 窗口可用高度动态赋值
      this.wh = sysInfo.windowHeight
    }
  }
</script>

美化页面结构：

.scroll-view-container {
  display: flex;

  .left-scroll-view {
    width: 120px;

    .left-scroll-view-item {
      line-height: 60px;
      background-color: #f7f7f7;
      text-align: center;
      font-size: 12px;

      // 激活项的样式
      &.active {
        background-color: #ffffff;
        position: relative;

        // 渲染激活项左侧的红色指示边线
        &::before {
          content: ' ';
          display: block;
          width: 3px;
          height: 30px;
          background-color: #c00000;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }
}

#4.2 获取分类数据

在 data 中定义分类数据节点：

data() {
  return {
    // 分类数据列表
    cateList: []
  }
}

调用获取分类列表数据的方法：

onLoad() {
  // 调用获取分类列表数据的方法
  this.getCateList()
}

定义获取分类列表数据的方法：

methods: {
  async getCateList() {
    // 发起请求
    const { data: res } = await uni.$http.get('/api/public/v1/categories')
    // 判断是否获取失败
    if (res.meta.status !== 200) return uni.$showMsg()
    // 转存数据
    this.cateList = res.message
  }
}

#4.3 动态渲染左侧的一级分类列表

循环渲染列表结构：


<scroll-view class="left-scroll-view" scroll-y :style="{height: wh + 'px'}">
  <block v-for="(item, i) in cateList" :key="i">
    <view class="left-scroll-view-item">{{item.cat_name}}view>
  block>
scroll-view>

在 data 中定义默认选中项的索引：

data() {
  return {
    // 当前选中项的索引，默认让第一项被选中
    active: 0
  }
}

循环渲染结构时，为选中项动态添加 .active 类名：

<block v-for="(item, i) in cateList" :key="i">
  <view :class="['left-scroll-view-item', i === active ? 'active' : '']">{{item.cat_name}}view>
block>

为一级分类的 Item 项绑定点击事件处理函数 activeChanged：

<block v-for="(item, i) in cateList" :key="i">
  <view :class="['left-scroll-view-item', i === active ? 'active' : '']" @click="activeChanged(i)">{{item.cat_name}}view>
block>

定义 activeChanged 事件处理函数，动态修改选中项的索引：

methods: {
  // 选中项改变的事件处理函数
  activeChanged(i) {
    this.active = i
  }
}

#4.4 动态渲染右侧的二级分类列表

在 data 中定义二级分类列表的数据节点：

data() {
  return {
    // 二级分类列表
    cateLevel2: []
  }
}

修改 getCateList 方法，在请求到数据之后，为二级分类列表数据赋值：

async getCateList() {
  const { data: res } = await uni.$http.get('/api/public/v1/categories')
  if (res.meta.status !== 200) return uni.$showMsg()
  this.cateList = res.message
  // 为二级分类赋值
  this.cateLevel2 = res.message[0].children
}

修改 activeChanged 方法，在一级分类选中项改变之后，为二级分类列表数据重新赋值：

activeChanged(i) {
  this.active = i
  // 为二级分类列表重新赋值
  this.cateLevel2 = this.cateList[i].children
}

循环渲染右侧二级分类列表的 UI 结构：


<scroll-view class="right-scroll-view" scroll-y :style="{height: wh + 'px'}">
  <view class="cate-lv2" v-for="(item2, i2) in cateLevel2" :key="i2">
    <view class="cate-lv2-title">/ {{item2.cat_name}} /view>
  view>
scroll-view>

美化二级分类的标题样式：

.cate-lv2-title {
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  padding: 15px 0;
}

#4.5 动态渲染右侧的三级分类列表

在二级分类的组件中，循环渲染三级分类的列表结构：


<scroll-view class="right-scroll-view" scroll-y :style="{height: wh + 'px'}">
  <view class="cate-lv2" v-for="(item2, i2) in cateLevel2" :key="i2">
    <view class="cate-lv2-title">/ {{item2.cat_name}} /view>
    
    <view class="cate-lv3-list">
      
      <view class="cate-lv3-item" v-for="(item3, i3) in item2.children" :key="i3">
        
        <image :src="item3.cat_icon">image>
        
        <text>{{item3.cat_name}}text>
      view>
    view>
  view>
scroll-view>

美化三级分类的样式：

.cate-lv3-list {
  display: flex;
  flex-wrap: wrap;

  .cate-lv3-item {
    width: 33.33%;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;

    image {
      width: 60px;
      height: 60px;
    }

    text {
      font-size: 12px;
    }
  }
}

#4.6 切换一级分类后重置滚动条的位置

在 data 中定义 滚动条距离顶部的距离：

data() {
  return {
    // 滚动条距离顶部的距离
    scrollTop: 0
  }
}

动态为右侧的组件绑定 scroll-top 属性的值：


<scroll-view class="right-scroll-view" scroll-y :style="{height: wh + 'px'}" :scroll-top="scrollTop">scroll-view>

切换一级分类时，动态设置 scrollTop 的值：

// 选中项改变的事件处理函数
activeChanged(i) {
  this.active = i
  this.cateLevel2 = this.cateList[i].children

  // 让 scrollTop 的值在 0 与 1 之间切换
  this.scrollTop = this.scrollTop === 0 ? 1 : 0

  // 可以简化为如下的代码：
  // this.scrollTop = this.scrollTop ? 0 : 1
}

#4.7 点击三级分类跳转到商品列表页面

为三级分类的 Item 项绑定点击事件处理函数如下：

<view class="cate-lv3-item" v-for="(item3, i3) in item2.children" :key="i3" @click="gotoGoodsList(item3)">
  <image :src="item3.cat_icon">image>
  <text>{{item3.cat_name}}text>
view>

定义事件处理函数如下：

// 点击三级分类项跳转到商品列表页面
gotoGoodsList(item3) {
  uni.navigateTo({
    url: '/subpkg/goods_list/goods_list?cid=' + item3.cat_id
  })
}

#4.8 分支的合并与提交

将 cate 分支进行本地提交：

git add .
git commit -m "完成了分类页面的开发"

将本地的 cate 分支推送到码云：
```
git push -u origin cate
```
将本地 cate 分支中的代码合并到 master 分支：
```
git checkout master
git merge cate
git push
```
删除本地的 cate 分支：
```
git branch -d cate
```

5. 搜索

#5.0 创建 search 分支

运行如下的命令，基于 master 分支在本地创建 search 子分支，用来开发搜索相关的功能：

git checkout -b search

#5.1 自定义搜索组件

#5.1.1 自定义 my-search 组件

在项目根目录的 components 目录上，鼠标右键，选择 新建组件，填写组件信息后，最后点击 创建 按钮：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UqILG9a1-1670856744382)(imgs/5-1.25ab714d.png)]
在分类页面的 UI 结构中，直接以标签的形式使用 my-search 自定义组件：
```
<my-search>my-search>
```

定义 my-search 组件的 UI 结构如下：

<template>
  <view class="my-search-container">
    
    <view class="my-search-box">
      <uni-icons type="search" size="17">uni-icons>
      <text class="placeholder">搜索text>
    view>
  view>
template>

注意：在当前组件中，我们使用 view 组件模拟 input 输入框的效果；并不会在页面上渲染真正的 input 输入框

美化自定义 search 组件的样式：

.my-search-container {
  background-color: #c00000;
  height: 50px;
  padding: 0 10px;
  display: flex;
  align-items: center;
}

.my-search-box {
  height: 36px;
  background-color: #ffffff;
  border-radius: 15px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .placeholder {
    font-size: 15px;
    margin-left: 5px;
  }
}

由于自定义的 my-search 组件高度为 50px，因此，需要重新计算分类页面窗口的可用高度：

onLoad() {
  const sysInfo = uni.getSystemInfoSync()
  // 可用高度 = 屏幕高度 - navigationBar高度 - tabBar高度 - 自定义的search组件高度
  this.wh = sysInfo.windowHeight - 50
}

#5.1.2 通过自定义属性增强组件的通用性

为了增强组件的通用性，我们允许使用者自定义搜索组件的 背景颜色 和 圆角尺寸。

通过 props 定义 bgcolor 和 radius 两个属性，并指定值类型和属性默认值：

props: {
  // 背景颜色
  bgcolor: {
    type: String,
    default: '#C00000'
  },
  // 圆角尺寸
  radius: {
    type: Number,
    // 单位是 px
    default: 18
  }
}

通过属性绑定的形式，为 .my-search-container 盒子和 .my-search-box 盒子动态绑定 style 属性：

<view class="my-search-container" :style="{'background-color': bgcolor}">
  <view class="my-search-box" :style="{'border-radius': radius + 'px'}">
    <uni-icons type="search" size="17">uni-icons>
    <text class="placeholder">搜索text>
  view>
view>

移除对应 scss 样式中的 背景颜色 和 圆角尺寸：

.my-search-container {
  // 移除背景颜色，改由 props 属性控制
  // background-color: #C00000;
  height: 50px;
  padding: 0 10px;
  display: flex;
  align-items: center;
}

.my-search-box {
  height: 36px;
  background-color: #ffffff;
  // 移除圆角尺寸，改由 props 属性控制
  // border-radius: 15px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .placeholder {
    font-size: 15px;
    margin-left: 5px;
  }
}

#5.1.3 为自定义组件封装 click 事件

在 my-search 自定义组件内部，给类名为 .my-search-box 的 view 绑定 click 事件处理函数：

<view class="my-search-box" :style="{'border-radius': radius + 'px'}" @click="searchBoxHandler">
  <uni-icons type="search" size="17">uni-icons>
  <text class="placeholder">搜索text>
view>

在 my-search 自定义组件的 methods 节点中，声明事件处理函数如下：

methods: {
  // 点击了模拟的 input 输入框
  searchBoxHandler() {
    // 触发外界通过 @click 绑定的 click 事件处理函数
    this.$emit('click')
  }
}

在分类页面中使用 my-search 自定义组件时，即可通过 @click 为其绑定点击事件处理函数：


<my-search @click="gotoSearch">my-search>

同时在分类页面中，定义 gotoSearch 事件处理函数如下：

methods: {
   // 跳转到分包中的搜索页面
   gotoSearch() {
     uni.navigateTo({
       url: '/subpkg/search/search'
     })
   }
}

#5.1.4 实现首页搜索组件的吸顶效果

在 home 首页定义如下的 UI 结构：


<view class="search-box">
  <my-search @click="gotoSearch">my-search>
view>

在 home 首页定义如下的事件处理函数：

gotoSearch() {
  uni.navigateTo({
    url: '/subpkg/search/search'
  })
}

通过如下的样式实现吸顶的效果：

.search-box {
  // 设置定位效果为“吸顶”
  position: sticky;
  // 吸顶的“位置”
  top: 0;
  // 提高层级，防止被轮播图覆盖
  z-index: 999;
}

#5.2 搜索建议

#5.2.1 渲染搜索页面的基本结构

定义如下的 UI 结构：

<view class="search-box">
  
  <uni-search-bar @input="input" :radius="100" cancelButton="none">uni-search-bar>
view>

修改 components -> uni-search-bar -> uni-search-bar.vue 组件，将默认的白色搜索背景改为 #C00000 的红色背景：

.uni-searchbar {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  position: relative;
  padding: 16rpx;
  /* 将默认的 #FFFFFF 改为 #C00000 */
  background-color: #c00000;
}

实现搜索框的吸顶效果：

.search-box {
  position: sticky;
  top: 0;
  z-index: 999;
}

定义如下的 input 事件处理函数：

methods: {
  input(e) {
    // e.value 是最新的搜索内容
    console.log(e.value)
  }
}

#5.2.2 实现搜索框自动获取焦点

修改 components -> uni-search-bar -> uni-search-bar.vue 组件，把 data 数据中的 show 和 showSync 的值，从默认的 false 改为 true 即可：
```
data() {
  return {
    show: true,
    showSync: true,
    searchVal: ""
  }
}
```
使用手机扫码预览，即可在真机上查看效果。

#5.2.3 实现搜索框的防抖处理

在 data 中定义防抖的延时器 timerId 如下：

data() {
  return {
    // 延时器的 timerId
    timer: null,
    // 搜索关键词
    kw: ''
  }
}

修改 input 事件处理函数如下：

input(e) {
  // 清除 timer 对应的延时器
  clearTimeout(this.timer)
  // 重新启动一个延时器，并把 timerId 赋值给 this.timer
  this.timer = setTimeout(() => {
    // 如果 500 毫秒内，没有触发新的输入事件，则为搜索关键词赋值
    this.kw = e.value
    console.log(this.kw)
  }, 500)
}

#5.2.4 根据关键词查询搜索建议列表

在 data 中定义如下的数据节点，用来存放搜索建议的列表数据：

data() {
  return {
    // 搜索结果列表
    searchResults: []
  }
}

在防抖的 setTimeout 中，调用 getSearchList 方法获取搜索建议列表：

this.timer = setTimeout(() => {
  this.kw = e.value
  // 根据关键词，查询搜索建议列表
  this.getSearchList()
}, 500)

在 methods 中定义 getSearchList 方法如下：

// 根据搜索关键词，搜索商品建议列表
async getSearchList() {
  // 判断关键词是否为空
  if (this.kw === '') {
    this.searchResults = []
    return
  }
  // 发起请求，获取搜索建议列表
  const { data: res } = await uni.$http.get('/api/public/v1/goods/qsearch', { query: this.kw })
  if (res.meta.status !== 200) return uni.$showMsg()
  this.searchResults = res.message
}

#5.2.5 渲染搜索建议列表

定义如下的 UI 结构：


<view class="sugg-list">
  <view class="sugg-item" v-for="(item, i) in searchResults" :key="i" @click="gotoDetail(item.goods_id)">
    <view class="goods-name">{{item.goods_name}}view>
    <uni-icons type="arrowright" size="16">uni-icons>
  view>
view>

美化搜索建议列表：

.sugg-list {
  padding: 0 5px;

  .sugg-item {
    font-size: 12px;
    padding: 13px 0;
    border-bottom: 1px solid #efefef;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .goods-name {
      // 文字不允许换行（单行文本）
      white-space: nowrap;
      // 溢出部分隐藏
      overflow: hidden;
      // 文本溢出后，使用 ... 代替
      text-overflow: ellipsis;
      margin-right: 3px;
    }
  }
}

点击搜索建议的 Item 项，跳转到商品详情页面：

gotoDetail(goods_id) {
  uni.navigateTo({
    // 指定详情页面的 URL 地址，并传递 goods_id 参数
    url: '/subpkg/goods_detail/goods_detail?goods_id=' + goods_id
  })
}

#5.3 搜索历史

#5.3.1 渲染搜索历史记录的基本结构

在 data 中定义搜索历史的假数据：

data() {
  return {
    // 搜索关键词的历史记录
    historyList: ['a', 'app', 'apple']
  }
}

渲染搜索历史区域的 UI 结构：


<view class="history-box">
  
  <view class="history-title">
    <text>搜索历史text>
    <uni-icons type="trash" size="17">uni-icons>
  view>
  
  <view class="history-list">
    <uni-tag :text="item" v-for="(item, i) in historyList" :key="i">uni-tag>
  view>
view>

美化搜索历史区域的样式：

.history-box {
  padding: 0 5px;

  .history-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    font-size: 13px;
    border-bottom: 1px solid #efefef;
  }

  .history-list {
    display: flex;
    flex-wrap: wrap;

    .uni-tag {
      margin-top: 5px;
      margin-right: 5px;
    }
  }
}

#5.3.2 实现搜索建议和搜索历史的按需展示

当搜索结果列表的长度不为 0的时候（searchResults.length !== 0），需要展示搜索建议区域，隐藏搜索历史区域
当搜索结果列表的长度等于 0的时候（searchResults.length === 0），需要隐藏搜索建议区域，展示搜索历史区域

使用 v-if 和 v-else 控制这两个区域的显示和隐藏，示例代码如下：


<view class="sugg-list" v-if="searchResults.length !== 0">
  
view>


<view class="history-box" v-else>
  
view>

#5.3.3 将搜索关键词存入 historyList

直接将搜索关键词 push 到 historyList 数组中即可

methods: {
  // 根据搜索关键词，搜索商品建议列表
  async getSearchList() {
    // 省略其它不必要的代码...

    // 1. 查询到搜索建议之后，调用 saveSearchHistory() 方法保存搜索关键词
    this.saveSearchHistory()
  },
  // 2. 保存搜索关键词的方法
  saveSearchHistory() {
    // 2.1 直接把搜索关键词 push 到 historyList 数组中
    this.historyList.push(this.kw)
  }
}

上述实现思路存在的问题：
- 关键词前后顺序的问题（可以调用数组的 reverse() 方法对数组进行反转）
- 关键词重复的问题（可以使用 Set 对象进行去重操作）

#5.3.4 解决关键字前后顺序的问题

data 中的 historyList 不做任何修改，依然使用 push 进行末尾追加

定义一个计算属性 historys，将 historyList 数组 reverse 反转之后，就是此计算属性的值：

computed: {
  historys() {
    // 注意：由于数组是引用类型，所以不要直接基于原数组调用 reverse 方法，以免修改原数组中元素的顺序
    // 而是应该新建一个内存无关的数组，再进行 reverse 反转
    return [...this.historyList].reverse()
  }
}

页面中渲染搜索关键词的时候，不再使用 data 中的 historyList，而是使用计算属性 historys：

<view class="history-list">
  <uni-tag :text="item" v-for="(item, i) in historys" :key="i">uni-tag>
view>

#5.3.5 解决关键词重复的问题

修改 saveSearchHistory 方法如下：

// 保存搜索关键词为历史记录
saveSearchHistory() {
  // this.historyList.push(this.kw)

  // 1. 将 Array 数组转化为 Set 对象
  const set = new Set(this.historyList)
  // 2. 调用 Set 对象的 delete 方法，移除对应的元素
  set.delete(this.kw)
  // 3. 调用 Set 对象的 add 方法，向 Set 中添加元素
  set.add(this.kw)
  // 4. 将 Set 对象转化为 Array 数组
  this.historyList = Array.from(set)
}

#5.3.6 将搜索历史记录持久化存储到本地

修改 saveSearchHistory 方法如下：

// 保存搜索关键词为历史记录
saveSearchHistory() {
  const set = new Set(this.historyList)
  set.delete(this.kw)
  set.add(this.kw)
  this.historyList = Array.from(set)
  // 调用 uni.setStorageSync(key, value) 将搜索历史记录持久化存储到本地
  uni.setStorageSync('kw', JSON.stringify(this.historyList))
}

在 onLoad 生命周期函数中，加载本地存储的搜索历史记录：

onLoad() {
  this.historyList = JSON.parse(uni.getStorageSync('kw') || '[]')
}

#5.3.7 清空搜索历史记录

为清空的图标按钮绑定 click 事件：

<uni-icons type="trash" size="17" @click="cleanHistory">uni-icons>

在 methods 中定义 cleanHistory 处理函数：

// 清空搜索历史记录
cleanHistory() {
  // 清空 data 中保存的搜索历史
  this.historyList = []
  // 清空本地存储中记录的搜索历史
  uni.setStorageSync('kw', '[]')
}

#5.3.8 点击搜索历史跳转到商品列表页面

为搜索历史的 Item 项绑定 click 事件处理函数：

<uni-tag :text="item" v-for="(item, i) in historys" :key="i" @click="gotoGoodsList(item)">uni-tag>

在 methods 中定义 gotoGoodsList 处理函数：

// 点击跳转到商品列表页面
gotoGoodsList(kw) {
  uni.navigateTo({
    url: '/subpkg/goods_list/goods_list?query=' + kw
  })
}

#5.4 分支的合并与提交

将 search 分支进行本地提交：

git add .
git commit -m "完成了搜索功能的开发"

将本地的 search 分支推送到码云：
```
git push -u origin search
```
将本地 search 分支中的代码合并到 master 分支：
```
git checkout master
git merge search
git push
```
删除本地的 search 分支：
```
git branch -d search
```

6. 商品列表

#6.0 创建 goodslist 分支

运行如下的命令，基于 master 分支在本地创建 goodslist 子分支，用来开发商品列表相关的功能：

git checkout -b goodslist

#6.1 定义请求参数对象

为了方便发起请求获取商品列表的数据，我们要根据接口的要求，事先定义一个请求参数对象：

data() {
  return {
    // 请求参数对象
    queryObj: {
      // 查询关键词
      query: '',
      // 商品分类Id
      cid: '',
      // 页码值
      pagenum: 1,
      // 每页显示多少条数据
      pagesize: 10
    }
  }
}

将页面跳转时携带的参数，转存到 queryObj 对象中：

onLoad(options) {
  // 将页面参数转存到 this.queryObj 对象中
  this.queryObj.query = options.query || ''
  this.queryObj.cid = options.cid || ''
}

为了方便开发商品分类页面，建议大家通过微信开发者工具，新建商品列表页面的编译模式：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DxIYrM2r-1670856744383)(data:image/png;base64,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)]

#6.2 获取商品列表数据

在 data 中新增如下的数据节点：

data() {
  return {
    // 商品列表的数据
    goodsList: [],
    // 总数量，用来实现分页
    total: 0
  }
}

在 onLoad 生命周期函数中，调用 getGoodsList 方法获取商品列表数据：

onLoad(options) {
  // 调用获取商品列表数据的方法
  this.getGoodsList()
}

在 methods 节点中，声明 getGoodsList 方法如下：

methods: {
  // 获取商品列表数据的方法
  async getGoodsList() {
    // 发起请求
    const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)
    if (res.meta.status !== 200) return uni.$showMsg()
    // 为数据赋值
    this.goodsList = res.message.goods
    this.total = res.message.total
  }
}

#6.3 渲染商品列表结构

在页面中，通过 v-for 指令，循环渲染出商品的 UI 结构：

<template>
  <view>
    <view class="goods-list">
      <block v-for="(goods, i) in goodsList" :key="i">
        <view class="goods-item">
          
          <view class="goods-item-left">
            <image :src="goods.goods_small_logo || defaultPic" class="goods-pic">image>
          view>
          
          <view class="goods-item-right">
            
            <view class="goods-name">{{goods.goods_name}}view>
            <view class="goods-info-box">
              
              <view class="goods-price">￥{{goods.goods_price}}view>
            view>
          view>
        view>
      block>
    view>
  view>
template>

为了防止某些商品的图片不存在，需要在 data 中定义一个默认的图片：

data() {
  return {
    // 默认的空图片
    defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
  }
}

并在页面渲染时按需使用：

<image :src="goods.goods_small_logo || defaultPic" class="goods-pic">image>

美化商品列表的 UI 结构：

.goods-item {
  display: flex;
  padding: 10px 5px;
  border-bottom: 1px solid #f0f0f0;

  .goods-item-left {
    margin-right: 5px;

    .goods-pic {
      width: 100px;
      height: 100px;
      display: block;
    }
  }

  .goods-item-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .goods-name {
      font-size: 13px;
    }

    .goods-price {
      font-size: 16px;
      color: #c00000;
    }
  }
}

#6.4 把商品 item 项封装为自定义组件

在 components 目录上鼠标右键，选择 新建组件：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wBNB1ZJM-1670856744385)(imgs/6-2.6a66124f.png)]

将 goods_list 页面中，关于商品 item 项相关的 UI 结构、样式、data 数据，封装到 my-goods 组件中：

<template>
  <view class="goods-item">
    
    <view class="goods-item-left">
      <image :src="goods.goods_small_logo || defaultPic" class="goods-pic">image>
    view>
    
    <view class="goods-item-right">
      
      <view class="goods-name">{{goods.goods_name}}view>
      <view class="goods-info-box">
        
        <view class="goods-price">￥{{goods.goods_price}}view>
      view>
    view>
  view>
template>

<script>
  export default {
    // 定义 props 属性，用来接收外界传递到当前组件的数据
    props: {
      // 商品的信息对象
      goods: {
        type: Object,
        defaul: {},
      },
    },
    data() {
      return {
        // 默认的空图片
        defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
      }
    },
  }
script>

<style lang="scss">
  .goods-item {
    display: flex;
    padding: 10px 5px;
    border-bottom: 1px solid #f0f0f0;

    .goods-item-left {
      margin-right: 5px;

      .goods-pic {
        width: 100px;
        height: 100px;
        display: block;
      }
    }

    .goods-item-right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .goods-name {
        font-size: 13px;
      }

      .goods-price {
        font-size: 16px;
        color: #c00000;
      }
    }
  }
style>

在 goods_list 组件中，循环渲染 my-goods 组件即可：

<view class="goods-list">
  <block v-for="(item, i) in goodsList" :key="i">
    
    <my-goods :goods="item">my-goods>
  block>
view>

#6.5 使用过滤器处理价格

在 my-goods 组件中，和 data 节点平级，声明 filters 过滤器节点如下：

filters: {
  // 把数字处理为带两位小数点的数字
  tofixed(num) {
    return Number(num).toFixed(2)
  }
}

在渲染商品价格的时候，通过管道符 | 调用过滤器：


<view class="goods-price">￥{{goods.goods_price | tofixed}}view>

#6.6 上拉加载更多

#6.6.1 初步实现上拉加载更多

打开项目根目录中的 pages.json 配置文件，为 subPackages 分包中的 goods_list 页面配置上拉触底的距离：

 "subPackages": [
   {
     "root": "subpkg",
     "pages": [
       {
         "path": "goods_detail/goods_detail",
         "style": {}
       },
       {
         "path": "goods_list/goods_list",
         "style": {
           "onReachBottomDistance": 150
         }
       },
       {
         "path": "search/search",
         "style": {}
       }
     ]
   }
 ]

在 goods_list 页面中，和 methods 节点平级，声明 onReachBottom 事件处理函数，用来监听页面的上拉触底行为：

// 触底的事件
onReachBottom() {
  // 让页码值自增 +1
  this.queryObj.pagenum += 1
  // 重新获取列表数据
  this.getGoodsList()
}

改造 methods 中的 getGoodsList 函数，当列表数据请求成功之后，进行新旧数据的拼接处理：

// 获取商品列表数据的方法
async getGoodsList() {
  // 发起请求
  const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)
  if (res.meta.status !== 200) return uni.$showMsg()

  // 为数据赋值：通过展开运算符的形式，进行新旧数据的拼接
  this.goodsList = [...this.goodsList, ...res.message.goods]
  this.total = res.message.total
}

#6.6.2 通过节流阀防止发起额外的请求

在 data 中定义 isloading 节流阀如下：

data() {
  return {
    // 是否正在请求数据
    isloading: false
  }
}

修改 getGoodsList 方法，在请求数据前后，分别打开和关闭节流阀：

// 获取商品列表数据的方法
async getGoodsList() {
  // ** 打开节流阀
  this.isloading = true
  // 发起请求
  const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)
  // ** 关闭节流阀
  this.isloading = false

  // 省略其它代码...
}

在 onReachBottom 触底事件处理函数中，根据节流阀的状态，来决定是否发起请求：

// 触底的事件
onReachBottom() {
  // 判断是否正在请求其它数据，如果是，则不发起额外的请求
  if (this.isloading) return

  this.queryObj.pagenum += 1
  this.getGoodsList()
}

#6.6.3 判断数据是否加载完毕

如果下面的公式成立，则证明没有下一页数据了：

当前的页码值 * 每页显示多少条数据 >= 总数条数
pagenum * pagesize >= total

修改 onReachBottom 事件处理函数如下：

// 触底的事件
onReachBottom() {
  // 判断是否还有下一页数据
  if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) return uni.$showMsg('数据加载完毕！')

  // 判断是否正在请求其它数据，如果是，则不发起额外的请求
  if (this.isloading) return

  this.queryObj.pagenum += 1
  this.getGoodsList()
}

#6.7 下拉刷新

在 pages.json 配置文件中，为当前的 goods_list 页面单独开启下拉刷新效果：

"subPackages": [{
  "root": "subpkg",
  "pages": [{
    "path": "goods_detail/goods_detail",
    "style": {}
  }, {
    "path": "goods_list/goods_list",
    "style": {
      "onReachBottomDistance": 150,
      "enablePullDownRefresh": true,
      "backgroundColor": "#F8F8F8"
    }
  }, {
    "path": "search/search",
    "style": {}
  }]
}]

监听页面的 onPullDownRefresh 事件处理函数：

// 下拉刷新的事件
onPullDownRefresh() {
  // 1. 重置关键数据
  this.queryObj.pagenum = 1
  this.total = 0
  this.isloading = false
  this.goodsList = []

  // 2. 重新发起请求
  this.getGoodsList(() => uni.stopPullDownRefresh())
}

修改 getGoodsList 函数，接收 cb 回调函数并按需进行调用：

// 获取商品列表数据的方法
async getGoodsList(cb) {
  this.isloading = true
  const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)
  this.isloading = false
  // 只要数据请求完毕，就立即按需调用 cb 回调函数
  cb && cb()

  if (res.meta.status !== 200) return uni.$showMsg()
  this.goodsList = [...this.goodsList, ...res.message.goods]
  this.total = res.message.total
}

#6.8 点击商品 item 项跳转到详情页面

将循环时的 block 组件修改为 view 组件，并绑定 click 点击事件处理函数：

<view class="goods-list">
  <view v-for="(item, i) in goodsList" :key="i" @click="gotoDetail(item)">
    
    <my-goods :goods="item">my-goods>
  view>
view>

在 methods 节点中，定义 gotoDetail 事件处理函数：

// 点击跳转到商品详情页面
gotoDetail(item) {
  uni.navigateTo({
    url: '/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id
  })
}

#6.9 分支的合并与提交

将 goodslist 分支进行本地提交：

git add .
git commit -m "完成了商品列表页面的开发"

将本地的 goodslist 分支推送到码云：
```
git push -u origin goodslist
```
将本地 goodslist 分支中的代码合并到 master 分支：
```
git checkout master
git merge goodslist
git push
```
删除本地的 goodslist 分支：
```
git branch -d goodslist
```

7. 商品详情

#7.0 创建 goodsdetail 分支

运行如下的命令，基于 master 分支在本地创建 goodsdetail 子分支，用来开发商品详情页相关的功能：

git checkout -b goodsdetail

#7.1 添加商品详情页的编译模式

在微信开发者工具中，点击工具栏上的编译模式下拉菜单，选择 添加编译模式 选项：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Abijj1lP-1670856744385)(data:image/png;base64,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)]
勾选 启动页面 的路径，并填写了 启动参数 之后，点击 确定 按钮，添加详情页面的编译模式：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gAAclqYP-1670856744386)(imgs/7-2.82dd8e0f.png)]

#7.2 获取商品详情数据

在 data 中定义商品详情的数据节点：

data() {
  return {
    // 商品详情对象
    goods_info: {}
  }
}

在 onLoad 中获取商品的 Id，并调用请求商品详情的方法：

onLoad(options) {
  // 获取商品 Id
  const goods_id = options.goods_id
  // 调用请求商品详情数据的方法
  this.getGoodsDetail(goods_id)
}

在 methods 中声明 getGoodsDetail 方法：

methods: {
  // 定义请求商品详情数据的方法
  async getGoodsDetail(goods_id) {
    const { data: res } = await uni.$http.get('/api/public/v1/goods/detail', { goods_id })
    if (res.meta.status !== 200) return uni.$showMsg()
    // 为 data 中的数据赋值
    this.goods_info = res.message
  }
}

#7.3 渲染商品详情页的 UI 结构

#7.3.1 渲染轮播图区域

使用 v-for 指令，循环渲染如下的轮播图 UI 结构：


<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
  <swiper-item v-for="(item, i) in goods_info.pics" :key="i">
    <image :src="item.pics_big">image>
  swiper-item>
swiper>

美化轮播图的样式：

swiper {
  height: 750rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

#7.3.2 实现轮播图预览效果

为轮播图中的 image 图片绑定 click 事件处理函数：

<swiper-item v-for="(item, i) in goods_info.pics" :key="i">
  
  <image :src="item.pics_big" @click="preview(i)">image>
swiper-item>

在 methods 中定义 preview 事件处理函数：

// 实现轮播图的预览效果
preview(i) {
  // 调用 uni.previewImage() 方法预览图片
  uni.previewImage({
    // 预览时，默认显示图片的索引
    current: i,
    // 所有图片 url 地址的数组
    urls: this.goods_info.pics.map(x => x.pics_big)
  })
}

#7.3.3 渲染商品信息区域

定义商品信息区域的 UI 结构如下：


<view class="goods-info-box">
  
  <view class="price">￥{{goods_info.goods_price}}view>
  
  <view class="goods-info-body">
    
    <view class="goods-name">{{goods_info.goods_name}}view>
    
    <view class="favi">
      <uni-icons type="star" size="18" color="gray">uni-icons>
      <text>收藏text>
    view>
  view>
  
  <view class="yf">快递：免运费view>
view>

美化商品信息区域的样式：

// 商品信息区域的样式
.goods-info-box {
  padding: 10px;
  padding-right: 0;

  .price {
    color: #c00000;
    font-size: 18px;
    margin: 10px 0;
  }

  .goods-info-body {
    display: flex;
    justify-content: space-between;

    .goods-name {
      font-size: 13px;
      padding-right: 10px;
    }
    // 收藏区域
    .favi {
      width: 120px;
      font-size: 12px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-left: 1px solid #efefef;
      color: gray;
    }
  }

  // 运费
  .yf {
    margin: 10px 0;
    font-size: 12px;
    color: gray;
  }
}

#7.3.4 渲染商品详情信息

在页面结构中，使用 rich-text 组件，将带有 HTML 标签的内容，渲染为小程序的页面结构：
```
<rich-text :nodes="goods_info.goods_introduce">rich-text>
```

修改 getGoodsDetail 方法，从而解决图片底部 空白间隙 的问题：

// 定义请求商品详情数据的方法
async getGoodsDetail(goods_id) {
  const { data: res } = await uni.$http.get('/api/public/v1/goods/detail', { goods_id })
  if (res.meta.status !== 200) return uni.$showMsg()

  // 使用字符串的 replace() 方法，为 img 标签添加行内的 style 样式，从而解决图片底部空白间隙的问题
  res.message.goods_introduce = res.message.goods_introduce.replace(//g, ')
  this.goods_info = res.message
}

解决 .webp 格式图片在 ios 设备上无法正常显示的问题：

// 定义请求商品详情数据的方法
async getGoodsDetail(goods_id) {
  const { data: res } = await uni.$http.get('/api/public/v1/goods/detail', { goods_id })
  if (res.meta.status !== 200) return uni.$showMsg()

  // 使用字符串的 replace() 方法，将 webp 的后缀名替换为 jpg 的后缀名
  res.message.goods_introduce = res.message.goods_introduce.replace(//g, ').replace(/webp/g, 'jpg')
  this.goods_info = res.message
}

#7.3.5 解决商品价格闪烁的问题

导致问题的原因：在商品详情数据请求回来之前，data 中 goods_info 的值为 {}，因此初次渲染页面时，会导致 商品价格、商品名称 等闪烁的问题。
解决方案：判断 goods_info.goods_name 属性的值是否存在，从而使用 v-if 指令控制页面的显示与隐藏：
```
<template>
  <view v-if="goods_info.goods_name">
   
  view>
template>
```

#7.4 渲染详情页底部的商品导航区域

#7.4.1 渲染商品导航区域的 UI 结构

基于 uni-ui 提供的 GoodsNav 组件来实现商品导航区域的效果

在 data 中，通过 options 和 buttonGroup 两个数组，来声明商品导航组件的按钮配置对象：

data() {
  return {
    // 商品详情对象
    goods_info: {},
    // 左侧按钮组的配置对象
    options: [{
      icon: 'shop',
      text: '店铺'
    }, {
      icon: 'cart',
      text: '购物车',
      info: 2
    }],
    // 右侧按钮组的配置对象
    buttonGroup: [{
        text: '加入购物车',
        backgroundColor: '#ff0000',
        color: '#fff'
      },
      {
        text: '立即购买',
        backgroundColor: '#ffa200',
        color: '#fff'
      }
    ]
  }
}

在页面中使用 uni-goods-nav 商品导航组件：


<view class="goods_nav">
  
  
  
  
  
  <uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" />
view>

美化商品导航组件，使之固定在页面最底部：

.goods-detail-container {
  // 给页面外层的容器，添加 50px 的内padding，
  // 防止页面内容被底部的商品导航组件遮盖
  padding-bottom: 50px;
}

.goods_nav {
  // 为商品导航组件添加固定定位
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

#7.4.2 点击跳转到购物车页面

点击商品导航组件左侧的按钮，会触发 uni-goods-nav 的 @click 事件处理函数，事件对象 e 中会包含当前点击的按钮相关的信息：
```
// 左侧按钮的点击事件处理函数
onClick(e) {
  console.log(e)
}
```
打印的按钮信息对象如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c0qdgnNz-1670856744388)(data:image/png;base64,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)]

根据 e.content.text 的值，来决定进一步的操作：

// 左侧按钮的点击事件处理函数
onClick(e) {
  if (e.content.text === '购物车') {
    // 切换到购物车页面
    uni.switchTab({
      url: '/pages/cart/cart'
    })
  }
}

#7.5 分支的合并与提交

将 goodsdetail 分支进行本地提交：

git add .
git commit -m "完成了商品详情页面的开发"

将本地的 goodsdetail 分支推送到码云：
```
git push -u origin goodsdetail
```
将本地 goodsdetail 分支中的代码合并到 master 分支：
```
git checkout master
git merge goodsdetail
git push
```
删除本地的 goodsdetail 分支：
```
git branch -d goodsdetail
```

8. 加入购物车

#8.0 创建 cart 分支

运行如下的命令，基于 master 分支在本地创建 cart 子分支，用来开发购物车相关的功能：

git checkout -b cart

#8.1 配置 vuex

在项目根目录中创建 store 文件夹，专门用来存放 vuex 相关的模块
在 store 目录上鼠标右键，选择 新建 -> js文件，新建 store.js 文件：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hQsEjeuL-1670856744390)(data:image/png;base64,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)]

在 store.js 中按照如下 4 个步骤初始化 Store 的实例对象：

// 1. 导入 Vue 和 Vuex
import Vue from 'vue'
import Vuex from 'vuex'

// 2. 将 Vuex 安装为 Vue 的插件
Vue.use(Vuex)

// 3. 创建 Store 的实例对象
const store = new Vuex.Store({
  // TODO：挂载 store 模块
  modules: {},
})

// 4. 向外共享 Store 的实例对象
export default store

在 main.js 中导入 store 实例对象并挂载到 Vue 的实例上：

// 1. 导入 store 的实例对象
import store from './store/store.js'

// 省略其它代码...

const app = new Vue({
  ...App,
  // 2. 将 store 挂载到 Vue 实例上
  store,
})
app.$mount()

#8.2 创建购物车的 store 模块

在 store 目录上鼠标右键，选择 新建 -> js文件，创建购物车的 store 模块，命名为 cart.js：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k2H6fmpg-1670856744391)(data:image/png;base64,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)]

在 cart.js 中，初始化如下的 vuex 模块：

export default {
  // 为当前模块开启命名空间
  namespaced: true,

  // 模块的 state 数据
  state: () => ({
    // 购物车的数组，用来存储购物车中每个商品的信息对象
    // 每个商品的信息对象，都包含如下 6 个属性：
    // { goods_id, goods_name, goods_price, goods_count, goods_small_logo, goods_state }
    cart: [],
  }),

  // 模块的 mutations 方法
  mutations: {},

  // 模块的 getters 属性
  getters: {},
}

在 store/store.js 模块中，导入并挂载购物车的 vuex 模块，示例代码如下：

import Vue from 'vue'
import Vuex from 'vuex'
// 1. 导入购物车的 vuex 模块
import moduleCart from './cart.js'

Vue.use(Vuex)

const store = new Vuex.Store({
  // TODO：挂载 store 模块
  modules: {
    // 2. 挂载购物车的 vuex 模块，模块内成员的访问路径被调整为 m_cart，例如：
    //    购物车模块中 cart 数组的访问路径是 m_cart/cart
    m_cart: moduleCart,
  },
})

export default store

#8.3 在商品详情页中使用 Store 中的数据

在 goods_detail.vue 页面中，修改标签中的代码如下：

// 从 vuex 中按需导出 mapState 辅助方法
import { mapState } from 'vuex'

export default {
  computed: {
    // 调用 mapState 方法，把 m_cart 模块中的 cart 数组映射到当前页面中，作为计算属性来使用
    // ...mapState('模块的名称', ['要映射的数据名称1', '要映射的数据名称2'])
    ...mapState('m_cart', ['cart']),
  },
  // 省略其它代码...
}

注意：今后无论映射 mutations 方法，还是 getters 属性，还是 state 中的数据，都需要指定模块的名称，才能进行映射。

在页面渲染时，可以直接使用映射过来的数据，例如：
```
<view class="yf">快递：免运费 -- {{cart.length}}view>
```

#8.4 实现加入购物车的功能

在 store 目录下的 cart.js 模块中，封装一个将商品信息加入购物车的 mutations 方法，命名为 addToCart。示例代码如下：

export default {
  // 为当前模块开启命名空间
  namespaced: true,

  // 模块的 state 数据
  state: () => ({
    // 购物车的数组，用来存储购物车中每个商品的信息对象
    // 每个商品的信息对象，都包含如下 6 个属性：
    // { goods_id, goods_name, goods_price, goods_count, goods_small_logo, goods_state }
    cart: [],
  }),

  // 模块的 mutations 方法
  mutations: {
    addToCart(state, goods) {
      // 根据提交的商品的Id，查询购物车中是否存在这件商品
      // 如果不存在，则 findResult 为 undefined；否则，为查找到的商品信息对象
      const findResult = state.cart.find((x) => x.goods_id === goods.goods_id)

      if (!findResult) {
        // 如果购物车中没有这件商品，则直接 push
        state.cart.push(goods)
      } else {
        // 如果购物车中有这件商品，则只更新数量即可
        findResult.goods_count++
      }
    },
  },

  // 模块的 getters 属性
  getters: {},
}

在商品详情页面中，通过 mapMutations 这个辅助方法，把 vuex 中 m_cart 模块下的 addToCart 方法映射到当前页面：

// 按需导入 mapMutations 这个辅助方法
import { mapMutations } from 'vuex'

export default {
  methods: {
    // 把 m_cart 模块中的 addToCart 方法映射到当前页面使用
    ...mapMutations('m_cart', ['addToCart']),
  },
}

为商品导航组件 uni-goods-nav 绑定 @buttonClick="buttonClick" 事件处理函数：

// 右侧按钮的点击事件处理函数
buttonClick(e) {
   // 1. 判断是否点击了 加入购物车 按钮
   if (e.content.text === '加入购物车') {

      // 2. 组织一个商品的信息对象
      const goods = {
         goods_id: this.goods_info.goods_id,       // 商品的Id
         goods_name: this.goods_info.goods_name,   // 商品的名称
         goods_price: this.goods_info.goods_price, // 商品的价格
         goods_count: 1,                           // 商品的数量
         goods_small_logo: this.goods_info.goods_small_logo, // 商品的图片
         goods_state: true                         // 商品的勾选状态
      }

      // 3. 通过 this 调用映射过来的 addToCart 方法，把商品信息对象存储到购物车中
      this.addToCart(goods)

   }
}

#8.5 动态统计购物车中商品的总数量

在 cart.js 模块中，在 getters 节点下定义一个 total 方法，用来统计购物车中商品的总数量：

// 模块的 getters 属性
getters: {
   // 统计购物车中商品的总数量
   total(state) {
      let c = 0
      // 循环统计商品的数量，累加到变量 c 中
      state.cart.forEach(goods => c += goods.goods_count)
      return c
   }
}

在商品详情页面的 script 标签中，按需导入 mapGetters 方法并进行使用：

// 按需导入 mapGetters 这个辅助方法
import { mapGetters } from 'vuex'

export default {
  computed: {
    // 把 m_cart 模块中名称为 total 的 getter 映射到当前页面中使用
    ...mapGetters('m_cart', ['total']),
  },
}

通过 watch 侦听器，监听计算属性 total 值的变化，从而动态为购物车按钮的徽标赋值：

export default {
  watch: {
    // 1. 监听 total 值的变化，通过第一个形参得到变化后的新值
    total(newVal) {
      // 2. 通过数组的 find() 方法，找到购物车按钮的配置对象
      const findResult = this.options.find((x) => x.text === '购物车')

      if (findResult) {
        // 3. 动态为购物车按钮的 info 属性赋值
        findResult.info = newVal
      }
    },
  },
}

#8.6 持久化存储购物车中的商品

在 cart.js 模块中，声明一个叫做 saveToStorage 的 mutations 方法，此方法负责将购物车中的数据持久化存储到本地：

// 将购物车中的数据持久化存储到本地
saveToStorage(state) {
   uni.setStorageSync('cart', JSON.stringify(state.cart))
}

修改 mutations 节点中的 addToCart 方法，在处理完商品信息后，调用步骤 1 中定义的 saveToStorage 方法：

addToCart(state, goods) {
   // 根据提交的商品的Id，查询购物车中是否存在这件商品
   // 如果不存在，则 findResult 为 undefined；否则，为查找到的商品信息对象
   const findResult = state.cart.find(x => x.goods_id === goods.goods_id)

   if (!findResult) {
      // 如果购物车中没有这件商品，则直接 push
      state.cart.push(goods)
   } else {
      // 如果购物车中有这件商品，则只更新数量即可
      findResult.goods_count++
   }

   // 通过 commit 方法，调用 m_cart 命名空间下的 saveToStorage 方法
   this.commit('m_cart/saveToStorage')
}

修改 cart.js 模块中的 state 函数，读取本地存储的购物车数据，对 cart 数组进行初始化：

// 模块的 state 数据
state: () => ({
   // 购物车的数组，用来存储购物车中每个商品的信息对象
   // 每个商品的信息对象，都包含如下 6 个属性：
   // { goods_id, goods_name, goods_price, goods_count, goods_small_logo, goods_state }
   cart: JSON.parse(uni.getStorageSync('cart') || '[]')
}),

#8.7 优化商品详情页的 total 侦听器

使用普通函数的形式定义的 watch 侦听器，在页面首次加载后不会被调用。因此导致了商品详情页在首次加载完毕之后，不会将商品的总数量显示到商品导航区域：

watch: {
   // 页面首次加载完毕后，不会调用这个侦听器
   total(newVal) {
      const findResult = this.options.find(x => x.text === '购物车')
      if (findResult) {
         findResult.info = newVal
      }
   }
}

为了防止这个上述问题，可以使用对象的形式来定义 watch 侦听器（详细文档请参考 Vue 官方的 watch 侦听器教程），示例代码如下：

watch: {
   // 定义 total 侦听器，指向一个配置对象
   total: {
      // handler 属性用来定义侦听器的 function 处理函数
      handler(newVal) {
         const findResult = this.options.find(x => x.text === '购物车')
         if (findResult) {
            findResult.info = newVal
         }
      },
      // immediate 属性用来声明此侦听器，是否在页面初次加载完毕后立即调用
      immediate: true
   }
}

#8.8 动态为 tabBar 页面设置数字徽标

需求描述：从商品详情页面导航到购物车页面之后，需要为 tabBar 中的购物车动态设置数字徽标。

把 Store 中的 total 映射到 cart.vue 中使用：

// 按需导入 mapGetters 这个辅助方法
import { mapGetters } from 'vuex'

export default {
  data() {
    return {}
  },
  computed: {
    // 将 m_cart 模块中的 total 映射为当前页面的计算属性
    ...mapGetters('m_cart', ['total']),
  },
}

在页面刚显示出来的时候，立即调用 setBadge 方法，为 tabBar 设置数字徽标：

onShow() {
   // 在页面刚展示的时候，设置数字徽标
   this.setBadge()
}

在 methods 节点中，声明 setBadge 方法如下，通过 uni.setTabBarBadge() 为 tabBar 设置数字徽标：

methods: {
   setBadge() {
      // 调用 uni.setTabBarBadge() 方法，为购物车设置右上角的徽标
      uni.setTabBarBadge({
         index: 2, // 索引
         text: this.total + '' // 注意：text 的值必须是字符串，不能是数字
      })
   }
}

#8.9 将设置 tabBar 徽标的代码抽离为 mixins

注意：除了要在 cart.vue 页面中设置购物车的数字徽标，还需要在其它 3 个 tabBar 页面中，为购物车设置数字徽标。

此时可以使用 Vue 提供的 mixins 特性，提高代码的可维护性。

在项目根目录中新建 mixins 文件夹，并在 mixins 文件夹之下新建 tabbar-badge.js 文件，用来把设置 tabBar 徽标的代码封装为一个 mixin 文件：

import { mapGetters } from 'vuex'

// 导出一个 mixin 对象
export default {
  computed: {
    ...mapGetters('m_cart', ['total']),
  },
  onShow() {
    // 在页面刚展示的时候，设置数字徽标
    this.setBadge()
  },
  methods: {
    setBadge() {
      // 调用 uni.setTabBarBadge() 方法，为购物车设置右上角的徽标
      uni.setTabBarBadge({
        index: 2,
        text: this.total + '', // 注意：text 的值必须是字符串，不能是数字
      })
    },
  },
}

修改 home.vue，cate.vue，cart.vue，my.vue 这 4 个 tabBar 页面的源代码，分别导入 @/mixins/tabbar-badge.js 模块并进行使用：

// 导入自己封装的 mixin 模块
import badgeMix from '@/mixins/tabbar-badge.js'

export default {
  // 将 badgeMix 混入到当前的页面中进行使用
  mixins: [badgeMix],
  // 省略其它代码...
}

9. 购物车页面

#9.0 创建购物车页面的编译模式

打开微信开发者工具，点击工具栏上的“编译模式”下拉菜单，选择“添加编译模式”：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7MfCEK9k-1670856744393)(data:image/png;base64,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)]
勾选“启动页面的路径”之后，点击“确定”按钮，新增购物车页面的编译模式：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tpEEytSG-1670856744394)(imgs/9-2.583cf2f7.png)]

#9.1 商品列表区域

#9.1.1 渲染购物车商品列表的标题区域

定义如下的 UI 结构：


<view class="cart-title">
  
  <uni-icons type="shop" size="18">uni-icons>
  
  <text class="cart-title-text">购物车text>
view>

美化样式：

.cart-title {
  height: 40px;
  display: flex;
  align-items: center;
  font-size: 14px;
  padding-left: 5px;
  border-bottom: 1px solid #efefef;
  .cart-title-text {
    margin-left: 10px;
  }
}

#9.1.2 渲染商品列表区域的基本结构

通过 mapState 辅助函数，将 Store 中的 cart 数组映射到当前页面中使用：

import badgeMix from '@/mixins/tabbar-badge.js'
// 按需导入 mapState 这个辅助函数
import { mapState } from 'vuex'

export default {
  mixins: [badgeMix],
  computed: {
    // 将 m_cart 模块中的 cart 数组映射到当前页面中使用
    ...mapState('m_cart', ['cart']),
  },
  data() {
    return {}
  },
}

在 UI 结构中，通过 v-for 指令循环渲染自定义的 my-goods 组件：


<block v-for="(goods, i) in cart" :key="i">
  <my-goods :goods="goods">my-goods>
block>

#9.1.3 为 my-goods 组件封装 radio 勾选状态

打开 my-goods.vue 组件的源代码，为商品的左侧图片区域添加 radio 组件：


<view class="goods-item-left">
  <radio checked color="#C00000">radio>
  <image :src="goods.goods_small_logo || defaultPic" class="goods-pic">image>
view>

给类名为 goods-item-left 的 view 组件添加样式，实现 radio 组件和 image 组件的左右布局：

.goods-item-left {
  margin-right: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .goods-pic {
    width: 100px;
    height: 100px;
    display: block;
  }
}

封装名称为 showRadio 的 props 属性，来控制当前组件中是否显示 radio 组件：

export default {
  // 定义 props 属性，用来接收外界传递到当前组件的数据
  props: {
    // 商品的信息对象
    goods: {
      type: Object,
      default: {},
    },
    // 是否展示图片左侧的 radio
    showRadio: {
      type: Boolean,
      // 如果外界没有指定 show-radio 属性的值，则默认不展示 radio 组件
      default: false,
    },
  },
}

使用 v-if 指令控制 radio 组件的按需展示：


<view class="goods-item-left">
  
  <radio checked color="#C00000" v-if="showRadio">radio>
  <image :src="goods.goods_small_logo || defaultPic" class="goods-pic">image>
view>

在 cart.vue 页面中的商品列表区域，指定 :show-radio="true" 属性，从而显示 radio 组件：


<block v-for="(goods, i) in cart" :key="i">
  <my-goods :goods="goods" :show-radio="true">my-goods>
block>

修改 my-goods.vue 组件，动态为 radio 绑定选中状态：


<view class="goods-item-left">
  
  <radio :checked="goods.goods_state" color="#C00000" v-if="showRadio">radio>
  <image :src="goods.goods_small_logo || defaultPic" class="goods-pic">image>
view>

#9.1.4 为 my-goods 组件封装 radio-change 事件

当用户点击 radio 组件，希望修改当前商品的勾选状态，此时用户可以为 my-goods 组件绑定 @radio-change 事件，从而获取当前商品的 goods_id 和 goods_state：


<block v-for="(goods, i) in cart" :key="i">
  
  <my-goods :goods="goods" :show-radio="true" @radio-change="radioChangeHandler">my-goods>
block>

定义 radioChangeHandler 事件处理函数如下：

methods: {
  // 商品的勾选状态发生了变化
  radioChangeHandler(e) {
    console.log(e) // 输出得到的数据 -> {goods_id: 395, goods_state: false}
  }
}

在 my-goods.vue 组件中，为 radio 组件绑定 @click 事件处理函数如下：


<view class="goods-item-left">
  <radio :checked="goods.goods_state" color="#C00000" v-if="showRadio" @click="radioClickHandler">radio>
  <image :src="goods.goods_small_logo || defaultPic" class="goods-pic">image>
view>

在 my-goods.vue 组件的 methods 节点中，定义 radioClickHandler 事件处理函数：

methods: {
  // radio 组件的点击事件处理函数
  radioClickHandler() {
    // 通过 this.$emit() 触发外界通过 @ 绑定的 radio-change 事件，
    // 同时把商品的 Id 和 勾选状态 作为参数传递给 radio-change 事件处理函数
    this.$emit('radio-change', {
      // 商品的 Id
      goods_id: this.goods.goods_id,
      // 商品最新的勾选状态
      goods_state: !this.goods.goods_state
    })
  }
}

#9.1.5 修改购物车中商品的勾选状态

在 store/cart.js 模块中，声明如下的 mutations 方法，用来修改对应商品的勾选状态：

// 更新购物车中商品的勾选状态
updateGoodsState(state, goods) {
  // 根据 goods_id 查询购物车中对应商品的信息对象
  const findResult = state.cart.find(x => x.goods_id === goods.goods_id)

  // 有对应的商品信息对象
  if (findResult) {
    // 更新对应商品的勾选状态
    findResult.goods_state = goods.goods_state
    // 持久化存储到本地
    this.commit('m_cart/saveToStorage')
  }
}

在 cart.vue 页面中，导入 mapMutations 这个辅助函数，从而将需要的 mutations 方法映射到当前页面中使用：

import badgeMix from '@/mixins/tabbar-badge.js'
import { mapState, mapMutations } from 'vuex'

export default {
  mixins: [badgeMix],
  computed: {
    ...mapState('m_cart', ['cart']),
  },
  data() {
    return {}
  },
  methods: {
    ...mapMutations('m_cart', ['updateGoodsState']),
    // 商品的勾选状态发生了变化
    radioChangeHandler(e) {
      this.updateGoodsState(e)
    },
  },
}

#9.1.6 为 my-goods 组件封装 NumberBox

注意：NumberBox 组件是 uni-ui 提供的

修改 my-goods.vue 组件的源代码，在类名为 goods-info-box 的 view 组件内部渲染 NumberBox 组件的基本结构：

<view class="goods-info-box">
  
  <view class="goods-price">￥{{goods.goods_price | tofixed}}view>
  
  <uni-number-box :min="1">uni-number-box>
view>

美化页面的结构：

.goods-item-right {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;

  .goods-name {
    font-size: 13px;
  }

  .goods-info-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .goods-price {
    font-size: 16px;
    color: #c00000;
  }
}

在 my-goods.vue 组件中，动态为 NumberBox 组件绑定商品的数量值：

<view class="goods-info-box">
  
  <view class="goods-price">￥{{goods.goods_price | tofixed}}view>
  
  <uni-number-box :min="1" :value="goods.goods_count">uni-number-box>
view>

在 my-goods.vue 组件中，封装名称为 showNum 的 props 属性，来控制当前组件中是否显示 NumberBox 组件：

export default {
  // 定义 props 属性，用来接收外界传递到当前组件的数据
  props: {
    // 商品的信息对象
    goods: {
      type: Object,
      defaul: {},
    },
    // 是否展示图片左侧的 radio
    showRadio: {
      type: Boolean,
      // 如果外界没有指定 show-radio 属性的值，则默认不展示 radio 组件
      default: false,
    },
    // 是否展示价格右侧的 NumberBox 组件
    showNum: {
      type: Boolean,
      default: false,
    },
  },
}

在 my-goods.vue 组件中，使用 v-if 指令控制 NumberBox 组件的按需展示：

<view class="goods-info-box">
  
  <view class="goods-price">￥{{goods.goods_price | tofixed}}view>
  
  <uni-number-box :min="1" :value="goods.goods_count" @change="numChangeHandler" v-if="showNum">uni-number-box>
view>

在 cart.vue 页面中的商品列表区域，指定 :show-num="true" 属性，从而显示 NumberBox 组件：


<block v-for="(goods, i) in cart" :key="i">
  <my-goods :goods="goods" :show-radio="true" :show-num="true" @radio-change="radioChangeHandler">my-goods>
block>

#9.1.7 为 my-goods 组件封装 num-change 事件

当用户修改了 NumberBox 的值以后，希望将最新的商品数量更新到购物车中，此时用户可以为 my-goods 组件绑定 @num-change 事件，从而获取当前商品的 goods_id 和 goods_count：


<block v-for="(goods, i) in cart" :key="i">
  <my-goods :goods="goods" :show-radio="true" :show-num="true" @radio-change="radioChangeHandler" @num-change="numberChangeHandler">my-goods>
block>

定义 numberChangeHandler 事件处理函数如下：

// 商品的数量发生了变化
numberChangeHandler(e) {
  console.log(e)
}

在 my-goods.vue 组件中，为 uni-number-box 组件绑定 @change 事件处理函数如下：

<view class="goods-info-box">
  
  <view class="goods-price">￥{{goods.goods_price | tofixed}}view>
  
  <uni-number-box :min="1" :value="goods.goods_count" @change="numChangeHandler">uni-number-box>
view>

在 my-goods.vue 组件的 methods 节点中，定义 numChangeHandler 事件处理函数：

methods: {
  // NumberBox 组件的 change 事件处理函数
  numChangeHandler(val) {
    // 通过 this.$emit() 触发外界通过 @ 绑定的 num-change 事件
    this.$emit('num-change', {
      // 商品的 Id
      goods_id: this.goods.goods_id,
      // 商品的最新数量
      goods_count: +val
    })
  }
}

#9.1.8 解决 NumberBox 数据不合法的问题

问题说明：当用户在 NumberBox 中输入字母等非法字符之后，会导致 NumberBox 数据紊乱的问题

打开项目根目录中 components/uni-number-box/uni-number-box.vue 组件，修改 methods 节点中的 _onBlur 函数如下：

_onBlur(event) {
  // 官方的代码没有进行数值转换，用户输入的 value 值可能是非法字符：
  // let value = event.detail.value;

  // 将用户输入的内容转化为整数
  let value = parseInt(event.detail.value);

  if (!value) {
    // 如果转化之后的结果为 NaN，则给定默认值为 1
    this.inputValue = 1;
    return;
  }

  // 省略其它代码...
}

修改完毕之后，用户输入小数会被转化为整数，用户输入非法字符会被替换为默认值 1

#9.1.9 完善 NumberBox 的 inputValue 侦听器

问题说明：在用户每次输入内容之后，都会触发 inputValue 侦听器，从而调用 this.$emit(“change”, newVal) 方法。这种做法可能会把不合法的内容传递出去！

打开项目根目录中 components/uni-number-box/uni-number-box.vue 组件，修改 watch 节点中的 inputValue 侦听器如下：

inputValue(newVal, oldVal) {
  // 官方提供的 if 判断条件，在用户每次输入内容时，都会调用 this.$emit("change", newVal)
  // if (+newVal !== +oldVal) {

  // 新旧内容不同 && 新值内容合法 && 新值中不包含小数点
  if (+newVal !== +oldVal && Number(newVal) && String(newVal).indexOf('.') === -1) {
    this.$emit("change", newVal);
  }
}

修改完毕之后，NumberBox 组件只会把合法的、且不包含小数点的新值传递出去

#9.1.10 修改购物车中商品的数量

在 store/cart.js 模块中，声明如下的 mutations 方法，用来修改对应商品的数量：

// 更新购物车中商品的数量
updateGoodsCount(state, goods) {
  // 根据 goods_id 查询购物车中对应商品的信息对象
  const findResult = state.cart.find(x => x.goods_id === goods.goods_id)

  if(findResult) {
    // 更新对应商品的数量
    findResult.goods_count = goods.goods_count
    // 持久化存储到本地
    this.commit('m_cart/saveToStorage')
  }
}

在 cart.vue 页面中，通过 mapMutations 这个辅助函数，将需要的 mutations 方法映射到当前页面中使用：

import badgeMix from '@/mixins/tabbar-badge.js'
import { mapState, mapMutations } from 'vuex'

export default {
  mixins: [badgeMix],
  computed: {
    ...mapState('m_cart', ['cart']),
  },
  data() {
    return {}
  },
  methods: {
    ...mapMutations('m_cart', ['updateGoodsState', 'updateGoodsCount']),
    // 商品的勾选状态发生了变化
    radioChangeHandler(e) {
      this.updateGoodsState(e)
    },
    // 商品的数量发生了变化
    numberChangeHandler(e) {
      this.updateGoodsCount(e)
    },
  },
}

#9.1.11 渲染滑动删除的 UI 效果

滑动删除需要用到 uni-ui 的 uni-swipe-action 组件和 uni-swipe-action-item。详细的官方文档请参考SwipeAction 滑动操作。

改造 cart.vue 页面的 UI 结构，将商品列表区域的结构修改如下（可以使用 uSwipeAction 代码块快速生成基本的 UI 结构）：



<uni-swipe-action>
  <block v-for="(goods, i) in cart" :key="i">
    
    <uni-swipe-action-item :options="options" @click="swipeActionClickHandler(goods)">
      <my-goods :goods="goods" :show-radio="true" :show-num="true" @radio-change="radioChangeHandler" @num-change="numberChangeHandler">my-goods>
    uni-swipe-action-item>
  block>
uni-swipe-action>

在 data 节点中声明 options 数组，用来定义操作按钮的配置信息：

data() {
  return {
    options: [{
      text: '删除', // 显示的文本内容
      style: {
        backgroundColor: '#C00000' // 按钮的背景颜色
      }
    }]
  }
}

在 methods 中声明 uni-swipe-action-item 组件的 @click 事件处理函数：

// 点击了滑动操作按钮
swipeActionClickHandler(goods) {
  console.log(goods)
}

美化 my-goods.vue 组件的样式：

.goods-item {
  // 让 goods-item 项占满整个屏幕的宽度
  width: 750rpx;
  // 设置盒模型为 border-box
  box-sizing: border-box;
  display: flex;
  padding: 10px 5px;
  border-bottom: 1px solid #f0f0f0;
}

#9.1.12 实现滑动删除的功能

在 store/cart.js 模块的 mutations 节点中声明如下的方法，从而根据商品的 Id 从购物车中移除对应的商品：

// 根据 Id 从购物车中删除对应的商品信息
removeGoodsById(state, goods_id) {
  // 调用数组的 filter 方法进行过滤
  state.cart = state.cart.filter(x => x.goods_id !== goods_id)
  // 持久化存储到本地
  this.commit('m_cart/saveToStorage')
}

在 cart.vue 页面中，使用 mapMutations 辅助函数，把需要的方法映射到当前页面中使用：

methods: {
  ...mapMutations('m_cart', ['updateGoodsState', 'updateGoodsCount', 'removeGoodsById']),
  // 商品的勾选状态发生了变化
  radioChangeHandler(e) {
    this.updateGoodsState(e)
  },
  // 商品的数量发生了变化
  numberChangeHandler(e) {
    this.updateGoodsCount(e)
  },
  // 点击了滑动操作按钮
  swipeActionClickHandler(goods) {
    this.removeGoodsById(goods.goods_id)
  }
}

#9.2 收货地址区域

#9.2.1 创建收货地址组件

在 components 目录上鼠标右键，选择 新建组件，并填写组件相关的信息：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EK5DGzrK-1670856744396)(imgs/9-3.d168684c.png)]

渲染收货地址组件的基本结构：

<view>

  
  <view class="address-choose-box">
    <button type="primary" size="mini" class="btnChooseAddress">请选择收货地址+button>
  view>

  
  <view class="address-info-box">
    <view class="row1">
      <view class="row1-left">
        <view class="username">收货人：<text>escooktext>view>
      view>
      <view class="row1-right">
        <view class="phone">电话：<text>138XXXX5555text>view>
        <uni-icons type="arrowright" size="16">uni-icons>
      view>
    view>
    <view class="row2">
      <view class="row2-left">收货地址：view>
      <view class="row2-right">河北省邯郸市肥乡区xxx 河北省邯郸市肥乡区xxx 河北省邯郸市肥乡区xxx 河北省邯郸市肥乡区xxx view>
    view>
  view>

  
  <image src="/static/[email protected]" class="address-border">image>
view>

美化收货地址组件的样式：

// 底部边框线的样式
.address-border {
  display: block;
  width: 100%;
  height: 5px;
}

// 选择收货地址的盒子
.address-choose-box {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

// 渲染收货信息的盒子
.address-info-box {
  font-size: 12px;
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 5px;

  // 第一行
  .row1 {
    display: flex;
    justify-content: space-between;

    .row1-right {
      display: flex;
      align-items: center;

      .phone {
        margin-right: 5px;
      }
    }
  }

  // 第二行
  .row2 {
    display: flex;
    align-items: center;
    margin-top: 10px;

    .row2-left {
      white-space: nowrap;
    }
  }
}

#9.2.2 实现收货地址区域的按需展示

在 data 中定义收货地址的信息对象：

export default {
  data() {
    return {
      // 收货地址
      address: {},
    }
  },
}

使用 v-if 和 v-else 实现按需展示：


<view class="address-choose-box" v-if="JSON.stringify(address) === '{}'">
  <button type="primary" size="mini" class="btnChooseAddress">请选择收货地址+button>
view>


<view class="address-info-box" v-else>
  
view>

#9.2.3 实现选择收货地址的功能

为 请选择收货地址+ 的 button 按钮绑定点击事件处理函数：


<view class="address-choose-box" v-if="JSON.stringify(address) === '{}'">
  <button type="primary" size="mini" class="btnChooseAddress" @click="chooseAddress">请选择收货地址+button>
view>

定义 chooseAddress 事件处理函数，调用小程序提供的 chooseAddress() API 实现选择收货地址的功能：

methods: {
  // 选择收货地址
  async chooseAddress() {
    // 1. 调用小程序提供的 chooseAddress() 方法，即可使用选择收货地址的功能
    //    返回值是一个数组：第 1 项为错误对象；第 2 项为成功之后的收货地址对象
    const [err, succ] = await uni.chooseAddress().catch(err => err)

    // 2. 用户成功的选择了收货地址
    if (err === null && succ.errMsg === 'chooseAddress:ok') {
      // 为 data 里面的收货地址对象赋值
      this.address = succ
    }
  }
}

如果调用接口不能成功跳转到选择地址的界面，则在uni-app项目根目录中找到 manifest.json 文件，在左侧导航栏选择源码视图，找到mp-weixin 节点，在节点后面加上：
“requiredPrivateInfos”: [
“getLocation”,
“onLocationChange”,
“startLocationUpdateBackground”,
“chooseAddress”]

定义收货详细地址的计算属性：

computed: {
  // 收货详细地址的计算属性
  addstr() {
    if (!this.address.provinceName) return ''

    // 拼接 省，市，区，详细地址 的字符串并返回给用户
    return this.address.provinceName + this.address.cityName + this.address.countyName + this.address.detailInfo
  }
}

渲染收货地址区域的数据：


<view class="address-info-box" v-else>
  <view class="row1">
    <view class="row1-left">
      <view class="username">收货人：<text>{{address.userName}}text>view>
    view>
    <view class="row1-right">
      <view class="phone">电话：<text>{{address.telNumber}}text>view>
      <uni-icons type="arrowright" size="16">uni-icons>
    view>
  view>
  <view class="row2">
    <view class="row2-left">收货地址：view>
    <view class="row2-right">{{addstr}}view>
  view>
view>

#9.2.4 将 address 信息存储到 vuex 中

在 store 目录中，创建用户相关的 vuex 模块，命名为 user.js：

export default {
  // 开启命名空间
  namespaced: true,

  // state 数据
  state: () => ({
    // 收货地址
    address: {},
  }),

  // 方法
  mutations: {
    // 更新收货地址
    updateAddress(state, address) {
      state.address = address
    },
  },

  // 数据包装器
  getters: {},
}

在 store/store.js 模块中，导入并挂载 user.js 模块：

// 1. 导入 Vue 和 Vuex
import Vue from 'vue'
import Vuex from 'vuex'
// 导入购物车的 vuex 模块
import moduleCart from './cart.js'
// 导入用户的 vuex 模块
import moduleUser from './user.js'

// 2. 将 Vuex 安装为 Vue 的插件
Vue.use(Vuex)

// 3. 创建 Store 的实例对象
const store = new Vuex.Store({
  // TODO：挂载 store 模块
  modules: {
    // 挂载购物车的 vuex 模块，模块内成员的访问路径被调整为 m_cart，例如：
    // 购物车模块中 cart 数组的访问路径是 m_cart/cart
    m_cart: moduleCart,
    // 挂载用户的 vuex 模块，访问路径为 m_user
    m_user: moduleUser,
  },
})

// 4. 向外共享 Store 的实例对象
export default store

改造 address.vue 组件中的代码，使用 vuex 提供的 address 计算属性 替代 data 中定义的本地 address 对象：

// 1. 按需导入 mapState 和 mapMutations 这两个辅助函数
import { mapState, mapMutations } from 'vuex'

export default {
  data() {
    return {
      // 2.1 注释掉下面的 address 对象，使用 2.2 中的代码替代之
      // address: {}
    }
  },
  methods: {
    // 3.1 把 m_user 模块中的 updateAddress 函数映射到当前组件
    ...mapMutations('m_user', ['updateAddress']),
    // 选择收货地址
    async chooseAddress() {
      const [err, succ] = await uni.chooseAddress().catch((err) => err)

      // 用户成功的选择了收货地址
      if (err === null && succ.errMsg === 'chooseAddress:ok') {
        // 3.2 把下面这行代码注释掉，使用 3.3 中的代码替代之
        // this.address = succ

        // 3.3 调用 Store 中提供的 updateAddress 方法，将 address 保存到 Store 里面
        this.updateAddress(succ)
      }
    },
  },
  computed: {
    // 2.2 把 m_user 模块中的 address 对象映射当前组件中使用，代替 data 中 address 对象
    ...mapState('m_user', ['address']),
    // 收货详细地址的计算属性
    addstr() {
      if (!this.address.provinceName) return ''

      // 拼接 省，市，区，详细地址 的字符串并返回给用户
      return this.address.provinceName + this.address.cityName + this.address.countyName + this.address.detailInfo
    },
  },
}

#9.2.5 将 Store 中的 address 持久化存储到本地

修改 store/user.js 模块中的代码如下：

export default {
  // 开启命名空间
  namespaced: true,

  // state 数据
  state: () => ({
    // 3. 读取本地的收货地址数据，初始化 address 对象
    address: JSON.parse(uni.getStorageSync('address') || '{}'),
  }),

  // 方法
  mutations: {
    // 更新收货地址
    updateAddress(state, address) {
      state.address = address

      // 2. 通过 this.commit() 方法，调用 m_user 模块下的 saveAddressToStorage 方法将 address 对象持久化存储到本地
      this.commit('m_user/saveAddressToStorage')
    },
    // 1. 定义将 address 持久化存储到本地 mutations 方法
    saveAddressToStorage(state) {
      uni.setStorageSync('address', JSON.stringify(state.address))
    },
  },

  // 数据包装器
  getters: {},
}

#9.2.6 将 addstr 抽离为 getters

目的：为了提高代码的复用性，可以把收货的详细地址抽离为 getters，方便在多个页面和组件之间实现复用。

剪切 my-address.vue 组件中的 addstr 计算属性的代码，粘贴到 user.js 模块中，作为一个 getters 节点：

// 数据包装器
getters: {
  // 收货详细地址的计算属性
  addstr(state) {
    if (!state.address.provinceName) return ''

    // 拼接 省，市，区，详细地址 的字符串并返回给用户
    return state.address.provinceName + state.address.cityName + state.address.countyName + state.address.detailInfo
  }
}

改造 my-address.vue 组件中的代码，通过 mapGetters 辅助函数，将 m_user 模块中的 addstr 映射到当前组件中使用：

// 按需导入 mapGetters 辅助函数
import { mapState, mapMutations, mapGetters } from 'vuex'

export default {
  // 省略其它代码
  computed: {
    ...mapState('m_user', ['address']),
    // 将 m_user 模块中的 addstr 映射到当前组件中使用
    ...mapGetters('m_user', ['addstr']),
  },
}

#9.2.7 重新选择收货地址

为 class 类名为 address-info-box 的盒子绑定 click 事件处理函数如下：
```
<view class="address-info-box" v-else @click="chooseAddress">
  
view>
```

#9.2.8 解决收货地址授权失败的问题

如果在选择收货地址的时候，用户点击了取消授权，则需要进行特殊的处理，否则用户将无法再次选择收货地址！

改造 chooseAddress 方法如下：

// 选择收货地址
async chooseAddress() {
  // 1. 调用小程序提供的 chooseAddress() 方法，即可使用选择收货地址的功能
  //    返回值是一个数组：第1项为错误对象；第2项为成功之后的收货地址对象
  const [err, succ] = await uni.chooseAddress().catch(err => err)

  // 2. 用户成功的选择了收货地址
  if (succ && succ.errMsg === 'chooseAddress:ok') {
    // 更新 vuex 中的收货地址
    this.updateAddress(succ)
  }

  // 3. 用户没有授权
  if (err && err.errMsg === 'chooseAddress:fail auth deny') {
    this.reAuth() // 调用 this.reAuth() 方法，向用户重新发起授权申请
  }
}

在 methods 节点中声明 reAuth 方法如下：

// 调用此方法，重新发起收货地址的授权
async reAuth() {
  // 3.1 提示用户对地址进行授权
  const [err2, confirmResult] = await uni.showModal({
    content: '检测到您没打开地址权限，是否去设置打开？',
    confirmText: "确认",
    cancelText: "取消",
  })

  // 3.2 如果弹框异常，则直接退出
  if (err2) return

  // 3.3 如果用户点击了 “取消” 按钮，则提示用户 “您取消了地址授权！”
  if (confirmResult.cancel) return uni.$showMsg('您取消了地址授权！')

  // 3.4 如果用户点击了 “确认” 按钮，则调用 uni.openSetting() 方法进入授权页面，让用户重新进行授权
  if (confirmResult.confirm) return uni.openSetting({
    // 3.4.1 授权结束，需要对授权的结果做进一步判断
    success: (settingResult) => {
      // 3.4.2 地址授权的值等于 true，提示用户 “授权成功”
      if (settingResult.authSetting['scope.address']) return uni.$showMsg('授权成功！请选择地址')
      // 3.4.3 地址授权的值等于 false，提示用户 “您取消了地址授权”
      if (!settingResult.authSetting['scope.address']) return uni.$showMsg('您取消了地址授权！')
    }
  })
}

#9.2.9 解决 iPhone 真机上无法重新授权的问题

问题说明：在 iPhone 设备上，当用户取消授权之后，再次点击选择收货地址按钮的时候，无法弹出授权的提示框！

导致问题的原因 - 用户取消授权后，再次点击 “选择收货地址” 按钮的时候：
- 在模拟器和安卓真机上，错误消息 err.errMsg 的值为 chooseAddress:fail auth deny
- 在 iPhone 真机上，错误消息 err.errMsg 的值为 chooseAddress:fail authorize no response

解决问题的方案 - 修改 chooseAddress 方法中的代码，进一步完善用户没有授权时的 if 判断条件即可：

async chooseAddress() {
  // 1. 调用小程序提供的 chooseAddress() 方法，即可使用选择收货地址的功能
  //    返回值是一个数组：第1项为错误对象；第2项为成功之后的收货地址对象
  const [err, succ] = await uni.chooseAddress().catch(err => err)

  // 2. 用户成功的选择了收货地址
  if (succ && succ.errMsg === 'chooseAddress:ok') {
    this.updateAddress(succ)
  }

  // 3. 用户没有授权
  if (err && (err.errMsg === 'chooseAddress:fail auth deny' || err.errMsg === 'chooseAddress:fail authorize no response')) {
    this.reAuth()
  }
}

#9.3 结算区域

#9.3.1 把结算区域封装为组件

在 components 目录中，新建 my-settle 结算组件：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XKUSYlJb-1670856744397)(imgs/9-4.1739d570.png)]

初始化 my-settle 组件的基本结构和样式：

在 cart.vue 页面中使用自定义的 my-settle 组件，并美化页面样式，防止页面底部被覆盖：

#9.3.2 渲染结算区域的结构和样式

定义如下的 UI 结构：


<view class="my-settle-container">
  
  <label class="radio">
    <radio color="#C00000" :checked="true" /><text>全选text>
  label>

  
  <view class="amount-box">
    合计:<text class="amount">￥1234.00text>
  view>

  
  <view class="btn-settle">结算(0)view>
view>

美化样式：

.my-settle-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  // 将背景色从 cyan 改为 white
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 5px;
  font-size: 14px;

  .radio {
    display: flex;
    align-items: center;
  }

  .amount {
    color: #c00000;
  }

  .btn-settle {
    height: 50px;
    min-width: 100px;
    background-color: #c00000;
    color: white;
    line-height: 50px;
    text-align: center;
    padding: 0 10px;
  }
}

#9.3.3 动态渲染已勾选商品的总数量

在 store/cart.js 模块中，定义一个名称为 checkedCount 的 getters，用来统计已勾选商品的总数量：

// 勾选的商品的总数量
checkedCount(state) {
  // 先使用 filter 方法，从购物车中过滤器已勾选的商品
  // 再使用 reduce 方法，将已勾选的商品总数量进行累加
  // reduce() 的返回值就是已勾选的商品的总数量
  return state.cart.filter(x => x.goods_state).reduce((total, item) => total += item.goods_count, 0)
}

在 my-settle 组件中，通过 mapGetters 辅助函数，将需要的 getters 映射到当前组件中使用：

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters('m_cart', ['checkedCount']),
  },
  data() {
    return {}
  },
}

将 checkedCount 的值渲染到页面中：


<view class="btn-settle">结算({{checkedCount}})view>

#9.3.4 动态渲染全选按钮的选中状态

使用 mapGetters 辅助函数，将商品的总数量映射到当前组件中使用，并定义一个叫做 isFullCheck 的计算属性：

import { mapGetters } from 'vuex'

export default {
  computed: {
    // 1. 将 total 映射到当前组件中
    ...mapGetters('m_cart', ['checkedCount', 'total']),
    // 2. 是否全选
    isFullCheck() {
      return this.total === this.checkedCount
    },
  },
  data() {
    return {}
  },
}

为 radio 组件动态绑定 checked 属性的值：


<label class="radio">
  <radio color="#C00000" :checked="isFullCheck" /><text>全选text>
label>

#9.3.5 实现商品的全选/反选功能

在 store/cart.js 模块中，定义一个叫做 updateAllGoodsState 的 mutations 方法，用来修改所有商品的勾选状态：

// 更新所有商品的勾选状态
updateAllGoodsState(state, newState) {
  // 循环更新购物车中每件商品的勾选状态
  state.cart.forEach(x => x.goods_state = newState)
  // 持久化存储到本地
  this.commit('m_cart/saveToStorage')
}

在 my-settle 组件中，通过 mapMutations 辅助函数，将需要的 mutations 方法映射到当前组件中使用：

// 1. 按需导入 mapMutations 辅助函数
import { mapGetters, mapMutations } from 'vuex'

export default {
  // 省略其它代码
  methods: {
    // 2. 使用 mapMutations 辅助函数，把 m_cart 模块提供的 updateAllGoodsState 方法映射到当前组件中使用
    ...mapMutations('m_cart', ['updateAllGoodsState']),
  },
}

为 UI 中的 label 组件绑定 click 事件处理函数：


<label class="radio" @click="changeAllState">
  <radio color="#C00000" :checked="isFullCheck" /><text>全选text>
label>

在 my-settle 组件的 methods 节点中，声明 changeAllState 事件处理函数：

methods: {
  ...mapMutations('m_cart', ['updateAllGoodsState']),
  // label 的点击事件处理函数
  changeAllState() {
    // 修改购物车中所有商品的选中状态
    // !this.isFullCheck 表示：当前全选按钮的状态取反之后，就是最新的勾选状态
    this.updateAllGoodsState(!this.isFullCheck)
  }
}

#9.3.6 动态渲染已勾选商品的总价格

在 store/cart.js 模块中，定义一个叫做 checkedGoodsAmount 的 getters，用来统计已勾选商品的总价格：

// 已勾选的商品的总价
checkedGoodsAmount(state) {
  // 先使用 filter 方法，从购物车中过滤器已勾选的商品
  // 再使用 reduce 方法，将已勾选的商品数量 * 单价之后，进行累加
  // reduce() 的返回值就是已勾选的商品的总价
  // 最后调用 toFixed(2) 方法，保留两位小数
  return state.cart.filter(x => x.goods_state)
                   .reduce((total, item) => total += item.goods_count * item.goods_price, 0)
                   .toFixed(2)
}

在 my-settle 组件中，使用 mapGetters 辅助函数，把需要的 checkedGoodsAmount 映射到当前组件中使用：
```
...mapGetters('m_cart', ['total', 'checkedCount', 'checkedGoodsAmount'])
```

在组件的 UI 结构中，渲染已勾选的商品的总价：


<view class="amount-box">
  合计:<text class="amount">￥{{checkedGoodsAmount}}text>
view>

#9.3.7 动态计算购物车徽标的数值

问题说明：当修改购物车中商品的数量之后，tabBar 上的数字徽标不会自动更新。

解决方案：改造 mixins/tabbar-badge.js 中的代码，使用 watch 侦听器，监听 total 总数量的变化，从而动态为 tabBar 的徽标赋值：

import { mapGetters } from 'vuex'

// 导出一个 mixin 对象
export default {
  computed: {
    ...mapGetters('m_cart', ['total']),
  },
  watch: {
    // 监听 total 值的变化
    total() {
      // 调用 methods 中的 setBadge 方法，重新为 tabBar 的数字徽章赋值
      this.setBadge()
    },
  },
  onShow() {
    // 在页面刚展示的时候，设置数字徽标
    this.setBadge()
  },
  methods: {
    setBadge() {
      // 调用 uni.setTabBarBadge() 方法，为购物车设置右上角的徽标
      uni.setTabBarBadge({
        index: 2,
        text: this.total + '', // 注意：text 的值必须是字符串，不能是数字
      })
    },
  },
}

#9.3.8 渲染购物车为空时的页面结构

将 资料 目录中的 [email protected] 图片复制到项目的 /static/ 目录中

改造 cart.vue 页面的 UI 结构，使用 v-if 和 v-else 控制购物车区域和空白购物车区域的按需展示：

<template>
  <view class="cart-container" v-if="cart.length !== 0">

    

    

    

    

  view>

  
  <view class="empty-cart" v-else>
    <image src="/static/[email protected]" class="empty-img">image>
    <text class="tip-text">空空如也~text>
  view>
template>

美化空白购物车区域的样式：

.empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 150px;

  .empty-img {
    width: 90px;
    height: 90px;
  }

  .tip-text {
    font-size: 12px;
    color: gray;
    margin-top: 15px;
  }
}

#9.4 分支的合并与提交

将 cart 分支进行本地提交：

git add .
git commit -m "完成了购物车的开发"

将本地的 cart 分支推送到码云：
```
git push -u origin cart
```
将本地 cart 分支中的代码合并到 master 分支：
```
git checkout master
git merge cart
git push
```
删除本地的 cart 分支：
```
git branch -d cart
```

10. 登录与支付

#10.0 创建 settle 分支

运行如下的命令，基于 master 分支在本地创建 settle 子分支，用来开发登录与支付相关的功能：

git checkout -b settle

#10.1 点击结算按钮进行条件判断

说明：用户点击了结算按钮之后，需要先后判断是否勾选了要结算的商品、是否选择了收货地址、是否登录。

在 my-settle 组件中，为结算按钮绑定点击事件处理函数：


<view class="btn-settle" @click="settlement">结算({{checkedCount}})view>

在 my-settle 组件的 methods 节点中声明 settlement 事件处理函数如下：

// 点击了结算按钮
settlement() {
  // 1. 先判断是否勾选了要结算的商品
  if (!this.checkedCount) return uni.$showMsg('请选择要结算的商品！')

  // 2. 再判断用户是否选择了收货地址
  if (!this.addstr) return uni.$showMsg('请选择收货地址！')

  // 3. 最后判断用户是否登录了
  if (!this.token) return uni.$showMsg('请先登录！')
}

在 my-settle 组件中，使用 mapGetters 辅助函数，从 m_user 模块中将 addstr 映射到当前组件中使用：

export default {
  computed: {
    ...mapGetters('m_cart', ['total', 'checkedCount', 'checkedGoodsAmount']),
    // addstr 是详细的收货地址
    ...mapGetters('m_user', ['addstr']),
    isFullCheck() {
      return this.total === this.checkedCount
    },
  },
}

在 store/user.js 模块的 state 节点中，声明 token 字符串：

export default {
  // 开启命名空间
  namespaced: true,

  // state 数据
  state: () => ({
    // 收货地址
    address: JSON.parse(uni.getStorageSync('address') || '{}'),
    // 登录成功之后的 token 字符串
    token: '',
  }),

  // 省略其它代码
}

在 my-settle 组件中，使用 mapState 辅助函数，从 m_user 模块中将 token 映射到当前组件中使用：

// 按需从 vuex 中导入 mapState 辅助函数
import { mapGetters, mapMutations, mapState } from 'vuex'

export default {
  computed: {
    ...mapGetters('m_cart', ['total', 'checkedCount', 'checkedGoodsAmount']),
    ...mapGetters('m_user', ['addstr']),
    // token 是用户登录成功之后的 token 字符串
    ...mapState('m_user', ['token']),
    isFullCheck() {
      return this.total === this.checkedCount
    },
  },
}

#10.2 登录

#10.2.1 定义 my 页面的编译模式

点击 微信开发者工具 工具栏上的编译模式下拉菜单，选择 添加编译模式：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XWp4HrPv-1670856744397)(data:image/png;base64,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)]
勾选启动页面的路径之后，点击确定按钮：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NPxrpdtt-1670856744399)(imgs/10-4.4d78ed78.png)]

#10.2.2 实现登录和用户信息组件的按需展示

在 components 目录中新建登录组件：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2E4RHssr-1670856744400)(imgs/10-1.46e30c32.png)]
在 components 目录中新建用户信息组件：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hy8jB2bv-1670856744401)(imgs/10-2.ace63114.png)]

在 my.vue 页面中，通过 mapState 辅助函数，导入需要的 token 字符串：

import badgeMix from '@/mixins/tabbar-badge.js'
// 1. 从 vuex 中按需导入 mapState 辅助函数
import { mapState } from 'vuex'

export default {
  mixins: [badgeMix],
  computed: {
    // 2. 从 m_user 模块中导入需要的 token 字符串
    ...mapState('m_user', ['token']),
  },
  data() {
    return {}
  },
}

在 my.vue 页面中，实现登录组件和用户信息组件的按需展示：

<template>
  <view>

    
    <my-login v-if="!token">my-login>

    
    <my-userinfo v-else>my-userinfo>

  view>
template>

#10.2.3 实现登录组件的基本布局

为 my-login 组件定义如下的 UI 结构：

<template>
  <view class="login-container">
    
    <uni-icons type="contact-filled" size="100" color="#AFAFAF">uni-icons>
    
    <button type="primary" class="btn-login">一键登录button>
    
    <view class="tips-text">登录后尽享更多权益view>
  view>
template>

美化登录组件的样式：

.login-container {
  // 登录盒子的样式
  height: 750rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f8f8f8;
  position: relative;
  overflow: hidden;

  // 绘制登录盒子底部的半椭圆造型
  &::after {
    content: ' ';
    display: block;
    position: absolute;
    width: 100%;
    height: 40px;
    left: 0;
    bottom: 0;
    background-color: white;
    border-radius: 100%;
    transform: translateY(50%);
  }

  // 登录按钮的样式
  .btn-login {
    width: 90%;
    border-radius: 100px;
    margin: 15px 0;
    background-color: #c00000;
  }

  // 按钮下方提示消息的样式
  .tips-text {
    font-size: 12px;
    color: gray;
  }
}

#10.2.4 点击登录按钮获取微信用户的基本信息

需求描述：需要获取微信用户的头像、昵称等基本信息。

为登录的 button 按钮绑定 open-type="getUserInfo" 属性，表示点击按钮时，希望获取用户的基本信息：
```
<button type="primary" class="btn-login" open-type="getUserInfo" @getuserinfo="getUserInfo">一键登录button>
```

在 methods 节点中声明 getUserInfo 事件处理函数如下：

methods: {
  // 获取微信用户的基本信息
  getUserInfo(e) {
    // 判断是否获取用户信息成功
    if (e.detail.errMsg === 'getUserInfo:fail auth deny') return uni.$showMsg('您取消了登录授权！')

    // 获取用户信息成功， e.detail.userInfo 就是用户的基本信息
    console.log(e.detail.userInfo)
  }
}

#10.2.5 将用户的基本信息存储到 vuex

在 store/user.js 模块的 state 节点中，声明 userinfo 的信息对象如下：

// state 数据
state: () => ({
  // 收货地址
  // address: {}
  address: JSON.parse(uni.getStorageSync('address') || '{}'),
  // 登录成功之后的 token 字符串
  token: '',
  // 用户的基本信息
  userinfo: JSON.parse(uni.getStorageSync('userinfo') || '{}')
}),

在 store/user.js 模块的 mutations 节点中，声明如下的两个方法：

// 方法
mutations: {
  // 省略其它代码...

  // 更新用户的基本信息
  updateUserInfo(state, userinfo) {
    state.userinfo = userinfo
    // 通过 this.commit() 方法，调用 m_user 模块下的 saveUserInfoToStorage 方法，将 userinfo 对象持久化存储到本地
    this.commit('m_user/saveUserInfoToStorage')
  },

  // 将 userinfo 持久化存储到本地
  saveUserInfoToStorage(state) {
    uni.setStorageSync('userinfo', JSON.stringify(state.userinfo))
  }
}

使用 mapMutations 辅助函数，将需要的方法映射到 my-login 组件中使用：

// 1. 按需导入 mapMutations 辅助函数
import { mapMutations } from 'vuex'

export default {
  data() {
    return {}
  },
  methods: {
    // 2. 调用 mapMutations 辅助方法，把 m_user 模块中的 updateUserInfo 映射到当前组件中使用
    ...mapMutations('m_user', ['updateUserInfo']),
    // 获取微信用户的基本信息
    getUserInfo(e) {
      // 判断是否获取用户信息成功
      if (e.detail.errMsg === 'getUserInfo:fail auth deny') return uni.$showMsg('您取消了登录授权！')
      // 获取用户信息成功， e.detail.userInfo 就是用户的基本信息
      // console.log(e.detail.userInfo)

      // 3. 将用户的基本信息存储到 vuex 中
      this.updateUserInfo(e.detail.userInfo)
    },
  },
}

#10.2.6 登录获取 Token 字符串

需求说明：当获取到了微信用户的基本信息之后，还需要进一步调用登录相关的接口，从而换取登录成功之后的 Token 字符串。

在 getUserInfo 方法中，预调用 this.getToken() 方法，同时把获取到的用户信息传递进去：

// 获取微信用户的基本信息
getUserInfo(e) {
  // 判断是否获取用户信息成功
  if (e.detail.errMsg === 'getUserInfo:fail auth deny') return uni.$showMsg('您取消了登录授权！')

  // 将用户的基本信息存储到 vuex 中
  this.updateUserInfo(e.detail.userInfo)

  // 获取登录成功后的 Token 字符串
  this.getToken(e.detail)
}

在 methods 中定义 getToken 方法，调用登录相关的 API，实现登录的功能：

// 调用登录接口，换取永久的 token
async getToken(info) {
  // 调用微信登录接口
  const [err, res] = await uni.login().catch(err => err)
  // 判断是否 uni.login() 调用失败
  if (err || res.errMsg !== 'login:ok') return uni.$showError('登录失败！')

  // 准备参数对象
  const query = {
    code: res.code,
    encryptedData: info.encryptedData,
    iv: info.iv,
    rawData: info.rawData,
    signature: info.signature
  }

  // 换取 token
  const { data: loginResult } = await uni.$http.post('/api/public/v1/users/wxlogin', query)
  if (loginResult.meta.status !== 200) return uni.$showMsg('登录失败！')
  uni.$showMsg('登录成功')
}

#10.2.7 将 Token 存储到 vuex

在 store/user.js 模块的 mutations 节点中，声明如下的两个方法：

mutations: {
  // 省略其它代码...

  // 更新 token 字符串
  updateToken(state, token) {
    state.token = token
    // 通过 this.commit() 方法，调用 m_user 模块下的 saveTokenToStorage 方法，将 token 字符串持久化存储到本地
    this.commit('m_user/saveTokenToStorage')
  },

  // 将 token 字符串持久化存储到本地
  saveTokenToStorage(state) {
    uni.setStorageSync('token', state.token)
  }
}

修改 store/user.js 模块的 state 节点如下：

// state 数据
state: () => ({
  // 收货地址
  address: JSON.parse(uni.getStorageSync('address') || '{}'),
  // 登录成功之后的 token 字符串
  token: uni.getStorageSync('token') || '',
  // 用户的基本信息
  userinfo: JSON.parse(uni.getStorageSync('userinfo') || '{}')
}),

在 my-login 组件中，把 vuex 中的 updateToken 方法映射到当前组件中使用：

methods: {
  // 1. 使用 mapMutations 辅助方法，把 m_user 模块中的 updateToken 方法映射到当前组件中使用
  ...mapMutations('m_user', ['updateUserInfo', 'updateToken'])

  // 省略其它代码...

  // 调用登录接口，换取永久的 token
  async getToken(info) {
    // 调用微信登录接口
    const [err, res] = await uni.login().catch(err => err)
    // 判断是否 uni.login() 调用失败
    if (err || res.errMsg !== 'login:ok') return uni.$showError('登录失败！')

    // 准备参数对象
    const query = {
      code: res.code,
      encryptedData: info.encryptedData,
      iv: info.iv,
      rawData: info.rawData,
      signature: info.signature
    }

    // 换取 token
    const { data: loginResult } = await uni.$http.post('/api/public/v1/users/wxlogin', query)
    if (loginResult.meta.status !== 200) return uni.$showMsg('登录失败！')

    // 2. 更新 vuex 中的 token
    this.updateToken(loginResult.message.token)
  }
}

#10.3 用户信息

#10.3.1 实现用户头像昵称区域的基本布局

在 my-userinfo 组件中，定义如下的 UI 结构：

<template>
  <view class="my-userinfo-container">

    
    <view class="top-box">
      <image src="" class="avatar">image>
      <view class="nickname">xxxview>
    view>

  view>
template>

美化当前组件的样式：

.my-userinfo-container {
  height: 100%;
  // 为整个组件的结构添加浅灰色的背景
  background-color: #f4f4f4;

  .top-box {
    height: 400rpx;
    background-color: #c00000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .avatar {
      display: block;
      width: 90px;
      height: 90px;
      border-radius: 45px;
      border: 2px solid white;
      box-shadow: 0 1px 5px black;
    }

    .nickname {
      color: white;
      font-weight: bold;
      font-size: 16px;
      margin-top: 10px;
    }
  }
}

在 my.vue 页面中，为最外层包裹性质的 view 容器，添加 class="my-container" 的类名，并美化样式如下：
```
page,
.my-container {
  height: 100%;
}
```

#10.3.2 渲染用户的头像和昵称

在 my-userinfo 组件中，通过 mapState 辅助函数，将需要的成员映射到当前组件中使用：

// 按需导入 mapState 辅助函数
import { mapState } from 'vuex'

export default {
  computed: {
    // 将 m_user 模块中的 userinfo 映射到当前页面中使用
    ...mapState('m_user', ['userinfo']),
  },
  data() {
    return {}
  },
}

将用户的头像和昵称渲染到页面中：


<view class="top-box">
  <image :src="userinfo.avatarUrl" class="avatar">image>
  <view class="nickname">{{userinfo.nickName}}view>
view>

#10.3.3 渲染第一个面板区域

在 my-userinfo 组件中，定义如下的 UI 结构：


<view class="panel-list">
  
  <view class="panel">
    
    <view class="panel-body">
      
      <view class="panel-item">
        <text>8text>
        <text>收藏的店铺text>
      view>
      <view class="panel-item">
        <text>14text>
        <text>收藏的商品text>
      view>
      <view class="panel-item">
        <text>18text>
        <text>关注的商品text>
      view>
      <view class="panel-item">
        <text>84text>
        <text>足迹text>
      view>
    view>
  view>

  

  
view>

美化第一个面板的样式：

.panel-list {
  padding: 0 10px;
  position: relative;
  top: -10px;

  .panel {
    background-color: white;
    border-radius: 3px;
    margin-bottom: 8px;

    .panel-body {
      display: flex;
      justify-content: space-around;

      .panel-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        font-size: 13px;
        padding: 10px 0;
      }
    }
  }
}

#10.3.4 渲染第二个面板区域

定义第二个面板区域的 UI 结构：


<view class="panel">
  
  <view class="panel-title">我的订单view>
  
  <view class="panel-body">
    
    <view class="panel-item">
      <image src="/static/my-icons/icon1.png" class="icon">image>
      <text>待付款text>
    view>
    <view class="panel-item">
      <image src="/static/my-icons/icon2.png" class="icon">image>
      <text>待收货text>
    view>
    <view class="panel-item">
      <image src="/static/my-icons/icon3.png" class="icon">image>
      <text>退款/退货text>
    view>
    <view class="panel-item">
      <image src="/static/my-icons/icon4.png" class="icon">image>
      <text>全部订单text>
    view>
  view>
view>

对之前的 SCSS 样式进行改造，从而美化第二个面板的样式：

.panel-list {
  padding: 0 10px;
  position: relative;
  top: -10px;

  .panel {
    background-color: white;
    border-radius: 3px;
    margin-bottom: 8px;

    .panel-title {
      line-height: 45px;
      padding-left: 10px;
      font-size: 15px;
      border-bottom: 1px solid #f4f4f4;
    }

    .panel-body {
      display: flex;
      justify-content: space-around;

      .panel-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        font-size: 13px;
        padding: 10px 0;

        .icon {
          width: 35px;
          height: 35px;
        }
      }
    }
  }
}

#10.3.5 渲染第三个面板区域

定义第三个面板区域的 UI 结构：


<view class="panel">
  <view class="panel-list-item">
    <text>收货地址text>
    <uni-icons type="arrowright" size="15">uni-icons>
  view>
  <view class="panel-list-item">
    <text>联系客服text>
    <uni-icons type="arrowright" size="15">uni-icons>
  view>
  <view class="panel-list-item">
    <text>退出登录text>
    <uni-icons type="arrowright" size="15">uni-icons>
  view>
view>

美化第三个面板区域的样式：

.panel-list-item {
  height: 45px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  padding: 0 10px;
}

#10.3.6 实现退出登录的功能

为第三个面板区域中的 退出登录 项绑定 click 点击事件处理函数：

<view class="panel-list-item" @click="logout">
  <text>退出登录text>
  <uni-icons type="arrowright" size="15">uni-icons>
view>

在 my-userinfo 组件的 methods 节点中定义 logout 事件处理函数：

// 退出登录
async logout() {
  // 询问用户是否退出登录
  const [err, succ] = await uni.showModal({
    title: '提示',
    content: '确认退出登录吗？'
  }).catch(err => err)

  if (succ && succ.confirm) {
     // 用户确认了退出登录的操作
     // 需要清空 vuex 中的 userinfo、token 和 address
     this.updateUserInfo({})
     this.updateToken('')
     this.updateAddress({})
  }
}

使用 mapMutations 辅助方法，将需要用到的 mutations 方法映射到当前组件中：

// 按需导入辅助函数
import { mapState, mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations('m_user', ['updateUserInfo', 'updateToken', 'updateAddress']),
  },
}

#10.4 三秒后自动跳转

#10.4.1 三秒后自动跳转到登录页面

需求描述：在购物车页面，当用户点击 “结算” 按钮时，如果用户没有登录，则 3 秒后自动跳转到登录页面

在 my-settle 组件的 methods 节点中，声明一个叫做 showTips 的方法，专门用来展示倒计时的提示消息：

// 展示倒计时的提示消息
showTips(n) {
  // 调用 uni.showToast() 方法，展示提示消息
  uni.showToast({
    // 不展示任何图标
    icon: 'none',
    // 提示的消息
    title: '请登录后再结算！' + n + ' 秒后自动跳转到登录页',
    // 为页面添加透明遮罩，防止点击穿透
    mask: true,
    // 1.5 秒后自动消失
    duration: 1500
  })
}

在 data 节点中声明倒计时的秒数：

data() {
  return {
    // 倒计时的秒数
    seconds: 3
  }
}

改造 结算 按钮的 click 事件处理函数，如果用户没有登录，则预调用一个叫做 delayNavigate 的方法，进行倒计时的导航跳转：

// 点击了结算按钮
settlement() {
  // 1. 先判断是否勾选了要结算的商品
  if (!this.checkedCount) return uni.$showMsg('请选择要结算的商品！')

  // 2. 再判断用户是否选择了收货地址
  if (!this.addstr) return uni.$showMsg('请选择收货地址！')

  // 3. 最后判断用户是否登录了，如果没有登录，则调用 delayNavigate() 进行倒计时的导航跳转
  // if (!this.token) return uni.$showMsg('请先登录！')
  if (!this.token) return this.delayNavigate()
},

定义 delayNavigate 方法，初步实现倒计时的提示功能：

// 延迟导航到 my 页面
delayNavigate() {
  // 1. 展示提示消息，此时 seconds 的值等于 3
  this.showTips(this.seconds)

  // 2. 创建定时器，每隔 1 秒执行一次
  setInterval(() => {
    // 2.1 先让秒数自减 1
    this.seconds--
    // 2.2 再根据最新的秒数，进行消息提示
    this.showTips(this.seconds)
  }, 1000)
},

上述代码的问题：定时器不会自动停止，此时秒数会出现等于 0 或小于 0 的情况！

在 data 节点中声明定时器的 Id 如下：

data() {
  return {
    // 倒计时的秒数
    seconds: 3,
    // 定时器的 Id
    timer: null
  }
}

改造 delayNavigate 方法如下：

// 延迟导航到 my 页面
delayNavigate() {
  this.showTips(this.seconds)

  // 1. 将定时器的 Id 存储到 timer 中
  this.timer = setInterval(() => {
    this.seconds--

    // 2. 判断秒数是否 <= 0
    if (this.seconds <= 0) {
      // 2.1 清除定时器
      clearInterval(this.timer)

      // 2.2 跳转到 my 页面
      uni.switchTab({
        url: '/pages/my/my'
      })

      // 2.3 终止后续代码的运行（当秒数为 0 时，不再展示 toast 提示消息）
      return
    }

    this.showTips(this.seconds)
  }, 1000)
},

上述代码的问题：seconds 秒数不会被重置，导致第 2 次，3 次，n 次的倒计时跳转功能无法正常工作

进一步改造 delayNavigate 方法，在执行此方法时，立即将 seconds 秒数重置为 3 即可：

// 延迟导航到 my 页面
delayNavigate() {
  // 把 data 中的秒数重置成 3 秒
  this.seconds = 3
  this.showTips(this.seconds)

  this.timer = setInterval(() => {
    this.seconds--

    if (this.seconds <= 0) {
      clearInterval(this.timer)
      uni.switchTab({
        url: '/pages/my/my'
      })
      return
    }

    this.showTips(this.seconds)
  }, 1000)
}

#10.4.2 登录成功之后再返回之前的页面

核心实现思路：在自动跳转到登录页面成功之后，把返回页面的信息存储到 vuex 中，从而方便登录成功之后，根据返回页面的信息重新跳转回去。

返回页面的信息对象，主要包含 { openType, from } 两个属性，其中 openType 表示以哪种方式导航回之前的页面；from 表示之前页面的 url 地址；

在 store/user.js 模块的 state 节点中，声明一个叫做 redirectInfo 的对象如下：

// state 数据
state: () => ({
  // 收货地址
  address: JSON.parse(uni.getStorageSync('address') || '{}'),
  // 登录成功之后的 token 字符串
  token: uni.getStorageSync('token') || '',
  // 用户的基本信息
  userinfo: JSON.parse(uni.getStorageSync('userinfo') || '{}'),
  // 重定向的 object 对象 { openType, from }
  redirectInfo: null
}),

在 store/user.js 模块的 mutations 节点中，声明一个叫做 updateRedirectInfo 的方法：

mutations: {
  // 更新重定向的信息对象
  updateRedirectInfo(state, info) {
    state.redirectInfo = info
  }
}

在 my-settle 组件中，通过 mapMutations 辅助方法，把 m_user 模块中的 updateRedirectInfo 方法映射到当前页面中使用：

methods: {
  // 把 m_user 模块中的 updateRedirectInfo 方法映射到当前页面中使用
  ...mapMutations('m_user', ['updateRedirectInfo']),
}

改造 my-settle 组件 methods 节点中的 delayNavigate 方法，当成功跳转到 my 页面 之后，将重定向的信息对象存储到 vuex 中：

// 延迟导航到 my 页面
delayNavigate() {
  // 把 data 中的秒数重置成 3 秒
  this.seconds = 3
  this.showTips(this.seconds)

  this.timer = setInterval(() => {
    this.seconds--

    if (this.seconds <= 0) {
      // 清除定时器
      clearInterval(this.timer)
      // 跳转到 my 页面
      uni.switchTab({
        url: '/pages/my/my',
        // 页面跳转成功之后的回调函数
        success: () => {
          // 调用 vuex 的 updateRedirectInfo 方法，把跳转信息存储到 Store 中
          this.updateRedirectInfo({
            // 跳转的方式
            openType: 'switchTab',
            // 从哪个页面跳转过去的
            from: '/pages/cart/cart'
          })
        }
      })

      return
    }

    this.showTips(this.seconds)
  }, 1000)
}

在 my-login 组件中，通过 mapState 和 mapMutations 辅助方法，将 vuex 中需要的数据和方法，映射到当前页面中使用：

// 按需导入辅助函数
import { mapMutations, mapState } from 'vuex'

export default {
  computed: {
    // 调用 mapState 辅助方法，把 m_user 模块中的数据映射到当前用组件中使用
    ...mapState('m_user', ['redirectInfo']),
  },
  methods: {
    // 调用 mapMutations 辅助方法，把 m_user 模块中的方法映射到当前组件中使用
    ...mapMutations('m_user', ['updateUserInfo', 'updateToken', 'updateRedirectInfo']),
  },
}

改造 my-login 组件中的 getToken 方法，当登录成功之后，预调用 this.navigateBack() 方法返回登录之前的页面：

// 调用登录接口，换取永久的 token
async getToken(info) {
  // 省略其它代码...

  // 判断 vuex 中的 redirectInfo 是否为 null
  // 如果不为 null，则登录成功之后，需要重新导航到对应的页面
  this.navigateBack()
}

在 my-login 组件中，声明 navigateBack 方法如下：

// 返回登录之前的页面
navigateBack() {
  // redirectInfo 不为 null，并且导航方式为 switchTab
  if (this.redirectInfo && this.redirectInfo.openType === 'switchTab') {
    // 调用小程序提供的 uni.switchTab() API 进行页面的导航
    uni.switchTab({
      // 要导航到的页面地址
      url: this.redirectInfo.from,
      // 导航成功之后，把 vuex 中的 redirectInfo 对象重置为 null
      complete: () => {
        this.updateRedirectInfo(null)
      }
    })
  }
}

#10.5 微信支付

#10.5.1 在请求头中添加 Token 身份认证的字段

原因说明：只有在登录之后才允许调用支付相关的接口，所以必须为有权限的接口添加身份认证的请求头字段

打开项目根目录下的 main.js，改造 $http.beforeRequest 请求拦截器中的代码如下：

// 请求开始之前做一些事情
$http.beforeRequest = function(options) {
  uni.showLoading({
    title: '数据加载中...',
  })

  // 判断请求的是否为有权限的 API 接口
  if (options.url.indexOf('/my/') !== -1) {
    // 为请求头添加身份认证字段
    options.header = {
      // 字段的值可以直接从 vuex 中进行获取
      Authorization: store.state.m_user.token,
    }
  }
}

#10.5.2 微信支付的流程

创建订单
- 请求创建订单的 API 接口：把（订单金额、收货地址、订单中包含的商品信息）发送到服务器
- 服务器响应的结果：订单编号
订单预支付
- 请求订单预支付的 API 接口：把（订单编号）发送到服务器
- 服务器响应的结果：订单预支付的参数对象，里面包含了订单支付相关的必要参数
发起微信支付
- 调用 uni.requestPayment() 这个 API，发起微信支付；把步骤 2 得到的 “订单预支付对象” 作为参数传递给 uni.requestPayment() 方法
- 监听 uni.requestPayment() 这个 API 的 success，fail，complete 回调函数

#10.5.3 创建订单

改造 my-settle 组件中的 settlement 方法，当前三个判断条件通过之后，调用实现微信支付的方法：

// 点击了结算按钮
settlement() {
  // 1. 先判断是否勾选了要结算的商品
  if (!this.checkedCount) return uni.$showMsg('请选择要结算的商品！')

  // 2. 再判断用户是否选择了收货地址
  if (!this.addstr) return uni.$showMsg('请选择收货地址！')

  // 3. 最后判断用户是否登录了
  // if (!this.token) return uni.$showMsg('请先登录！')
  if (!this.token) return this.delayNavigate()

  // 4. 实现微信支付功能
  this.payOrder()
},

在 my-settle 组件中定义 payOrder 方法如下，先实现创建订单的功能：

// 微信支付
async payOrder() {
  // 1. 创建订单
  // 1.1 组织订单的信息对象
  const orderInfo = {
    // 开发期间，注释掉真实的订单价格，
    // order_price: this.checkedGoodsAmount,
    // 写死订单总价为 1 分钱
    order_price: 0.01,
    consignee_addr: this.addstr,
    goods: this.cart.filter(x => x.goods_state).map(x => ({ goods_id: x.goods_id, goods_number: x.goods_count, goods_price: x.goods_price }))
  }
  // 1.2 发起请求创建订单
  const { data: res } = await uni.$http.post('/api/public/v1/my/orders/create', orderInfo)
  if (res.meta.status !== 200) return uni.$showMsg('创建订单失败！')
  // 1.3 得到服务器响应的“订单编号”
  const orderNumber = res.message.order_number

   // 2. 订单预支付

   // 3. 发起微信支付
 }

#10.5.4 订单预支付

改造 my-settle 组件的 payOrder 方法，实现订单预支付功能：

// 微信支付
async payOrder() {
  // 1. 创建订单
  // 1.1 组织订单的信息对象
  const orderInfo = {
    // 开发期间，注释掉真实的订单价格，
    // order_price: this.checkedGoodsAmount,
    // 写死订单总价为 1 分钱
    order_price: 0.01,
    consignee_addr: this.addstr,
    goods: this.cart.filter(x => x.goods_state).map(x => ({ goods_id: x.goods_id, goods_number: x.goods_count, goods_price: x.goods_price }))
  }
  // 1.2 发起请求创建订单
  const { data: res } = await uni.$http.post('/api/public/v1/my/orders/create', orderInfo)
  if (res.meta.status !== 200) return uni.$showMsg('创建订单失败！')
  // 1.3 得到服务器响应的“订单编号”
  const orderNumber = res.message.order_number

  // 2. 订单预支付
  // 2.1 发起请求获取订单的支付信息
  const { data: res2 } = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder', { order_number: orderNumber })
  // 2.2 预付订单生成失败
  if (res2.meta.status !== 200) return uni.$showError('预付订单生成失败！')
  // 2.3 得到订单支付相关的必要参数
  const payInfo = res2.message.pay

   // 3. 发起微信支付
 }

#10.5.5 发起微信支付

改造 my-settle 组件的 payOrder 方法，实现微信支付的功能：

// 微信支付
async payOrder() {
  // 1. 创建订单
  // 1.1 组织订单的信息对象
  const orderInfo = {
    // 开发期间，注释掉真实的订单价格，
    // order_price: this.checkedGoodsAmount,
    // 写死订单总价为 1 分钱
    order_price: 0.01,
    consignee_addr: this.addstr,
    goods: this.cart.filter(x => x.goods_state).map(x => ({ goods_id: x.goods_id, goods_number: x.goods_count, goods_price: x.goods_price }))
  }
  // 1.2 发起请求创建订单
  const { data: res } = await uni.$http.post('/api/public/v1/my/orders/create', orderInfo)
  if (res.meta.status !== 200) return uni.$showMsg('创建订单失败！')
  // 1.3 得到服务器响应的“订单编号”
  const orderNumber = res.message.order_number

   // 2. 订单预支付
   // 2.1 发起请求获取订单的支付信息
   const { data: res2 } = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder', { order_number: orderNumber })
   // 2.2 预付订单生成失败
   if (res2.meta.status !== 200) return uni.$showError('预付订单生成失败！')
   // 2.3 得到订单支付相关的必要参数
   const payInfo = res2.message.pay

   // 3. 发起微信支付
   // 3.1 调用 uni.requestPayment() 发起微信支付
   const [err, succ] = await uni.requestPayment(payInfo)
   // 3.2 未完成支付
   if (err) return uni.$showMsg('订单未支付！')
   // 3.3 完成了支付，进一步查询支付的结果
   const { data: res3 } = await uni.$http.post('/api/public/v1/my/orders/chkOrder', { order_number: orderNumber })
   // 3.4 检测到订单未支付
   if (res3.meta.status !== 200) return uni.$showMsg('订单未支付！')
   // 3.5 检测到订单支付完成
   uni.showToast({
     title: '支付完成！',
     icon: 'success'
   })
 }

#10.6 分支的合并与提交

将 settle 分支进行本地提交：

git add .
git commit -m "完成了登录和支付功能的开发"

将本地的 settle 分支推送到码云：
```
git push -u origin settle
```
将本地 settle 分支中的代码合并到 master 分支：
```
git checkout master
git merge settle
git push
```
删除本地的 settle 分支：
```
git branch -d settle
```

11. 发布

11.1 为什么要发布

小程序只有发布之后，才能被用户搜索并使用
开发期间的小程序为了便于调试，含有 sourcemap 相关的文件，并且代码没有被压缩，因此体积较大，不适合直接当作线上版本进行发布
通过执行 “小程序发布”，能够优化小程序的体积，提高小程序的运行性能

#11.2 发布小程序的流程

点击 HBuilderX 菜单栏上的 发行 -> 小程序-微信(仅适用于uni-app)：
在弹出框中填写要发布的小程序的名称和AppId之后，点击发行按钮：
在 HBuilderX 的控制台中查看小程序发布编译的进度：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WVoGhKxc-1670856744404)(imgs/11-3.567c1979.png)]
发布编译完成之后，会自动打开一个新的微信开发者工具界面，此时，点击工具栏上的上传按钮：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JfTszGJ1-1670856744405)(imgs/11-4.9c24f0ee.png)]
填写版本号和项目备注之后，点击上传按钮：

服务器响应的结果：订单预支付的参数对象，里面包含了订单支付相关的必要参数

发起微信支付
- 调用 uni.requestPayment() 这个 API，发起微信支付；把步骤 2 得到的 “订单预支付对象” 作为参数传递给 uni.requestPayment() 方法
- 监听 uni.requestPayment() 这个 API 的 success，fail，complete 回调函数

#10.5.3 创建订单

改造 my-settle 组件中的 settlement 方法，当前三个判断条件通过之后，调用实现微信支付的方法：

// 点击了结算按钮
settlement() {
  // 1. 先判断是否勾选了要结算的商品
  if (!this.checkedCount) return uni.$showMsg('请选择要结算的商品！')

  // 2. 再判断用户是否选择了收货地址
  if (!this.addstr) return uni.$showMsg('请选择收货地址！')

  // 3. 最后判断用户是否登录了
  // if (!this.token) return uni.$showMsg('请先登录！')
  if (!this.token) return this.delayNavigate()

  // 4. 实现微信支付功能
  this.payOrder()
},

在 my-settle 组件中定义 payOrder 方法如下，先实现创建订单的功能：

// 微信支付
async payOrder() {
  // 1. 创建订单
  // 1.1 组织订单的信息对象
  const orderInfo = {
    // 开发期间，注释掉真实的订单价格，
    // order_price: this.checkedGoodsAmount,
    // 写死订单总价为 1 分钱
    order_price: 0.01,
    consignee_addr: this.addstr,
    goods: this.cart.filter(x => x.goods_state).map(x => ({ goods_id: x.goods_id, goods_number: x.goods_count, goods_price: x.goods_price }))
  }
  // 1.2 发起请求创建订单
  const { data: res } = await uni.$http.post('/api/public/v1/my/orders/create', orderInfo)
  if (res.meta.status !== 200) return uni.$showMsg('创建订单失败！')
  // 1.3 得到服务器响应的“订单编号”
  const orderNumber = res.message.order_number

   // 2. 订单预支付

   // 3. 发起微信支付
 }

#10.5.4 订单预支付

改造 my-settle 组件的 payOrder 方法，实现订单预支付功能：

// 微信支付
async payOrder() {
  // 1. 创建订单
  // 1.1 组织订单的信息对象
  const orderInfo = {
    // 开发期间，注释掉真实的订单价格，
    // order_price: this.checkedGoodsAmount,
    // 写死订单总价为 1 分钱
    order_price: 0.01,
    consignee_addr: this.addstr,
    goods: this.cart.filter(x => x.goods_state).map(x => ({ goods_id: x.goods_id, goods_number: x.goods_count, goods_price: x.goods_price }))
  }
  // 1.2 发起请求创建订单
  const { data: res } = await uni.$http.post('/api/public/v1/my/orders/create', orderInfo)
  if (res.meta.status !== 200) return uni.$showMsg('创建订单失败！')
  // 1.3 得到服务器响应的“订单编号”
  const orderNumber = res.message.order_number

  // 2. 订单预支付
  // 2.1 发起请求获取订单的支付信息
  const { data: res2 } = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder', { order_number: orderNumber })
  // 2.2 预付订单生成失败
  if (res2.meta.status !== 200) return uni.$showError('预付订单生成失败！')
  // 2.3 得到订单支付相关的必要参数
  const payInfo = res2.message.pay

   // 3. 发起微信支付
 }

#10.5.5 发起微信支付

改造 my-settle 组件的 payOrder 方法，实现微信支付的功能：

// 微信支付
async payOrder() {
  // 1. 创建订单
  // 1.1 组织订单的信息对象
  const orderInfo = {
    // 开发期间，注释掉真实的订单价格，
    // order_price: this.checkedGoodsAmount,
    // 写死订单总价为 1 分钱
    order_price: 0.01,
    consignee_addr: this.addstr,
    goods: this.cart.filter(x => x.goods_state).map(x => ({ goods_id: x.goods_id, goods_number: x.goods_count, goods_price: x.goods_price }))
  }
  // 1.2 发起请求创建订单
  const { data: res } = await uni.$http.post('/api/public/v1/my/orders/create', orderInfo)
  if (res.meta.status !== 200) return uni.$showMsg('创建订单失败！')
  // 1.3 得到服务器响应的“订单编号”
  const orderNumber = res.message.order_number

   // 2. 订单预支付
   // 2.1 发起请求获取订单的支付信息
   const { data: res2 } = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder', { order_number: orderNumber })
   // 2.2 预付订单生成失败
   if (res2.meta.status !== 200) return uni.$showError('预付订单生成失败！')
   // 2.3 得到订单支付相关的必要参数
   const payInfo = res2.message.pay

   // 3. 发起微信支付
   // 3.1 调用 uni.requestPayment() 发起微信支付
   const [err, succ] = await uni.requestPayment(payInfo)
   // 3.2 未完成支付
   if (err) return uni.$showMsg('订单未支付！')
   // 3.3 完成了支付，进一步查询支付的结果
   const { data: res3 } = await uni.$http.post('/api/public/v1/my/orders/chkOrder', { order_number: orderNumber })
   // 3.4 检测到订单未支付
   if (res3.meta.status !== 200) return uni.$showMsg('订单未支付！')
   // 3.5 检测到订单支付完成
   uni.showToast({
     title: '支付完成！',
     icon: 'success'
   })
 }

#10.6 分支的合并与提交

将 settle 分支进行本地提交：

git add .
git commit -m "完成了登录和支付功能的开发"

将本地的 settle 分支推送到码云：
```
git push -u origin settle
```
将本地 settle 分支中的代码合并到 master 分支：
```
git checkout master
git merge settle
git push
```
删除本地的 settle 分支：
```
git branch -d settle
```

11. 发布

#11.1 为什么要发布

小程序只有发布之后，才能被用户搜索并使用
开发期间的小程序为了便于调试，含有 sourcemap 相关的文件，并且代码没有被压缩，因此体积较大，不适合直接当作线上版本进行发布
通过执行 “小程序发布”，能够优化小程序的体积，提高小程序的运行性能