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'
src/views/crmpc/highseas/index.vue
+5 -13
View File
@@ -29,19 +29,11 @@
@current-change="handleCurrentChange"
>
<template #default>
<el-table-column prop="contacts" label="客户名称" min-width="120"></el-table-column>
<el-table-column prop="phone" label="电话" min-width="120"></el-table-column>
<el-table-column prop="magnitude" label="客户商机" min-width="140"></el-table-column>
<el-table-column label="状态" min-width="140">
<template #default="scope">
<span :class="getCountdownClass(scope.row.follow_next)">
<span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px">
<i class="iconfont-sys">&#xe7b1;</i>
</span>
{{ getCountdown(scope.row.follow_next) }}
</span>
</template>
</el-table-column>
<el-table-column prop="contacts" label="客户名称"></el-table-column>
<el-table-column prop="phone" label="电话"></el-table-column>
<el-table-column prop="magnitude_txt" label="客户商机"></el-table-column>
<el-table-column prop="channel_name" label="渠道"></el-table-column>
<el-table-column prop="country_name" label="国家"></el-table-column>
<el-table-column fixed="right" label="操作" width="160px">
<template #default="scope">
<div class="follow-detli" @click="onDetail(scope.row)">
src/views/system/user-center/index.vue
+64 -32
View File
@@ -4,32 +4,37 @@
<div class="left-wrap">
<div class="user-wrap box-style">
<!-- <img class="bg" src="@imgs/user/bg.webp" /> -->
<img class="avatar" :src="userInfo.avatar_full" />
<h2 class="name">{{userInfo.name}}</h2>
<p class="des">ID:{{userInfo.id}}</p>
<img
class="avatar"
:src="
userInfo.avatar_full != '' ? userInfo.avatar_full : '/src/assets/img/user/avatar.webp'
"
/>
<h2 class="name">{{ userInfo.name }}</h2>
<p class="des">ID:{{ userInfo.id }}</p>
<div class="outer-info">
<div class="info-row">
<span class="info-label">电 话：</span>
<span class="info-value">{{userInfo.phone}}</span>
<span class="info-label">电 话：</span>
<span class="info-value">{{ userInfo.phone }}</span>
</div>
<div class="info-row">
<span class="info-label">职 位：</span>
<span class="info-value">{{userInfo.position}}</span>
<span class="info-label">职 位：</span>
<span class="info-value">{{ userInfo.position }}</span>
</div>
<div class="info-row">
<span class="info-label">公 司：</span>
<span class="info-value">{{userInfo.corp_name}}</span>
<span class="info-label">公 司：</span>
<span class="info-value">{{ userInfo.corp_name }}</span>
</div>
<div class="info-row">
<span class="info-label">国 家：</span>
<span class="info-value">{{userInfo.country_txt}}</span>
<span class="info-label">国 家：</span>
<span class="info-value">{{ userInfo.country_txt }}</span>
</div>
</div>
</div>
</div>
<div class="right-wrap">
<div class="info box-style">
<h1 class="title"><span class="border" style="margin-right: 5px;"></span>基本信息</h1>
<h1 class="title"><span class="border" style="margin-right: 5px"></span>基本信息</h1>
<ElForm
:model="form"
@@ -40,14 +45,20 @@
>
<ElFormItem label="头像" prop="avatar">
<el-upload
class="qrcode-upload"
:action="actionImageUplode"
:headers="uploadHeaders"
:show-file-list="false"
:on-success="handleUploadavatar"
>
class="qrcode-upload"
:action="actionImageUplode"
:headers="uploadHeaders"
:show-file-list="false"
:on-success="handleUploadavatar"
:disabled="!isEdit"
>
<div class="qrcode-upload-box">
<img class="avatar" :src="imageUrlavatar"/>
<img
class="avatar"
:src="
imageUrlavatar != '' ? imageUrlavatar : '/src/assets/img/user/avatar.webp'
"
/>
</div>
</el-upload>
</ElFormItem>
@@ -78,22 +89,40 @@
<ElRow>
<ElFormItem label="公司" prop="company">
<ElInput v-model="form.corp_name" disabled/>
<ElInput v-model="form.corp_name" disabled />
</ElFormItem>
<ElFormItem label="国家" prop="address" class="right-input">
<el-select v-model="form.country_id" filterable placeholder="请选择国家" :disabled="!isEdit" >
<el-option v-for="item in countryOptions" :key="item.id" :label="item.cn_addr" :value="item.id" />
<el-select
v-model="form.country_id"
filterable
placeholder="请选择国家"
:disabled="!isEdit"
>
<el-option
v-for="item in countryOptions"
:key="item.id"
:label="item.cn_addr"
:value="item.id"
/>
</el-select>
</ElFormItem>
</ElRow>
<ElRow>
<ElFormItem label="二维码" prop="socialize" :class="isEdit?'qrcode-radio-group':''">
<el-radio-group v-model="form.socialize" v-if="isEdit">
<ElFormItem
label="二维码"
prop="socialize"
:class="isEdit ? 'qrcode-radio-group' : ''"
>
<el-radio-group v-model="form.socialize" v-if="isEdit">
<el-radio label="微信">微信</el-radio>
<el-radio label="WhatsApp">WhatsApp</el-radio>
</el-radio-group>
<template v-else>
<img v-if="form.socialize_pic_full" :src="form.socialize_pic_full" class="qrcode-img" />
<img
v-if="form.socialize_pic_full"
:src="form.socialize_pic_full"
class="qrcode-img"
/>
<span v-else class="qrcode-upload-text">暂无二维码</span>
</template>
</ElFormItem>
@@ -106,7 +135,11 @@
:on-success="handleUploadavatarqrcode"
>
<div class="qrcode-upload-box">
<img v-if="form.socialize_pic_full" :src="socialize_pic_full" class="qrcode-img" />
<img
v-if="form.socialize_pic_full"
:src="socialize_pic_full"
class="qrcode-img"
/>
<span v-else class="qrcode-upload-text">
<img :src="imageUrl" class="qrcode-img" />
</span>
@@ -114,7 +147,7 @@
</el-upload>
</ElFormItem>
</ElRow>
<div class="el-form-item-right">
<ElButton type="primary" style="width: 90px" v-ripple @click="edit">
<i v-if="!isEdit" class="iconfont-sys"> &#xe6bf;</i>
@@ -169,8 +202,7 @@
</template>
<script setup lang="ts">
import { useUserStore } from '@/store/modules/user'
import { ElForm, FormInstance, FormRules } from 'element-plus'
import { ElForm, FormInstance } from 'element-plus'
import imageUrl from '@/assets/img/crm/upimg.png'
import { CrmService } from '@/api/crmApi'
import { useUploadHeaders } from '@/composables/useUploadHeaders'
@@ -181,10 +213,10 @@
interface CustomerInfo {
[key: string]: any
}
const imageUrlavatar=ref('')
const socialize_pic_full=ref('')
const imageUrlavatar = ref('')
const socialize_pic_full = ref('')
const countryOptions = ref<any>()
const form= ref<CustomerInfo>({})
const form = ref<CustomerInfo>({})
//获取公司 getCompanyList
const companyList = ref<any>()
//国家