From 375513370cc01fcd976987d07797249600b0bb3e Mon Sep 17 00:00:00 2001
From: 杨磊 <505174330@qq.com>
Date: 星期四, 07 八月 2025 17:15:09 +0800
Subject: [PATCH] 'first'
---
src/views/login/login.vue | 545 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 545 insertions(+), 0 deletions(-)
diff --git a/src/views/login/login.vue b/src/views/login/login.vue
new file mode 100644
index 0000000..9201506
--- /dev/null
+++ b/src/views/login/login.vue
@@ -0,0 +1,545 @@
+<template>
+ <div class="loginPage">
+ <div class="loginContent">
+ <div class="loginFormBox">
+ <div class="title">
+ <span
+ :class="{ active: !weChatLogin }"
+ @click="
+ () => {
+ weChatLogin = false;
+ }
+ "
+ >鎵嬫満鍙风櫥褰�</span
+ >
+ <span class="division">|</span>
+ <span :class="{ active: weChatLogin }" @click="weChatLoginFun"
+ >寰俊鐧诲綍</span
+ >
+ </div>
+ <!-- 鐢ㄦ埛鍚嶅瘑鐮佺櫥褰� -->
+ <div v-if="!weChatLogin">
+ <div class="loginContentBox">
+ <div class="errorTips" v-if="errorTipsTxt">
+ {{ errorTipsTxt }}
+ <span
+ v-if="loginFormType == 'password'"
+ class="findPassword"
+ @click="toFindPassword()"
+ >鎵惧洖瀵嗙爜</span
+ >
+ </div>
+ <div class="codeLoginItemBox flex" v-if="loginFormType == 'code'">
+ <el-select
+ style="width: 100px"
+ class="mr10"
+ placeholder="璇烽�夋嫨"
+ v-model="loginForm.region"
+ >
+ <el-option
+ v-for="item in options"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ ></el-option>
+ </el-select>
+ <el-input
+ class="flex1"
+ placeholder="璇疯緭鍏ユ墜鏈哄彿"
+ v-model="loginForm.mobilePhone"
+ @keyup.enter.native="loginFun"
+ ></el-input>
+ </div>
+ <div class="codeLoginItemBox flex" v-if="loginFormType == 'code'">
+ <el-input
+ placeholder="璇疯緭鍏ュ浘褰㈤獙璇佺爜"
+ class="flex1 mr10"
+ v-model="loginForm.imgCode"
+ ></el-input>
+ <div class="imgCode">
+ <img :src="imgCode" alt="" @click="getImgCapcha" />
+ </div>
+ </div>
+ <div class="codeLoginItemBox flex" v-if="loginFormType == 'code'">
+ <el-input
+ placeholder="璇疯緭鍏ラ獙璇佺爜"
+ class="flex1 mr10"
+ v-model="loginForm.verificationCode"
+ @keyup.enter.native="loginFun"
+ ></el-input>
+ <el-button
+ style="width: 140px"
+ @click="getVerifyCode"
+ :disabled="countDown != 0"
+ >{{
+ countDown == 0
+ ? "鑾峰彇鐭俊楠岃瘉鐮�"
+ : "楠岃瘉鐮�(" + countDown + "s)"
+ }}</el-button
+ >
+ </div>
+ <div class="loginItemBox" v-if="loginFormType == 'password'">
+ <span>鎵嬫満鍙�</span>
+ <el-input
+ class="loginItemIpt"
+ v-model="loginForm.mobilePhone"
+ placeholder="璇疯緭鍏ユ墜鏈哄彿"
+ clearable
+ @keyup.enter.native="loginFun"
+ ></el-input>
+ </div>
+ <div class="loginItemBox" v-if="loginFormType == 'password'">
+ <span>瀵嗙爜</span>
+ <el-input
+ class="loginItemIpt"
+ v-model="loginForm.password"
+ type="password"
+ show-password
+ placeholder="璇疯緭鍏ュ瘑鐮�"
+ @keyup.enter.native="loginFun"
+ ></el-input>
+ </div>
+ <div class="changFormBtn">
+ <span
+ v-if="loginFormType == 'password'"
+ @click="() => (loginFormType = 'code')"
+ >鐭俊楠岃瘉鐮佺櫥褰�</span
+ >
+ <span
+ v-if="loginFormType == 'code'"
+ @click="() => (loginFormType = 'password')"
+ >鎵嬫満鍙峰瘑鐮佺櫥褰�</span
+ >
+ </div>
+ <div class="loginBtnBox">
+ <el-button
+ type="primary"
+ class="loginBtn"
+ @click="loginFun"
+ :loading="loginLoading"
+ >鐧� 褰�</el-button
+ >
+ </div>
+ <div class="registerBox">
+ <span
+ @click="
+ () => {
+ $router.push({
+ path: '/register'
+ });
+ }
+ "
+ >绔嬪嵆娉ㄥ唽</span
+ >
+ <span class="division">|</span>
+ <span @click="toFindPassword">蹇樿瀵嗙爜</span>
+ </div>
+ </div>
+ </div>
+ <!-- 寰俊鐧诲綍 -->
+ <div class="wechatBox" v-if="weChatLogin">
+ <wxlogin
+ :redirect_uri="wxLogin.redirectURL"
+ style="width: 300px; height: 400px; margin: 20px auto 0"
+ :appid="wxLogin.appid"
+ :scope="wxLogin.scope"
+ state="WeChatScanningCodeLogin"
+ >
+ </wxlogin>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+<script>
+import wxlogin from "vue-wxlogin";
+export default {
+ name: "login",
+ data() {
+ return {
+ redirectPath: "",
+ weChatLogin: false,
+ loginLoading: false,
+ errorTipsTxt: "",
+ loginFormType: "code",
+ imgCode: "",
+ // 鐧诲綍琛ㄥ崟
+ loginForm: {
+ region: "涓浗+86",
+ mobilePhone: "",
+ password: "",
+ imgCode: "",
+ verificationCode: ""
+ },
+ countDown: 0,
+ options: [
+ {
+ value: "涓浗+86",
+ label: "涓浗+86"
+ }
+ ],
+ wxLogin: {
+ appid: "wxad15251431e1f3fd",
+ scope: "snsapi_login",
+ redirectURL: encodeURIComponent("https://www.caupress.com.cn/website/")
+ }
+ };
+ },
+ components: {
+ wxlogin
+ },
+ created() {
+ if (this.$route.query.from == "weChatLogin") {
+ this.weChatLoginFun()
+ }
+ if (!this.tool.getCookie(this.config.tokenKey)) {
+ this.$store.dispatch("setToken");
+ }
+ if (!this.tool.getCookie(this.config.userInfoKey)) {
+ this.$store.dispatch("setUserInfo");
+ }
+ this.redirectPath = this.$route.query.redirectPath;
+ this.getImgCapcha();
+ },
+ methods: {
+ getImgCapcha() {
+ this.MG.identity.getImgCode().then((res) => {
+ this.imgCode = "data:image/png;base64," + res;
+ });
+ },
+ // 鑾峰彇楠岃瘉鐮�
+ getVerifyCode() {
+ if (!this.config.reg_tel.test(this.loginForm.mobilePhone)) {
+ this.$message({
+ message: "璇疯緭鍏ユ纭牸寮忕殑鎵嬫満鍙凤紒",
+ type: "error"
+ });
+ return false;
+ } else if (
+ this.loginForm.imgCode == "" ||
+ this.loginForm.imgCode.length != 4
+ ) {
+ this.$message({
+ message: "璇疯緭鍏ユ纭牸寮忕殑鍥惧舰楠岃瘉鐮�",
+ type: "error"
+ });
+ return false;
+ } else {
+ this.MG.identity
+ .getPhoneCode({
+ phoneNumber: this.loginForm.mobilePhone,
+ imageCaptcha: this.loginForm.imgCode,
+ appRefCode: this.config.appRefCode
+ })
+ .then((res) => {
+ if (res == "楠岃瘉鐮佸彂閫佹垚鍔�") {
+ this.getSecond(60);
+ this.$message({
+ message: res,
+ type: "success"
+ });
+ } else {
+ this.$message({
+ message: res,
+ type: "error"
+ });
+ this.getImgCapcha();
+ }
+ });
+ }
+ },
+ //楠岃瘉鐮佸�掕鏃�
+ getSecond(time) {
+ if (!this.timer) {
+ this.countDown = time;
+ this.timer = setInterval(() => {
+ this.countDown--;
+ if (this.countDown == 0) {
+ clearInterval(this.timer);
+ this.timer = null;
+ }
+ }, 1000);
+ }
+ },
+ weChatLoginFun() {
+ window.location.href = `https://open.weixin.qq.com/connect/qrconnect?appid=${this.wxLogin.appid}&scope=${this.wxLogin.scope}&redirect_uri=${this.wxLogin.redirectURL}&state=WeChatScanningCodeLogin`;
+ },
+ loginFun() {
+ if (!this.loginForm.mobilePhone) {
+ this.$message({
+ message: "璇疯緭鍏ユ墜鏈哄彿锛�",
+ type: "error"
+ });
+ return false;
+ }
+ // 娴嬭瘯浣跨敤鐢ㄦ埛鍚嶅拰瀵嗙爜
+ // if (!this.config.reg_tel.test(this.loginForm.mobilePhone)) {
+ // this.$message({
+ // message: "璇疯緭鍏ユ纭牸寮忕殑鎵嬫満鍙凤紒",
+ // type: "error"
+ // });
+ // return false;
+ // }
+ if (this.loginFormType == "code" && !this.loginForm.verificationCode) {
+ this.$message({
+ message: "璇疯緭鍏ョ煭淇￠獙璇佺爜锛�",
+ type: "error"
+ });
+ return false;
+ }
+ if (this.loginFormType == "password" && !this.loginForm.password) {
+ this.$message({
+ message: "璇疯緭鍏ュ瘑鐮侊紒",
+ type: "error"
+ });
+ return false;
+ }
+ this.loginLoading = true;
+ if (this.loginFormType == "code") {
+ this.MG.identity
+ .loginByMobilePhone({
+ phoneNumber: this.loginForm.mobilePhone,
+ phoneCaptcha: this.loginForm.verificationCode,
+ appRefCode: this.config.appRefCode,
+ platform: "PCWeb"
+ })
+ .then((res) => {
+ this.loginLoading = false;
+ if (res && res.status == "Ok") {
+ this.$message({
+ message: "鐧诲綍鎴愬姛锛�",
+ type: "success"
+ });
+ this.$store.dispatch("setToken", res.token);
+ this.getUserInfo();
+ } else {
+ this.errorTipsTxt = res.message || "鎵嬫満鍙锋垨楠岃瘉鐮侀敊璇紒";
+ }
+ });
+ } else {
+ this.MG.identity
+ .loginByPassword({
+ loginName: this.loginForm.mobilePhone,
+ password: this.loginForm.password,
+ appRefCode: this.config.appRefCode,
+ platform: "PCWeb"
+ })
+ .then((res) => {
+ this.loginLoading = false;
+ if (res && res.status == "Ok") {
+ this.$message({
+ message: "鐧诲綍鎴愬姛锛�",
+ type: "success"
+ });
+ this.$store.dispatch("setToken", res.token);
+ this.getUserInfo();
+ } else {
+ this.errorTipsTxt = res.message || "鎵嬫満鍙锋垨瀵嗙爜閿欒锛�";
+ }
+ });
+ }
+ },
+ getUserInfo(callback) {
+ this.MG.identity.getCurrentAppUser().then((res) => {
+ // 鐢ㄦ埛淇℃伅浼樺厛绾э細鏁欏笀璁よ瘉 > 寰俊 > 瀛︾敓锛堟敞鍐屾椂榛樿锛�
+ if (res) {
+ let teacherRole = res.roleLinks.find(
+ (item) => item.role.refCode == "teacher"
+ );
+ let teacherInfo = res.infoList.find(
+ (item) => item.type == "teacherInfo"
+ );
+ let wechatInfo = res.infoList.find((item) => item.type == "WeChat");
+ let studentInfo = res.infoList.find((item) => item.type == "Default");
+ let phoneInfo = res.secretList.find(
+ (item) => item.type == "MobilePhone"
+ );
+ if (teacherRole && teacherInfo) {
+ let data = {};
+ try {
+ data = JSON.parse(teacherInfo.data);
+ } catch (error) {
+ data = {};
+ }
+ this.$store.dispatch("setUserInfo", {
+ ...data,
+ name: data.fullName,
+ phoneNumber: phoneInfo?.credential,
+ role: "Teacher",
+ roleId: teacherRole.role.id
+ });
+ } else if (wechatInfo) {
+ this.$store.dispatch("setUserInfo", {
+ ...wechatInfo,
+ phoneNumber: phoneInfo?.credential,
+ role: "Student"
+ });
+ } else if (studentInfo) {
+ this.$store.dispatch("setUserInfo", {
+ ...studentInfo,
+ phoneNumber: phoneInfo?.credential,
+ role: "Student"
+ });
+ }
+ }
+ // 娓呯┖鏈湴鍌ㄥ瓨鐨勭敵璇锋牱涔︽竻鍗�
+ this.$store.commit("emptyBookList");
+ if (callback) {
+ callback();
+ } else {
+ this.$router.push({
+ path: this.redirectPath ? this.redirectPath : "/home"
+ });
+ }
+ });
+ },
+ //鎵惧洖瀵嗙爜
+ toFindPassword() {
+ this.$router.push({
+ path: "/findPassword"
+ });
+ }
+ }
+};
+</script>
+<style lang="less" scoped>
+@import "@/assets/css/theme.less";
+.loginPage {
+ width: 100%;
+ height: 100%;
+ background-image: url("@/assets/images/login/pageBg.png");
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ position: relative;
+ padding: 50px 0;
+ .loginContent {
+ width: 1200px;
+ height: 570px;
+ margin: 0 auto;
+ padding: 36px 0;
+ box-shadow: 0px 0px 66px 0px rgb(170 170 170 / 35%);
+ background-image: url("@/assets/images/login/boxBg.png");
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ box-sizing: border-box;
+ text-align: right;
+ .loginFormBox {
+ display: inline-block;
+ width: 420px;
+ height: 496px;
+ padding: 30px 40px;
+ margin-right: 60px;
+ background: #fff;
+ box-sizing: border-box;
+ box-shadow: 0 0 5px 0 hsl(0deg 0% 67% / 35%);
+ .title {
+ font-size: 16px;
+ text-align: center;
+ color: #333333;
+ span {
+ display: inline-block;
+ width: 80px;
+ cursor: pointer;
+ &.active {
+ font-weight: bold;
+ color: @color;
+ }
+ }
+ .division {
+ width: 5px;
+ margin: 0 50px;
+ cursor: initial;
+ color: #d0d0d0;
+ }
+ }
+ .loginContentBox {
+ padding-top: 60px;
+ margin-top: 20px;
+ margin-bottom: 15px;
+ position: relative;
+ .errorTips {
+ position: absolute;
+ top: 8px;
+ left: 10px;
+ font-size: 12px;
+ color: #e50021;
+ .findPassword {
+ cursor: pointer;
+ color: #2b68cd;
+ font-size: 12px;
+ }
+ }
+ .codeLoginItemBox {
+ margin-bottom: 15px;
+ .imgCode {
+ width: 140px;
+ height: 40px;
+ img {
+ width: 100%;
+ height: 100%;
+ background: #efefef;
+ }
+ }
+ }
+ .loginItemBox {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-radius: 4px;
+ margin-bottom: 15px;
+ box-sizing: border-box;
+ border: 1px solid #dcdfe6;
+ span {
+ display: inline-block;
+ width: 100px;
+ text-align: center;
+ }
+ }
+ .changFormBtn {
+ margin-bottom: 15px;
+ overflow: hidden;
+ span {
+ cursor: pointer;
+ }
+ }
+ .loginBtnBox {
+ margin-bottom: 15px;
+ .loginBtn {
+ width: 100%;
+ }
+ }
+ .registerBox {
+ margin-top: 20px;
+ font-size: 14px;
+ text-align: center;
+ color: #666666;
+ span {
+ cursor: pointer;
+ }
+ .division {
+ margin: 0 20px;
+ cursor: initial;
+ color: #d0d0d0;
+ }
+ }
+ }
+ .wechatBox {
+ .wxCodeBox {
+ margin-top: 10px;
+ height: 300px;
+ }
+ }
+ }
+ }
+}
+.mr10 {
+ margin-right: 10px;
+}
+</style>
+<style>
+.loginItemIpt .el-input__inner {
+ height: 38px;
+ line-height: 38px;
+ border: 0;
+}
+</style>
--
Gitblit v1.9.1