修改手机号

src/main/pc-space/src/components/SecurityPhone.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('更改成功');
+                            localStorage.removeItem('webToken');
+                            this.$store.commit('updateUserInfo', null);
+                            this.$router.push('/Login');
+                        })
+                        .catch(e => {
+                            this.$message.error(e.error);
+                        });
+                })
+                .catch(e => {
+                    this.$message.error(e.error);
+                });
+        },
+        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;
+            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

@@ -13,7 +13,7 @@ import eventBus from '../eventBus';
 const routes = [
     {
         path: '/',
-        redirect: 'personal'
+        redirect: 'security'
     },
     {
         path: '/',
@@ -97,6 +97,14 @@ const routes = [
                         }
                     }
                 ]
+            },
+            {
+                path: '/security',
+                name: 'security',
+                component: () => import('../views/user/Security.vue'),
+                meta: {
+                    title: '账户与安全'
+                }
             }
         ]
     }

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

@@ -5,7 +5,7 @@
             <el-main class="main">
                 <router-view />
             </el-main>
-            <el-footer>
+            <el-footer v-if="this.$route.name !== 'security'">
                 <div class="footer center-content">
                     <div class="footer-l">
                         <img class="logo" src="../assets/img/nav_logo@3x.png" alt="" />
@@ -44,6 +44,7 @@
                 </div>
                 <div class="copyright">© 2012 - 2021 **** 版权所有</div>
             </el-footer>
+            <div class="bottom" v-else></div>
         </el-container>
     </el-container>
 </template>
@@ -60,6 +61,10 @@ export default {
     padding: 0;
     min-height: calc(100vh - 270px);
 }
+.bottom {
+    background: #1a1a1a;
+    height: 170px !important;
+}
 .el-footer {
     width: 100%;
     position: relative;

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

@@ -55,7 +55,7 @@
                     <div class="text2">登录账号</div>
                     <div class="text3">中国</div>
                 </div>
-                <div class="text4">修改</div>
+                <div class="text4" @click="Security">修改</div>
             </div>
             <div class="box">
                 <div class="text">
@@ -99,7 +99,11 @@ export default {
     data() {
         return {};
     },
-    methods: {}
+    methods: {
+        Security() {
+            this.$router.push('/security');
+        }
+    }
 };
 </script>
 <style lang="less" scoped>
@@ -121,7 +125,7 @@ export default {
                 display: flex;
                 .text1 {
                     font-size: 24px;
-                    color: #cccccc;
+                    color: #939599;
                 }
                 .text2 {
                     font-size: 17px;

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

@@ -14,21 +14,17 @@
                         <div class="text2">介绍</div>
                         <div class="box3">
                             <div class="box4">
-                                <div>
-                                    <div class="text4">粉丝 <span>233</span></div>
-                                </div>
-                                <div>
-                                    <div class="text4">已售 <span>233</span></div>
-                                </div>
+                                <div class="text4">粉丝 <span>233</span></div>
+                                <div class="text4">已售 <span>233</span></div>
                             </div>
                             <div class="btn">关注</div>
                         </div>
                     </div>
                 </div>
                 <div class="imgBox">
-                    <div class="imgBox1">111</div>
-                    <div class="imgBox1">111</div>
-                    <div class="imgBox1">111</div>
+                    <div class="imgBox1"></div>
+                    <div class="imgBox1"></div>
+                    <div class="imgBox1"></div>
                 </div>
             </div>
         </div>

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

@@ -6,8 +6,7 @@
                 default-active="/accountdata"
                 router
                 class="el-menu-vertical-demo"
-                background-color="#545c64"
-                text-color="#fff"
+                text-color="#939599"
                 active-text-color="#00FFCB"
             >
                 <el-submenu index="1">
@@ -19,14 +18,18 @@
                     <el-menu-item index="1-2">地址管理</el-menu-item>
                     <el-menu-item index="1-3">我赞过的</el-menu-item>
                 </el-submenu>
-                <el-menu-item index="2">
-                    <i class="el-icon-menu"></i>
-                    <span slot="title">交易信息</span>
-                </el-menu-item>
-                <el-menu-item index="3">
-                    <i class="el-icon-setting"></i>
-                    <span slot="title">铸造信息</span>
-                </el-menu-item>
+                <el-submenu index="2">
+                    <template slot="title">
+                        <i class="el-icon-menu"></i>
+                        <span>交易信息</span>
+                    </template>
+                </el-submenu>
+                <el-submenu index="3">
+                    <template slot="title">
+                        <i class="el-icon-menu"></i>
+                        <span>铸造信息</span>
+                    </template>
+                </el-submenu>
             </el-menu>
             <div class="main">
                 <router-view />
@@ -51,18 +54,22 @@ export default {
 </script>
 <style lang="less" scoped>
 .container {
+    padding-bottom: 200px;
     /deep/ .el-menu {
         width: 200px;
         background: #1c1e26 !important;
         margin-right: 30px;
         .el-submenu__title {
             background: #1c1e26 !important;
+            color: #ffffff !important;
+            font-size: 18px !important;
+            padding-left: 10px !important;
         }
         .el-menu-item {
             background: #1c1e26 !important;
-
-            &.is-active {
-                color: red;
+            span {
+                color: #ffffff !important;
+                font-size: 18px !important;
             }
         }
     }

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

@@ -0,0 +1,228 @@
+<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">156****8686</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="Jump">返回</div>
+                </div>
+            </div>
+            <div v-else>
+                <security-phone @Jump="Jump"></security-phone>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import SecurityPhone from '../../components/SecurityPhone.vue';
+import { mapState } from 'vuex';
+export default {
+    components: { SecurityPhone },
+    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);
+        // }
+    },
+    // created() {
+    //     this.ruleForm.phone = this.userInfo.phone;
+    // },
+    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;
+            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;
+    }
+    .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>