feat: 绑定手机号

4 years ago · 52e0352ffe
5 changed files with 193 additions and 150 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -3,6 +3,7 @@
 ### 🌟 新功能
 范围|描述|commitId
 --|--|--
+ - | api封装 | 7d4edfc
 - | cache indexedDB处理 | 3388967
 calendar, tall.js | 上下滑动切换日历的模式,tall.js中domain根据环境变量切换 | 364e25d
 - | db store | 6414c4f
@ -46,60 +47,12 @@
 - | 角色栏实现 | 94cd671
 - | 设置小红点 | 9316bcb
 - | 距调整pc端 | 5069aa1
+ - | 适配小程序；小程序登录 | cefc0eb
 - | 配置默认插件接口 | f0c177d
 - | 面变化首页变化 | 5e860f1
 - | 项目api url设置 | 6cd5245
 - | 项目列表, 项目url | 32e005b
 - | 首页项目样式改变 | 8514c85
- - | api封装 | [7d4edfc](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/7d4edfc)
- - | cache indexedDB处理 | [3388967](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/3388967)
- calendar, tall.js | 上下滑动切换日历的模式,tall.js中domain根据环境变量切换 | [364e25d](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/364e25d)
- - | db store | [6414c4f](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/6414c4f)
- default plugin | 添加默认插件;项目列表;全局项目最大高度设置 | [ed1d87b](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/ed1d87b)
- - | indexedDB | [687394e](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/687394e)
- pinch | alloy finger实现图片的pinch放大缩小 | [de01343](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/de01343)
- plugin | 插件添加了token及param参数 | [aeb0292](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/aeb0292)
- - | post 封装 | [da52e94](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/da52e94)
- - | tall插件封装 | [1bcb920](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/1bcb920)
- task status | 任务状态切换未完 | [7ffd135](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/7ffd135)
- - | ws storage | [21b3a06](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/21b3a06)
- - | 上传逻辑变化 | [3ff1dc2](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/3ff1dc2)
- - | 任务状态时间显示 | [56f5183](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/56f5183)
- - | 任务进行中状态数字 | [27b7326](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/27b7326)
- - | 全局插件及默认插件位置修改 | [6c80d08](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/6c80d08)
- - | 向右箭头图标变化 | [8e9ca55](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/8e9ca55)
- - | 字体大小更改 | [82cfdd4](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/82cfdd4)
- - | 存token | [b8a178d](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/b8a178d)
- - | 定期任务面板骨架屏添加 | [b2698c0](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/b2698c0)
- 富文本插件 | 富文本插件demo测试 | [ed3d644](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/ed3d644)
- - | 导入wbs | [1224fcb](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/1224fcb)
- - | 导入项目,更新项目 | [5e06adf](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/5e06adf)
- - | 导入项目后提示并打开项目详情页 | [410f527](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/410f527)
- - | 引入dayjs | [29b8b93](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/29b8b93)
- - | 提交到本地 | [9cbe411](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/9cbe411)
- - | 插件参数处理调整 | [a3e68d3](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/a3e68d3)
- - | 插件数据获取 | [5b91bdc](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/5b91bdc)
- - | 日历定位;合并 | [ea3f937](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/ea3f937)
- - | 日常任务插件调整 | [c1881f9](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/c1881f9)
- - | 时间基准线，默认插件 | [a33ba1e](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/a33ba1e)
- - | 时间轴修改状态时提示框增加 | [e841392](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/e841392)
- - | 时间轴界面 | [33927e9](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/33927e9)
- - | 标题栏变化 | [3898cfe](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/3898cfe)
- - | 标题栏变化 | [c0fcd9d](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/c0fcd9d)
- - | 标题栏角色栏全局任务组件新建 | [0500cb4](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/0500cb4)
- - | 模拟接口测试 | [69e7931](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/69e7931)
- - | 添加子任务插件 子项目插件 | [7bda7e2](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/7bda7e2)
- - | 添加时间轴上下滚动 | [2b81bbc](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/2b81bbc)
- - | 点击日历日期查询项目列表 | [c458385](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/c458385)
- - | 缓存修改 | [63e1f0d](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/63e1f0d)
- - | 角色栏实现 | [94cd671](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/94cd671)
- - | 设置小红点 | [9316bcb](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/9316bcb)
- - | 距调整pc端 | [5069aa1](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/5069aa1)
- - | 配置默认插件接口 | [f0c177d](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/f0c177d)
- - | 面变化首页变化 | [5e860f1](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/5e860f1)
- - | 项目api url设置 | [6cd5245](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/6cd5245)
- - | 项目列表, 项目url | [32e005b](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/32e005b)
- - | 首页项目样式改变 | [8514c85](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/8514c85)


 ### 🎨 代码样式
