u
This commit is contained in:
oneao committed
1 parent
4aaa93df7d
commit
c330e52fd3
66 files changed
+7386
-4
No files matched your search
@@ -0,0 +1,421 @@
|
||||
<script lang="js" setup>
|
||||
import { loginApi } from "@/request/api";
|
||||
import { useUserStore } from "@/store/user";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { useRouter } from "vue-router";
|
||||
import Vcode from "vue3-puzzle-vcode";
|
||||
import { reset401Flag } from "@/request";
|
||||
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
|
||||
const form = ref({
|
||||
orgid: userStore.userInfo.orgid,
|
||||
userid: userStore.userInfo.userid,
|
||||
password: "",
|
||||
});
|
||||
|
||||
const showVcode = ref(false);
|
||||
const loginLoading = ref(false);
|
||||
|
||||
const linkList = ref([
|
||||
{
|
||||
title: "新手上路",
|
||||
icon: "solar:key-bold",
|
||||
href: "http://bbs.g3soft.cn/forum.php?mod=viewthread&tid=115&extra=page%3D1",
|
||||
},
|
||||
{
|
||||
title: "会员活动",
|
||||
icon: "mingcute:vip-1-fill",
|
||||
href: "http://www.g3soft.cn/help/guide/promotion.html",
|
||||
},
|
||||
{
|
||||
title: "视频教程",
|
||||
icon: "material-symbols:auto-videocam-rounded",
|
||||
href: "http://bbs.g3soft.cn/forum.php?mod=viewthread&tid=86&extra=page%3D1",
|
||||
},
|
||||
{
|
||||
title: "常见问题",
|
||||
icon: "ic:baseline-help",
|
||||
href: "http://bbs.g3soft.cn/forum.php?mod=forumdisplay&fid=37",
|
||||
},
|
||||
]);
|
||||
|
||||
const endLinkList = ref([
|
||||
{
|
||||
title: "圆通官网",
|
||||
href: "http://www.g3soft.cn",
|
||||
},
|
||||
{
|
||||
title: "申请试用",
|
||||
href: "http://dns.g3soft.cn/demo/jsys/login/login.jsp",
|
||||
},
|
||||
{
|
||||
title: "联系我们",
|
||||
href: "http://www.g3soft.cn/aboutus.html",
|
||||
},
|
||||
{
|
||||
title: "客服热线： 0574-87812201",
|
||||
href: "",
|
||||
},
|
||||
]);
|
||||
|
||||
function toHref(href) {
|
||||
if (href) {
|
||||
window.open(href, "_blank");
|
||||
}
|
||||
}
|
||||
|
||||
function onVcodeShow() {
|
||||
if (form.value.orgid === "") {
|
||||
ElMessage.error("机构码不能为空！");
|
||||
return;
|
||||
}
|
||||
if (form.value.userid === "") {
|
||||
ElMessage.error("用户名不能为空！");
|
||||
return;
|
||||
}
|
||||
showVcode.value = true;
|
||||
}
|
||||
|
||||
function onVcodeClose() {
|
||||
showVcode.value = false;
|
||||
}
|
||||
|
||||
function onVcodeSuccess() {
|
||||
onVcodeClose();
|
||||
|
||||
loginLoading.value = true;
|
||||
|
||||
try {
|
||||
loginApi(form.value.orgid, form.value.userid, form.value.password).then(
|
||||
(res) => {
|
||||
if (res.success) {
|
||||
ElMessage.success("登录成功");
|
||||
|
||||
userStore.setUserInfo(
|
||||
form.value.orgid,
|
||||
form.value.userid,
|
||||
res.data.username,
|
||||
res.data.token,
|
||||
);
|
||||
router.push("/");
|
||||
|
||||
reset401Flag();
|
||||
}
|
||||
},
|
||||
);
|
||||
} finally {
|
||||
loginLoading.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<div class="login-header">
|
||||
<div class="logo">
|
||||
<img src="@/assets/logo.png" />
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="name">网上服务平台</div>
|
||||
</div>
|
||||
|
||||
<div class="login-body">
|
||||
<div class="login-main">
|
||||
<div class="tip">登录</div>
|
||||
<div class="split"></div>
|
||||
<div class="form">
|
||||
<div class="form-item">
|
||||
<div class="label required">机构码</div>
|
||||
|
||||
<el-input v-model="form.orgid">
|
||||
<template #prefix>
|
||||
<G3Icon icon="lucide:building" size="18" />
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="label required">账号</div>
|
||||
<el-input v-model="form.userid">
|
||||
<template #prefix>
|
||||
<G3Icon icon="lucide:user-round" size="18" />
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="label">密码</div>
|
||||
<el-input v-model="form.password" show-password>
|
||||
<template #prefix>
|
||||
<G3Icon icon="lucide:lock-keyhole" size="18" />
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<el-button
|
||||
size="large"
|
||||
long
|
||||
type="primary"
|
||||
style="
|
||||
background-color: #33dcd0;
|
||||
border-color: #00d3c4;
|
||||
font-size: 18px;
|
||||
"
|
||||
@click="onVcodeShow"
|
||||
:loading="loginLoading"
|
||||
>
|
||||
登录
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="service-container">
|
||||
<div class="service-title">
|
||||
<div class="service-left"></div>
|
||||
<div class="service-core">服务中心</div>
|
||||
<div class="service-right"></div>
|
||||
</div>
|
||||
|
||||
<div class="service-link">
|
||||
<template v-for="(item, index) in linkList" :key="index">
|
||||
<div class="link-item" @click="toHref(item.href)">
|
||||
<div class="link-icon">
|
||||
<G3Icon :icon="item.icon" size="38" color="#6cd6b3" />
|
||||
</div>
|
||||
<div class="link-title">{{ item.title }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="end-container">
|
||||
<template v-for="(item, index) in endLinkList" :key="index">
|
||||
<div class="end-li" @click="toHref(item.href)">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
|
||||
<div v-if="index !== endLinkList.length - 1" class="end-line"></div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<Vcode :show="showVcode" @success="onVcodeSuccess" @close="onVcodeClose" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "@/styles/mixins.scss" as *;
|
||||
|
||||
.login-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.login-header {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 81px;
|
||||
margin-left: 25%;
|
||||
|
||||
.logo {
|
||||
img {
|
||||
height: 40px;
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
.divider {
|
||||
width: 1px;
|
||||
height: 28px;
|
||||
background-color: #ddd;
|
||||
margin: 0px 24px;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: #595959;
|
||||
}
|
||||
}
|
||||
|
||||
.login-body {
|
||||
background-image: url("@/assets/login-bg.jpg");
|
||||
width: 100%;
|
||||
height: 420px;
|
||||
position: relative;
|
||||
|
||||
.login-main {
|
||||
position: absolute;
|
||||
right: 25%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
background-color: #fdfdfd;
|
||||
padding: 24px 28px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
.tip {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
margin: 0 30px;
|
||||
vertical-align: super;
|
||||
}
|
||||
.split {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
border-bottom: 3px solid #00d3c4;
|
||||
margin: 0 auto;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.form {
|
||||
margin-top: 16px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 12px;
|
||||
.label {
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.required {
|
||||
&::before {
|
||||
content: "*";
|
||||
color: red;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
height: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.service-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
padding-bottom: 56px;
|
||||
flex-shrink: 0;
|
||||
.service-title {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 40px 0px;
|
||||
padding: 0 40px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.service-left {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 38%;
|
||||
height: 2px;
|
||||
background-color: #cccccc;
|
||||
vertical-align: middle;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -6px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #ccc;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.service-core {
|
||||
display: inline-block;
|
||||
width: 24%;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
height: 34px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.service-right {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 38%;
|
||||
height: 2px;
|
||||
background-color: #cccccc;
|
||||
vertical-align: middle;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -6px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #ccc;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.service-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include flexGapWrap(40px, 160px);
|
||||
|
||||
.link-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
|
||||
.link-icon {
|
||||
padding: 12px;
|
||||
border-radius: 999px;
|
||||
border: 2px solid #6cd6b3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.link-title {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.end-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #595959;
|
||||
margin: 24px 0px;
|
||||
|
||||
.end-li {
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.end-line {
|
||||
margin: 0 22px;
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
border-left: 1px solid #595959;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user