|
|
@@ -0,0 +1,740 @@
|
|
|
+<template>
|
|
|
+ <div class="login_page" >
|
|
|
+ <div class="login_header">
|
|
|
+ <div class="header_left">
|
|
|
+ <img src="../../assets/login/login_logo.png" alt="">
|
|
|
+ <span style="margin-left: 10px;"> 大数据精准教学诊断平台</span>
|
|
|
+ </div>
|
|
|
+ <div class="header_right">
|
|
|
+ <div class="right_button" @click="GoWebsite" >
|
|
|
+ 官方网站
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="login_content" id="particles">
|
|
|
+
|
|
|
+ <div class="login_info">
|
|
|
+ <div class="login_info_title">
|
|
|
+ <p>HI～欢迎使用</p>
|
|
|
+ <p>大数据精准教学诊断平台</p>
|
|
|
+ </div>
|
|
|
+ <div :class="['login_info_message',{'module_tab':tabActive == 1}]">
|
|
|
+ <template v-if="tabActive == 1">
|
|
|
+ <div :class="['tab_item',{'tab_active':actived == item.value}]" :key="item.value" v-for="item in tabList" @click="TabChange(item.value)">
|
|
|
+ {{ item.title }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else>{{ tabActive == 3 ? '忘记密码' : tabActive == 4 ? '绑定账号' : ''}}</template>
|
|
|
+ </div>
|
|
|
+ <!-- 账号密码登录 -->
|
|
|
+ <div v-if="tabActive == 1">
|
|
|
+ <div class="login_info_input">
|
|
|
+ <el-input v-model="userName" placeholder="请输入账号">
|
|
|
+ <template #prefix>
|
|
|
+ <span>
|
|
|
+ <img src="@/assets/login/input_user.webp" alt="User Icon" style="width: 18px; height: 18px" />
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <template #suffix v-if="userName != ''">
|
|
|
+ <span @click="ClearInput" style="cursor: pointer">
|
|
|
+ <img src="@/assets/login/input_clear.webp" alt="Clear Icon" style="width: 18px; height: 18px" />
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="login_info_input">
|
|
|
+
|
|
|
+ <el-input v-model="passWord" :type="isPasswordVisible ? 'text' : 'password'" placeholder="请输入密码">
|
|
|
+ <template #prefix>
|
|
|
+ <span>
|
|
|
+ <img src="@/assets/login/input_pass.webp" alt="User Icon" style="width: 18px; height: 18px" />
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <template #suffix>
|
|
|
+
|
|
|
+ <span @click="TogglePasswordVisibility" style="cursor: pointer">
|
|
|
+ <i class="iconfont icon_xianshimima" v-if="isPasswordVisible"></i>
|
|
|
+ <i class="iconfont icon_buxianshimima" v-else></i>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="login_info_item">
|
|
|
+ <div class="item_left">
|
|
|
+ <el-checkbox v-model="remeberPassWord">记住密码</el-checkbox>
|
|
|
+ </div>
|
|
|
+ <div class="item_right" @click="LoginMode(3)">忘记密码</div>
|
|
|
+ </div>
|
|
|
+ <div class="login_info_button">
|
|
|
+ <el-button style="width:100%;" @click="SubmitLogin()" :loading="loadingLogin">登 录</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 微信登录 -->
|
|
|
+ <div v-if="tabActive == 2" class="wechat_login">
|
|
|
+ <p class="text">微信扫描登录</p>
|
|
|
+ <div class="wechat_url" id="wechat-qr-container"></div>
|
|
|
+ </div>
|
|
|
+ <!-- 忘记密码 -->
|
|
|
+ <div v-if="tabActive == 3">
|
|
|
+ <ForgetPassWord @GoLogin="GoLogin" />
|
|
|
+ </div>
|
|
|
+ <!-- 绑定账号 -->
|
|
|
+ <div v-if="tabActive == 4">
|
|
|
+ <div class="login_info_input">
|
|
|
+ <el-form :model="bindForm" :rules="bindFormrules" ref="bindFormRef">
|
|
|
+ <el-form-item prop="userName">
|
|
|
+ <el-input v-model="bindForm.userName" clearable placeholder="请输入账号" prefix-icon="iconfont icon_zhanghao" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="passWord">
|
|
|
+ <el-input v-model="bindForm.passWord" show-password clearable placeholder="请输入密码" prefix-icon="iconfont icon_mima" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="login_info_button">
|
|
|
+ <el-button style="width:100%;" @click="BindAccount" :loading="loadingBind">立即绑定</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 其他登录方式选项 -->
|
|
|
+ <div class="login_other_type">
|
|
|
+ <div class="other_login_line">
|
|
|
+ <span class="line"></span>
|
|
|
+ <span class="text">其他登录方式</span>
|
|
|
+ <span class="line"></span>
|
|
|
+ </div>
|
|
|
+ <div class="other_login_icon">
|
|
|
+ <div class="icon_item" v-if="tabActive != 1">
|
|
|
+ <img src="@/assets/login/account.webp" alt="" @click="LoginMode(1)" />
|
|
|
+ <p>账号</p>
|
|
|
+ </div>
|
|
|
+ <div class="icon_item" v-if="tabActive != 2">
|
|
|
+ <img src="@/assets/login/login_wechat.webp" alt="" @click="LoginMode(2)" />
|
|
|
+ <p>微信</p>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="icon_item">
|
|
|
+ <img src="@/assets/login/login_feishu.webp" alt=""></img>
|
|
|
+ <p>钉钉</p>
|
|
|
+ </div> -->
|
|
|
+ <!-- <div class="icon_item">
|
|
|
+ <img src="@/assets/login/login_email.webp" alt=""></img>
|
|
|
+ <p>邮箱</p>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="page_dialog">
|
|
|
+ <el-dialog title="绑定账号" center :visible.sync="showBindDialog" width="400px" top="20vh">
|
|
|
+ <div class="dialog_center padding_20">
|
|
|
+ <div class="bingding_center">
|
|
|
+
|
|
|
+ <el-form :model="bindForm" :rules="bindFormrules" ref="bindFormRef">
|
|
|
+ <div class="bingding_input">
|
|
|
+ <el-input v-model="bindForm.userName" clearable placeholder="请输入账号" prefix-icon="iconfont icon_zhanghao" />
|
|
|
+ </div>
|
|
|
+ <div class="bingding_input">
|
|
|
+ <el-input v-model="bindForm.passWord" clearable placeholder="请输入密码" prefix-icon="iconfont icon_mima" />
|
|
|
+ </div>
|
|
|
+ <div class="bingding_button" :disabled="!bindForm.userName || !bindForm.passWord" @click="BindAccount" v-loading="loadingBind">立即绑定</div>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import particles from "particles.js";//页面例子动画特效
|
|
|
+import user from "@/http/api/user";
|
|
|
+import { setToken } from "@/utils/auth";
|
|
|
+import ForgetPassWord from "./components/ForgetPassWord"
|
|
|
+import { encrypt } from "@/utils/jsencrypt";
|
|
|
+import base from "@/http/common/base";
|
|
|
+export default {
|
|
|
+ components: { ForgetPassWord },
|
|
|
+ provide() {
|
|
|
+ return {
|
|
|
+ setTabActive: () => {
|
|
|
+ this.tabActive = 1
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ tabList:[{
|
|
|
+ title:'教师',
|
|
|
+ value:'teacher'
|
|
|
+ },{
|
|
|
+ title:'学生',
|
|
|
+ value:'student'
|
|
|
+ }],
|
|
|
+ actived:'student',
|
|
|
+ userName:'',//登录账号
|
|
|
+ passWord:'',//登录密码
|
|
|
+ isPasswordVisible: false,//密码是否可见
|
|
|
+ remeberPassWord:false,//记住密码
|
|
|
+ loadingLogin:false,//登录按钮加载状态
|
|
|
+ tabActive: 1, // 切换账号登录-1，微信登录-2，忘记密码-3，绑定账号-4
|
|
|
+ wechatUrl: '', // 微信二维码地址
|
|
|
+ code: '', // 回调地址返回登录需要的code
|
|
|
+ wxOpenId: '', // 绑定账号需要的openid
|
|
|
+ loadingBind: false, // 绑定账号按钮loading
|
|
|
+ showBindDialog: false, // 绑定账号弹窗
|
|
|
+ bindForm: {
|
|
|
+ userName: '', // 用户账号
|
|
|
+ passWord: '' // 用户密码
|
|
|
+ }, // 绑定用户
|
|
|
+ bindFormrules: {
|
|
|
+ userName: [
|
|
|
+ {required: true, message: '请输入账号', trigger: ['blur', 'change']}
|
|
|
+ ],
|
|
|
+ passWord: [
|
|
|
+ {required: true, message: '请输入密码', trigger: ['blur', 'change']}
|
|
|
+ ]
|
|
|
+ }, // 绑定用户表单校验
|
|
|
+
|
|
|
+ apiUrl:process.env.VUE_APP_BASE || 'https://www.k12100.com',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ // 加载微信sdk
|
|
|
+ this.LoadSdk()
|
|
|
+ //加载粒子动画特效
|
|
|
+ this.InitParticles();
|
|
|
+ // 监听键盘按下事件
|
|
|
+ window.addEventListener('keydown', this.handleKeyDown);
|
|
|
+ // 监听微信中间页面传递参数
|
|
|
+ window.addEventListener('message', this.WechatLogin);
|
|
|
+
|
|
|
+ // 恢复记住的用户名和密码
|
|
|
+ this.RestoreRememberedCredentials();
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ window.removeEventListener('keydown', this.handleKeyDown);
|
|
|
+ window.removeEventListener('message', this.WechatLogin);
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ TabChange(value){
|
|
|
+ this.actived = value;
|
|
|
+ },
|
|
|
+ // 恢复记住的用户名和密码
|
|
|
+ RestoreRememberedCredentials()
|
|
|
+ {
|
|
|
+ try {
|
|
|
+ const savedUserName = localStorage.getItem("userName");
|
|
|
+ const savedUserPassWord = localStorage.getItem("userPassWord");
|
|
|
+
|
|
|
+ if (savedUserName && savedUserPassWord) {
|
|
|
+ this.userName = savedUserName;
|
|
|
+ this.passWord = savedUserPassWord;
|
|
|
+ this.remeberPassWord = true; // 设置记住密码为选中状态
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error("恢复记住的凭证时出错:", error);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ handleKeyDown(event)
|
|
|
+ {
|
|
|
+ if (event.key === 'Enter') {
|
|
|
+ this.SubmitLogin(); // 触发登录方法
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ //添加统计监控代码
|
|
|
+ AddAnalyticsScript() {
|
|
|
+ // 等待DOM加载完成
|
|
|
+ setTimeout(() => {
|
|
|
+ var _s = document.createElement('script');
|
|
|
+ _s.setAttribute('type','text/javascript');
|
|
|
+ _s.setAttribute('id','_bxtj');
|
|
|
+ _s.setAttribute('async',true);
|
|
|
+
|
|
|
+ // 获取当前用户信息
|
|
|
+ console.log('获取当前用户信息',this.$store.state.user.userInfo);
|
|
|
+ console.log("打印网站siteid",localStorage.getItem("user_schoolWebSiteId"));
|
|
|
+
|
|
|
+
|
|
|
+ // 设置子站点名称
|
|
|
+ const currentUser = this.$store.state.user.userInfo.loginName || ''; // 当前用户名
|
|
|
+ const subSiteName = this.$store.state.user.userInfo.schoolName || '';
|
|
|
+ const mySiteId = localStorage.getItem("user_schoolWebSiteId") || ''; // 你的站点ID
|
|
|
+ // 构建URL（按照原始代码格式）
|
|
|
+ let src = `https://bjedures.bjedu.cn/bjjw_logdb/bxlog.js?user=${currentUser}&id=${mySiteId}`;
|
|
|
+ if (subSiteName) {
|
|
|
+ src += `&subSiteName=${encodeURIComponent(subSiteName)}`;
|
|
|
+ }
|
|
|
+ _s.setAttribute('src', src);
|
|
|
+ var body = document.getElementsByTagName('body');
|
|
|
+ body[0].appendChild(_s);
|
|
|
+ }, 500);
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ //密码是否可见
|
|
|
+ TogglePasswordVisibility()
|
|
|
+ {
|
|
|
+ this.isPasswordVisible = !this.isPasswordVisible;
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ //加载例子动画特效
|
|
|
+ InitParticles()
|
|
|
+ {
|
|
|
+
|
|
|
+ const particlesConfig = {
|
|
|
+ // 粒子配置项
|
|
|
+ particles: {
|
|
|
+ number: {
|
|
|
+ value: 60,//控制例子的数量 默认80
|
|
|
+ density: {
|
|
|
+ enable: true,//是否启用粒子密度检测（默认值：true）
|
|
|
+ value_area: 800//密度检测的区域大小
|
|
|
+ }
|
|
|
+ },
|
|
|
+ color: {
|
|
|
+ // value: ["#ff0000", "#00ff00", "#0000ff"]//定义例子的颜色数组
|
|
|
+ value: "#ffffff"
|
|
|
+ },
|
|
|
+ shape: {
|
|
|
+ type: ["circle"],//粒子的形状 支持 circle圆, edge 正方形, triangle三角形, polygon五边形, image
|
|
|
+ stroke: {
|
|
|
+ width: 0,
|
|
|
+ color: "#000000"
|
|
|
+ },//粒子边框的样式
|
|
|
+ polygon: {
|
|
|
+ nb_sides: 5
|
|
|
+ },//粒子多边形的边数
|
|
|
+ image: {
|
|
|
+ src: "img/github.svg",
|
|
|
+ width: 100,
|
|
|
+ height: 100
|
|
|
+ }//使用图片作为粒子的形状
|
|
|
+ },
|
|
|
+ opacity: {
|
|
|
+ value: 0.5,//粒子的透明度
|
|
|
+ random: false,//是否启用随机透明度（默认值：false）
|
|
|
+ anim: {
|
|
|
+ enable: false,//是否启用透明度动画（默认值：false）
|
|
|
+ speed: 1,//透明度动画速度（默认值：1）
|
|
|
+ opacity_min: 0.1,//随机透明度最小值（默认值：0.1）
|
|
|
+ sync: false//是否启用透明度动画同步（默认值：false）
|
|
|
+ }
|
|
|
+ },
|
|
|
+ size: {
|
|
|
+ value: 3,//粒子的大小
|
|
|
+ random: false,//是否启用随机大小（默认值：false）
|
|
|
+ anim: {
|
|
|
+ enable: true,//是否启用大小动画（默认值：false）
|
|
|
+ speed: 40,//动画速度
|
|
|
+ size_min: 0.1,//随机大小最小值（默认值：0）
|
|
|
+ sync: false//是否同步动画
|
|
|
+ }
|
|
|
+ },
|
|
|
+ line_linked: {
|
|
|
+ enable: true,//是否启用连线
|
|
|
+ distance: 150,//连线最大距离
|
|
|
+ color: "#ffffff",//连线颜色
|
|
|
+ opacity: 0.4,//连线透明度
|
|
|
+ width: 1//连线宽度
|
|
|
+ },//粒子间的连线配置
|
|
|
+ move: {
|
|
|
+ enable: true,//是否启用粒子行动
|
|
|
+ speed: 6,//粒子行动速度
|
|
|
+ direction: "none",//粒子行动方向可选值（none, top, top-right, right, bottom-right, bottom, bottom-left, left, top-left）
|
|
|
+ random: false,//是否启用粒子行动方向随机（默认值：false）
|
|
|
+ straight: false,//是否直线移动
|
|
|
+ out_mode: "out",//粒子离开画布后的行为（out, bounce）
|
|
|
+ bounce: false,//是否启用粒子间反弹
|
|
|
+ attract: {
|
|
|
+ enable: false,//是否启用粒子间吸引
|
|
|
+ rotateX: 600,//粒子间吸引的X轴旋转角度
|
|
|
+ rotateY: 1200//粒子间吸引的Y轴旋转角度
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },//定义粒子的行动
|
|
|
+ interactivity: {
|
|
|
+ detect_on: "canvas",
|
|
|
+ events: {
|
|
|
+ onhover: {
|
|
|
+ enable: true,
|
|
|
+ mode: "grab"
|
|
|
+ },
|
|
|
+ onclick: {
|
|
|
+ enable: true,
|
|
|
+ mode: "push"
|
|
|
+ },
|
|
|
+ resize: true
|
|
|
+ },//粒子与画布的交互
|
|
|
+ modes: {
|
|
|
+ grab: {
|
|
|
+ distance: 140,//抓取距离
|
|
|
+ line_linked: {
|
|
|
+ opacity: 1//连线透明度
|
|
|
+ }
|
|
|
+ },//鼠标悬停时的抓取效果
|
|
|
+ bubble: {
|
|
|
+ distance: 400,//气泡距离
|
|
|
+ size: 40,//气泡大小
|
|
|
+ duration: 2,//气泡持续时间
|
|
|
+ opacity: 8,//气泡透明度
|
|
|
+ speed: 3//气泡速度
|
|
|
+ },//鼠标点击时的气泡效果
|
|
|
+ repulse: {
|
|
|
+ distance: 200,//排斥距离
|
|
|
+ duration: 0.4//排斥持续时间
|
|
|
+ },//鼠标点击时的排斥效果
|
|
|
+ push: {
|
|
|
+ particles_nb: 4//推送的粒子数量
|
|
|
+ },//鼠标推送时的添加效果
|
|
|
+ remove: {
|
|
|
+ particles_nb: 2//移除的粒子数量
|
|
|
+ }//鼠标点击时的移除效果
|
|
|
+ }//定义交互模式
|
|
|
+ },
|
|
|
+ retina_detect: true//是否启用视网膜检测，自动调整粒子大小以适应高分辨率屏幕。
|
|
|
+ };
|
|
|
+ particlesJS("particles", particlesConfig, function() {
|
|
|
+ console.log('粒子动画特效加载成功');
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ //清空输入框
|
|
|
+ ClearInput() {
|
|
|
+ this.userName = "";
|
|
|
+ },
|
|
|
+
|
|
|
+ //登录提交
|
|
|
+ SubmitLogin()
|
|
|
+ {
|
|
|
+
|
|
|
+ if (!this.userName) {
|
|
|
+ this.$message({
|
|
|
+ message: "用户名不能为空！",
|
|
|
+ type: "warning",
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!this.passWord) {
|
|
|
+ this.$message({
|
|
|
+ message: "密码不能为空！",
|
|
|
+ type: "warning",
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const params = {
|
|
|
+ // "captchaAnswer": "",
|
|
|
+ // "captchaUUID": "",
|
|
|
+ "password": encrypt(this.passWord.trim()),
|
|
|
+ // "password": this.passWord.trim(),
|
|
|
+ // "rememberMe": true,//记住我
|
|
|
+ // "userStatus": 0,//用户状态:用于后台管理直接免登录点击进来校验 默认为0 代表正常登录 1 代表免登录
|
|
|
+ "username": this.userName.trim()
|
|
|
+ };
|
|
|
+ this.loadingLogin=true;
|
|
|
+ if(this.actived == 'student'){//跳转学生端地址
|
|
|
+ user.studentLogin({
|
|
|
+ password:this.passWord.trim(),
|
|
|
+ username:this.userName.trim()
|
|
|
+ }).then((res) => {
|
|
|
+ this.loadingLogin=false;
|
|
|
+ if (res.code === 200) {
|
|
|
+ //跳转到学生端 code：账号 pw：密码 type：1单校 2联校
|
|
|
+ window.location.href = `${base.STUDENT_LOGIN}index?code=${this.userName.trim()}&pw=${encodeURIComponent(this.passWord.trim())}&type=1`;
|
|
|
+ }else{
|
|
|
+ this.$message({
|
|
|
+ message:res.msg,
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }).catch((err) => {
|
|
|
+ this.loadingLogin=false;
|
|
|
+ this.$message({
|
|
|
+ message: "服务器维护中，请稍后再试。",
|
|
|
+ type: "warning",
|
|
|
+ });
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ user.loginEmailPass(params).then((res) => {
|
|
|
+ this.loadingLogin=false;
|
|
|
+ if (res.code === 200) {
|
|
|
+ console.log("打印登录结果",res);
|
|
|
+ this.$store.dispatch("user/CLEAR_LOCAL_STORAGE");//清空本地存储
|
|
|
+ setToken(res.data.tokenValue);
|
|
|
+
|
|
|
+ this.$store.dispatch("user/SET_TOKEN", res.data.tokenValue);
|
|
|
+ this.$store.dispatch("user/SET_SCHOOL_LOGO", res.data.schoolLogoUrl);//设置学校logo
|
|
|
+ this.$store.dispatch("user/SET_SCHOOL_TYPE",res.data.schoolType);//获取用户学校类型
|
|
|
+ this.$store.dispatch("user/SET_SCHOOL_WEB_SITE_ID",res.data.cloudMonitorSiteId || '');//设置学校网站id
|
|
|
+
|
|
|
+ // console.log("打印学校logo",this.$store.state.user.schoolLogo);
|
|
|
+ this.$store.dispatch("user/getUserInfoByToken").then(()=>{
|
|
|
+ console.log('获取用户登录信息成功,添加监控统计代码',this.$store.state.user.userInfo);
|
|
|
+
|
|
|
+ //成功获取用户信息后 添加监控统计代码
|
|
|
+ this.AddAnalyticsScript();
|
|
|
+
|
|
|
+ });//获取用户登录信息
|
|
|
+ this.$store.commit("user/SET_USEAR_INFOLOGIN", res.data);
|
|
|
+ const menuList=res.data.pcMenuVOS || [];
|
|
|
+ const permissions=res.data.permissions || [];
|
|
|
+ this.$store.commit("user/SET_PERMISSIONS",permissions);
|
|
|
+ this.$store.commit("user/SET_MENULIST",menuList);
|
|
|
+ if (this.remeberPassWord)
|
|
|
+ {
|
|
|
+ localStorage.setItem("userName", this.userName);
|
|
|
+ localStorage.setItem("userPassWord", this.passWord.trim());
|
|
|
+ } else
|
|
|
+ {
|
|
|
+ localStorage.removeItem("userName");
|
|
|
+ localStorage.removeItem("userPassWord");
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // const directUrl = this.$route.query.redirect || "/userInfo";
|
|
|
+ if(res.data.userType==1)
|
|
|
+ {
|
|
|
+ //临时用户 跳转到阅卷任务页 bug 4106
|
|
|
+ const directUrl = "/examMarking/markingTasks";//闯哥：默认跳转到分析报告页面
|
|
|
+ //后期需要根据角色 和任务来判断 老师有阅卷任务 默认跳转到阅卷页面 否则跳转到分析报告首页
|
|
|
+ this.$router.push({ path: directUrl });
|
|
|
+ }
|
|
|
+ else
|
|
|
+ {
|
|
|
+ //正式用户 跳转到分析报告首页
|
|
|
+ const directUrl = "/jointExamination/list";//闯哥：默认跳转到分析报告页面
|
|
|
+ //后期需要根据角色 和任务来判断 老师有阅卷任务 默认跳转到阅卷页面 否则跳转到分析报告首页
|
|
|
+ this.$router.push({ path: directUrl });
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ else
|
|
|
+ {
|
|
|
+ this.$message({
|
|
|
+ message:res.msg,
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.loadingLogin=false;
|
|
|
+ this.$message({
|
|
|
+ message: "服务器维护中，请稍后再试。",
|
|
|
+ type: "warning",
|
|
|
+ });
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ //去往官网
|
|
|
+ GoWebsite()
|
|
|
+ {
|
|
|
+
|
|
|
+ // window.open(this.apiUrl);
|
|
|
+ window.location.href = this.apiUrl+'/website';
|
|
|
+ },
|
|
|
+ GoLogin() {
|
|
|
+ this.tabActive = 1
|
|
|
+ },
|
|
|
+ //登录方式
|
|
|
+ LoginMode(val) {
|
|
|
+ //账号登录
|
|
|
+ if(val == 1) {
|
|
|
+ const container = document.getElementById("wechat-qr-container");
|
|
|
+ if (container) {
|
|
|
+ container.innerHTML = ""; // 清空容器内容
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //微信登录
|
|
|
+ if(val == 2) {
|
|
|
+ this.$api.user.getWechatCode().then(res => {
|
|
|
+ if(res.code == 200 && res.data) {
|
|
|
+ this.wechatUrl = res.data
|
|
|
+ if(window.WxLogin) {
|
|
|
+ this.RenderWechatQRCode()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.tabActive = val
|
|
|
+ },
|
|
|
+ // 动态加载微信SDK
|
|
|
+ LoadSdk() {
|
|
|
+ const script = document.createElement('script');
|
|
|
+ script.src = 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js';
|
|
|
+ document.body.appendChild(script);
|
|
|
+ },
|
|
|
+ // 微信二维码内置到登录窗口内
|
|
|
+ RenderWechatQRCode() {
|
|
|
+ const container = document.getElementById("wechat-qr-container");
|
|
|
+ if (!container || container.children.length > 0) return; // 防止重复渲染
|
|
|
+
|
|
|
+ const queryString = this.wechatUrl.split('?')[1]?.split('#')[0];
|
|
|
+ const urlParams = new URLSearchParams(queryString)
|
|
|
+ const appid = urlParams.get('appid')
|
|
|
+
|
|
|
+ const redirectUrl=this.apiUrl+"/#/wechatLogin";
|
|
|
+ console.log("打印重新定向的地址",redirectUrl)
|
|
|
+
|
|
|
+ new window.WxLogin({
|
|
|
+ self_redirect: true,
|
|
|
+ id: "wechat-qr-container", // 容器 ID
|
|
|
+ appid: appid, // 替换为你的微信开放平台 AppID
|
|
|
+ scope: "snsapi_login", // 授权作用域
|
|
|
+ redirect_uri: encodeURIComponent(redirectUrl), // 回调 URL
|
|
|
+ state: "STATE", // 可选状态值
|
|
|
+ style: "black", // 样式风格
|
|
|
+ stylelite: 1 , // 新版二维码样式
|
|
|
+ onReady: function(isReady){
|
|
|
+ console.log("微信登录组件准备就续",isReady);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 微信二维码扫描登录 event 微信回调地址传递参数
|
|
|
+ WechatLogin(event) {
|
|
|
+ console.log('event 微信二维码中间件传递参数', event)
|
|
|
+ let param = event.data
|
|
|
+ if (param.type === 'wechatLoginSuccess') {
|
|
|
+ // console.log('收到微信登录成功消息:', param.data.code)
|
|
|
+ this.code = param.data.code
|
|
|
+ this.$api.user.getLoginInfo({
|
|
|
+ code: param.data.code
|
|
|
+ }).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ // 账号已绑定微信
|
|
|
+ setToken(res.data.tokenValue);
|
|
|
+ this.$store.dispatch("user/SET_TOKEN", res.data.tokenValue);
|
|
|
+ this.$store.dispatch("user/SET_SCHOOL_LOGO", res.data.schoolLogoUrl);//设置学校logo
|
|
|
+ this.$store.dispatch("user/SET_SCHOOL_TYPE",res.data.schoolType);//获取用户学校类型
|
|
|
+ this.$store.dispatch("user/SET_SCHOOL_WEB_SITE_ID",res.data.cloudMonitorSiteId || '');//设置学校网站id
|
|
|
+ this.$store.dispatch("user/getUserInfoByToken").then(()=>{
|
|
|
+ console.log('获取用户登录信息成功,添加监控统计代码',this.$store.state.user.userName);
|
|
|
+ //成功获取用户信息后 添加监控统计代码
|
|
|
+ this.AddAnalyticsScript();
|
|
|
+
|
|
|
+ });//获取用户登录信息
|
|
|
+ this.$store.commit("user/SET_USEAR_INFOLOGIN", res.data);
|
|
|
+ const permissions=res.data.permissions || [];
|
|
|
+ this.$store.commit("user/SET_PERMISSIONS",permissions);
|
|
|
+ const menuList = res.data.pcMenuVOS || [];
|
|
|
+ this.$store.commit("user/SET_MENULIST", menuList);
|
|
|
+
|
|
|
+ // const directUrl = this.$route.query.redirect || "/userInfo";
|
|
|
+
|
|
|
+ const directUrl = "/analysisReportList/list";//闯哥：默认跳转到分析报告页面
|
|
|
+ //后期需要根据角色 和任务来判断 老师有阅卷任务 默认跳转到阅卷页面 否则跳转到分析报告首页
|
|
|
+ this.$router.push({ path: directUrl });
|
|
|
+ }
|
|
|
+ else if(res.code == 304)
|
|
|
+ {
|
|
|
+ // 账号没有绑定的时候，跳转绑定账号
|
|
|
+ this.wxOpenId = res.data
|
|
|
+ this.$message({
|
|
|
+ message: '该微信未绑定账号，请输入账号、密码进行绑定！',
|
|
|
+ type: "warning"
|
|
|
+ })
|
|
|
+ // this.tabActive = 4
|
|
|
+ this.LoginMode(2);
|
|
|
+ this.showBindDialog = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 扫码微信绑定账号
|
|
|
+ BindAccount() {
|
|
|
+
|
|
|
+ if(this.bindForm.userName.trim() == "")
|
|
|
+ {
|
|
|
+ this.$message({
|
|
|
+ message: '请输入账号！',
|
|
|
+ type: "warning"
|
|
|
+ })
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if(this.bindForm.passWord.trim() == "")
|
|
|
+ {
|
|
|
+ this.$message({
|
|
|
+ message: '请输入密码！',
|
|
|
+ type: "warning"
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.$refs.bindFormRef.validate(valid => {
|
|
|
+ if(valid) {
|
|
|
+ try {
|
|
|
+ this.loadingBind = true
|
|
|
+ user.loginEmailPass({
|
|
|
+ username: this.bindForm.userName,
|
|
|
+ password: encrypt(this.bindForm.passWord.trim()),
|
|
|
+ wxOpenId: this.wxOpenId
|
|
|
+ }).then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ console.log("打印登录结果",res);
|
|
|
+ setToken(res.data.tokenValue);
|
|
|
+ this.$store.dispatch("user/SET_TOKEN", res.data.tokenValue);
|
|
|
+ this.$store.dispatch("user/SET_SCHOOL_LOGO", res.data.schoolLogoUrl);//设置学校logo
|
|
|
+ this.$store.dispatch("user/SET_SCHOOL_TYPE",res.data.schoolType);//获取用户学校类型
|
|
|
+ this.$store.dispatch("user/SET_SCHOOL_WEB_SITE_ID",res.data.cloudMonitorSiteId || '');//设置学校网站id
|
|
|
+ this.$store.dispatch("user/getUserInfoByToken");//获取用户登录信息
|
|
|
+ this.$store.commit("user/SET_USEAR_INFOLOGIN", res.data);
|
|
|
+ const menuList=res.data.pcMenuVOS || [];
|
|
|
+
|
|
|
+ const permissions=res.data.permissions || [];
|
|
|
+ this.$store.commit("user/SET_PERMISSIONS",permissions);
|
|
|
+ this.$store.commit("user/SET_MENULIST",menuList);
|
|
|
+
|
|
|
+ // const directUrl = this.$route.query.redirect || "/userInfo";
|
|
|
+ const directUrl = "/analysisReportList/list";//闯哥：默认跳转到分析报告页面
|
|
|
+ this.$router.push({ path: directUrl });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.loadingBind = false
|
|
|
+ } catch {
|
|
|
+ this.loadingBind = false
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+@use "@/styles/login.scss";
|
|
|
+.login_info{
|
|
|
+ .module_tab{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ gap: 20px;
|
|
|
+ .tab_item{
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #303133;
|
|
|
+ cursor: pointer;
|
|
|
+ padding-bottom: 4px;
|
|
|
+ &.tab_active{
|
|
|
+ color: #2E64FA;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ &::after{
|
|
|
+ position: absolute;
|
|
|
+ content: '';
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 70%;
|
|
|
+ height: 2px;
|
|
|
+ background-color: #2E64FA;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