@ -133,6 +86,7 @@
 范围|描述|commitId
 --|--|--
 - | 1.时间轴数据渲染 2.时间基准线 | d643af2
+ - | api 存storage | 81032ba
 ID1000343 | 解决向下预加载查询参数时间没+1颗粒度;以及滚动加载颗粒度写死的问题 | 940603a, closes #ID1000343
 plugin | 插件解析机制完善 | 0f5a27d
 project title | 项目标题修改; 切换角色移除script | 5c20017
@ -157,6 +111,8 @@
 - | 定期任务接口 | aa4981c
 - | 定期任务插件 | 92b3254
 - | 定期任务未加载时,显示空的时间轴并能上下滑动 | ce38093
+ - | 定期任务本地缓存和api赋值,未完成 | 5a10856
+ 定期任务本地缓存和api赋值,未完成 | 定期任务本地缓存和api赋值,未完成 | b22a366
 - | 定期任务骨架屏修改 | 8ff72dd
 - | 平车演示临时去掉项目快捷方式的toast提示 | e0b2c23
 - | 手动展开日常任务 | 0a4a622
@ -180,56 +136,6 @@
 - | 设置时间轴自动滚动到当前位置 | a3474f8
 - | 跳转详情页返回路径修改 | c5e17c0
 - | 骨架屏替换 | e9fdd71
