MTP20_WEB_GLOBAL/src/packages/sbyj/views/user/login/Index.vue

<template>
  <app-statusbar class="login">
    <app-navback class="login-navback" />
    <div class="login-logo">
      <img :src="'./img/login-logo.png'" />
    </div>
    <Form ref="formRef" class="login-form" @submit="formValidate">
      <CellGroup inset>
        <Field v-model="formData.userName" name="account" label="账号登录" label-align="top" size="large"
          placeholder="请输入登录账号/手机号" :rules="[{ required: true, message: '请输入账号登录' }]" />
        <Field v-model="formData.password" name="password" type="password" label="密码" label-align="top" size="large"
          placeholder="请输入密码" :rules="[{ required: true, message: '请输入密码' }]" autocomplete="off" />
      </CellGroup>
    </Form>
    <div class="login-link">
      <span @click="navigationTo('user-register')">用户注册</span>
      <span @click="navigationTo('user-forget')">忘记密码</span>
    </div>
    <ClickVerify class="login-submit" v-model:show="showClickVerify" @success="formSubmit">
      <Button type="primary" native-type="submit" @click="formRef?.submit" round block>登录</Button>
    </ClickVerify>
    <div class="login-footer">
      <div class="login-footer__trem">
        <Checkbox shape="square" icon-size="16px" v-model="checked">我已阅读并同意</Checkbox>
        <span @click="routerTo('rules-zcxy')">《用户注册协议》</span>
        <span>、</span>
        <span @click="routerTo('rules-yhkhfxgzs')">《用户开户风险告知书》</span>
        <span>、</span>
        <span @click="routerTo('rules-yszc')">《隐私政策》</span>
      </div>
      <div class="login-footer__version">
        <span>v1.0.{{ appVersion }}</span>
      </div>
    </div>
  </app-statusbar>
</template>

<script lang="ts" setup>
import { shallowRef, onMounted, onUnmounted } from 'vue'
import { FormInstance, Button, Field, CellGroup, Form, Checkbox, showFailToast, showToast } from 'vant'
import { fullloading, dialog } from '@/utils/vant'
import { useLogin } from '@/business/login'
import { useNavigation } from '@mobile/router/navigation'
import service from '@/services'
import plus from '@/utils/h5plus'
import ClickVerify from '@mobile/components/base/click-verify/index.vue'

const { routerBack, setGlobalUrlParams, routerTo } = 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('初始化失败')
    })
  }, '加载中...')
}

// 表单验证
const formValidate = () => {
  if (checked.value) {
    showClickVerify.value = true
  } else {
    showToast('请先同意使用条款')
  }
}

// 表单提交
const formSubmit = () => {
  fullloading((hideLoading) => {
    userLogin().then((forcedPasswordChange) => {
      hideLoading()
      if (forcedPasswordChange) {
        dialog('为了您的账户安全，请修改密码！').then(() => {
          setGlobalUrlParams({ forcedPasswordChange })
          routerTo('user-password', true)
        })
      } else {
        routerBack()
      }
    }).catch((err) => {
      formData.password = ''
      showFailToast(err)
    })
  }, '登录中...')
}

onMounted(() => plus.setStatusBarStyle('dark'))
onUnmounted(() => plus.setStatusBarStyle('light'))
</script>

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