feat: 通知

wupengfei

2025-12-03 c2447e7d63e22bea1a8b6119a210b470f8aa17d4

 apps/bMiniApp/src/subpackages/login/loginByForm/accountLoginForm.vue

@@ -1,32 +1,58 @@
<template>
  <div class="verification-code-login-form-wrapper">
    <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>
    <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>
@@ -39,6 +65,8 @@
import { useUserStore } from '@/stores/modules/user';
import { Eye, Marshalling } from '@nutui/icons-vue-taro';
import Taro from '@tarojs/taro';
import { AccessOpenTypeButton } from '@12333/components';
import * as authServices from '@12333/services/apiV2/auth';

defineOptions({
  name: 'AccountLoginForm',
@@ -57,6 +85,8 @@
const isShowPassword = ref(false);

const formRef = ref(null);
const isAccount = ref(false);
const wxMiniAppUserLoginRes = ref<API.LoginCommandCallback>();

const form = reactive({
  loading: false,
@@ -69,8 +99,24 @@
  userPassword: [{ required: true, message: '请输入密码' }],
});

async function handleLoginByHasAccount() {
  try {
    if (props.policyChecked) {
      userStore.loginSuccess(wxMiniAppUserLoginRes.value);
      Message.success('登录成功', {
        onClosed: () => {
          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) {
@@ -78,6 +124,7 @@
        await userStore.loginByPassword({
          userName: form.userName,
          password: form.userPassword,
          code: loginRes.code,
        });
        jump();
      }
@@ -100,6 +147,27 @@
    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">
@@ -114,5 +182,26 @@
      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>