From 93ffea2439ceef074918802c9911298e460736da Mon Sep 17 00:00:00 2001
From: wally <18603454788@163.com>
Date: Tue, 24 Aug 2021 22:41:28 +0800
Subject: [PATCH] =?UTF-8?q?feat(bind=20phone):=20=E5=9B=BE=E5=BD=A2?=
 =?UTF-8?q?=E9=AA=8C=E8=AF=81=E7=A0=81=EF=BC=9B=E7=9F=AD=E4=BF=A1=E9=AA=8C?=
 =?UTF-8?q?=E8=AF=81=E7=A0=81=EF=BC=9B=E7=BB=91=E5=AE=9A=E6=89=8B=E6=9C=BA?=
 =?UTF-8?q?=E5=8F=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                           |  54 +-------
 src/App.vue                            |  15 ++-
 src/apis/tall.js                       |   7 +
 src/components/ImageCode/ImageCode.vue |  27 +++-
 src/components/Projects/Projects.vue   | 172 +++----------------------
 src/pages/phone-bind/phone-bind.vue    | 123 +++++++++++++-----
 src/store/user/actions.js              |   8 +-
 src/utils/storage.js                   |   8 +-
 8 files changed, 166 insertions(+), 248 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cc1b631..37cc466 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -42,7 +42,9 @@
  - | 模拟接口测试 | 69e7931
  - | 添加子任务插件 子项目插件 | 7bda7e2
  - | 添加时间轴上下滚动 | 2b81bbc
+ - | 添加项目排序 | a0b491b
  - | 点击日历日期查询项目列表 | c458385
+ - | 绑定手机号 | 52e0352
  - | 缓存修改 | 63e1f0d
  - | 角色栏实现 | 94cd671
  - | 设置小红点 | 9316bcb
@@ -136,57 +138,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赋值,未完成 | [5a10856](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/5a10856)
- 定期任务本地缓存和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)
 
 
 ### 📝 文档
@@ -262,3 +213,4 @@
  - | style:index | 978f272
  - | !2 基础模板v1.1.0 | f5e61dd
  - | init | c0f1deb
+
diff --git a/src/App.vue b/src/App.vue
index bbee67e..b9e9547 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,7 +18,8 @@ export default {
         // 参数里没有u (userId)提示
         this.$t.ui.showToast('缺少用户信息参数');
       } else {
-        await this.getToken(options.query.u);
+        const data = await this.getToken(options.query.u);
+        this.noPhone(data.phone);
       }
     }
     // FIXME: 这里重复书写的
@@ -39,12 +40,14 @@ export default {
     ...mapActions('socket', ['initSocket']),
     ...mapMutations('user', ['setToken', 'setUser']),
 
+    // 登录
     async signin() {
       try {
         const data = await this.$u.api.signin();
         if (data && data.token) {
           this.setUser(data);
           this.setToken(data.token);
+          this.noPhone(data.phone);
         } else {
           this.$t.ui.showToast('返回数据异常');
         }
@@ -53,6 +56,16 @@ export default {
         this.$t.ui.showToast(error || '登录失败');
       }
     },
+
+    /**
+     * 没有手机号 跳转绑定手机号的界面
+     * @param {string} phone
+     */
+    async noPhone(phone) {
+      if (!phone) {
+        this.$u.route('/pages/phone-bind/phone-bind');
+      }
+    },
   },
 };
 </script>
