修改密码

src/main/nine-space/src/views/account/ChangePhone.vue

@@ -1,18 +1,70 @@
 <template>
   <div class="login">
     <div class="tabs">
-      <div class="tab active">修改手机号</div>
+      <div class="tab active">{{ step ? "绑定新号码" : "修改手机号" }}</div>
       <div class="text">修改手机号即同时修改登录账户名称</div>
     </div>
 
-    <van-form ref="form" @submit="submit">
+    <van-form v-if="step === 0" @submit="next">
+      <van-cell
+        class="phone"
+        :title="phone"
+        label="修改手机号需先验证当前手机号"
+      />
+      <van-field
+        type="digit"
+        name="验证码"
+        placeholder="请输入验证码"
+        v-model="form.code"
+        :maxlength="4"
+        :rules="[{ required: true, message: '请输入验证码' }]"
+      >
+        <template #left-icon>
+          <img
+            :src="require('../../assets/svgs/login_icon_code.svg')"
+            class="icon"
+          />
+        </template>
+        <template #button>
+          <van-button
+            @click="sendBefPhone"
+            class="sub-code"
+            size="small"
+            plain
+            type="primary"
+            :disabled="isSend"
+          >
+            {{ isSend ? `已发送(${sendNum})S` : "发送验证码" }}
+          </van-button>
+        </template>
+      </van-field>
+
+      <div class="button">
+        <van-button
+          round
+          block
+          native-type="submit"
+          color="linear-gradient(to right, #FDFB60, #FF8F3E)"
+          class="sure"
+          >下一步</van-button
+        >
+      </div>
+    </van-form>
+
+    <van-form v-else ref="form" @submit="submit">
       <van-field
         type="tel"
         name="用户名"
         placeholder="请输入手机号"
         v-model="form.phone"
         :maxlength="11"
-        :rules="[{ required: true, message: '请输入手机号' }]"
+        :rules="[
+          { required: true, message: '请输入手机号码' },
+          {
+            pattern: phonePattern,
+            message: '手机号码格式错误',
+          },
+        ]"
       >
         <template #left-icon>
           <img
@@ -37,9 +89,16 @@
           />
         </template>
         <template #button>
-          <van-button class="sub-code" size="small" plain type="primary"
-            >发送验证码</van-button
+          <van-button
+            @click="sendPhone"
+            class="sub-code"
+            size="small"
+            plain
+            type="primary"
+            :disabled="isSend"
           >
+            {{ isSend ? `已发送(${sendNum})S` : "发送验证码" }}
+          </van-button>
         </template>
       </van-field>
 
@@ -50,15 +109,7 @@
           native-type="submit"
           color="linear-gradient(to right, #FDFB60, #FF8F3E)"
           class="sure"
-          >找回密码</van-button
-        >
-        <van-button
-          class="del"
-          round
-          block
-          plain
-          @click="$router.replace('/login')"
-          >想起密码，立即登陆</van-button
+          >确定修改</van-button
         >
       </div>
     </van-form>
@@ -66,21 +117,61 @@
 </template>
 
 <script>
+import { mapState } from "vuex";
+import phone from "../../mixins/phone";
 export default {
+  mixins: [phone],
   data() {
     return {
-      active: "phone",
+      step: 0,
       form: {
         phone: "",
-        password: "",
-        password2: "",
         code: "",
       },
     };
   },
+  computed: {
+    ...mapState(["userInfo"]),
+    phone() {
+      let phone = this.userInfo.phone || "";
+      return phone.substr(0, 3) + "****" + phone.substr(7, 6);
+    },
+  },
   methods: {
+    sendBefPhone() {
+      this.sendMsg(this.userInfo.phone);
+    },
+    sendPhone() {
+      this.$refs.form.validate("手机号码").then(() => {
+        this.sendMsg(this.form.phone);
+      });
+    },
     submit() {
-      console.log("63772");
+      this.$toast.loading({
+        message: "加载中...",
+        forbidClick: true,
+      });
+      this.verifyMsg(this.form.phone, this.form.code)
+        .then(() => {
+          return this.$http.post("/user/bindPhone?phone=" + this.form.phone);
+        })
+        .then(() => {
+          this.$toast.success("修改成功");
+          setTimeout(() => {
+            this.$router.back();
+          }, 1500);
+        })
+        .catch((e) => {
+          if (e) {
+            this.$toast(e.error);
+          }
+        });
+    },
+    next() {
+      this.verifyMsg(this.userInfo.phone, this.form.code).then((res) => {
+        this.setTime(0);
+        this.step = 1;
+      });
     },
   },
 };
