<template>
<div class="
login-type">
<ul>
<li v-for="item
in defaultType" :key="item.value" @click="$emit('change-type', item.value)">
<img :src="item.icon" alt="" />
<span>
{{ $t(item.label) }}
</span>
</li>
<li @click="$emit('openAuth-popup')">
<img src="https://qhstatic.kujiale.com/oauth2/images/logo_32.png " alt="">
<span>
酷家乐
登录
</span>
</li>
</ul>
</div>
</template>
<script setup>
import icon_account from '@/assets/svg/
login-type-account.svg';
import icon_code from '@/assets/svg/
login-type-code.svg';
import icon_qrcode from '@/assets/svg/
login-type-qrcode.svg';
import icon_register from '@/assets/svg/
login-type-register.svg';
import { $t } from '@/utils/message/
index';
const props = def
ineProps({
active: {
type: Str
ing,
default: '',
},
});
const defaultType = [
{
icon: icon_code,
value: 'code',
label: 'msg
LoginList.verify
Login',
},
{
icon: icon_account,
value: 'account',
label: 'msg
LoginList.account
Login',
},
{
icon: icon_register,
value: 'register',
label: 'msg
LoginList.accountRegister',
},
{
icon: icon_qrcode,
value: 'qrcode',
label: 'msg
LoginList.wechat
Login',
},
].filter((item) => item.value != props.active);
</script>
<style lang="scss" scoped>
.
login-type {
width: 240px;
height: 62px;
marg
in-top: 16px;
img {
width: 36px;
height: 36px;
}
ul {
display: flex;
align-items: center;
gap: 24px;
height: 100%;
li {
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-between;
height: 100%;
cursor: po
inter;
width: 48px;
span {
color: #8c93a4;
font-size: 12px;
white-space: nowrap;
}
}
}
}
</style>
<template>
<div class="right-panel">
<component :is="ComponentList[name]" :key="name" @change-type="changeType" @openAuth-popup="openAuthPopup" @back="back" @success="success" />
<!-- <button @click="openAuthPopup" class="auth-btn">酷家乐
登录</button> -->
<!-- <iframe src="https://oauth.kujiale.com/oauth2/show?client_id=d5gzvQhhXUw39FYr&redirect_uri=http://localhost:8082/space/effect&response_type=code&state=%22sed%22&scope=get_user_
info ,get_design,get_budget_list" frameborder="0" class="auth-iframe"></iframe> -->
</div>
</template>
<script setup>
import { ref, watch } from 'vue';
import ComponentList from '../views/
index';
import { onMounted } from 'vue';
const emit = def
ineEmits(['success']);
const name = ref('qrcode');
let lastName = '';
const changeType = (type) => {
name.value = type;
};
const back = () => {
name.value = lastName || 'qrcode';
};
const success = () => {
emit('success');
};
watch(name, (newVal, oldVal) => {
if (newVal === 'register') {
lastName = oldVal;
}
});
//kujiale test
let authPopup = null;
// 打开授权弹窗
const openAuthPopup = () => {
// 计算弹窗位置（居中显示）
const width = 500;
const height = 600;
const left = w
indow.screen.width / 2 - width / 2;
const top = w
indow.screen.height / 2 - height / 2;
// 授权URL（与之前一致）
const authUrl = 'https://oauth.kujiale.com/oauth2/show?client_id=d5gzvQhhXUw39FYr&redirect_uri=http://localhost:8082/space/effect&response_type=code&state=sed&scope=get_user_
info ,get_design,get_budget_list';
// 打开弹窗
authPopup = w
indow.open(
authUrl,
'KujialeAuth', // 弹窗名称
`width=${width},height=${height},left=${left},top=${top}`
);
// 定时检查弹窗是否关闭（获取授权结果）
const checkPopup = set
Interval(() => {
if (authPopup && authPopup.closed) {
clear
Interval(checkPopup);
// 弹窗关闭后，可在这里触发主页面的
登录状态刷新
emit('success');
}
}, 500);
};
// 监听弹窗发送的消息（关键：获取授权码）
onMounted(() => {
w
indow.addEventListener('message', (event) => {
// 验证消息来源（必须限制为授权回调页的域名，防止恶意攻击）
if (event.orig
in !== 'http://localhost:8082') return;
// 假设回调页授权成功后，通过postMessage发送code
if (event.data.type === 'OAUTH_CODE') {
const { code, state } = event.data;
// 这里处理code（如传给后端换token）
console.log('授权码：', code);
// 关闭弹窗
if (authPopup && !authPopup.closed) authPopup.close();
// 通知
登录成功
emit('success');
}
});
});
</script>
<style lang="scss" scoped>
.right-panel {
width: 425px;
m
in-height: 485px;
padd
ing: 36px 24px 12px 24px;
position: relative;
background: #fff;
z-
index: 1;
}
</style>
为什么
点击酷家乐
登录没有反应，具体两个组件代码如上
扫一扫
到【灌水乐园】发言
4万+
