feat: 通知

wupengfei

10 天以前 1bf39274d6b51540953f746c507b2cc70d3e0ed9

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

@@ -1,32 +1,47 @@
<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>
    <!-- <div class="go-register-btn" @click="goRegister">立即注册</div> -->
  </div>
</template>
@@ -39,6 +54,8 @@
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 { subscribeMessageTemplateIdsForU } from '@12333/constants';

defineOptions({
  name: 'AccountLoginForm',
@@ -57,6 +74,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 +88,20 @@
  userPassword: [{ required: true, message: '请输入密码' }],
});

async function handleLoginByHasAccount() {
  try {
    if (props.policyChecked) {
      userStore.loginSuccess(wxMiniAppUserLoginRes.value);
      handleLoginSuccess();
    } 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,8 +109,9 @@
        await userStore.loginByPassword({
          userName: form.userName,
          password: form.userPassword,
          code: loginRes.code,
        });
        jump();
        handleLoginSuccess();
      }
    } else {
      noAccess();
@@ -94,12 +126,64 @@
  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 = subscribeMessageTemplateIdsForU
        .map((id) => res.subscriptionsSetting.itemSettings[id] !== 'accept')
        .filter(Boolean);
    }
    Taro.requestSubscribeMessage({
      tmplIds: subscribeMessageTemplateIdsForU,
      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 {
    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">