1
This commit is contained in:
hezhidong
+71
-113
@@ -24,11 +24,60 @@
|
||||
<!-- <h4 class="login-title">{{ getThemeConfig.globalTitle }}</h4> -->
|
||||
<h4 class="login-title">数字校园教育管理平台</h4>
|
||||
<h5>请使用钉钉小程序扫码登录</h5>
|
||||
<div
|
||||
v-loading="loading"
|
||||
id="self_defined_element"
|
||||
class="self-defined-classname"
|
||||
></div>
|
||||
<el-form class="el-form login-form">
|
||||
<el-form-item style="margin-left: 0px" prop="userName">
|
||||
<el-input
|
||||
type="text"
|
||||
:placeholder="$t('message.login.placeholder1')"
|
||||
prefix-icon="el-icon-user"
|
||||
v-model="ruleForm.userName"
|
||||
clearable
|
||||
autocomplete="off"
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-left: 0px" prop="password">
|
||||
<el-input
|
||||
type="password"
|
||||
:placeholder="$t('message.login.placeholder2')"
|
||||
prefix-icon="el-icon-lock"
|
||||
v-model="ruleForm.password"
|
||||
autocomplete="off"
|
||||
:show-password="true"
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-left: 0px" prop="code">
|
||||
<div class="el-row" span="24">
|
||||
<div class="el-col el-col-16">
|
||||
<el-input
|
||||
type="text"
|
||||
maxlength="4"
|
||||
:placeholder="$t('message.login.placeholder3')"
|
||||
prefix-icon="el-icon-position"
|
||||
v-model="ruleForm.code"
|
||||
clearable
|
||||
autocomplete="off"
|
||||
></el-input>
|
||||
</div>
|
||||
<div class="el-col el-col-8">
|
||||
<div class="login-code">
|
||||
<span class="login-code-img">1234</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item style="margin: 40px 0px 0">
|
||||
<el-button
|
||||
type="primary"
|
||||
class="login-submit"
|
||||
@click="submitForm"
|
||||
:loading="submit.loading"
|
||||
>
|
||||
<span>{{ $t("message.login.btnText") }}</span>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div>版本:v2.2</div>
|
||||
<!-- 第三方登录友情链接 -->
|
||||
<!-- <div class="login-menu">
|
||||
@@ -58,7 +107,7 @@ import { PrevLoading } from "@/utils/loading.js";
|
||||
import { quotationsList } from "./mock";
|
||||
import { useLoginApi } from "@/api/login";
|
||||
import { Message } from "element-ui";
|
||||
import dd from "dingtalk-jsapi";
|
||||
|
||||
const LoginApi = useLoginApi();
|
||||
|
||||
export default {
|
||||
@@ -72,22 +121,14 @@ export default {
|
||||
loading: false,
|
||||
},
|
||||
ruleForm: {
|
||||
username: "admin",
|
||||
password: "admin123",
|
||||
code: "",
|
||||
uuid: "",
|
||||
userName: "admin",
|
||||
password: "123456",
|
||||
code: "1234",
|
||||
},
|
||||
codeUrl: "",
|
||||
time: {
|
||||
txt: "",
|
||||
fun: null,
|
||||
},
|
||||
// 验证码开关
|
||||
captchaEnabled: true,
|
||||
|
||||
loading: true,
|
||||
access_token: "",
|
||||
userInformation: {},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -104,28 +145,7 @@ export default {
|
||||
this.initTime();
|
||||
},
|
||||
mounted() {
|
||||
this.ddlogin();
|
||||
this.initRandomQuotations();
|
||||
const _this = this;
|
||||
// dd.ready参数为回调函数，在环境准备就绪时触发，jsapi的调用需要保证在该回调函数触发后调用，否则无效。
|
||||
// 加上判断条件
|
||||
if (dd.env.platform != "notInDingTalk") {
|
||||
// 说明不是钉钉打开
|
||||
// 钉钉登录
|
||||
dd.runtime.permission.requestAuthCode({
|
||||
corpId: "dingibrrfjews8im0ois",
|
||||
onSuccess: (res) => {
|
||||
_this.loginToObtain(res.code);
|
||||
},
|
||||
onFail: function (err) {},
|
||||
});
|
||||
} else {
|
||||
console.log("不是钉钉打开");
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
}, 2500);
|
||||
},
|
||||
methods: {
|
||||
// 随机语录
|
||||
@@ -134,7 +154,6 @@ export default {
|
||||
Math.floor(Math.random() * this.quotationsList.length)
|
||||
];
|
||||
},
|
||||
|
||||
// 初始化左上角时间显示
|
||||
initTime() {
|
||||
this.time.txt = formatDate(new Date(), "YYYY-mm-dd HH:MM:SS WWW QQQQ");
|
||||
@@ -142,29 +161,10 @@ export default {
|
||||
this.time.txt = formatDate(new Date(), "YYYY-mm-dd HH:MM:SS WWW QQQQ");
|
||||
}, 1000);
|
||||
},
|
||||
// 获取thken登录
|
||||
async loginToObtain(authCode) {
|
||||
PrevLoading.start();
|
||||
try {
|
||||
let resultIoc = await LoginApi.loginToObtain(authCode);
|
||||
this.access_token = resultIoc.token_type + " " + resultIoc.access_token;
|
||||
Session.set("token", this.access_token);
|
||||
resultIoc.access_token && this.submitForm();
|
||||
} catch (error) {
|
||||
PrevLoading.done();
|
||||
Message.error("不是该组织成员");
|
||||
}
|
||||
},
|
||||
// 获取带thken获取用户信息
|
||||
async requestToObtainUserInformation() {
|
||||
try {
|
||||
let res = await LoginApi.requestToObtainUserInformation();
|
||||
this.userInformation = res.data;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
// 登录按钮点击
|
||||
submitForm() {
|
||||
this.submit.loading = true;
|
||||
// 登录发请求获取用户信息
|
||||
setTimeout(() => {
|
||||
let defaultRoles = [];
|
||||
let defaultAuthBtnList = [];
|
||||
@@ -184,7 +184,7 @@ export default {
|
||||
defaultAuthBtnList = testAuthBtnList;
|
||||
}
|
||||
const userInfos = {
|
||||
userName: this.ruleForm.userName === "admin" ? "admin" : "admin",
|
||||
userName: this.ruleForm.userName === "admin" ? "admin" : "test",
|
||||
photo:
|
||||
this.ruleForm.userName === "admin"
|
||||
? "https://img0.baidu.com/it/u=1833472230,3849481738&fm=253&fmt=auto?w=200&h=200"
|
||||
@@ -193,21 +193,14 @@ export default {
|
||||
roles: defaultRoles,
|
||||
authBtnList: defaultAuthBtnList,
|
||||
};
|
||||
this.requestToObtainUserInformation();
|
||||
setTimeout(() => {
|
||||
console.log(this.userInformation);
|
||||
// 存储 token 到浏览器缓存
|
||||
Session.set("token", this.access_token);
|
||||
// 存储用户信息到浏览器缓存
|
||||
Session.set("userInfo", userInfos);
|
||||
// 存储钉钉用户信息到浏览器缓存
|
||||
Session.set("userInfoDD", this.userInformation);
|
||||
// 存储用户信息到vuex
|
||||
this.$store.dispatch("userInfos/setUserInfos", userInfos);
|
||||
// 存储用户信息到钉钉vuex
|
||||
this.$store.dispatch("userInfos/setUserInfosDD", this.userInformation);
|
||||
this.$router.push("/");
|
||||
}, 3000);
|
||||
// 存储 token 到浏览器缓存
|
||||
Session.set("token", Math.random().toString(36).substr(0));
|
||||
// 存储用户信息到浏览器缓存
|
||||
Session.set("userInfo", userInfos);
|
||||
// 存储用户信息到vuex
|
||||
this.$store.dispatch("userInfos/setUserInfos", userInfos);
|
||||
PrevLoading.start();
|
||||
this.$router.push("/");
|
||||
setTimeout(() => {
|
||||
this.$message.success(
|
||||
`${this.currentTime}，${this.$t("message.login.signInText")}`
|
||||
@@ -215,49 +208,14 @@ export default {
|
||||
}, 300);
|
||||
}, 300);
|
||||
},
|
||||
// 扫码登录
|
||||
ddlogin() {
|
||||
// STEP3：在需要的时候，调用 window.DTFrameLogin 方法构造登录二维码，并处理登录成功或失败的回调。
|
||||
window.DTFrameLogin(
|
||||
{
|
||||
id: "self_defined_element",
|
||||
width: 300,
|
||||
height: 300,
|
||||
},
|
||||
{
|
||||
redirect_uri: encodeURIComponent("http://localhost:9999/#/login"),
|
||||
// redirect_uri: encodeURIComponent("https://hxhl.lzyyj.com/#/login"),
|
||||
client_id: "dingxei2cpv2pfq9rmhx",
|
||||
scope: "openid",
|
||||
response_type: "code",
|
||||
state: "xxxxxxxxx",
|
||||
prompt: "consent",
|
||||
},
|
||||
(loginResult) => {
|
||||
const { redirectUrl, authCode, state } = loginResult;
|
||||
// 这里可以直接进行重定向
|
||||
// window.location.href = redirectUrl;
|
||||
this.loginToObtain(authCode);
|
||||
// 也可以在不跳转页面的情况下，使用code进行授权
|
||||
},
|
||||
(errorMsg) => {
|
||||
// 这里一般需要展示登录失败的具体原因
|
||||
alert(`Login Error: ${errorMsg}`);
|
||||
}
|
||||
);
|
||||
},
|
||||
},
|
||||
destroyed() {
|
||||
clearInterval(this.time.fun);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* STEP2：指定这个包裹容器元素的CSS样式，尤其注意宽高的设置 */
|
||||
.self-defined-classname {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
.login {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
Reference in New Issue
Block a user