xinyouhe/art-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改登录页样式公海数据 个人信息默认图

Browse Source
This commit is contained in:
浅念
2025-07-25 15:11:50 +08:00
parent 0f790269db
commit 382011d592
3 changed files with 134 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/auth/login/index.vue
+65 -61
View File
@@ -36,8 +36,16 @@
<div class="form">
<!-- 登录方式切换 tab -->
<div class="login-type-tabs">
<span :class="{active: activeLoginType === 'password'}" @click="activeLoginType = 'password'">账号密码登录</span>
<span :class="{active: activeLoginType === 'qrcode'}" @click="activeLoginType = 'qrcode'">飞书登录</span>
<span
:class="{ active: activeLoginType === 'password' }"
@click="activeLoginType = 'password'"
>账号密码登录</span
>
<span
:class="{ active: activeLoginType === 'qrcode' }"
@click="activeLoginType = 'qrcode'"
>飞书登录</span
>
</div>
<div v-if="activeLoginType === 'password'">
<ElForm
@@ -47,8 +55,11 @@
@keyup.enter="handleSubmit"
style="margin-top: 25px"
>
<ElFormItem prop="username" label="账号" >
<ElInput :placeholder="$t('login.placeholder[0]')" v-model.trim="formData.username" />
<ElFormItem prop="username" label="账号">
<ElInput
:placeholder="$t('login.placeholder[0]')"
v-model.trim="formData.username"
/>
</ElFormItem>
<ElFormItem prop="password" label="密码">
<ElInput
@@ -83,13 +94,13 @@
<span>{{ account.name }}</span>
</ElOption>
</ElSelect>
</ElFormItem>
</ElFormItem>
<div class="drag-verify">
<div class="drag-verify-content" :class="{ error: !isPassing && isClickPass }">
<ArtDragVerify
ref="dragVerify"
v-model:value="isPassing"
:width="width < 500 ? 260: 380"
:width="width < 500 ? 260 : 380"
:text="$t('login.sliderText')"
textColor="var(--art-gray-800)"
:successText="$t('login.sliderSuccessText')"
@@ -105,9 +116,13 @@
<div class="login-bottom-row">
<p>
{{ $t('login.noAccount') }}
<RouterLink :to="RoutesAlias.Register" style="color:#5D87FF;">{{ $t('login.register') }}</RouterLink>
<RouterLink :to="RoutesAlias.Register" style="color: #5d87ff">{{
$t('login.register')
}}</RouterLink>
</p>
<ElCheckbox v-model="formData.rememberPassword">{{ $t('login.rememberPwd') }}</ElCheckbox>
<ElCheckbox v-model="formData.rememberPassword">{{
$t('login.rememberPwd')
}}</ElCheckbox>
</div>
<div style="margin-top: 30px">
<ElButton
@@ -123,10 +138,7 @@
</ElForm>
</div>
<div v-else>
<ElForm
:model="formData"
style="margin-top: 25px"
>
<ElForm :model="formData" style="margin-top: 25px">
<ElFormItem prop="company" label="公司">
<ElSelect v-model="formData.company" class="account-select" @change="changeCompany">
<ElOption
@@ -138,7 +150,7 @@
<span>{{ account.name }}</span>
</ElOption>
</ElSelect>
</ElFormItem>
</ElFormItem>
<ElFormItem prop="company" label="系统">
<ElSelect v-model="formData.systems" class="account-select" @change="changesystems">
<ElOption
@@ -150,11 +162,11 @@
<span>{{ account.name }}</span>
</ElOption>
</ElSelect>
</ElFormItem>
</ElFormItem>
</ElForm>
<div class="qrcode-login" v-if="!isInFeishu">
<div id="login_container"></div>
<p class="qrcode-tip">请使用飞书App扫码登录</p>
<div class="qrcode-login" v-if="!isInFeishu">
<div id="login_container"></div>
<p class="qrcode-tip">请使用飞书App扫码登录</p>
</div>
</div>
</div>
@@ -184,7 +196,7 @@
import type { FormInstance, FormRules } from 'element-plus'
const settingStore = useSettingStore()
const { isDark, systemThemeType } = storeToRefs(settingStore)
const { systemThemeType } = storeToRefs(settingStore)
const dragVerify = ref()
@@ -201,17 +213,17 @@
companyid.value = useUserStore().companyid
const systemsid = ref('')
systemsid.value = useUserStore().systemsid
const iscompany = ref(false)
const iscompany = ref(false)
const { companyabbr } = useUserStore()
//获取公司 getCompanyList
//获取公司 getCompanyList
const companyList = ref<any>()
//系统
const systemsList = ref<any>()
const feishuresponse=ref()
const feishuresponse = ref()
const formData = reactive({
account: '',
systems: useUserStore().companyid?Number(useUserStore().companyid):'',
company: useUserStore().companyid?Number(useUserStore().companyid):'',
systems: useUserStore().companyid ? Number(useUserStore().companyid) : '',
company: useUserStore().companyid ? Number(useUserStore().companyid) : '',
username: '',
password: '',
rememberPassword: true
@@ -226,22 +238,15 @@
const loading = ref(false)
const { width } = useWindowSize()
const getcompanyList = async () => {
try {
// 这里调用公司列表的接口
const response = await UserService.getCompanyList()
companyList.value = response || []
} catch (error) { }
const response = await UserService.getCompanyList()
companyList.value = response || []
}
const getsystemsList = async () => {
try {
// 这里调用公司列表的接口
const response = await UserService.getsystemsList()
systemsList.value = response || []
} catch (error) { }
const response = await UserService.getsystemsList()
systemsList.value = response || []
}
// 切换语言
const { locale } = useI18n()
// 切换语言
const { locale } = useI18n()
const changeLanguage = (lang: LanguageEnum) => {
if (locale.value === lang) return
@@ -250,36 +255,32 @@
}
const getfeishuAppList = async () => {
try {
// 这里调用飞书
feishuresponse.value = await UserService.getfeishuAppList({ corp_id: companyid.value })
if(activeLoginType.value=='qrcode'){
feishulogin()
}
console.log(feishuresponse)
} catch (error) { }
feishuresponse.value = await UserService.getfeishuAppList({ corp_id: companyid.value })
if (activeLoginType.value == 'qrcode') {
feishulogin()
}
}
//切换系统
//切换系统
const changesystems = (systems: any) => {
const systemsdata = systemsList.value.find((c: any) => c.id === systems)
systemsid.value = systems
userStore.setSystems(systems,systemsdata?.code)
userStore.setSystems(systems, systemsdata?.code)
}
//切换公司
const changeCompany = (company: any) => {
// if (companyid.value === company) return
const companyt = companyList.value.find((c: any) => c.id === company)
companyid.value = company
iscompany.value = company
userStore.setCompany(company,companyt?.abbr)
userStore.setCompany(company, companyt?.abbr)
getfeishuAppList()
}
if(companyabbr!=''){
if (companyabbr != '') {
iscompany.value = true
getfeishuAppList()
}
const feishulogin = async () => {
userStore.setLoginType('feishu')
if (isInFeishu) {
@@ -292,7 +293,7 @@
const waitForQRLogin = () =>
new Promise<void>((resolve) => {
const check = () => {
// @ts-ignore
// @ts-expect-error
if (window.QRLogin) resolve()
else setTimeout(check, 100)
}
@@ -314,7 +315,7 @@
goto: feishuGotoUrl,
width: '250',
height: '250',
style: 'width:350px;height:350px;border:none'
style: 'width:350px;height:270px;border:none'
})
const handleMessage = function (event: MessageEvent) {
if (QRLoginObj.matchOrigin(event.origin) && QRLoginObj.matchData(event.data)) {
@@ -325,25 +326,25 @@
window.addEventListener('message', handleMessage, false)
}
}
watch(
watch(
(activeLoginType as import('vue').Ref<string>),
async (val) => {
if (val === 'qrcode') {
userStore.setLoginType('feishu')
if(companyid.value!=''){
if (companyid.value != '') {
feishulogin()
}
}else{
} else {
userStore.setLoginType('upwd')
}
},
{ immediate: true }
)
//飞书登录
const feishuSubmit = async () => {
const feishuSubmit = async () => {
try {
const { auth_url } = await UserService.getfeishuscope()
window.location.href = auth_url
window.location.href = auth_url
} catch (error) {
ElMessage.error('登录失败，请稍后重试')
} finally {
@@ -371,7 +372,7 @@
// 登录请求
const { username, password } = formData
const { data } = await UserService.login({
const { data } = await UserService.login({
account: username,
password
})
@@ -428,14 +429,17 @@
getcompanyList()
getsystemsList()
// 自动读取 query 参数并存入 userStore
const companyid = Array.isArray(route.query.corp_id) ? route.query.corp_id[0] : route.query.corp_id
const companyabbr = Array.isArray(route.query.corp_abbr) ? route.query.corp_abbr[0] : route.query.corp_abbr
const companyid = Array.isArray(route.query.corp_id)
? route.query.corp_id[0]
: route.query.corp_id
const companyabbr = Array.isArray(route.query.corp_abbr)
? route.query.corp_abbr[0]
: route.query.corp_abbr
if (companyid) {
userStore.setCompany(companyid as string, (companyabbr as string) || '')
formData.company = Number(companyid)
}
})
// 切换主题
import { useTheme } from '@/composables/useTheme'