MTP20_WEB_GLOBAL/src/packages/mobile/components/layouts/login/index.vue

<template>
  <app-statusbar class="login">
    <app-navback class="login-navback" />
    <app-statusbar class="login-luanguage">
      <app-luanguage v-if="globalStore.getSystemInfo('i18nEnabled')" />
    </app-statusbar>
    <div class="login-logo">
      <slot name="logo">
        <img :src="logoSrc" />
      </slot>
    </div>
    <Form ref="formRef" class="login-form" @submit="formValidate">
      <CellGroup inset>
        <Field v-model="formData.userName" name="account" :label="$t('user.login.username')" label-align="top"
          size="large" :placeholder="$t('user.login.Pleaseenterausername')"
          :rules="[{ required: true, message: $t('user.login.Pleaseenterausername') }]" />
        <Field v-model="formData.password" name="password" type="password" :label="$t('user.login.password')"
          label-align="top" size="large" :placeholder="$t('user.login.Pleaseenterthepassword')"
          :rules="[{ required: true, message: $t('user.login.Pleaseenterthepassword') }]" autocomplete="off" />
      </CellGroup>
      <ClickVerify class="button-submit" v-model:show="showClickVerify" @success="formSubmit">
        <Button type="primary" native-type="submit" @click="formRef?.submit" round block>
          {{ $t('user.login.login') }}
        </Button>
      </ClickVerify>
    </Form>
    <div class="login-link">
      <span @click="navigationTo('user-register')" v-if="globalStore.hasSystemModule('register')">{{
        $t('user.login.register') }}</span>
      <span @click="navigationTo('user-forget')">{{ $t('user.login.forgetpassword') }}</span>
    </div>
    <div class="login-footer">
      <div class="login-footer__trem">
        <Checkbox shape="square" icon-size="16px" v-model="checked">{{ $t('user.login.checked') }}</Checkbox>
        <span @click="routerTo('rules-zcxy')">{{ $t('user.login.ruleszcxy') }}</span>
        <template v-if="showYhkhfxgzs">
          <span>、</span>
          <span @click="routerTo('rules-yhkhfxgzs')">{{ $t('user.login.rulesyhkhfxgzs') }}</span>
        </template>
        <template v-if="showYszc">
          <span>、</span>
          <span @click="routerTo('rules-yszc')">{{ $t('user.login.rulesyszc') }}</span>
        </template>
      </div>
      <div class="login-footer__version">
        <span>v1.0.{{ appVersion }}</span>
      </div>
    </div>
  </app-statusbar>
</template>

<script lang="ts" setup>
import { shallowRef } from 'vue'
import { FormInstance, Button, Field, CellGroup, Cell, Form, Checkbox, showFailToast, showToast } from 'vant'
import { fullloading, dialog } from '@/utils/vant'
import { useLogin } from '@/business/login'
import { useNavigation } from '@mobile/router/navigation'
import { useGlobalStore, i18n } from '@/stores'
import service from '@/services'
import logoImage from '../../../assets/images/login-logo.png'
import ClickVerify from '@mobile/components/base/click-verify/index.vue'
import AppLuanguage from '@mobile/components/modules/luanguage/index.vue'

const props = defineProps({
  logoSrc: {
    type: String,
    default: logoImage
  },
  showYhkhfxgzs: {
    type: Boolean,
    default: true
  },
  showYszc: {
    type: Boolean,
    default: true
  },
  showReport: {
    type: Boolean,
    default: true
  }
})

const { global: { t } } = i18n
const globalStore = useGlobalStore()
const { setGlobalUrlParams, routerTo, routerBack } = useNavigation()
const { formData, userLogin } = useLogin()
const formRef = shallowRef<FormInstance>()
const checked = shallowRef(false) // 是否同意协议管理
const showClickVerify = shallowRef(false) // 显示验证窗口

const meta = document.getElementsByTagName('meta')
const appVersion = meta.namedItem('revised')?.content ?? '0'

// 导航跳转
const navigationTo = (name: string) => {
  fullloading((hideLoading) => {
    service.onReady().then(() => {
      hideLoading()
      routerTo(name)
    }).catch(() => {
      showFailToast(t('user.login.startfailure'))
    })
  }, t('user.login.loading'))
}

// 表单验证
const formValidate = () => {
  if (checked.value) {
    showClickVerify.value = true
  } else {
    showToast(t('user.login.tips2'))
  }
}

// 表单提交
const formSubmit = () => {
  fullloading((hideLoading) => {
    userLogin().then((forcedPasswordChange) => {
      hideLoading()
      if (forcedPasswordChange) {
        dialog(t('user.login.tips1')).then(() => {
          setGlobalUrlParams({ forcedPasswordChange })
          routerTo('user-password', true)
        })
      } else if (props.showReport) {
        routerTo('report', true)
      } else {
        routerBack()
      }
    }).catch((err) => {
      formData.password = ''
      hideLoading(err, 'fail')
    })
  }, t('user.login.logining'))
}
</script>

<style lang="less">
@import './index.less';
</style>