- - | 1.时间轴数据渲染 2.时间基准线 | [d643af2](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/d643af2)
- - | api 存storage | [81032ba](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/81032ba)
- ID1000343 | 解决向下预加载查询参数时间没+1颗粒度;以及滚动加载颗粒度写死的问题 | [940603a](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/940603a), closes [#ID1000343](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/issues/ID1000343)
- plugin | 插件解析机制完善 | [0f5a27d](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/0f5a27d)
- project title | 项目标题修改; 切换角色移除script | [5c20017](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/5c20017)
- roles | 修复默认显示不是我的角色的问题 | [b69f94f](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/b69f94f)
- role | 切换角色的逻辑修正完善 | [4ae534f](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/4ae534f)
- task任务逻辑完善 | 减少初始global及regular的不必要请求 | [bd4bd38](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/bd4bd38)
- - | title.vue根据页面栈显示返回按钮；标题文本超出显示... | [0cbacf4](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/0cbacf4)
- - | 上下滑动加载定期任务 | [4090d89](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/4090d89)
- - | 上下滚动时间轴 | [d533a01](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/d533a01)
- - | 下拉加载定期任务传参，时间格式化修改 | [0b95a0e](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/0b95a0e)
- - | 任务开始时间延迟插件 | [992a313](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/992a313)
- - | 修改main | [749ae9a](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/749ae9a)
- - | 修改定期任务状态0和4时不加载圆圈 | [30e352f](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/30e352f)
- - | 修改小红点传参 | [87b20fd](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/87b20fd)
- - | 修改报错 | [531c14d](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/531c14d)
- - | 修改接口路径 | [df6acf2](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/df6acf2)
- - | 修改角色栏组件 | [a54c601](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/a54c601)
- - | 切换到默认项目角色没有激活状态的bug | [438d448](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/438d448)
- - | 切换日历时查询小红点 | [7091789](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/7091789)
- - | 初始展示角色修改 | [2ac4053](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/2ac4053)
- - | 定期任务key值修改 | [c6688db](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/c6688db)
- - | 定期任务接口 | [aa4981c](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/aa4981c)
- - | 定期任务插件 | [92b3254](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/92b3254)
- - | 定期任务未加载时,显示空的时间轴并能上下滑动 | [ce38093](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/ce38093)
- 定期任务本地缓存和api赋值,未完成 | 定期任务本地缓存和api赋值,未完成 | [b22a366](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/b22a366)
- - | 定期任务骨架屏修改 | [8ff72dd](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/8ff72dd)
- - | 平车演示临时去掉项目快捷方式的toast提示 | [e0b2c23](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/e0b2c23)
- - | 手动展开日常任务 | [0a4a622](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/0a4a622)
- - | 提示信息显示bug及日常任务收缩问题 | [f2f06c5](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/f2f06c5)
- - | 插件bug解决 | [41257eb](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/41257eb)
- - | 收到消息修改任务状态 | [c378063](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/c378063)
- - | 日历无任务时添加小绿点,时间轴刻度无任务不显示时分 | [0f90868](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/0f90868)
- - | 日常任务html数据查验 | [880ce5c](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/880ce5c)
- - | 日常任务插件遍历时的key值修改 | [cd26285](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/cd26285)
- - | 日常任务插件面板高度修改 | [249f9e4](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/249f9e4)
- - | 时间轴上下滑动 | [4d0ae46](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/4d0ae46)
- - | 时间轴上下滚动数据加载bug修改 | [e82ede4](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/e82ede4)
- - | 时间轴插件 | [225d3cc](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/225d3cc)
- - | 时间轴无任务时时间刻度加载修改 | [4921672](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/4921672)
- - | 时间轴滚动位置修改 | [551da63](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/551da63)
- - | 时间轴骨架屏修改 | [ca78d02](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/ca78d02)
- - | 监听时间基本点 | [033fca0](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/033fca0)
- - | 角色显示状态修改 | [7d3b906](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/7d3b906)
- - | 角色栏修改 | [19228d6](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/19228d6)
- - | 解决时间轴报错 | [da1eece](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/da1eece)
- - | 设置时间轴自动滚动到当前位置 | [a3474f8](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/a3474f8)
- - | 跳转详情页返回路径修改 | [c5e17c0](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/c5e17c0)
- - | 骨架屏替换 | [e9fdd71](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/e9fdd71)


 ### 📝 文档
@ -281,19 +187,6 @@
 - | 组件文件夹新建 | 1421504
 - | 角色栏文字颜色修改 | 215c6b3
 - | 解决警告 | c932b09
- - | 1.时间轴筛选相同的时间替换数据 2.整理代码 | [e082ccb](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/e082ccb)
- - | 修改代码格式 | [14123d7](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/14123d7)
- - | 修改定期任务骨架屏高度 | [909a734](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/909a734)
- - | 小红点api缓存修改 | [e992343](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/e992343)
- - | 插件查询及展示 | [4dba770](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/4dba770)
- - | 整理代码 | [7a55315](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/7a55315)
- - | 日历的更改 | [7353ac8](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/7353ac8)
- - | 测试接口 | [215e074](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/215e074)
- - | 组件文件夹新建 | [22bfe7b](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/22bfe7b)
- - | 组件文件夹新建 | [17bb8c9](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/17bb8c9)
- - | 组件文件夹新建 | [1421504](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/1421504)
- - | 角色栏文字颜色修改 | [215c6b3](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/215c6b3)
- - | 解决警告 | [c932b09](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/c932b09)


 ### chore
@ -318,6 +211,4 @@
 - | style:index | 978f272
 - | !2 基础模板v1.1.0 | f5e61dd
 - | init | c0f1deb
- - | style:index | [978f272](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/978f272)
- - | !2 基础模板v1.1.0 | [f5e61dd](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/f5e61dd)
- - | init | [c0f1deb](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/c0f1deb)
+
--- a/src/App.vue
+++ b/src/App.vue
@ -46,7 +46,7 @@ export default {
          this.setUser(data);
          this.setToken(data.token);
        } else {
-          throw '登录失败';
+          this.$t.ui.showToast('返回数据异常');
        }
      } catch (error) {
        console.error('error: ', error);
--- a/src/components/ImageCode/ImageCode.vue
+++ b/src/components/ImageCode/ImageCode.vue
@ -0,0 +1,11 @@
+<template>
+  <u-image src="" mode=""></u-image>
+</template>
+
+<script>
+export default {
+  data() {
+    return { src: '' };
+  },
+};
+</script>
--- a/src/pages.json
+++ b/src/pages.json
@ -9,7 +9,7 @@
 		{
 			"path": "pages/project/project",
 			"style": {
-        "navigationStyle": "custom" ,
+				"navigationStyle": "custom",
 				"navigationBarTextStyle": "white"
 			}
 		},
@ -18,6 +18,12 @@
 			"style": {
 				"navigationBarTitleText": "测试"
 			}
+		},
+		{
+			"path": "pages/phone-bind/phone-bind",
+			"style": {
+				"navigationBarTitleText": "绑定手机号"
+			}
 		}
 	],
 	"globalStyle": {
--- a/src/pages/phone-bind/phone-bind.vue
+++ b/src/pages/phone-bind/phone-bind.vue
@ -0,0 +1,135 @@
+<template>
+  <view class="wrap">
+    <u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
+      <!-- 手机号 -->
+      <u-form-item :rightIconStyle="{ color: '#888', fontSize: '32rpx' }" label="手机号码" prop="phone" label-width="160">
+        <u-input placeholder="请输入手机号" v-model="model.phone" type="number"></u-input>
+      </u-form-item>
+
+      <u-form-item label="图形验证码" prop="code" label-width="160">
+        <u-input placeholder="请输入图形验证码" v-model="model.code" type="text"></u-input>
+        <ImageCode slot="right" />
+      </u-form-item>
+
+      <u-form-item label="验证码" prop="code" label-width="160">
+        <u-input placeholder="请输入短信验证码" v-model="model.code" type="text"></u-input>
+        <u-button slot="right" type="success" size="mini" @click="getCode">{{ codeTips }}</u-button>
+      </u-form-item>
+    </u-form>
+    <view class="agreement">
+      <u-checkbox v-model="check" @change="checkboxChange"></u-checkbox>
+      <view class="agreement-text"> 勾选代表同意uView的版权协议 </view>
+    </view>
+    <u-button @click="submit">提交</u-button>
+    <u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    let that = this;
+    return {
+      model: {
+        phone: '',
+        code: '',
+      },
+
+      rules: {
+        phone: [
+          {
+            required: true,
+            message: '请输入手机号',
+            trigger: ['change', 'blur'],
+          },
+          {
+            validator: (rule, value, callback) => {
+              // 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
+              return this.$u.test.mobile(value);
+            },
+            message: '手机号码不正确',
+            // 触发器可以同时用blur和change，二者之间用英文逗号隔开
+            trigger: ['change', 'blur'],
+          },
+        ],
+        code: [
+          {
+            required: true,
+            message: '请输入验证码',
+            trigger: ['change', 'blur'],
+          },
+          {
+            type: 'number',
+            message: '验证码只能为数字',
+            trigger: ['change', 'blur'],
+          },
+        ],
+      },
+      check: false,
+      codeTips: '',
+      errorType: ['message'],
+    };
+  },
+
+  onReady() {
+    this.$refs.uForm.setRules(this.rules);
+  },
+  methods: {
+    submit() {
+      this.$refs.uForm.validate(valid => {
+        if (valid) {
+          if (!this.model.agreement) return this.$u.toast('请勾选协议');
+          console.log('验证通过');
+        } else {
+          console.log('验证失败');
+        }
+      });
+    },
+
+    // 勾选版权协议
+    checkboxChange(e) {
+      this.model.agreement = e.value;
+    },
+
+    codeChange(text) {
+      this.codeTips = text;
+    },
+    // 获取验证码
+    getCode() {
+      if (this.$refs.uCode.canGetCode) {
+        // 模拟向后端请求验证码
+        uni.showLoading({
+          title: '正在获取验证码',
+          mask: true,
+        });
+        setTimeout(() => {
+          uni.hideLoading();
+          // 这里此提示会被this.start()方法中的提示覆盖
+          this.$u.toast('验证码已发送');
+          // 通知验证码组件内部开始倒计时
+          this.$refs.uCode.start();
+        }, 2000);
+      } else {
+        this.$u.toast('倒计时结束后再发送');
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.wrap {
+  padding: 30rpx;
+}
+
+.agreement {
+  display: flex;
+  align-items: center;
+  margin: 40rpx 0;
+
+  .agreement-text {
+    padding-left: 8rpx;
+    color: $u-tips-color;
+  }
+}
+</style>