fix: bug

wupengfei

9 天以前 037f138b351a5b3c8a25e6228312698b748225f6

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

@@ -1,44 +1,64 @@
<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>
    <div class="go-register-btn" @click="goRegister">立即注册</div>
    <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>

    <!-- <div class="go-register-btn" @click="goRegister">立即注册</div> -->
  </div>
</template>

<script setup lang="ts">
import { Message } from '@12333/utils';
import { AccessOpenTypeButton } from '@12333/components';
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';
import { ButtonProps, CommonEventFunction } from '@tarojs/components';

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

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

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

async function handleLoginByHasAccount() {
  try {
    if (props.policyChecked) {
      userStore.loginSuccess(wxMiniAppUserLoginRes.value);
      handleLoginSuccess();
    } else {
      noAccess();
    }
  } catch (error) {}
}

async function handleLogin() {
  try {
    if (props.policyChecked) {
@@ -78,13 +112,15 @@
        await userStore.loginByPassword({
          userName: form.userName,
          password: form.userPassword,
          code: loginRes.value?.code,
        });
        jump();
        handleLoginSuccess();
      }
    } else {
      noAccess();
    }
  } catch (error) {
    loginRes.value = await Taro.login();
  } finally {
    form.loading = false;
  }
@@ -94,12 +130,66 @@
  Message.warning('请先阅读并勾选协议');
}

async function handleLoginSuccess() {
  try {
    if (!Taro.requestSubscribeMessage) {
      await Message.confirm({ message: '你的微信版本过低，不支持订阅消息，是否继续？' });
    }
    const res = await Taro.getSetting({
      withSubscriptions: true,
    });
    let setting: boolean[] = [];
    if (res.subscriptionsSetting && res.subscriptionsSetting.itemSettings) {
      setting = subscribeMessageTemplateIdsForB
        .map((id) => res.subscriptionsSetting.itemSettings[id] !== 'accept')
        .filter(Boolean);
    }
    Taro.requestSubscribeMessage({
      tmplIds: subscribeMessageTemplateIdsForB,
      success: function (res) {
        console.log('res: ', res);
      },
    });
    console.log('setting: ', setting);
    Message.success('登录成功', {
      onClosed: () => {
        jump();
      },
    });
  } catch (error) {
    console.log('error: ', error);
  }
}

function goRegister() {
  console.log('RouterPath.registerForm: ', RouterPath.registerForm);
  Taro.navigateTo({
    url: RouterPath.registerForm,
  });
}

onMounted(async () => {
  try {
    loginRes.value = await Taro.login();
    const params: API.WxmpLoginCommand = {
      code: loginRes.value?.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;
    }
  } finally {
    loginRes.value = await Taro.login();
  }
});
</script>

<style lang="scss">
@@ -114,5 +204,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>