完善登录

src/api/index.js

@@ -83,8 +83,8 @@ export default {
     queryUserInfoDetails: `${host}users/users/userAccount/queryUserInfoDetails`,//个人中心信息展示
     updatePersonCenter: `${host}users/users/userAccount/updatePersonCenter`,//个人中心信息修改
     examinePassword: `${host}users/users/userAccount/examinePassword`,//更换密码
-    bindPhoneOrEmail: `${host}/users/users/userAccount/bindPhoneOrEmail`,// 绑定手机或邮箱
+    bindPhoneOrEmail: `${host}users/users/userAccount/bindPhoneOrEmail`,// 绑定手机或邮箱
-    sendPhoneOrEmailCode: `${host}/users/users/userAccount/sendPhoneOrEmailCode`,// 更换手机号或邮箱--发送手机验证码
+    sendPhoneOrEmailCode: `${host}users/users/userAccount/sendPhoneOrEmailCode`,// 更换手机号或邮箱--发送手机验证码
 
 
 

src/pages/account/login/index.vue

@@ -1,17 +1,11 @@
 <template>
     <div class="wrap">
-        <div class="header" v-if="!isHh">
+        <div class="header">
             <img class="logo" src="@/assets/img/logo.png" />
         </div>
-
         <div class="bg">
             <div class="left">
-                <div class="text" v-if="isHh">
+                <div class="text">
-                    <p>欢迎使用</p>
-                    <p style="margin-bottom: 15px">商学院金融工程</p>
-                    <p>与大数据实验平台</p>
-                </div>
-                <div class="text" v-else>
                     <p>欢迎使用</p>
                     <p>Occupation Lab</p>
                 </div>
@@ -20,19 +14,17 @@
         </div>
 
         <div class="right-form">
-            <img v-if="isHh" class="logo" src="@/assets/img/logo-hh1.png" />
-
             <div class="form">
-                <div class="back" v-show="isReg" @click="toReg(false)">
+                <el-tabs v-model="activeName" @tab-click="handleClick">
-                    <i class="el-icon-back"></i>
+                    <el-tab-pane label="账号登录" name="1"></el-tab-pane>
-                </div>
+                    <el-tab-pane label="手机号/邮箱登录" name="2"></el-tab-pane>
-                <div v-if="!isReg">
+                    <el-form :model="loginForm" :rules="loginRules" ref="loginForm" style="margin-top: 20px">
-                    <el-tabs v-model="activeName">
+                        <el-form-item v-if="activeName === '1'" label="用户名" prop="account">
-                        <el-tab-pane label="账号登录" name="1">
-                            <el-form v-if="activeName === '1'" :model="loginForm" :rules="loginRules" ref="loginForm" style="margin-top: 20px">
-                                <el-form-item label="用户名" prop="username">
                             <el-input v-model.trim="loginForm.account" placeholder="请输入账号"></el-input>
                         </el-form-item>
+                        <el-form-item v-if="activeName === '2'" label="手机号/邮箱" prop="account">
+                            <el-input v-model.trim="loginForm.account" placeholder="请输入手机号/邮箱"></el-input>
+                        </el-form-item>
                         <el-form-item label="密码" prop="password">
                             <el-input
                                 type="password"
@@ -45,112 +37,40 @@
                             <el-input
                                 placeholder="请输入验证码"
                                 v-model.trim="loginForm.code"
-                                        @keyup.enter.native="submitFormLogin('loginForm')"
+                                @keyup.enter.native="submitFormLogin"
-                                    >
-                                    </el-input>
-                                    <img @click="blur" :src="verificationIMG" class="verification" alt="">
-                                </el-form-item>
-                                <el-button class="submit" type="primary" @click="submitFormLogin('loginForm')">登录</el-button>
-                            </el-form>
-                        </el-tab-pane>
-
-                        <el-tab-pane label="手机号/邮箱登录" name="2">
-                            <el-form v-if="activeName === '2'" :model="phoneParam" :rules="phoneRules" ref="phoneParam" style="margin-top: 20px">
-                                <el-form-item label="手机号/邮箱" prop="userphone">
-                                    <el-input v-model="phoneParam.userphone" placeholder="请输入手机号/邮箱"></el-input>
-                                </el-form-item>
-                                <el-form-item label="密码" prop="phonePassword">
-                                    <el-input
-                                        type="password"
-                                        placeholder="请输入密码"
-                                        v-model="phoneParam.phonePassword"
-                                        @keyup.enter.native="getSchool('phoneParam')"
                             >
                             </el-input>
+                            <img @click="getVerImg" :src="verificationIMG" class="verification" alt="">
                         </el-form-item>
-                                <el-button class="submit" type="primary" @click="getSchool('phoneParam')">登录</el-button>
+                        <el-button class="submit" type="primary" @click="submitFormLogin">登录</el-button>
                     </el-form>
-                        </el-tab-pane>
                 </el-tabs>
-                    <div class="links">
-                        <!-- <el-button type="text" class="ques" @click="toReg(true)">前往注册</el-button> -->
-                        <el-button type="text" class="forget" @click="forget">忘记密码？</el-button>
             </div>
         </div>
-                <register v-else :isReg.sync="isReg" @updateInfo="updateInfo"></register>
+        <el-dialog title="绑定手机号" :visible.sync="phoneVisible" :close-on-click-modal="false" width="30%">
-            </div>
-        </div>
-
-        <v-footer ref="footer"></v-footer>
-
-        <el-dialog title="选择角色" :visible.sync="roleDialog" width="24%" center :close-on-click-modal="false">
-            <div>
-                <el-select v-model="roleId" placeholder="请选择角色">
-                    <el-option v-for="(item,index) in roleList" :key="index" :label="item.roleName"
-                               :value="item.roleId"></el-option>
-                </el-select>
-            </div>
-            <span slot="footer" class="dialog-footer">
-                <el-button @click="cancleRoleDia">取 消</el-button>
-                <el-button v-if="activeName == '0'" type="primary" @click="roleSure('loginForm')">确 定</el-button>
-                <el-button v-else type="primary" @click="roleSure('phoneParam')">确 定</el-button>
-            </span>
-        </el-dialog>
-
-        <el-dialog :title="phoneReset ? '手机重置密码' : '邮箱重置密码'" :visible.sync="forgetVisible" :close-on-click-modal="false"
-                   @close="closeForget" width="30%">
-            <template v-if="phoneReset">
             <el-form ref="form" label-width="60px">
                 <el-form-item label="手机号">
-                        <el-input placeholder="请输入手机号" v-model.number="phone" maxlength="11"></el-input>
+                    <el-input style="width: 100%;" placeholder="请输入手机号" v-model="phone" maxlength="11"></el-input>
                 </el-form-item>
                 <el-form-item label="验证码">
-                        <div class="flex-between">
+                    <div style="display: flex;">
-                            <el-input v-model.number="phoneCode" placeholder="请输入验证码" maxlength="6"></el-input>
+                        <el-input v-model="phoneCode" placeholder="请输入验证码" maxlength="6"></el-input>
                         <el-button style="margin-left: 10px" type="text" @click="sendPhoneCode"
                                    :disabled="phoneDisabled">{{ phoneBtnText }}
                         </el-button>
                     </div>
                 </el-form-item>
-                    <el-form-item label="新密码">
-                        <el-input type="password" placeholder="请输入新密码" v-model="newPassword"></el-input>
-                    </el-form-item>
             </el-form>
-                <div class="switch" @click="switchType(false)"><span>邮箱重置密码</span></div>
             <span slot="footer" class="dialog-footer">
-                    <el-button @click="forgetVisible = false">取 消</el-button>
+                <el-button size="small" @click="phoneVisible = false">取 消</el-button>
-                    <el-button type="primary" @click="updatePassword(1)">确 定</el-button>
+                <el-button size="small" type="primary" @click="phoneSubmit">确 定</el-button>
             </span>
-            </template>
-            <template v-else>
-                <el-form ref="form" label-width="60px">
-                    <el-form-item label="邮箱">
-                        <el-input placeholder="请输入邮箱" v-model="email"></el-input>
-                    </el-form-item>
-                    <el-form-item label="验证码">
-                        <div class="flex-between">
-                            <el-input v-model.number="emailCode" placeholder="请输入验证码" maxlength="6"></el-input>
-                            <el-button style="margin-left: 10px" type="text" @click="sendEmailCode"
-                                       :disabled="emailDisabled">{{ emailBtnText }}
-                            </el-button>
-                        </div>
-                    </el-form-item>
-                    <el-form-item label="新密码">
-                        <el-input type="password" placeholder="请输入新密码" v-model="newPassword"></el-input>
-                    </el-form-item>
-                </el-form>
-                <div class="switch" @click="switchType(true)"><span>手机重置密码</span></div>
-                <span slot="footer" class="dialog-footer">
-                    <el-button @click="forgetVisible = false">取 消</el-button>
-                    <el-button type="primary" @click="updatePassword">确 定</el-button>
-                </span>
-            </template>
         </el-dialog>
+        <v-footer ref="footer"></v-footer>
     </div>
 </template>
 
 <script>
-import register from "../register";
 import vFooter from "@/layouts/footer";
 import { mapState, mapActions } from "vuex";
 import util from "@/libs/util";
@@ -160,215 +80,79 @@ export default {
     data: function() {
         return {
             verificationIMG: "",
-            isHh: Setting.isHh,
-            schoolId: Setting.schoolId,
             activeName: "1",
-            isReg: false,
             loginForm: {
-                account: "xiaoliu",
+                account: "",
-                password: "111aaa",
+                password: "",
                 code: "", // 验证码
                 random: "", // 随机数
-                distinguish: null, // 区分手机号账号登录,1为账号登录,2为手机号或邮箱登录
+                distinguish: 1, // 区分手机号账号登录,1为账号登录,2为手机号或邮箱登录
-                platform: 1 // 平台标识，1职站，2数据平台，3中台
+                platform: Setting.platformId
             },
             loginRules: {
                 account: [{ required: true, message: "请输入用户名", trigger: "blur" }],
                 password: [{ required: true, message: "请输入密码", trigger: "blur" }],
                 code: [{ required: true, message: "请输入验证码", trigger: "blur" }]
             },
-            phoneParam: {
+            phoneVisible: false,
-                userphone: "",
-                phonePassword: ""
-            },
-            phoneRules: {
-                userphone: [{ required: true, message: "请输入手机号/邮箱", trigger: "blur" }],
-                phonePassword: [{ required: true, message: "请输入密码", trigger: "blur" }]
-            },
-            roleDialog: false,
-            userId: "",
-            roleId: "",
-            roleList: [],
-            forgetVisible: false,
-            phoneReset: true,
-            email: "",
-            emailBtnText: "发送验证码",
-            emailCode: "",
-            emailDisabled: false,
-            emailTimer: null,
             phone: "",
-            phoneBtnText: "发送验证码",
             phoneCode: "",
             phoneDisabled: false,
             phoneTimer: null,
-            newPassword: "",
+            phoneBtnText: "发送验证码"
-            emailOpener: "",
-            phoneOpener: ""
         };
     },
     components: {
-        register,
         vFooter
     },
+    created() {
+        this.getVerImg();
+    },
     mounted() {
         // 页面离开的时候销毁手机和邮箱验证码定时器
         this.$once("hook:beforeDestroy", function() {
             clearInterval(this.phoneTimer);
             this.phoneTimer = null;
-            clearInterval(this.emailTimer);
-            this.emailTimer = null;
         });
     },
     methods: {
         ...mapActions("user", [
-            "login", "setInfo"
+            "login", "setInfo", "setCustomer"
         ]),
-        // 获取输入的账号的学校
+        handleClick(tab, event) { // 切换标签
-        getSchool(form) {
+            this.loginForm.account = "";
-            this.$refs[form].validate(valid => {
+            this.$refs.loginForm.clearValidate();
-                if (valid) {
+            this.loginRules.account[0].message = tab.index === "1" ? "请输入账号" : "请输入手机号/邮箱";
-                    let data = {
-                        account: this.activeName == "0" ? this.loginForm.username : this.phoneParam.userphone,
-                        password: this.activeName == "0" ? this.loginForm.password : this.phoneParam.phonePassword,
-                        schoolId: this.schoolId,
-                        source: this.activeName
-                    };
-                    this.$get(this.api.loginSchool, data)
-                        .then(res => {
-                            this.schoolList = [...res.message.staffList, ...res.message.studentList];
-                            let indexs = {};
-                            this.schoolList = this.schoolList.reduce((cur, next) => {
-                                indexs[next.schoolId] ? "" : indexs[next.schoolId] = true && cur.push(next);
-                                return cur;
-                            }, []);
-                            if (this.schoolList.length >= 1) {
-                                this.schoolId = this.schoolList[0].schoolId;
-                                this.userId = this.schoolList[0].userId;
-                                this.studentId = this.schoolList[0].studentId;
-                                this.getRole(form);
-                            } else {
-                                util.errorMsg("账号不存在");
-                            }
-                        })
-                        .catch(res => {
-                        });
-                } else {
-                    util.errorMsg("请输入账号和密码");
-                    return false;
-                }
-            });
-        },
-        // 之前是一个账号可能属于多个角色的，因此要选择角色，后来把这个功能改了，目前是学生度只能学生登录
-        getRole(form) {
-            let data = {
-                userId: this.userId,
-                schoolId: this.schoolId
-            };
-            this.$get(this.api.loginRole, data)
-                .then(res => {
-                    this.roleList = [...res.message.staffList, ...res.message.studentList];
-                    let indexs = {};
-                    this.roleList = this.roleList.reduce((cur, next) => {
-                        indexs[next.roleId] ? "" : indexs[next.roleId] = true && cur.push(next);
-                        return cur;
-                    }, []);
-                    this.roleList.forEach((n, k) => {
-                        switch (n.roleId) {
-                            case 2:
-                                n.roleName = "管理员";
-                                break;
-                            case 3:
-                                n.roleName = "老师";
-                                break;
-                            case 4:
-                                n.roleName = "学生";
-                                break;
-                        }
-                    });
-                    if (this.roleList.length > 1) {
-                        this.roleDialog = true;
-                    } else {
-                        this.roleId = this.roleList[0].roleId;
-                        this.submitForm(form);
-                    }
-                })
-                .catch(res => {
-                });
-        },
-        updateInfo(data) {
-            this.loginForm.account = data.username;
-            this.loginForm.password = data.password;
-        },
-        roleSure(form) {
-            if (this.roleId) {
-                this.submitForm(form);
-            } else {
-                util.errorMsg("请选择角色！");
-            }
         },
-        submitForm(form) {
+        submitFormLogin() { // 提交登录
-            this.$refs[form].validate(valid => {
+            this.$refs.loginForm.validate(valid => {
                 if (valid) {
-                    let data = {
+                    this.loginForm.distinguish = Number(this.activeName);
-                        roleId: this.roleId,
+                    this.login(this.loginForm).then(() => {
-                        userId: this.userId,
+                        let redirect = this.$route.query.redirect ? decodeURIComponent(this.$route.query.redirect) : "/index";
-                        schoolId: this.schoolId
-                    };
-                    this.$get(this.api.logins, data).then(res => {
-                        this.$post(this.api.updateLogInNumber, { userId: this.userId }).then(res => {
-                        }).catch(res => {
-                        }); // 更新登录次数和上次登录时间
-                        let data = res.message.user;
-                        util.local.set(Setting.tokenKey, data.token, Setting.tokenExpires);
-                        this.setInfo({
-                            userId: this.userId,
-                            roleId: this.roleId,
-                            studentId: this.studentId,
-                            schoolId: this.schoolId,
-                            avatar: data.userAvatars,
-                            userName: data.userName,
-                            dataTime: data.dataTime
-                        });
-                        util.successMsg("登录成功");
-                        let redirect = decodeURIComponent(this.$route.query.redirect || "/index");
                         this.$router.replace(redirect);
                     }).catch(res => {
-                    });
+                        if (res && res.status == 30001) {
+                            this.phoneVisible = true;
                         }
+                        this.getVerImg();
+                        this.loginForm.code = "";
                     });
-        },
-        cancleRoleDia() {
-            this.roleId = "";
-            this.roleDialog = false;
-        },
-        toReg(status) {
-            this.isReg = status;
-        },
-        forget() {
-            this.forgetVisible = true;
-        },
-        emailCountdown() {
-            let count = 60;
-            if (!this.emailTimer) {
-                this.emailDisabled = true;
-                this.emailTimer = setInterval(() => {
-                    if (count > 0) {
-                        count--;
-                        this.emailBtnText = `${count}秒后重试`;
                 } else {
-                        this.emailDisabled = false;
+                    return util.errorMsg("请检查表单数据");
-                        clearInterval(this.emailTimer);
-                        this.emailTimer = null;
-                        this.emailBtnText = `发送验证码`;
-                    }
-                }, 1000);
                 }
+            });
+        },
+        getVerImg() { // 获取验证码图片
+            this.loginForm.random = Math.floor(Math.random() * 999999999);
+            this.verificationIMG = this.api.verification + "?random=" + `${this.loginForm.random}`;
         },
         phoneCountdown() {
             let count = 60;
             if (!this.phoneTimer) {
                 this.phoneDisabled = true;
                 this.phoneTimer = setInterval(() => {
+                    console.log("倒计时中");
                     if (count > 0) {
                         count--;
                         this.phoneBtnText = `${count}秒后重试`;
@@ -381,97 +165,43 @@ export default {
                 }, 1000);
             }
         },
-        closeForget() {
-            this.phoneCode = "";
-            this.emailCode = "";
-            this.userId = "";
-            this.newPassword = "";
-        },
-        sendEmailCode() {
-            if (!this.email) return util.warningMsg("请输入邮箱");
-            if (!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.email)) return util.warningMsg("请输入正确的邮箱");
-            let data = {
-                email: this.email
-            };
-            this.$get(this.api.findPasswordByEmail, data).then(res => {
-                if (res.errmessage == "success") {
-                    util.successMsg("发送成功");
-                    this.emailCountdown();
-                    this.userId = res.data.userId;
-                    this.emailOpener = res.data.opener;
-                }
-            }).catch(res => {
-            });
-        },
         sendPhoneCode() {
             if (!this.phone) return util.warningMsg("请输入手机号");
             if (!/^1[3456789]\d{9}$/.test(this.phone)) return util.warningMsg("请输入正确的手机号");
             let data = {
-                phone: this.phone
+                phone: this.phone,
+                types: 2
             };
-            this.$get(this.api.findPasswordByPhone, data).then(res => {
+            this.$post(this.api.sendPhoneOrEmailCode, data).then(res => {
-                if (res.errmessage == "success") {
+                if (res.message.opener) {
-                    util.successMsg("发送成功");
                     this.phoneCountdown();
-                    this.userId = res.data.userId;
+                    this.phoneOpener = res.message.opener;
-                    this.phoneOpener = res.data.opener;
+                } else {
+                    util.errorMsg(res.message);
                 }
+
             }).catch(res => {
             });
         },
-        async updatePassword(type) {
+        phoneSubmit() {
-            if (type == 1) {
             if (!this.phone) return util.warningMsg("请输入手机号");
             if (!/^1[3456789]\d{9}$/.test(this.phone)) return util.warningMsg("请输入正确的手机号");
             if (!this.phoneCode) return util.warningMsg("请输入验证码");
-            } else {
+            let data = {
-                if (!this.email) return util.warningMsg("请输入邮箱");
+                phone: this.phone,
-                if (!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.email)) return util.warningMsg("请输入正确的邮箱");
+                types: 2,
-                if (!this.emailCode) return util.warningMsg("请输入验证码");
+                code: this.phoneCode,
-            }
+                opener: this.phoneOpener,
-            if (!this.newPassword) return util.warningMsg("请输入新密码");
+                platform: Setting.platformId,
-
+                account: this.loginForm.account
-            let checkData = {
-                code: type == 1 ? this.phoneCode : this.emailCode,
-                opener: type == 1 ? this.phoneOpener : this.emailOpener
-            };
-            let checkRes = await this.$post(this.api.checkCode, checkData);
-            if (checkRes.errmessage == "success") {
-                let resetData = {
-                    userId: this.userId,
-                    password: this.newPassword
             };
-                let resetRes = await this.$post(this.api.resetPassword, resetData);
+            this.$post(this.api.bindPhoneOrEmail, data).then(res => {
-                if (resetRes.errmessage == "success") {
+                util.successMsg("绑定成功");
-                    util.successMsg("重置成功");
+                this.loginForm.phone = this.phone;
-                    this.forgetVisible = false;
+                this.phoneVisible = false;
-                }
-            }
-        },
-        switchType(type) {
-            this.phoneReset = type;
-        },
-        submitFormLogin(form) {
-            this.$refs[form].validate(valid => {
-                if (valid) {
-                    this.loginForm.distinguish = this.activeName === "1" ? 1 : 2;
-                    this.login(this.loginForm).then(() => {
-                        let redirect = this.$route.query.redirect ? decodeURIComponent(this.$route.query.redirect) : "/index";
-                        this.$router.replace(redirect);
             }).catch(res => {
             });
-                } else {
-                    return util.errorMsg("请检查表单数据");
-                }
-            });
-        },
-        blur() {
-            this.loginForm.random = Math.floor(Math.random() * 999999999);
-            this.verificationIMG = this.api.verification + "?random=" + `${this.loginForm.random}`;
         }
-    },
-    created() {
-        this.blur();
     }
 };
 </script>
@@ -616,7 +346,7 @@ export default {
             .submit {
                 width: 100%;
                 height: 48px;
-                margin-top: 40px;
+                margin-top: 20px;
                 line-height: 48px;
                 padding: 0;
                 font-size: 18px;

src/setting.js

@@ -62,6 +62,7 @@ const Setting = {
     /**
      * 基础配置
      * */
+    platformId: 1, // 平台标识，1职站，2数据平台，3中台
     titleSuffix: title, // 网页标题的后缀
     routerMode: "hash", // 路由模式，可选值为 history 或 hash
     showProgressBar: true, // 页面切换时，是否显示模拟的进度条