0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 单点登录接口联调

This commit is contained in:
JiangQiming 2023-01-11 18:07:10 +08:00
parent d2a82edbe4
commit 0f7cc7d9ec
2 changed files with 84 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components.d.ts vendored
View File

@ -16,13 +16,12 @@ declare module '@vue/runtime-core' {
ADatePicker: typeof import('ant-design-vue/es')['DatePicker']
ADivider: typeof import('ant-design-vue/es')['Divider']
AEmpty: typeof import('ant-design-vue/es')['Empty']
ADatePicker: typeof import('ant-design-vue/es')['DatePicker']
ADivider: typeof import('ant-design-vue/es')['Divider']
AEmpty: typeof import('ant-design-vue/es')['Empty']
AForm: typeof import('ant-design-vue/es')['Form']
AFormItem: typeof import('ant-design-vue/es')['FormItem']
AInput: typeof import('ant-design-vue/es')['Input']
AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
AModal: typeof import('ant-design-vue/es')['Modal']
APagination: typeof import('ant-design-vue/es')['Pagination']
APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']

108
src/views/account/Center/bind/index.vue
View File

@ -4,7 +4,7 @@
<div class="content">
<div class="title">第三方账户绑定</div>
<!-- 已登录-绑定三方账号 -->
<template v-if="false">
<template v-if="!token">
<div class="info">
<a-card style="width: 280px">
<template #title>
@ -28,14 +28,21 @@
</div>
</template>
<div class="info-body">
<img :src="getImage('/bind/wechat-webapp.png')" />
<img
:src="
accountInfo?.avatar ||
getImage('/bind/wechat-webapp.png')
"
/>
<p>用户名：-</p>
<p>名称：微信昵称</p>
<p>名称：{{ accountInfo?.name || '-' }}</p>
</div>
</a-card>
</div>
<div class="btn">
<a-button type="primary">立即绑定</a-button>
<a-button type="primary" @click="handleBind"
>立即绑定</a-button
>
</div>
</template>
<!-- 未登录-绑定三方账号 -->
@ -74,23 +81,25 @@
</a-form-item>
<a-form-item
label="验证码"
v-bind="validateInfos.captcha"
v-bind="validateInfos.verifyCode"
>
<a-input
v-model:value="formData.captcha"
v-model:value="formData.verifyCode"
placeholder="请输入验证码"
>
<template #addonAfter>
<span style="cursor: pointer">
图形验证码
</span>
<img
:src="captcha.base64"
@click="getCode"
style="cursor: pointer"
/>
</template>
</a-input>
</a-form-item>
<a-form-item>
<a-button
type="primary"
@click="handleSubmit"
@click="handleLoginBind"
style="width: 100%"
>
登录并绑定账户
@ -105,34 +114,58 @@
</template>
<script setup lang="ts">
import { getImage } from '@/utils/comm';
import { getImage, LocalStore } from '@/utils/comm';
import { TOKEN_KEY } from '@/utils/variable';
import { Form } from 'ant-design-vue';
import { message } from 'ant-design-vue';
import { applicationInfo } from '@/api/bind';
import { applicationInfo, bindAccount } from '@/api/bind';
import { code, authLogin } from '@/api/login';
const useForm = Form.useForm;
interface formData {
username: string;
password: string;
captcha: string;
verifyCode: string;
}
// 三方应用信息
const getAppInfo = async () => {
// const code: string = '73ab60c88979a1475963a5dde31e374b';
const token = computed(() => LocalStore.get(TOKEN_KEY));
// 已登录直接绑定
const getUrlCode = () => {
const url = new URLSearchParams(window.location.href);
const code = url.get('code') as string;
return url.get('code') as string;
};
// 三方应用信息
const accountInfo = ref({
avatar: '',
name: '',
});
const getAppInfo = async () => {
const code = getUrlCode();
const res = await applicationInfo(code);
console.log('getAppInfo: ', res);
accountInfo.value = res?.result?.result;
};
getAppInfo();
// 登录表单
/**
* 立即绑定
*/
const handleBind = async () => {
const code = getUrlCode();
const res = await bindAccount(code);
console.log('bindAccount: ', res);
message.success('绑定成功');
goRedirect();
setTimeout(() => window.close(), 1000);
};
// 未登录-先登录再绑定
const formData = ref<formData>({
username: '',
password: '',
captcha: '',
verifyCode: '',
});
const formRules = ref({
username: [
@ -147,7 +180,7 @@ const formRules = ref({
message: '请输入密码',
},
],
captcha: [
verifyCode: [
{
required: true,
message: '请输入验证码',
@ -160,17 +193,40 @@ const { resetFields, validate, validateInfos } = useForm(
formRules.value,
);
/**
* 获取图形验证码
*/
const captcha = ref({
base64: '',
key: '',
});
const getCode = async () => {
const res: any = await code();
captcha.value = res.result;
};
getCode();
/**
* 登录并绑定账户
*/
const handleSubmit = () => {
const handleLoginBind = () => {
validate()
.then(() => {
console.log('toRaw:', toRaw(formData.value));
console.log('formData.value:', formData.value);
.then(async () => {
const code = getUrlCode();
const params = {
...formData.value,
verifyKey: captcha.value.key,
bindCode: code,
expires: 3600000,
};
const res = await authLogin(params);
console.log('res: ', res);
message.success('登录成功');
goRedirect();
setTimeout(() => window.close(), 1000);
})
.catch((err) => {
console.log('error', err);
getCode();
});
};