<template>
|
<LoginPageLayout class="authorization-page-wrapper">
|
<div class="authorization-page-wechat-btn-wrapper">
|
<nut-button
|
v-if="isAccount"
|
type="primary"
|
class="authorization-page-wechat-wrapper"
|
@click="handleLoginByHasAccount"
|
>
|
<div class="authorization-page-wechat">手机号快速登录</div></nut-button
|
>
|
<AccessOpenTypeButton
|
v-else
|
type="primary"
|
class="authorization-page-wechat-wrapper"
|
open-type="getPhoneNumber"
|
:access="state.policyChecked"
|
@noAccess="noAccess"
|
@getphonenumber="login"
|
>
|
<div class="authorization-page-wechat">手机号快速登录</div>
|
</AccessOpenTypeButton>
|
</div>
|
<Policy
|
v-model="state.policyChecked"
|
policyBtnText="若手机号未注册，将为您直接注册账号，注册即为同意"
|
/>
|
<div class="other-login-channel-wrapper" v-if="!isLoginByWeb">
|
<nut-divider>其他登录方式</nut-divider>
|
<div class="other-login-channel-list">
|
<div class="other-login-channel-list-item" @click="goLoginByForm()">
|
<div class="other-login-channel-list-item-icon">
|
<img :src="IconCaptcha" />
|
</div>
|
<div class="other-login-channel-list-item-text">验证码登录</div>
|
</div>
|
<div
|
class="other-login-channel-list-item"
|
@click="goLoginByForm(LoginFormTabs.AccountLogin)"
|
>
|
<div class="other-login-channel-list-item-icon">
|
<img :src="IconPassword" />
|
</div>
|
<div class="other-login-channel-list-item-text">账户登录</div>
|
</div>
|
</div>
|
</div>
|
</LoginPageLayout>
|
</template>
|
|
<script setup lang="ts">
|
import { Policy } from '@/components';
|
import { AccessOpenTypeButton } from '@12333/components';
|
import LoginPageLayout from '../components/LoginPageLayout/LoginPageLayout.vue';
|
import { useUserStore } from '@/stores/modules/user';
|
import { Message } from '@12333/utils';
|
import { CommonEventFunction, ButtonProps } from '@tarojs/components';
|
import Taro from '@tarojs/taro';
|
import { useLoginedJump } from '@/hooks';
|
import * as accountServices from '@12333/services/api/Account';
|
import IconCaptcha from '@/assets/login/icon-btn-captcha.png';
|
import IconPassword from '@/assets/login/icon-btn-password.png';
|
import { LoginFormTabs } from '../constants';
|
import { WxMiniAppEnum } from '@12333/constants';
|
|
defineOptions({
|
name: 'authorization',
|
});
|
|
const state = reactive({
|
policyChecked: false,
|
});
|
|
const userStore = useUserStore();
|
|
function noAccess() {
|
Message.warning('请先阅读并勾选协议');
|
}
|
|
const { jump, redirectParams } = useLoginedJump();
|
|
const launchOptions = Taro.getEnterOptionsSync();
|
console.log('launchOptions: ', launchOptions);
|
const router = Taro.useRouter();
|
|
const uuid = router.params?.scene ?? '';
|
|
const isLoginByWeb = computed(
|
() =>
|
RouterPath.authorization.includes(launchOptions.path) && launchOptions.scene === 1047 && uuid
|
);
|
|
const wxIndentityRes = ref<API.WxMiniAppIndentityInfo>();
|
const wxMiniAppUserLoginRes = ref<API.IdentityModelTokenCacheItem>();
|
|
const isAccount = ref(false);
|
|
onMounted(async () => {
|
try {
|
let loginRes = await Taro.login();
|
if (isLoginByWeb.value) {
|
const wxIndentity = await accountServices.getWxIndentity({
|
code: loginRes.code,
|
wxMiniApp: WxMiniAppEnum.C端小程序,
|
});
|
wxIndentityRes.value = wxIndentity;
|
if (wxIndentityRes.value.userName) {
|
isAccount.value = true;
|
}
|
} else {
|
const params: API.APIwxMiniAppUserLoginParams = {
|
code: loginRes.code,
|
wxMiniApp: WxMiniAppEnum.C端小程序,
|
};
|
wxMiniAppUserLoginRes.value = await accountServices.wxMiniAppUserLogin(params);
|
if (wxMiniAppUserLoginRes.value.accessToken) {
|
isAccount.value = true;
|
}
|
}
|
} catch (error) {}
|
});
|
|
const login: CommonEventFunction<ButtonProps.onGetPhoneNumberEventDetail> = async function (ev) {
|
try {
|
const { errMsg, code } = ev.detail;
|
console.log('errMsg: ', errMsg, isLoginByWeb.value);
|
if (errMsg === 'getPhoneNumber:ok') {
|
if (isLoginByWeb.value) {
|
let res = await userStore.wxMiniAppPhoneAuthLoginFromScan(
|
ev.detail,
|
wxIndentityRes.value,
|
uuid
|
);
|
if (res) {
|
handleLoginSuccess();
|
}
|
} else {
|
let res = await userStore.getTokenByPhone(ev.detail, wxMiniAppUserLoginRes.value);
|
if (res) {
|
handleLoginSuccess();
|
}
|
}
|
} else {
|
Message.warning('无法获取手机号！');
|
}
|
} catch (error) {
|
console.log('error: ', error);
|
}
|
};
|
|
async function handleLoginByHasAccount() {
|
try {
|
if (state.policyChecked) {
|
if (isLoginByWeb.value) {
|
console.log('uuid: ', uuid);
|
let res = await userStore.wxMiniAppUserLoginFromScan(wxIndentityRes.value, uuid);
|
if (res) {
|
handleLoginSuccess();
|
}
|
} else {
|
userStore.loginSuccess(wxMiniAppUserLoginRes.value);
|
handleLoginSuccess();
|
}
|
} else {
|
noAccess();
|
}
|
} catch (error) {}
|
}
|
|
function handleLoginSuccess() {
|
Message.success('授权登录成功', {
|
onClosed: () => {
|
jump();
|
},
|
});
|
}
|
|
function goLoginByForm(tab = LoginFormTabs.VerificationCodeLogin) {
|
Taro.navigateTo({
|
url: `${RouterPath.loginByForm}?redirect=${redirectParams.value}&tab=${tab}`,
|
});
|
}
|
</script>
|
|
<style lang="scss">
|
@import '@/styles/common.scss';
|
|
.authorization-page-wrapper {
|
.authorization-page-top {
|
width: 750px;
|
height: 225px;
|
margin-bottom: 78px;
|
}
|
|
.authorization-page-title {
|
margin-bottom: 160px;
|
}
|
|
.authorization-page-wechat-btn-wrapper {
|
padding: 0 64px;
|
margin-bottom: 40px;
|
}
|
|
.authorization-page-wechat-wrapper {
|
width: 100%;
|
height: 88px;
|
}
|
|
.authorization-page-wechat {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-weight: 400;
|
font-size: 32px;
|
color: #ffffff;
|
line-height: 44px;
|
|
.authorization-page-wechat-icon {
|
width: 44px;
|
height: 36px;
|
margin-right: 10px;
|
}
|
}
|
|
.page-layout-scroll-view-wrapper {
|
position: relative;
|
|
.other-login-channel-wrapper {
|
width: 520px;
|
position: absolute;
|
bottom: 40px;
|
left: 50%;
|
transform: translateX(-50%);
|
|
.nut-divider {
|
margin: 0;
|
margin-bottom: 40rpx;
|
color: boleGetCssVar('text-color', 'secondary');
|
|
&::before,
|
&::after {
|
border-color: #f0f0f0;
|
}
|
}
|
|
.other-login-channel-list {
|
display: flex;
|
justify-content: space-around;
|
|
.other-login-channel-list-item {
|
.other-login-channel-list-item-icon {
|
width: 80px;
|
height: 80px;
|
background: #f5f5f5;
|
border-radius: 50%;
|
margin: 0 auto 8px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
img {
|
width: 38px;
|
height: 48px;
|
}
|
}
|
|
.other-login-channel-list-item-text {
|
font-weight: 400;
|
font-size: 24px;
|
color: boleGetCssVar('text-color', 'regular');
|
line-height: 34px;
|
text-align: center;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.authorization-page-auth {
|
position: fixed;
|
z-index: -1;
|
top: 0;
|
left: 0;
|
width: 750px;
|
height: 1624px;
|
object-fit: cover;
|
}
|
</style>
|