diff --git a/src/apis/tall.js b/src/apis/tall.js
index 7ab476b..d21b334 100644
--- a/src/apis/tall.js
+++ b/src/apis/tall.js
@@ -22,8 +22,15 @@ const install = (Vue, vm) => {
   vm.$u.api = { ...vm.$u.api } || {};
   // 登录
   vm.$u.api.signin = params => login.index(params);
+  // 获取图片验证码
+  vm.$u.api.getImageCode = () => vm.$u.get(`${tall}/users/code`);
+  // 获取短信验证码
+  vm.$u.api.getSmsCode = params => vm.$u.get(`${tall}/users/smscode`, params);
   // 根据userId获取token
   vm.$u.api.getToken = userId => vm.$u.get(`${tall}/users/userId`, { userId });
+  // 绑定手机号
+  vm.$u.api.phoneBind = (phone, smsCode) => vm.$u.http.post(`${tall}/users/binding`, { phone, smsCode });
+
   // 获取项目列表
   vm.$u.api.getProjects = (startTime, endTime) => vm.$u.post(`${tall}/project/query`, { startTime, endTime });
   // 查询日历是否有小红点
diff --git a/src/components/ImageCode/ImageCode.vue b/src/components/ImageCode/ImageCode.vue
index 3d3822c..53567ab 100644
--- a/src/components/ImageCode/ImageCode.vue
+++ b/src/components/ImageCode/ImageCode.vue
@@ -1,5 +1,6 @@
 <template>
-  <u-image src="" mode=""></u-image>
+  <!-- TODO: 设置默认图片 -->
+  <u-image :src="src" mode="aspectFit" class="image" @click="getCode"></u-image>
 </template>
 
 <script>
@@ -7,5 +8,29 @@ export default {
   data() {
     return { src: '' };
   },
+
+  created() {
+    this.getCode();
+  },
+
+  methods: {
+    async getCode() {
+      try {
+        const data = await this.$u.api.getImageCode();
+        const { imageBase64, verificationCodeId } = data;
+        this.src = imageBase64;
+        this.$emit('on-code', verificationCodeId);
+      } catch (error) {
+        console.error('error: ', error);
+      }
+    },
+  },
 };
 </script>
+
+<style lang="scss" scoped>
+.image {
+  width: 100px !important;
+  height: 35px !important;
+}
+</style>
diff --git a/src/components/Projects/Projects.vue b/src/components/Projects/Projects.vue
index 1d2d651..6338842 100644
--- a/src/components/Projects/Projects.vue
+++ b/src/components/Projects/Projects.vue
@@ -1,88 +1,39 @@
 <template>
   <view class="py-3 mt-4 bg-white u-font-15">
-    <draggable
-      v-model="projectLists"
-      chosenClass="active"
-      animation="500"
-      @chang="change"
-      @start="start"
-      @end="end"
-      :move="move"
-      handle=".mover"
-    >
-      <view v-for="(project, index) in projectLists" :key="index">
-        <!-- 有子项目 -->
-        <view class="flex items-center justify-between p-3" :class="project.showBorder ? border : ''">
-          <u-icon class="mover" @click="openMenu(project)" size="48" name="https://www.tall.wiki/staticrec/drag.svg"></u-icon>
-
-          <view class="flex-1 px-3 divide-y divide-light-blue-400" @click="openProject(project)">
-            <view class="flex items-center mb-1">
-              <view class="mr-2">{{ project.name }}+{{ project.showBorder }}</view>
-              <!-- 状态 TODO:-->
-              <view class="px-2 text-xs text-green-400 bg-green-100 rounded-full">进行中</view>
-            </view>
+    <view v-for="(project, index) in projects" :key="index">
+      <!-- 有子项目 -->
+      <view class="flex items-center justify-between p-3">
+        <view class="text-blue-400 border border-blue-200 rounded-full order bg-blue-50">
+          {{ index + 1 }}
+        </view>
 
-            <view class="flex items-center text-xs text-gray-400">
-              <view class="pr-2">{{ $moment(+project.startTime).format('MM-DD HH:mm') }}</view>
-              至
-              <view class="pl-2"> {{ $moment(+project.endTime).format('MM-DD HH:mm') }}</view>
-            </view>
+        <view class="flex-1 px-3">
+          <view class="flex items-center mb-1">
+            <view class="mr-2">{{ project.name }}</view>
+            <!-- 状态 TODO:-->
+            <view class="px-2 text-xs text-green-400 bg-green-100 rounded-full">进行中</view>
           </view>
 
-          <!-- 箭头 -->
-          <view v-if="project.subProject && project.subProject.length">
-            <u-icon name="arrow-up" class="text-gray-400" size="14px" v-if="show" @click="openSubProject"></u-icon>
-            <u-icon name="arrow-down" class="text-gray-400" size="14px" v-else @click="openSubProject"></u-icon>
+          <view class="flex items-center text-xs text-gray-400">
+            <view class="pr-2">{{ $moment(+project.startTime).format('MM-DD HH:mm') }}</view>
+            至
+            <view class="pl-2"> {{ $moment(+project.endTime).format('MM-DD HH:mm') }}</view>
           </view>
-          <u-icon v-else name="arrow-right" class="text-gray-400" size="14px" @click="openProject(project)"></u-icon>
         </view>
-        <!-- 有子项目 -->
-        <view v-if="show" class="ml-8">
-          <view v-for="subItem in project.subProject" :key="subItem.id">
-            <view class="flex items-center justify-between p-3">
-              <u-icon class="mover" @click="openMenu(subItem)" size="48" name="https://www.tall.wiki/staticrec/drag.svg"></u-icon>
-
-              <view class="flex-1 px-3" @click="openProject(subItem)">
-                <view class="flex items-center">
-                  <view class="mr-2">{{ subItem.name }}</view>
-                  <!-- 状态 TODO:-->
-                  <view class="px-2 text-xs text-green-400 bg-green-100 rounded-full">进行中</view>
-                </view>
-              </view>
 
-              <!-- 箭头 -->
-              <u-icon name="arrow-right" class="text-gray-400" size="14px" @click="openProject(subItem)"></u-icon>
-            </view>
-          </view>
-        </view>
+        <!-- 箭头 -->
+        <u-icon name="arrow-right" class="text-gray-400" size="14px" @click="openProject(project)"></u-icon>
       </view>
-    </draggable>
-
-    <!-- 项目操作面板 -->
-    <u-action-sheet :tips="tips" :list="list" v-model="showMenu"></u-action-sheet>
+    </view>
   </view>
 </template>
 
 <script>
-import draggable from 'vuedraggable';
 import { mapGetters, mapState } from 'vuex';
 
 export default {
-  components: { draggable },
   data() {
-    return {
-      showMenu: false,
-      tips: {
-        text: '',
-        color: '#909399',
-        fontSize: 28,
-      },
-      list: [{ text: '复制' }, { text: '编辑' }, { text: '删除' }, { text: '置顶' }],
-      projectLists: [],
-      show: false,
-      border: 'border border-blue-500 shadow rounded-md',
-      showBorder: false,
-    };
+    return {};
   },
 
   computed: {
@@ -90,79 +41,7 @@ export default {
     ...mapGetters('user', ['userId']),
   },
 
-  watch: {
-    projects(val) {
-      if (val) {
-        this.projectLists = [...this.projects];
-
-        const arr = [
-          {
-            endTime: '1659680363000',
-            id: '1420652719055835520',
-            name: '测试子项目',
-            startTime: '1596608363000',
-            status: 1,
-            url: 'https://www.tall.wiki/gateway/qcp/v3.0',
-          },
-        ];
-        this.projectLists[0].subProject = [...arr];
-        console.log('this.projectLists[0]: ', this.projectLists[0]);
-      }
-    },
-  },
-
-  mounted() {
-    this.projectLists = [...this.projects];
-    const arr = [
-      {
-        endTime: '1659680363000',
-        id: '1420652719055835520',
-        name: '测试子项目',
-        startTime: '1596608363000',
-        status: 1,
-        url: 'https://www.tall.wiki/gateway/qcp/v3.0',
-      },
-    ];
-    this.projectLists[0].subProject = [...arr];
-  },
-
   methods: {
-    change(event) {
-      console.log('change', event);
-    },
-    start(event) {
-      console.log('开始', event);
-    },
-    end(event) {
-      console.log('结束', event, this.groups);
-      this.showBorder = false;
-    },
-    move(event, orgin) {
-      console.log('move', event, orgin);
-      // 移动的位置
-      console.log('clientX', orgin.clientX);
-      console.log('clientY', orgin.clientY);
-      if (orgin.clientX > 60) {
-        // this.showBorder = true;
-        console.log('this.showBorder: ', this.showBorder);
-        this.projectLists[event.draggedContext.futureIndex].showBorder = true;
-        // this.projectLists[event.draggedContext.futureIndex].subProject = this.projectLists[event.relatedContext.index]
-      } else {
-        // this.showBorder = false;
-        this.projectLists[event.draggedContext.futureIndex].showBorder = false;
-      }
-
-      // 移动前的位置
-      console.log('移动前', event.draggedContext);
-      // 移动后的位置
-      console.log('移动后', event.relatedContext);
-      // 返回新数组
-      // [this.projectLists[event.draggedContext.index], this.projectLists[event.relatedContext.index]] = [
-      //   this.projectLists[event.relatedContext.index],
-      //   this.projectLists[event.draggedContext.index],
-      // ];
-    },
-
     /**
      * 打开项目
      * @param {object} project 所点击的项目的信息
@@ -177,19 +56,6 @@ export default {
         url: encodeURIComponent(url),
       });
     },
-
-    /**
-     * 弹出项目操作面板
-     */
-    openMenu(project) {
-      this.showMenu = true;
-      this.tips.text = project.name;
-    },
-
-    // 展开子项目
-    openSubProject() {
-      this.show = !this.show;
-    },
   },
 };
 </script>
diff --git a/src/pages/phone-bind/phone-bind.vue b/src/pages/phone-bind/phone-bind.vue
index 7b1d23a..2464f36 100644
--- a/src/pages/phone-bind/phone-bind.vue
+++ b/src/pages/phone-bind/phone-bind.vue
@@ -6,34 +6,38 @@
         <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 label="图形验证码" prop="imageValue" label-width="160">
+        <u-input placeholder="输入计算结果" v-model="model.imageValue" type="number"></u-input>
+        <ImageCode slot="right" @on-code="codeId = $event" />
       </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-input placeholder="请输入短信验证码" v-model="model.code" type="number"></u-input>
+        <u-button slot="right" type="primary" size="mini" @click="getCode">{{ codeTips }}</u-button>
       </u-form-item>
     </u-form>
-    <view class="agreement">
+    <!-- <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> -->
+    <u-button @click="submit" class="mt-8" type="primary">提交</u-button>
+
+    <u-verification-code :seconds="seconds" ref="uCode" @change="codeChange"></u-verification-code>
+
+    <u-top-tips ref="uTips"></u-top-tips>
   </view>
 </template>
 
 <script>
 export default {
   data() {
-    let that = this;
     return {
       model: {
-        phone: '',
-        code: '',
+        phone: '18603454788', // 手机号
+        imageValue: '', // 图形验证码计算结果
+        code: '', // 短信验证码
       },
+      codeId: '', // 图形验证码的id
 
       rules: {
         phone: [
@@ -43,7 +47,7 @@ export default {
             trigger: ['change', 'blur'],
           },
           {
-            validator: (rule, value, callback) => {
+            validator: (rule, value) => {
               // 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
               return this.$u.test.mobile(value);
             },
@@ -65,7 +69,7 @@ export default {
           },
         ],
       },
-      check: false,
+      seconds: 120, // 验证码倒计时时长
       codeTips: '',
       errorType: ['message'],
     };
@@ -76,43 +80,96 @@ export default {
   },
   methods: {
     submit() {
-      this.$refs.uForm.validate(valid => {
+      this.$refs.uForm.validate(async valid => {
         if (valid) {
-          if (!this.model.agreement) return this.$u.toast('请勾选协议');
-          console.log('验证通过');
+          try {
+            const { phone, code } = this.model;
+            const data = await this.$u.api.phoneBind(phone, code);
+            console.log('data: ', data);
+            this.$refs.uTips.show({
+              title: '手机号绑定成功, 即将跳转上一页',
+              type: 'success',
+              duration: '3000',
+            });
+            setTimeout(() => uni.navigateBack(), 2000);
+          } catch (error) {
+            this.$refs.uTips.show({
+              title: error.msg || '手机号绑定失败',
+              type: 'error',
+              duration: '3000',
+            });
+          }
         } else {
           console.log('验证失败');
         }
       });
     },
 
-    // 勾选版权协议
-    checkboxChange(e) {
-      this.model.agreement = e.value;
-    },
-
     codeChange(text) {
       this.codeTips = text;
     },
     // 获取验证码
-    getCode() {
+    async getCode() {
       if (this.$refs.uCode.canGetCode) {
-        // 模拟向后端请求验证码
-        uni.showLoading({
-          title: '正在获取验证码',
-          mask: true,
-        });
-        setTimeout(() => {
-          uni.hideLoading();
-          // 这里此提示会被this.start()方法中的提示覆盖
-          this.$u.toast('验证码已发送');
+        try {
+          if (!this.validateCodeParams()) return;
+          const params = {
+            phone: this.model.phone,
+            verificationCodeId: this.codeId,
+            verificationCodeValue: this.model.imageValue,
+          };
+          const data = await this.$u.api.getSmsCode(params);
+          this.seconds = data.expiredInSeconds;
+          this.$refs.uTips.show({
+            title: '短信发送成功, 请查收',
+            type: 'success',
+            duration: '3000',
+          });
           // 通知验证码组件内部开始倒计时
           this.$refs.uCode.start();
-        }, 2000);
+        } catch (error) {
+          console.error('error: ', error);
+          this.$refs.uTips.show({
+            title: error.msg || '发送失败',
+            type: 'error',
+            duration: '3000',
+          });
+        }
       } else {
         this.$u.toast('倒计时结束后再发送');
       }
     },
+
+    // 验证发送短信验证码的参数
+    validateCodeParams() {
+      if (!this.$u.test.mobile(this.model.phone)) {
+        this.$refs.uTips.show({
+          title: '手机号输入不正确',
+          type: 'error',
+          duration: '3000',
+        });
+        return false;
+      }
+
+      if (!this.codeId) {
+        this.$refs.uTips.show({
+          title: '点击刷新图形验证码重试',
+          type: 'error',
+          duration: '3000',
+        });
+        return false;
+      }
+
+      if (!this.model.imageValue && this.model.imageValue !== 0) {
+        this.$refs.uTips.show({
+          title: '请输入图形验证码',
+          type: 'error',
+          duration: '3000',
+        });
+        return false;
+      }
+      return true;
+    },
   },
 };
 </script>
diff --git a/src/store/user/actions.js b/src/store/user/actions.js
index 6a3acee..cdb2ca0 100644
--- a/src/store/user/actions.js
+++ b/src/store/user/actions.js
@@ -6,10 +6,10 @@ const actions = {
    */
   async getToken({ commit }, userId) {
     try {
-      const res = await uni.$u.api.getToken(userId);
-      commit('setToken', res.token);
-      commit('setUser', res);
-      return res;
+      const data = await uni.$u.api.getToken(userId);
+      commit('setToken', data.token);
+      commit('setUser', data);
+      return data;
     } catch (error) {
       uni.$t.ui.showToast(error.msg || '获取个人信息失败');
     }
diff --git a/src/utils/storage.js b/src/utils/storage.js
index 4ab40e6..ea672d6 100644
--- a/src/utils/storage.js
+++ b/src/utils/storage.js
@@ -101,14 +101,12 @@ export default {
 
   // 检测local Storage容量 超出容量清空数据缓存
   checkCapacity() {
-    if (!window.localStorage) {
-      console.log('浏览器不支持localStorage ');
-      return;
-    }
+    /* #ifdef H5 */
     const capacity = JSON.stringify(localStorage).length;
-    let max = 1024 * 1024 * 5;
+    let max = 1024 * 1024 * 4;
     if (capacity >= max) {
       uni.$t.storage.clearStorage();
     }
+    /* #endif */
   },
 };