128 lines
3.3 KiB
Vue
128 lines
3.3 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.navigateTo({
|
||
url: "/pages/index/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> |