uni-app 实现H5登录页面布局样式
代码实现
<template>
<view class="loginform">
<view class="title-log">
<image src="https://img0.baidu.com/it/u=1904323991,1275566072&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
mode="widthFix"></image>
<text>uni-app H5模板</text>
</view>
<uni-forms ref="form" :modelValue="formData" :rules="rules">
<uni-forms-item label="姓名:" name="username">
<uni-easyinput prefixIcon="person-filled" type="text" v-model="formData.username" clearable
placeholder="请输入姓名" />
</uni-forms-item>
<!-- @input="binddata('email',$event.detail.value)" -->
<uni-forms-item label="密码:" name="password">
<uni-easyinput prefixIcon="locked-filled" type="password" v-model="formData.password"
placeholder="请输入密码" />
</uni-forms-item>
</uni-forms>
<checkbox-group @change="checkboxChange">
<label>
<checkbox value="checkoutbut" style="transform:scale(0.7)" />
<span>我已阅读同意<a href="#">服务协议</a>和<a href="#">隐私政策</a></span>
</label>
</checkbox-group>
<button type="primary" @click="submit" :loading="loading">登录</button>
</view>
</template>
<script>
import {
mapState
} from 'vuex'
import {
login,
getInfo
} from '@/api/user'
export default {
name: 'login',
computed: {
...mapState('user', ['name'])
},
data() {
return {
// 表单开关
checkoutage: true,
// 表单数据
formData: {
username:'admin',
password: '111111'
},
// 开关
loading: false,
rules: {
username: {
rules: [{
required: true,
errorMessage: '请输入账号',
}, ]
},
password: {
rules: [{
required: true,
errorMessage: '请输入密码',
}, ]
}
}
};
},
created() {
console.log('process.env', process.env);
},
methods: {
// 阅读协议
checkboxChange(e) {
console.log('协议值', e);
let data = e.detail.value[0] == 'checkoutbut'
console.log('data', data);
this.checkoutage = data ? false : true
},
// 触发提交表单
submit() {
this.$refs.form.validate().then(res => {
console.log('this.checkoutage', this.checkoutage);
if (this.checkoutage) {
return uni.$showToast('请先勾选用户协议')
}
this.loading = true
console.log('表单数据信息:', res);
this.login(this.formData)
this.loading = false
}).catch(err => {
console.log('表单错误信息:', err);
this.loading = false
})
},
async login(userInfo) {
const res = await login(userInfo)
console.log('登录接口', res)
if (res.data.data) {
console.log('成功了');
// 存储token
this.$store.commit("user/SET_TOKEN", res.data.data)
}
uni.switchTab({
url: "/pages/home/home"
})
uni.$showToast('登录成功')
},
}
}
</script>
<style lang="scss">
.loginform {
width: 100vw;
height: 100vh;
// 触发盒子模型-防止右边距不生效
box-sizing: border-box;
padding: 50rpx 80rpx;
}
.title-log {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 120rpx auto 100rpx;
// background-color: aqua;
image {
width: 160rpx;
height: 160rpx;
margin-bottom: 20rpx;
}
text {
font-size: 60rpx;
}
}
::v-deep uni-checkbox-group {
margin: -20rpx 0 60rpx 0;
span {
a {
&:nth-child(n) {
color: #5391ce;
text-decoration: underline;
}
}
}
}
::v-deep::v-deep uni-button {
margin-top: 80rpx;
line-height: 70rpx !important;
}
</style>