140 lines
3.3 KiB
Vue
140 lines
3.3 KiB
Vue
|
<template>
|
||
|
|
<!-- 登录页面 -->
|
||
|
|
<view class="login-container">
|
||
|
|
<!-- 背景图 -->
|
||
|
|
<up-image
|
||
|
|
src="../../static/image/bg_new.png"
|
||
|
|
height="240"
|
||
|
|
width="335"
|
||
|
|
mode="scaleToFill"
|
||
|
|
style="margin-top: 30rpx"
|
||
|
|
/>
|
||
|
|
<!-- 表单 -->
|
||
|
|
<up-form
|
||
|
|
:model="opinionModel"
|
||
|
|
ref="loginModelRef"
|
||
|
|
:rules="opinionRules"
|
||
|
|
labelWidth="auto"
|
||
|
|
class="opinion-form"
|
||
|
|
>
|
||
|
|
<up-form-item prop="username">
|
||
|
|
<up-input
|
||
|
|
clearable
|
||
|
|
prefixIcon="account"
|
||
|
|
placeholder="填输入登录手机号"
|
||
|
|
v-model="opinionModel.username"
|
||
|
|
/>
|
||
|
|
</up-form-item>
|
||
|
|
<up-form-item prop="password">
|
||
|
|
<up-input
|
||
|
|
clearable
|
||
|
|
prefixIcon="lock"
|
||
|
|
placeholder="填输入密码"
|
||
|
|
v-model="opinionModel.password"
|
||
|
|
/>
|
||
|
|
</up-form-item>
|
||
|
|
|
||
|
|
<up-form-item>
|
||
|
|
<up-button type="primary" text="登录" @tap="onSubmitLogin" shape="circle" />
|
||
|
|
</up-form-item>
|
||
|
|
</up-form>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref } from 'vue'
|
||
|
|
import { loginApi } from '@/services/login.js'
|
||
|
|
|
||
|
|
// 表单数据源
|
||
|
|
const opinionModel = ref({
|
||
|
|
userName: '',
|
||
|
|
password: '',
|
||
|
|
})
|
||
|
|
|
||
|
|
const opinionRules = ref({
|
||
|
|
username: [
|
||
|
|
{
|
||
|
|
type: 'string',
|
||
|
|
required: true,
|
||
|
|
message: '请填写登录手机号',
|
||
|
|
trigger: ['blur', 'change'],
|
||
|
|
},
|
||
|
|
// {
|
||
|
|
// pattern: /^[\u4e00-\u9fa5]{2,6}$/,
|
||
|
|
// // 正则检验前先将值转为字符串
|
||
|
|
// transform(value) {
|
||
|
|
// return String(value)
|
||
|
|
// },
|
||
|
|
// message: '请填写正确的姓名',
|
||
|
|
// },
|
||
|
|
],
|
||
|
|
password: [
|
||
|
|
{
|
||
|
|
type: 'string',
|
||
|
|
required: true,
|
||
|
|
message: '请填写登录密码',
|
||
|
|
trigger: ['blur', 'change'],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
})
|
||
|
|
|
||
|
|
// 表单实例
|
||
|
|
const loginModelRef = ref(null)
|
||
|
|
|
||
|
|
// 是否提交成功
|
||
|
|
const isSuccess = ref(false)
|
||
|
|
|
||
|
|
// 提示弹框
|
||
|
|
const showModal = ref(false)
|
||
|
|
|
||
|
|
// 提交按钮
|
||
|
|
const onSubmitLogin = () => {
|
||
|
|
loginModelRef.value
|
||
|
|
.validate()
|
||
|
|
.then(async (valid) => {
|
||
|
|
if (valid) {
|
||
|
|
uni.$u.toast('登录成功')
|
||
|
|
setTimeout(() => {
|
||
|
|
// uni.switchTab({ url: '/pages/workbenches/index' })
|
||
|
|
uni.switchTab({ url: '/pages/workbenches/index' })
|
||
|
|
}, 500)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(() => {
|
||
|
|
// 处理验证错误
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
// 继续填写
|
||
|
|
const onContinueFill = () => {
|
||
|
|
isSuccess.value = false
|
||
|
|
}
|
||
|
|
// 退出
|
||
|
|
const onExit = () => {
|
||
|
|
showModal.value = true
|
||
|
|
}
|
||
|
|
|
||
|
|
// 确认退出
|
||
|
|
const onConfirm = () => {
|
||
|
|
uni.redirectTo({ url: '/pages/index/index' })
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.login-container {
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.opinion-form {
|
||
|
|
width: 90%;
|
||
|
|
margin-top: 10rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .u-form-item__body__right__message {
|
||
|
|
margin-left: 0 !important;
|
||
|
|
}
|
||
|
|
</style>
|