<template>
|
<div class="verification-code-login-form-wrapper">
|
<nut-button
|
v-if="isAccount"
|
type="primary"
|
class="authorization-page-wechat-wrapper"
|
@click="handleLoginByHasAccount"
|
>
|
<div class="authorization-page-wechat">手机号快速登录</div></nut-button
|
>
|
<template v-else>
|
<nut-form
|
class="verification-code-login-form"
|
ref="formRef"
|
:model-value="form"
|
:rules="rules"
|
>
|
<nut-form-item label="" class="bole-form-item" prop="userName" required>
|
<nut-input
|
v-model.trim="form.userName"
|
class="bole-input-text"
|
placeholder="请输入账号/手机号/邮箱"
|
type="text"
|
/>
|
</nut-form-item>
|
<nut-form-item label="" class="bole-form-item" prop="userPassword" required>
|
<nut-input
|
v-model.trim="form.userPassword"
|
class="bole-input-text"
|
placeholder="请输入密码"
|
:type="isShowPassword ? 'text' : 'password'"
|
:key="isShowPassword ? 'text' : 'password'"
|
>
|
<template #right>
|
<div class="password-icon-wrapper" @click="isShowPassword = !isShowPassword">
|
<Eye v-if="isShowPassword"></Eye>
|
<Marshalling v-else></Marshalling>
|
</div>
|
</template>
|
</nut-input>
|
</nut-form-item>
|
</nut-form>
|
<LargeButton class="login-btn" @click="handleLogin" :loading="form.loading">登录</LargeButton>
|
</template>
|
|
<!-- <AccessOpenTypeButton
|
type="primary"
|
class="authorization-page-wechat-wrapper"
|
open-type="getPhoneNumber"
|
:access="policyChecked"
|
@noAccess="noAccess"
|
@getphonenumber="handleLogin"
|
>
|
<div class="authorization-page-wechat">登录</div>
|
</AccessOpenTypeButton> -->
|
<!-- <div class="go-register-btn" @click="goRegister">立即注册</div> -->
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { Message } from '@12333/utils';
|
import { FormRules } from '@nutui/nutui-taro/dist/types/__VUE/form/types';
|
import { LargeButton } from '@/components';
|
import { useLoginedJump } from '@/hooks';
|
import { useUserStore } from '@/stores/modules/user';
|
import { Eye, Marshalling } from '@nutui/icons-vue-taro';
|
import Taro from '@tarojs/taro';
|
import * as authServices from '@12333/services/apiV2/auth';
|
import { subscribeMessageTemplateIdsForB } from '@12333/constants';
|
|
defineOptions({
|
name: 'AccountLoginForm',
|
});
|
|
type Props = {
|
policyChecked?: boolean;
|
};
|
|
const props = withDefaults(defineProps<Props>(), {});
|
|
const userStore = useUserStore();
|
|
const { jump } = useLoginedJump();
|
|
const isShowPassword = ref(false);
|
|
const formRef = ref(null);
|
const isAccount = ref(false);
|
const wxMiniAppUserLoginRes = ref<API.LoginCommandCallback>();
|
|
const form = reactive({
|
loading: false,
|
userName: '',
|
userPassword: '',
|
});
|
|
const rules = reactive<FormRules>({
|
userName: [{ required: true, message: '请输入账号/手机号/邮箱' }],
|
userPassword: [{ required: true, message: '请输入密码' }],
|
});
|
|
async function handleLoginByHasAccount() {
|
try {
|
if (props.policyChecked) {
|
userStore.loginSuccess(wxMiniAppUserLoginRes.value);
|
Message.success('登录成功', {
|
onClosed: async () => {
|
if (!Taro.requestSubscribeMessage) {
|
await Message.confirm({ message: '你的微信版本过低，不支持订阅消息，是否继续？' });
|
}
|
await Taro.requestSubscribeMessage({
|
tmplIds: subscribeMessageTemplateIdsForB,
|
success: function (res) {
|
console.log('res: ', res);
|
},
|
});
|
jump();
|
},
|
});
|
} else {
|
noAccess();
|
}
|
} catch (error) {}
|
}
|
|
async function handleLogin() {
|
try {
|
let loginRes = await Taro.login();
|
if (props.policyChecked) {
|
const { valid } = await formRef.value.validate();
|
if (valid) {
|
form.loading = true;
|
await userStore.loginByPassword({
|
userName: form.userName,
|
password: form.userPassword,
|
code: loginRes.code,
|
});
|
if (!Taro.requestSubscribeMessage) {
|
await Message.confirm({ message: '你的微信版本过低，不支持订阅消息，是否继续？' });
|
}
|
await Taro.requestSubscribeMessage({
|
tmplIds: subscribeMessageTemplateIdsForB,
|
success: function (res) {
|
console.log('res: ', res);
|
},
|
});
|
jump();
|
}
|
} else {
|
noAccess();
|
}
|
} catch (error) {
|
} finally {
|
form.loading = false;
|
}
|
}
|
|
function noAccess() {
|
Message.warning('请先阅读并勾选协议');
|
}
|
|
function goRegister() {
|
console.log('RouterPath.registerForm: ', RouterPath.registerForm);
|
Taro.navigateTo({
|
url: RouterPath.registerForm,
|
});
|
}
|
|
onMounted(async () => {
|
try {
|
let loginRes = await Taro.login();
|
const params: API.WxmpLoginCommand = {
|
code: loginRes.code,
|
type: AppLocalConfig.userType,
|
enterpriseType: AppLocalConfig.enterpriseType,
|
};
|
wxMiniAppUserLoginRes.value = await authServices.wxmpLogin(params, {
|
skipErrorHandler: true,
|
});
|
if (wxMiniAppUserLoginRes.value?.isBindPhoneNumber) {
|
isAccount.value = true;
|
}
|
} catch (error) {
|
if (error?.info?.errorCode == 's401') {
|
isAccount.value = false;
|
}
|
}
|
});
|
</script>
|
|
<style lang="scss">
|
@import '@/styles/common.scss';
|
|
.verification-code-login-form-wrapper {
|
.password-icon-wrapper {
|
padding: 0 10px;
|
display: inline-flex;
|
|
.nutui-iconfont {
|
font-size: 28px;
|
}
|
}
|
|
.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;
|
}
|
}
|
}
|
</style>
|
