账号安全

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

@@ -45,30 +45,30 @@ export default {
             this.sendCode(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('更改成功');
-                            localStorage.removeItem('webToken');
-                            this.$store.commit('updateUserInfo', null);
-                        })
-                        .catch(e => {
-                            this.$message.error(e.error);
-                        });
-                })
-                .catch(e => {
-                    this.$message.error(e.error);
-                });
+            // 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');
         },
         Jump() {
             this.$emit('Jump');

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

@@ -0,0 +1,136 @@
+<template>
+    <div class="container">
+        <el-steps :space="180" :active="2" align-center>
+            <el-step title="验证当前手机号"></el-step>
+            <el-step title="绑定新手机号"></el-step>
+            <el-step title="完成"></el-step>
+        </el-steps>
+        <el-form :label-position="labelPosition" ref="form2" label-width="340px" :model="ruleForm" :rules="rules">
+            <el-form-item label="新手机号" prop="phone">
+                <el-input style="width: 300px" v-model="ruleForm.phone" placeholder="请输入新的手机号码"></el-input>
+            </el-form-item>
+            <el-form-item label="验证码" prop="code">
+                <el-input style="width: 300px" v-model="ruleForm.code" placeholder="请输入4位验证码">
+                    <span @click="send" style="color: #00ffcb; cursor: pointer; font-size: 13px" slot="suffix">{{
+                        time === 0 ? '发送验证码' : `重新发送${time}s`
+                    }}</span>
+                </el-input>
+            </el-form-item>
+        </el-form>
+        <div class="btn">
+            <el-button type="primary" @click="phoneSend">确认</el-button>
+            <div class="btn2" @click="Jump">返回</div>
+        </div>
+    </div>
+</template>
+<script>
+import { mapState } from 'vuex';
+export default {
+    data() {
+        return {
+            labelPosition: 'right',
+            ruleForm: {
+                phone: '',
+                code: ''
+            },
+            time: 0,
+            rules: {}
+        };
+    },
+    computed: {
+        ...mapState(['userInfo'])
+    },
+    methods: {
+        send() {
+            this.sendCode(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('/transactionsuccess');
+        },
+        Jump() {
+            this.$emit('Jump');
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+/deep/ .el-steps {
+    margin-left: 385px;
+}
+/deep/.el-step:nth-child(1) {
+    .el-step__icon {
+        background: linear-gradient(143deg, #00ffcb 0%, #006eff 100%, #006eff 100%);
+        color: #ffffff;
+        border: 0;
+    }
+}
+/deep/.el-step:nth-child(2) {
+    .el-step__icon {
+        background: linear-gradient(143deg, #00ffcb 0%, #006eff 100%, #006eff 100%) !important;
+        color: #ffffff;
+        border: 0;
+    }
+}
+/deep/.el-step:nth-child(3) {
+    .el-step__icon {
+        background: #c8c9cc;
+        color: #ffffff;
+        border: 0;
+    }
+}
+/deep/ .el-step__title.is-process {
+    font-weight: 400;
+    color: #939599;
+}
+/deep/ .el-step__title.is-wait {
+    color: #939599;
+}
+.container {
+    .btn {
+        margin: 80px 0 0 110px;
+        display: flex;
+        justify-content: center;
+        .btn2 {
+            width: 130px;
+            height: 36px;
+            background: #c4c7cc;
+            border-radius: 4px;
+            cursor: pointer;
+            color: #ffffff;
+            font-size: 13px;
+            text-align: center;
+            line-height: 36px;
+            margin-left: 20px;
+        }
+    }
+    /deep/ .el-button {
+        width: 130px;
+        height: 36px;
+        background: linear-gradient(133deg, #00ffcb 0%, #006eff 100%);
+        border-radius: 4px;
+    }
+}
+</style>

src/main/pc-space/src/router/index.js

@@ -103,7 +103,39 @@ const routes = [
                 name: 'security',
                 component: () => import('../views/user/Security.vue'),
                 meta: {
-                    title: '账户与安全'
+                    title: '修改登录账号'
+                }
+            },
+            {
+                path: '/securitysuccess',
+                name: 'securitysuccess',
+                component: () => import('../views/user/SecuritySuccess.vue'),
+                meta: {
+                    title: '修改登录账号'
+                }
+            },
+            {
+                path: '/transaction',
+                name: 'transaction',
+                component: () => import('../views/user/Transaction.vue'),
+                meta: {
+                    title: '修改交易密码'
+                }
+            },
+            {
+                path: '/transactionsuccess',
+                name: 'transactionsuccess',
+                component: () => import('../views/user/TransactionSuccess.vue'),
+                meta: {
+                    title: '修改交易密码'
+                }
+            },
+            {
+                path: '/modifypad',
+                name: 'modifypad',
+                component: () => import('../views/user/Modifypad.vue'),
+                meta: {
+                    title: '修改密码'
                 }
             },
             {

src/main/pc-space/src/views/Index.vue

@@ -10,7 +10,11 @@
                     this.$route.name !== 'security' &&
                     this.$route.name !== 'authentication' &&
                     this.$route.name !== 'userauthentication' &&
-                    this.$route.name !== 'enterpriseauthentication'
+                    this.$route.name !== 'enterpriseauthentication' &&
+                    this.$route.name !== 'transactionsuccess' &&
+                    this.$route.name !== 'transaction' &&
+                    this.$route.name !== 'securitysuccess' &&
+                    this.$route.name !== 'modifypad'
                 "
             >
                 <div class="footer center-content">

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

@@ -23,7 +23,7 @@
                 </div>
                 <div class="text4">修改</div>
             </div>
-            <div class="box">
+            <!-- <div class="box">
                 <div class="text">
                     <div class="text1">
                         <span class="el-icon-document"></span>
@@ -34,7 +34,7 @@
                     </div>
                 </div>
                 <div class="text4">修改</div>
-            </div>
+            </div> -->
             <div class="box">
                 <div class="text">
                     <div class="text1">
@@ -65,7 +65,7 @@
                     <div class="text2">登录密码</div>
                     <div class="text3">********</div>
                 </div>
-                <div class="text4">修改</div>
+                <div class="text4" @click="all('modifypad')">修改</div>
             </div>
             <div class="box">
                 <div class="text">
@@ -75,7 +75,7 @@
                     <div class="text2">交易密码</div>
                     <div class="text3">付款时用来认证身份信息</div>
                 </div>
-                <div class="text4">修改</div>
+                <div class="text4" @click="all('/transaction')">修改</div>
             </div>
             <div class="border"></div>
             <div class="name">认证信息</div>
@@ -103,7 +103,7 @@ export default {
     computed: {
         ...mapState(['userInfo']),
         Phone() {
-            return this.userInfo.phone.slice(0, 2) + ' ******* ' + this.userInfo.phone.slice(9, 11);
+            return this.userInfo.phone.slice(0, 3) + ' **** ' + this.userInfo.phone.slice(7, 11);
         },
         type() {
             return this.userInfo.authorities.find(item => {

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

@@ -0,0 +1,216 @@
+<template>
+    <div class="container center-content">
+        <div class="title">账户与安全</div>
+        <div class="box">
+            <div class="name">
+                <div class="name1">修改登录密码</div>
+                <div class="name2">修改密码后立即生效，下次登录请使用新密码</div>
+            </div>
+            <div class="border"></div>
+            <div class="content">
+                <el-form
+                    :label-position="labelPosition"
+                    label-width="343px"
+                    :model="ruleForm"
+                    ref="form"
+                    :rules="rules"
+                >
+                    <el-form-item label="原密码" prop="password">
+                        <el-input
+                            style="width: 300px"
+                            type="password"
+                            v-model="ruleForm.password"
+                            placeholder="请输入原密码"
+                        ></el-input>
+                    </el-form-item>
+                    <el-form-item label="新密码" prop="pass">
+                        <el-input
+                            style="width: 300px"
+                            type="password"
+                            v-model="ruleForm.pass"
+                            placeholder="请输入新密码，8-16位字母数字组合"
+                            autocomplete="off"
+                        ></el-input>
+                    </el-form-item>
+                    <el-form-item label="确认密码" prop="checkPass">
+                        <el-input
+                            style="width: 300px"
+                            type="password"
+                            v-model="ruleForm.checkPass"
+                            placeholder="请再次输出新密码"
+                            autocomplete="off"
+                        ></el-input>
+                    </el-form-item>
+                </el-form>
+                <div class="btn">
+                    <el-button type="primary" @click="codeSend">确认</el-button>
+                    <div class="btn2" @click="all('/accountdata')">返回</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            labelPosition: 'right',
+            ruleForm: {
+                pass: '',
+                password: ''
+            },
+            rules: {
+                checkPass: [
+                    {
+                        validator: (rule, value, callback) => {
+                            if (value !== this.ruleForm.pass) {
+                                callback(new Error('两次密码输入不一致'));
+                            } else {
+                                callback();
+                            }
+                        },
+                        trigger: 'blur'
+                    },
+                    { required: true, message: '请再次输入密码', trigger: 'blur' }
+                ]
+            }
+        };
+    },
+    methods: {
+        codeSend() {
+            this.$refs.form.validate(valid => {
+                if (valid) {
+                    this.$http
+                        .post('/user/changePw', {
+                            newPassword: this.ruleForm.pass,
+                            password: this.ruleForm.password
+                        })
+                        .then(() => {
+                            this.$message.warning('修改成功,请重新登录');
+                            localStorage.removeItem('webToken');
+                            this.$store.commit('updateUserInfo', null);
+                        })
+                        .then(() => {
+                            this.$router.push('/Login');
+                        })
+                        .catch(e => {
+                            this.$message.error(e.error);
+                        });
+                }
+            });
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+/deep/ .el-steps {
+    margin-left: 385px;
+}
+/deep/.el-step:nth-child(1) {
+    .el-step__icon {
+        background: linear-gradient(143deg, #00ffcb 0%, #006eff 100%, #006eff 100%);
+        color: #ffffff;
+        border: 0;
+    }
+}
+/deep/.el-step:nth-child(2) {
+    .el-step__icon {
+        background: #c8c9cc;
+        color: #ffffff;
+        border: 0;
+    }
+}
+/deep/.el-step:nth-child(3) {
+    .el-step__icon {
+        background: #c8c9cc;
+        color: #ffffff;
+        border: 0;
+    }
+}
+/deep/ .el-step__title.is-process {
+    font-weight: 400;
+    color: #939599;
+}
+/deep/ .el-step__title.is-wait {
+    color: #939599;
+}
+.container {
+    .btn {
+        display: flex;
+        justify-content: center;
+        margin: 80px 0 0 110px;
+        .btn2 {
+            width: 130px;
+            height: 36px;
+            background: #c4c7cc;
+            border-radius: 4px;
+            cursor: pointer;
+            color: #ffffff;
+            font-size: 13px;
+            text-align: center;
+            line-height: 36px;
+            margin-left: 20px;
+        }
+    }
+    /deep/ .el-button {
+        width: 130px;
+        height: 36px;
+        background: linear-gradient(133deg, #00ffcb 0%, #006eff 100%);
+        border-radius: 4px;
+    }
+    /deep/ .el-step__title {
+        font-size: 13px;
+    }
+    /deep/ .el-form-item__label {
+        color: #ffffff;
+        margin-left: 175px;
+    }
+    /deep/ .el-form {
+        margin-top: 66px;
+    }
+    /deep/ .el-input__inner {
+        border: 1px solid #494a4d;
+        background: #1c1e26;
+        color: #ffffff;
+    }
+    .title {
+        height: 42px;
+        font-size: 32px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 42px;
+        padding: 60px 0;
+    }
+    .box {
+        height: 539px;
+        background: #1c1e26;
+    }
+    .name {
+        .flex();
+        padding: 17px 16px;
+        .name1 {
+            font-size: 16px;
+            font-weight: bold;
+            color: #ffffff;
+            line-height: 26px;
+        }
+        .name2 {
+            font-size: 12px;
+            font-weight: 400;
+            color: #939599;
+            margin-left: 10px;
+        }
+    }
+    .phone {
+        color: #ffffff;
+        font-size: 18px;
+    }
+    .border {
+        height: 1px;
+        background: #494a4d;
+        margin: 0 16px 40px;
+    }
+}
+</style>

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

@@ -1,6 +1,6 @@
 <template>
     <div class="container center-content">
-        <div class="title">变更手机号</div>
+        <div class="title">账户与安全</div>
         <div class="box">
             <div class="name">
                 <div class="name1">修改登录账户</div>
@@ -87,9 +87,6 @@ export default {
             return this.userInfo.phone.slice(0, 3) + ' **** ' + this.userInfo.phone.slice(7, 11);
         }
     },
-    // created() {
-    //     this.ruleForm.phone = this.userInfo.phone;
-    // },
     methods: {
         send() {
             this.sendMsg(this.ruleForm.phone);

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

@@ -0,0 +1,149 @@
+<template>
+    <div class="container center-content">
+        <div class="title">账户与安全</div>
+        <div class="box">
+            <div class="name">
+                <div class="name1">修改登录账户</div>
+                <div class="name2">修改手机号即同时修改登录账户名称</div>
+            </div>
+            <div class="border"></div>
+            <div class="content">
+                <el-steps :space="180" :active="3" align-center>
+                    <el-step title="验证当前手机号"></el-step>
+                    <el-step title="绑定新手机号"></el-step>
+                    <el-step title="完成"></el-step>
+                </el-steps>
+                <div class="fail">
+                    <img class="text1" src="../../assets/icon-xiugaichengg@3x.png" alt="" />
+                    <div class="text2">修改成功，下次登录请使用新账号！</div>
+                    <div class="botn" @click="Login">重新登录</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import eventBus from '../../eventBus';
+export default {
+    data() {
+        return {
+            labelPosition: 'right'
+        };
+    },
+    computed: {},
+    methods: {
+        codeSend() {
+            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);
+                });
+        },
+        Login() {
+            eventBus.$emit('login');
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+/deep/ .el-steps {
+    margin-left: 385px;
+}
+/deep/.el-step:nth-child(1) {
+    .el-step__icon {
+        background: linear-gradient(143deg, #00ffcb 0%, #006eff 100%, #006eff 100%);
+        color: #ffffff;
+        border: 0;
+    }
+}
+/deep/.el-step:nth-child(2) {
+    .el-step__icon {
+        background: linear-gradient(143deg, #00ffcb 0%, #006eff 100%, #006eff 100%);
+        color: #ffffff;
+        border: 0;
+    }
+}
+/deep/.el-step:nth-child(3) {
+    .el-step__icon {
+        background: linear-gradient(143deg, #00ffcb 0%, #006eff 100%, #006eff 100%);
+        color: #ffffff;
+        border: 0;
+    }
+}
+.container {
+    .fail {
+        text-align: center;
+        margin-left: 100px;
+        .text1 {
+            width: 68px;
+            height: 68px;
+            margin-top: 60px;
+        }
+        .text2 {
+            font-size: 14px;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 24px;
+            margin-top: 20px;
+        }
+        .botn {
+            width: 130px;
+            height: 36px;
+            font-size: 13px;
+            color: #ffffff;
+            cursor: pointer;
+            line-height: 36px;
+            text-align: center;
+            background: linear-gradient(133deg, #00ffcb 0%, #006eff 100%);
+            border-radius: 4px;
+            margin: 59px 0 0 488px;
+        }
+    }
+    /deep/ .el-step__title {
+        font-size: 13px;
+    }
+    .title {
+        height: 42px;
+        font-size: 32px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 42px;
+        padding: 60px 0;
+    }
+    .box {
+        height: 539px;
+        background: #1c1e26;
+    }
+    .name {
+        .flex();
+        padding: 17px 16px;
+        .name1 {
+            font-size: 16px;
+            font-weight: bold;
+            color: #ffffff;
+            line-height: 26px;
+        }
+        .name2 {
+            font-size: 12px;
+            font-weight: 400;
+            color: #939599;
+            margin-left: 10px;
+        }
+    }
+    .border {
+        height: 1px;
+        background: #494a4d;
+        margin: 0 16px 40px;
+    }
+}
+</style>

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

@@ -0,0 +1,227 @@
+<template>
+    <div class="container center-content">
+        <div class="title">修改交易密码</div>
+        <div class="box">
+            <div class="name">
+                <div class="name1">修改交易密码</div>
+                <div class="name2">修改交易密码后立即生效，下次交易请使用新密码</div>
+            </div>
+            <div class="border"></div>
+            <div class="content" v-if="flag">
+                <el-steps :space="180" :active="1" align-center>
+                    <el-step title="验证当前手机号"></el-step>
+                    <el-step title="绑定新手机号"></el-step>
+                    <el-step title="完成"></el-step>
+                </el-steps>
+                <el-form
+                    :label-position="labelPosition"
+                    ref="form"
+                    label-width="340px"
+                    :model="ruleForm"
+                    :rules="rules"
+                >
+                    <el-form-item label="当前手机号" prop="phone">
+                        <div class="phone">{{ Phone }}</div>
+                    </el-form-item>
+                    <el-form-item label="验证码" prop="code">
+                        <el-input style="width: 300px" v-model="ruleForm.code" placeholder="请输入4位验证码">
+                            <span
+                                @click="send"
+                                style="color: #00ffcb; cursor: pointer; font-size: 13px"
+                                slot="suffix"
+                                >{{ time === 0 ? '发送验证码' : `重新发送${time}s` }}</span
+                            >
+                        </el-input>
+                    </el-form-item>
+                </el-form>
+                <div class="btn">
+                    <el-button type="primary" @click="codeSend">确认</el-button>
+                    <div class="btn2" @click="all('/accountdata')">返回</div>
+                </div>
+            </div>
+            <div v-else>
+                <transaction-phone @Jump="Jump"></transaction-phone>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import TransactionPhone from '../../components/TransactionPhone.vue';
+import { mapState } from 'vuex';
+export default {
+    components: { TransactionPhone },
+    data() {
+        return {
+            flag: true,
+            labelPosition: 'right',
+            ruleForm: {
+                phone: '',
+                code: '',
+                pass: '',
+                password: '',
+                checkPass: '',
+                type: ''
+            },
+            time: 0,
+            rules: {
+                checkPass: [
+                    {
+                        validator: (rule, value, callback) => {
+                            if (value !== this.ruleForm.pass) {
+                                callback(new Error('两次密码输入不一致'));
+                            } else {
+                                callback();
+                            }
+                        },
+                        trigger: 'blur'
+                    },
+                    { required: true, message: '请再次输入密码', trigger: 'blur' }
+                ]
+            }
+        };
+    },
+    computed: {
+        ...mapState(['userInfo']),
+        Phone() {
+            return this.userInfo.phone.slice(0, 3) + ' **** ' + this.userInfo.phone.slice(7, 11);
+        }
+    },
+    methods: {
+        send() {
+            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);
+                });
+        },
+        Jump() {
+            this.flag = true;
+            this.ruleForm.phone = this.userInfo.phone;
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+/deep/ .el-steps {
+    margin-left: 385px;
+}
+/deep/.el-step:nth-child(1) {
+    .el-step__icon {
+        background: linear-gradient(143deg, #00ffcb 0%, #006eff 100%, #006eff 100%);
+        color: #ffffff;
+        border: 0;
+    }
+}
+/deep/.el-step:nth-child(2) {
+    .el-step__icon {
+        background: #c8c9cc;
+        color: #ffffff;
+        border: 0;
+    }
+}
+/deep/.el-step:nth-child(3) {
+    .el-step__icon {
+        background: #c8c9cc;
+        color: #ffffff;
+        border: 0;
+    }
+}
+/deep/ .el-step__title.is-process {
+    font-weight: 400;
+    color: #939599;
+}
+/deep/ .el-step__title.is-wait {
+    color: #939599;
+}
+.container {
+    .btn {
+        display: flex;
+        justify-content: center;
+        margin: 80px 0 0 110px;
+        .btn2 {
+            width: 130px;
+            height: 36px;
+            background: #c4c7cc;
+            border-radius: 4px;
+            cursor: pointer;
+            color: #ffffff;
+            font-size: 13px;
+            text-align: center;
+            line-height: 36px;
+            margin-left: 20px;
+        }
+    }
+    /deep/ .el-button {
+        width: 130px;
+        height: 36px;
+        background: linear-gradient(133deg, #00ffcb 0%, #006eff 100%);
+        border-radius: 4px;
+    }
+    /deep/ .el-step__title {
+        font-size: 13px;
+    }
+    /deep/ .el-form-item__label {
+        color: #ffffff;
+        margin-left: 175px;
+    }
+    /deep/ .el-form {
+        margin-top: 66px;
+    }
+    /deep/ .el-input__inner {
+        border: 1px solid #494a4d;
+        background: #1c1e26;
+        color: #ffffff;
+    }
+    .title {
+        height: 42px;
+        font-size: 32px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 42px;
+        padding: 60px 0;
+    }
+    .box {
+        height: 539px;
+        background: #1c1e26;
+    }
+    .name {
+        .flex();
+        padding: 17px 16px;
+        .name1 {
+            font-size: 16px;
+            font-weight: bold;
+            color: #ffffff;
+            line-height: 26px;
+        }
+        .name2 {
+            font-size: 12px;
+            font-weight: 400;
+            color: #939599;
+            margin-left: 10px;
+        }
+    }
+    .phone {
+        color: #ffffff;
+        font-size: 18px;
+    }
+    .border {
+        height: 1px;
+        background: #494a4d;
+        margin: 0 16px 40px;
+    }
+}
+</style>

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

@@ -0,0 +1,149 @@
+<template>
+    <div class="container center-content">
+        <div class="title">修改交易密码</div>
+        <div class="box">
+            <div class="name">
+                <div class="name1">修改交易密码</div>
+                <div class="name2">修改交易密码后立即生效，下次交易请使用新密码</div>
+            </div>
+            <div class="border"></div>
+            <div class="content">
+                <el-steps :space="180" :active="3" align-center>
+                    <el-step title="验证当前手机号"></el-step>
+                    <el-step title="绑定新手机号"></el-step>
+                    <el-step title="完成"></el-step>
+                </el-steps>
+                <div class="fail">
+                    <img class="text1" src="../../assets/icon-xiugaichengg@3x.png" alt="" />
+                    <div class="text2">修改成功，下次登录请使用新账号！</div>
+                    <div class="botn" @click="Login">重新登录</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import eventBus from '../../eventBus';
+export default {
+    data() {
+        return {
+            labelPosition: 'right'
+        };
+    },
+    computed: {},
+    methods: {
+        codeSend() {
+            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);
+                });
+        },
+        Login() {
+            eventBus.$emit('login');
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+/deep/ .el-steps {
+    margin-left: 385px;
+}
+/deep/.el-step:nth-child(1) {
+    .el-step__icon {
+        background: linear-gradient(143deg, #00ffcb 0%, #006eff 100%, #006eff 100%);
+        color: #ffffff;
+        border: 0;
+    }
+}
+/deep/.el-step:nth-child(2) {
+    .el-step__icon {
+        background: linear-gradient(143deg, #00ffcb 0%, #006eff 100%, #006eff 100%);
+        color: #ffffff;
+        border: 0;
+    }
+}
+/deep/.el-step:nth-child(3) {
+    .el-step__icon {
+        background: linear-gradient(143deg, #00ffcb 0%, #006eff 100%, #006eff 100%);
+        color: #ffffff;
+        border: 0;
+    }
+}
+.container {
+    .fail {
+        text-align: center;
+        margin-left: 100px;
+        .text1 {
+            width: 68px;
+            height: 68px;
+            margin-top: 60px;
+        }
+        .text2 {
+            font-size: 14px;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 24px;
+            margin-top: 20px;
+        }
+        .botn {
+            width: 130px;
+            height: 36px;
+            font-size: 13px;
+            color: #ffffff;
+            cursor: pointer;
+            line-height: 36px;
+            text-align: center;
+            background: linear-gradient(133deg, #00ffcb 0%, #006eff 100%);
+            border-radius: 4px;
+            margin: 59px 0 0 488px;
+        }
+    }
+    /deep/ .el-step__title {
+        font-size: 13px;
+    }
+    .title {
+        height: 42px;
+        font-size: 32px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 42px;
+        padding: 60px 0;
+    }
+    .box {
+        height: 539px;
+        background: #1c1e26;
+    }
+    .name {
+        .flex();
+        padding: 17px 16px;
+        .name1 {
+            font-size: 16px;
+            font-weight: bold;
+            color: #ffffff;
+            line-height: 26px;
+        }
+        .name2 {
+            font-size: 12px;
+            font-weight: 400;
+            color: #939599;
+            margin-left: 10px;
+        }
+    }
+    .border {
+        height: 1px;
+        background: #494a4d;
+        margin: 0 16px 40px;
+    }
+}
+</style>