132 lines
3.4 KiB
Vue
132 lines
3.4 KiB
Vue
|
<template>
|
|||
|
|
<view class="container">
|
|||
|
|
<view class="huanying">HELLO，</view>
|
|||
|
|
<view class="huanyingText">
|
|||
|
|
欢迎登录
|
|||
|
|
<text>实物管控智慧云</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="huanyingDes">
|
|||
|
|
用智慧云，管好实物资产
|
|||
|
|
<!-- 实物管控，智慧云全掌握 -->
|
|||
|
|
<!-- 智慧云，实物管控好帮手 -->
|
|||
|
|
<!-- 智慧云，助力实物精管控 -->
|
|||
|
|
</view>
|
|||
|
|
<uv-form labelPosition="left" :model="formModel" labelWidth="80" :rules="rules" class="formContent" ref="formRef">
|
|||
|
|
<uv-form-item label="用户名" prop="userInfo.username" borderBottom>
|
|||
|
|
<uv-input v-model="formModel.userInfo.username" border="none" placeholder="请输入用户名" />
|
|||
|
|
</uv-form-item>
|
|||
|
|
<uv-form-item label="密码" prop="userInfo.password" borderBottom>
|
|||
|
|
<uv-input v-model="formModel.userInfo.password" :type="showPass ? '' : 'password'" border="none" placeholder="请输入密码" />
|
|||
|
|
<template v-slot:right>
|
|||
|
|
<uv-icon name="eye" @tap="changePassStatus" v-show="!showPass"></uv-icon>
|
|||
|
|
<uv-icon name="eye-off-outline" @tap="changePassStatus" v-show="showPass"></uv-icon>
|
|||
|
|
</template>
|
|||
|
|
</uv-form-item>
|
|||
|
|
<uv-button type="primary" size="large" text="登 录" shape="circle" color="#199793" customStyle="margin-top: 50px" @click="submit"></uv-button>
|
|||
|
|
</uv-form>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref } from "vue";
|
|||
|
|
import { onLoad } from "@dcloudio/uni-app";
|
|||
|
|
import { userLogin } from "@/api/login"
|
|||
|
|
|
|||
|
|
const formModel = ref({
|
|||
|
|
userInfo: {
|
|||
|
|
username: '',
|
|||
|
|
password: '',
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const showPass = ref(false)
|
|||
|
|
const formRef = ref()
|
|||
|
|
const rules = ({
|
|||
|
|
'userInfo.username': {
|
|||
|
|
type: 'string',
|
|||
|
|
required: true,
|
|||
|
|
message: '输入用户名',
|
|||
|
|
trigger: ['blur', 'change']
|
|||
|
|
},
|
|||
|
|
'userInfo.password': {
|
|||
|
|
type: 'string',
|
|||
|
|
required: true,
|
|||
|
|
message: '请填写密码',
|
|||
|
|
trigger: ['blur', 'change']
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const changePassStatus = () => {
|
|||
|
|
showPass.value = !showPass.value
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 提交
|
|||
|
|
const submit = () => {
|
|||
|
|
// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
|
|||
|
|
formRef.value.validate().then(res => {
|
|||
|
|
userLogin(formModel.value.userInfo).then(res => {
|
|||
|
|
console.log("登录成功", res)
|
|||
|
|
uni.setStorageSync('token', res.data.token)
|
|||
|
|
uni.setStorageSync('user', res.data.user)
|
|||
|
|
uni.switchTab({
|
|||
|
|
url: "/pages/storage/index"
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
}).catch(errors => {
|
|||
|
|
// uni.showToast({
|
|||
|
|
// icon: 'error',
|
|||
|
|
// title: '校验失败'
|
|||
|
|
// })
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.container{
|
|||
|
|
// display: flex;
|
|||
|
|
// align-items: center;
|
|||
|
|
// justify-content: center;
|
|||
|
|
// flex-direction: column;
|
|||
|
|
padding: 0 56rpx;
|
|||
|
|
.title{
|
|||
|
|
font-size: 72rpx;
|
|||
|
|
}
|
|||
|
|
.formContent{
|
|||
|
|
// width: 80%;
|
|||
|
|
margin-top: 140rpx;
|
|||
|
|
}
|
|||
|
|
.huanyingText {
|
|||
|
|
font-family: PingFang SC, PingFang SC;
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 34rpx;
|
|||
|
|
color: #000000;
|
|||
|
|
line-height: 44rpx;
|
|||
|
|
font-style: normal;
|
|||
|
|
margin-top: 38rpx;
|
|||
|
|
|
|||
|
|
text {
|
|||
|
|
color: #199793;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.huanying {
|
|||
|
|
margin-top: 130rpx;
|
|||
|
|
font-family: PingFang SC, PingFang SC;
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 72rpx;
|
|||
|
|
color: #000000;
|
|||
|
|
}
|
|||
|
|
.huanyingDes {
|
|||
|
|
font-family: PingFang SC, PingFang SC;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
line-height: 44rpx;
|
|||
|
|
font-style: normal;
|
|||
|
|
margin-top: 24rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
::v-deep .uv-input__content{
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: unset;
|
|||
|
|
}
|
|||
|
|
</style>
|