修改

src/main/pc-space/src/components/SecurityPhone.vue

@@ -6,7 +6,15 @@
             <el-step title="完成"></el-step>
         </el-steps>
         <el-form :label-position="labelPosition" ref="form2" label-width="290px" :model="ruleForm" :rules="rules">
-            <el-form-item label="新手机号" prop="phone">
+            <el-form-item
+                label="新手机号"
+                prop="phone"
+                :rules="{
+                    pattern: /^1[3-9]\d{9}$/,
+                    message: '请输入正确的手机号',
+                    trigger: 'blur'
+                }"
+            >
                 <el-input style="width: 300px" v-model="ruleForm.phone" placeholder="请输入新的手机号码"></el-input>
             </el-form-item>
             <el-form-item label="验证码" prop="code">
@@ -27,7 +35,9 @@
 </template>
 <script>
 import { mapState } from 'vuex';
+import phone from '../mixins/phone';
 export default {
+    mixins: [phone],
     data() {
         return {
             labelPosition: 'right',
@@ -44,33 +54,24 @@ export default {
     },
     methods: {
         send() {
-            this.sendCode(this.ruleForm.phone);
+            this.sendMsg(this.ruleForm.phone);
         },
         phoneSend() {
-            // if (!/^1[3-9]\d{9}$/.test(this.ruleForm.phone)) {
-            //     this.$message.error('请输入正确手机号');
-            //     return;
-            // }
-            // this.$http
-            //     .get('/sms/verify', {
-            //         phone: this.ruleForm.phone,
-            //         code: this.ruleForm.code
-            //     })
-            //     .then(() => {
-            //         this.$http
-            //             .post('/user/changePhone', { phone: this.ruleForm.phone })
-            //             .then(() => {
-            //                 this.$message.warning('更改成功');
-            //                 this.$store.commit('updateUserInfo', null);
-            //             })
-            //             .catch(e => {
-            //                 this.$message.error(e.error);
-            //             });
-            //     })
-            //     .catch(e => {
-            //         this.$message.error(e.error);
-            //     });
-            this.$router.push('/securitysuccess');
+            this.verifyMsg(this.ruleForm.phone, this.ruleForm.code)
+                .then(() => {
+                    return this.$http.post('/user/bindPhone?phone=' + this.ruleForm.phone);
+                })
+                .then(() => {
+                    this.$message.warning('更改成功');
+                    setTimeout(() => {
+                        this.$router.push('/securitysuccess');
+                    }, 1000);
+                })
+                .catch(e => {
+                    if (e) {
+                        this.$message.warning(e.error);
+                    }
+                });
         },
         Jump() {
             this.$emit('Jump');
@@ -110,6 +111,9 @@ export default {
 /deep/ .el-step__title.is-wait {
     color: #939599;
 }
+/deep/ .el-form-item__error {
+    left: 175px;
+}
 .container {
     .btn1 {
         margin-left: 10px;

src/main/pc-space/src/components/TransactionPhone.vue

@@ -6,11 +6,11 @@
             <el-step title="完成"></el-step>
         </el-steps>
         <el-form :label-position="labelPosition" ref="form2" label-width="290px" :model="ruleForm" :rules="rules">
-            <el-form-item label="新交易密码" prop="pass">
+            <el-form-item label="新交易密码" prop="password">
                 <el-input
                     style="width: 300px"
                     type="password"
-                    v-model="ruleForm.pass"
+                    v-model="ruleForm.password"
                     placeholder="请输入新密码"
                     autocomplete="off"
                 ></el-input>
@@ -18,7 +18,7 @@
             <el-form-item label="确认新密码" prop="checkPass">
                 <el-input
                     style="width: 300px"
-                    type="newpassword"
+                    type="password"
                     v-model="ruleForm.checkPass"
                     placeholder="请再次输出新密码"
                     autocomplete="off"
@@ -41,14 +41,13 @@ export default {
             labelPosition: 'right',
             ruleForm: {
                 pass: '',
-                newpassword: ''
+                password: ''
             },
-            time: 0,
             rules: {
                 checkPass: [
                     {
                         validator: (rule, value, callback) => {
-                            if (value !== this.ruleForm.pass) {
+                            if (value !== this.ruleForm.password) {
                                 callback(new Error('两次密码输入不一致'));
                             } else {
                                 callback();
@@ -66,17 +65,12 @@ export default {
     },
     methods: {
         phoneSend() {
-            //         this.$http
-            //             .post('/user/changePhone', { phone: this.ruleForm.phone })
-            //             .then(() => {
-            //                 this.$message.warning('更改成功');
-            //                 this.$store.commit('updateUserInfo', null);
-            //             })
-            //             .catch(e => {
-            //                 this.$message.error(e.error);
-            //             });
-            //     })
-            this.$router.push('/transactionsuccess');
+            this.$http.post('/user/setTradeCode?tradeCode=' + this.ruleForm.password).then(() => {
+                this.$message.success('设置成功');
+                setTimeout(() => {
+                    this.$router.push('/transactionsuccess');
+                }, 1500);
+            });
         },
         Jump() {
             this.$emit('Jump');

src/main/pc-space/src/views/user/Security.vue

@@ -76,20 +76,18 @@ export default {
             this.sendMsg(this.ruleForm.phone);
         },
         codeSend() {
-            this.flag = false;
-            // this.$http
-            //     .get('/sms/verify', {
-            //         phone: this.ruleForm.phone,
-            //         code: this.ruleForm.code
-            //     })
-            //     .then(() => {
-            //         this.ruleForm.code = '';
-            //         this.ruleForm.phone = '';
-            //         this.flag = false;
-            //     })
-            //     .catch(e => {
-            //         this.$message.error(e.error);
-            //     });
+            this.$http
+                .get('/sms/verify', {
+                    phone: this.ruleForm.phone,
+                    code: this.ruleForm.code
+                })
+                .then(() => {
+                    this.ruleForm.code = '';
+                    this.flag = false;
+                })
+                .catch(e => {
+                    this.$message.error(e.error);
+                });
         },
         Jump() {
             this.flag = true;