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

<template>
  <app-statusbar class="login">
    <app-navback class="login-navback" />
    <div class="login-logo">
      <img :src="logoSrc" />
    </div>
    <Form class="login-form" @submit="formSubmit">
      <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" />
        <Field>
          <template #input>
            <SliderVerify @statu="slide" style="max-width: 100%;margin: auto;" v-if="showSliderVerify" />
          </template>
        </Field>
      </CellGroup>
      <div class="button-submit">
        <Button type="primary" native-type="submit" round block>登录</Button>
      </div>
    </Form>
    <div class="login-link">
      <span @click="navigationTo('user-register')" v-if="globalStore.hasSystemModule('register')">用户注册</span>
      <span @click="navigationTo('user-forget')">忘记密码</span>
    </div>
    <div class="login-footer">
      <div class="login-footer__trem">
        <Checkbox shape="square" icon-size=".32rem" 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 } from 'vue'
import { Button, Field, CellGroup, Form, Checkbox, showFailToast, showSuccessToast, showToast } from 'vant'
import { fullloading } from '@/utils/vant'
import { useLogin } from '@/business/login'
import { useNavigation } from '@mobile/router/navigation'
import { useGlobalStore } from '@/stores'
import service from '@/services'
import SliderVerify from '@/components/base/slider-verify/index.vue' // 临时调用，待优化
import logoImage from '../../../assets/images/login-logo.png'

defineProps({
  logoSrc: {
    type: String,
    default: logoImage
  }
})

const globalStore = useGlobalStore()
const { routerBack, routerTo } = useNavigation()
const { formData, userLogin } = useLogin()
const checked = shallowRef(false) // 是否同意协议管理
const showSliderVerify = shallowRef(true) // 验证滑块组件重载
const sliderVerifyStatus = 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 slide = (vfcStatu: { statu: string }) => {
  if (vfcStatu.statu === 'success') {
    sliderVerifyStatus.value = true
  } else {
    sliderVerifyStatus.value = false
  }
}

const formSubmit = () => {
  if (sliderVerifyStatus.value) {
    if (checked.value) {
      fullloading((hideLoading) => {
        userLogin().then(() => {
          hideLoading()
          routerBack()
          showSuccessToast('登录成功')
        }).catch((err) => {
          showSliderVerify.value = false
          sliderVerifyStatus.value = false
          showFailToast(err)

          setTimeout(() => {
            showSliderVerify.value = true
          }, 0)
        })
      }, '登录中...')
    } else {
      showToast('请先同意使用条款')
    }
  }
}
</script>

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