@@ -92,7 +183,7 @@ export default {
 }
 
 .van-form {
-  padding: 0 32px;
+  padding: 0 30px;
 }
 
 .tabs {
@@ -140,7 +231,7 @@ export default {
   }
 }
 .button {
-  margin-top: 60px;
+  margin-top: 120px;
 
   .del {
     margin-top: 20px;
@@ -160,4 +251,15 @@ export default {
   padding-right: 0;
   border-width: 0;
 }
+
+/deep/.phone {
+  .van-cell__title > span {
+    font-size: 20px;
+    font-weight: bold;
+  }
+
+  .van-cell__label {
+    color: #939599;
+  }
+}
 </style>

src/main/nine-space/src/views/account/TradingPassword.vue

@@ -0,0 +1,236 @@
+<template>
+  <div class="login">
+    <div class="tabs">
+      <div class="tab active">修改交易密码</div>
+      <div class="text">修改验证当前账号的手机号码才可以修改</div>
+    </div>
+
+    <van-form v-if="step === 0" @submit="next">
+      <van-cell
+        class="phone"
+        :title="phone"
+        label="修改手机号需先验证当前手机号"
+      />
+      <van-field
+        type="digit"
+        name="验证码"
+        placeholder="请输入验证码"
+        v-model="form.code"
+        :maxlength="4"
+        :rules="[{ required: true, message: '请输入验证码' }]"
+      >
+        <template #left-icon>
+          <img
+            :src="require('../../assets/svgs/login_icon_code.svg')"
+            class="icon"
+          />
+        </template>
+        <template #button>
+          <van-button
+            @click="sendBefPhone"
+            class="sub-code"
+            size="small"
+            plain
+            type="primary"
+            :disabled="isSend"
+          >
+            {{ isSend ? `已发送(${sendNum})S` : "发送验证码" }}
+          </van-button>
+        </template>
+      </van-field>
+
+      <div class="button">
+        <van-button
+          round
+          block
+          native-type="submit"
+          color="linear-gradient(to right, #FDFB60, #FF8F3E)"
+          class="sure"
+          >下一步</van-button
+        >
+      </div>
+    </van-form>
+
+    <van-form v-else ref="form" @submit="submit">
+      <van-password-input
+        :value="value"
+        :focused="showKeyboard"
+        @focus="showKeyboard = true"
+      />
+      <!-- 数字键盘 -->
+      <van-number-keyboard
+        v-model="value"
+        :show="showKeyboard"
+        @blur="showKeyboard = false"
+      />
+      <div class="button">
+        <van-button
+          round
+          block
+          native-type="submit"
+          color="linear-gradient(to right, #FDFB60, #FF8F3E)"
+          class="sure"
+          >确定修改</van-button
+        >
+      </div>
+    </van-form>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+import phone from "../../mixins/phone";
+import { ref } from "vue";
+export default {
+  mixins: [phone],
+  data() {
+    return {
+      step: 0,
+      form: {
+        phone: "",
+        code: "",
+      },
+    };
+  },
+  setup() {
+    const value = ref("123");
+    const showKeyboard = ref(true);
+
+    return {
+      value,
+      showKeyboard,
+    };
+  },
+  computed: {
+    ...mapState(["userInfo"]),
+    phone() {
+      let phone = this.userInfo.phone || "";
+      return phone.substr(0, 3) + "****" + phone.substr(7, 6);
+    },
+  },
+  methods: {
+    sendBefPhone() {
+      this.sendMsg(this.userInfo.phone);
+    },
+    sendPhone() {
+      this.$refs.form.validate("手机号码").then(() => {
+        this.sendMsg(this.form.phone);
+      });
+    },
+    submit() {
+      this.$toast.loading({
+        message: "加载中...",
+        forbidClick: true,
+      });
+      this.verifyMsg(this.form.phone, this.form.code)
+        .then(() => {
+          return this.$http.post("/user/bindPhone?phone=" + this.form.phone);
+        })
+        .then(() => {
+          this.$toast.success("修改成功");
+          setTimeout(() => {
+            this.$router.back();
+          }, 1500);
+        })
+        .catch((e) => {
+          if (e) {
+            this.$toast(e.error);
+          }
+        });
+    },
+    next() {
+      this.verifyMsg(this.userInfo.phone, this.form.code).then((res) => {
+        this.setTime(0);
+        this.step = 1;
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.login {
+  padding: 40px 16px 100px;
+}
+
+.van-form {
+  padding: 0 30px;
+}
+
+.tabs {
+  .tab {
+    font-size: 18px;
+    color: #c8c9cc;
+    line-height: 25px;
+
+    &.active {
+      font-size: 24px;
+      font-weight: bold;
+      color: #ffffff;
+      line-height: 33px;
+    }
+  }
+
+  .text {
+    font-size: 12px;
+    color: #939599;
+    line-height: 22px;
+    margin-top: 4px;
+  }
+}
+
+.icon {
+  display: block;
+  margin-top: 12px;
+}
+/deep/ .van-form {
+  margin-top: 28px;
+  .van-cell {
+    padding: 0px 0;
+
+    .van-field__left-icon {
+      margin-right: 8px;
+    }
+  }
+
+  .van-cell + .van-cell {
+    margin-top: 20px;
+  }
+  .van-field__body {
+    height: 44px;
+    align-items: center;
+  }
+}
+.button {
+  margin-top: 120px;
+
+  .del {
+    margin-top: 20px;
+    border-color: #ffffff;
+  }
+
+  .sure {
+    color: @bg !important;
+  }
+
+  .van-button {
+    font-weight: bold;
+  }
+}
+
+.sub-code {
+  padding-right: 0;
+  border-width: 0;
+}
+
+/deep/.phone {
+  .van-cell__title > span {
+    font-size: 20px;
+    font-weight: bold;
+  }
+
+  .van-cell__label {
+    color: #939599;
+  }
+}
+</style>