文章目录
一、示例图
二、静态页面的搭建
实现思路：
主要需要实现的功能点：当用户登录与未登录时，“我的页面”的显示状态应随之改变。
1.登录的静态页面
<template>
<view>
<image class="bg-img" src="../../static/images/one.jpg"></image>
<view class="wrapper">
<!-- 顶部退出按钮 -->
<!-- 表单区域 -->
<u-form :model="form" ref="uForm">
<u-form-item prop="username" class="border-active">
<u-input v-model="form.username" placeholder="请输入手机号/邮箱/用户名" />
</u-form-item>
<u-form-item prop="password">
<u-input v-model="form.password" placeholder="请输入密码" />
</u-form-item>
<view class="m-3 button">
<u-button @click="submit" text="登录"
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button>
</view>
<u-form-item prop="choose">
<view class="d-flex m-3">
<view class="checkbox d-flex" @click="changeChecked">
<u-checkbox-group>
<u-checkbox shape="circle" size="34" :checked="isChecked" :name="item.name">
</u-checkbox>
请勾选用户协议
</u-checkbox-group>
</view>
<view class="forget-password">
<text>忘记密码</text>
</view>
</view>
</u-form-item>
</u-form>
</view>
</view>
</template>css样式设置
<style scoped>
/* 表单外部容器样式设置 */
.bg-img {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
opacity: .7;
}
.wrapper {
margin: 0 auto;
margin-top: 150rpx;
padding: 80rpx;
width: 500rpx;
border: 3rpx solid rbg(193, 200, 215);
border-radius: 30rpx;
background: #fff;
opacity: .8;
}
.border-active {
border-color: black;
}
.m-3 {
justify-content: space-between;
font-size: 30rpx;
}
</style>2."我的页面"的静态页面
<template>
<view>
<!-- 用户昵称区域 -->
<view class="head">
<image class="bg-img" src="../../static/images/bg.jpg" mode=""></image>
<view class="d-flex user-about">
<view class="d-flex">
<view>
<image class="user-img"
:src="userinfo.avatar ? userinfo.avatar : '../../static/images/demo/demo6.jpg'" mode="">
</image>
</view>
<view class="user-name">
<text @click="toLogin">{
{userinfo.nickname ?userinfo.nickname : '登录/注册' }}</text>
</view>
</view>
<view class="member" v-if="userinfo.status == 1">
<text>会员积分</text>
</view>
</view>
</view>
<!-- 订单信息区域 -->
<view v-if="userinfo.status == 1">
<view class="order d-flex a-center">
<view class="my-order">
我的订单
</view>
<view class="more-order">
更多
</view>
</view>
<view>
<scroll-view scroll-x="true">
<view class="d-flex">
<view class="order-item">
<view>
<image class="order-img" src="../../static/images/demo/demo5.jpg" mode=""></image>
</view>
<view>
小米手机
</view>
</view>
<view class="order-item">
<view>
<image class="order-img" src="../../static/images/demo/demo5.jpg" mode=""></image>
</view>
<view>
小米手机
</view>
</view>
<view class="order-item">
<view>
<image class="order-img" src="../../static/images/demo/demo5.jpg" mode=""></image>
</view>
<view>
小米手机
</view>
</view>
<view class="order-item">
<view>
<image class="order-img" src="../../static/images/demo/demo5.jpg" mode=""></image>
</view>
<view>
小米手机
</view>
</view>
<view class="order-item">
<view>
<image class="order-img" src="../../static/images/demo/demo5.jpg" mode=""></image>
</view>
<view>
小米手机
</view>
</view>
<view class="order-item">
<view>
<image class="order-img" src="../../static/images/demo/demo5.jpg" mode=""></image>
</view>
<view>
小米手机
</view>
</view>
</view>
</scroll-view>
</view>
</view>
<!-- 功能列表区域 -->
<view class="main">
<view class="main-item" v-for="(item,index) in title" :key="index">
<text class="iconfont icon" :class="item.icon" :style="'color:'+item.leftIconStyle"></text>
<text>{
{item.title}}</text>
</view>
</view>
<!-- 退出登录区域 -->
<view class="footer" v-if="userinfo.status == 1">
<text @click="goLogin">退出登录</text>
</view>
</view>
</template>css相关样式
<style scoped>
/* 顶部区域样式设置 */
.bg-img {
position: fixed;
width: 100%;
height: 380rpx;
top: 0;
left: 0;
z-index: -1;
opacity: .7;
}
.user-img {
width: 180rpx;
height: 180rpx;
border-radius: 50%;
margin-right: 30rpx;
}
.user-about {
height: 180rpx;
line-height: 180rpx;
margin-top: 150rpx;
padding: 0 40rpx;
justify-content: space-between;
}
.user-name text {
font-size: 40rpx;
}
.member {
width: 220rpx;
height: 80rpx;
line-height: 80rpx;
margin-top: 45rpx;
background: linear-gradient(to right, rgb(170, 170, 255), rgb(201, 134, 142));
text-align: center;
border-radius: 50rpx;
}
/* 订单区域样式设置 */
.order {
bakcground: #bfa;
padding: 40rpx;
justify-content: space-between;
margin-top: 30rpx;
}
.more-order {
width: 140rpx;
height: 60rpx;
line-height: 60rpx;
text-align: center;
border-radius: 50rpx;
border: 3rpx solid rgb(244, 244, 244);
}
.order-img {
width: 150rpx;
height: 150rpx;
border-radius: 30rpx;
}
.order-item {
margin-left: 33rpx;
}
/* 功能区域列表样式设置 */
.main {
padding: 0 30rpx;
margin-top: 55rpx;
line-height: 80rpx;
}
.main-item {
border-bottom: 3rpx solid rgb(214, 214, 214);
}
.icon {
margin-right: 20rpx;
}
/* 退出登录区域样式设置 */
.footer {
height: 100rpx;
line-height: 100rpx;
margin-top: 20rpx;
text-align: center;
}
.footer text {
width: 200rpx;
background: pink;
height: 80rpx;
line-height: 80rpx;
border-radius: 40rpx;
display: inline-block;
background: linear-gradient(to right, rgb(203, 211, 216), rgb(192, 122, 141));
}
</style>
三、登录页面的实现逻辑
1.进行表单验证的组件
在这里可以使用 uview中的 from组件，在进行表单验证时较为简单。
2.验证登录成功的思路
当用户名以及密码格式输入有误时，应有相应的提示。
在用户名与密码输入正确后，若用户没有勾选同意用户协议，也应该有相应提示。
3.具体代码实现
3.1 登录功能的实现
<script>
// 引入获取登录页面数据的方法
import {
getLogin
} from '../../api/login.js'
export default {
data() {
return {
// 用来表示复选框是否被选中
isChecked: false,
form: {
username: '',
password: '',
choose: ''
},
rules: {
// 验证用户名
username: [{
required: true,
message: '请输入用户名',
trigger: ['change', 'blur'],
},
{
// 自定义验证函数，见上说明
validator: (rule, value, callback) => {
// 上面有说，返回true表示校验通过，返回false表示不通过
// uni.$u.test.mobile()就是返回true或者false的
return uni.$u.test.enOrNum(value);
},
message: '用户名不正确',
// 触发器可以同时用blur和change
trigger: ['change', 'blur'],
}
],
// 验证密码
password: [{
required: true,
message: '请输入密码',
trigger: ['change', 'blur'],
},
{
// 自定义验证函数，见上说明
validator: (rule, value, callback) => {
// 上面有说，返回true表示校验通过，返回false表示不通过
// uni.$u.test.mobile()就是返回true或者false的
return uni.$u.test.enOrNum(value);
},
message: '密码不正确',
// 触发器可以同时用blur和change
trigger: ['change', 'blur'],
}
],
},
};
},
methods: {
// 表单提交事件
submit() {
if (this.isChecked) {
this.$refs.uForm.validate().then(res => {
uni.$u.toast('登录成功！');
getLogin(this.form).then((response) => {
console.log(response)
if (response.msg == 'ok') {
this.$store.dispatch('login/userInfo', response.data);
}
})
uni.switchTab({
url: '../../pages/myfile/myfile'
})
}).catch(errors => {
uni.$u.toast('登录失败！')
})
} else {
uni.showModal({
title: '提示',
content: '请勾选用户协议!',
});
}
},
// 复选框的点击事件
changeChecked() {
this.isChecked = !this.isChecked;
console.log(this.isChecked)
},
},
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
onReady() {
this.$refs.uForm.setRules(this.rules);
},
};
</script>3.2 “我的页面”功能实现
<script>
import {
mapState
} from 'vuex';
export default {
data() {
return {
title: [{
title: '小米会员',
icon: 'icon-VIP',
leftIconStyle: '#FDBF2E'
},
{
title: '会员中心',
icon: 'icon-huangguan',
leftIconStyle: '#FCBE2D'
},
{
title: '服务中心',
icon: 'icon-service',
leftIconStyle: '#FA6C5E'
},
{
title: '小米之家',
icon: 'icon-home',
leftIconStyle: '#FE8B42'
},
{
title: '更多功能',
icon: 'icon-gengduo',
leftIconStyle: '#9ED45A'
},
]
}
},
computed: {
...mapState('login', ['userinfo'])
},
methods: {
// 退出登录跳转到登录页面
goLogin() {
uni.navigateTo({
url: '../../pages/login/login'
})
this.$store.dispatch('login/loginout')
},
// 点击登录字体登录
toLogin() {
uni.navigateTo({
url: '../../pages/login/login'
})
}
}
}
</script>