UniApp基础教程(四)
表单案例
使用uni-ui的表单组件实现登录和注册表单界面效果。
1.项目结构图
2.users/index.vue
<template>
<view>
<view>
<view>
<text>
\n\n
</text>
</view>
<view style="padding: 40rpx;">
<button type="primary" plain="true" @tap="toLogin()">跳转表单演示页面</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: ''
}
},
methods: {
toLogin() {
uni.navigateTo({
url: '/pages/users/form'
})
}
}
}
</script>
<style>
.center_title {
size: 20rpx;
}
</style>
3.users/form.vue
<template>
<view class="content">
<!-- <text>我的订单</text> -->
<view>
<view class="tabs">
<view :class="['tabs-item',index==0?'tabs-item-tag':'']" @click="changeTab(0)">登录</view>
<view :class="['tabs-item',index==1?'tabs-item-tag':'']" @click="changeTab(1)">注册</view>
</view>
<view :class="[index==0?'item':'']" v-show="index==0">
<!-- 基础用法，不包含校验规则 -->
<uni-forms ref="loginForm" :modelValue="loginUser">
<uni-forms-item label="用户名" required>
<uni-easyinput v-model="loginUser.username" placeholder="请输入用户名/手机/电子邮箱" />
</uni-forms-item>
<uni-forms-item label="密码" required>
<uni-easyinput type="password" v-model="loginUser.password" placeholder="请输入密码" />
</uni-forms-item>
<uni-forms-item label=" ">
<!--
<image style="margin-top: 10rpx; width: 240rpx; height: 90rpx;" src='/static/form/randomCode.png' />
-->
<view>
<image style="cursor: pointer; margin-top: 10rpx; width: 240rpx; height: 90rpx;"
:src='randomCodeUrl' @tap="changeRandomCode">
</image>
</view>
</uni-forms-item>
<uni-forms-item label="验证码" required>
<uni-easyinput v-model="loginUser.validateCode" placeholder="请输入验证码" />
</uni-forms-item>
</uni-forms>
<view>
<button type="default" plain="true" @click="doLogin()">登录</button>
</view>
</view>
<view :class="[index==1?'item':'']" v-show="index==1">
<!-- 基础用法，不包含校验规则 -->
<uni-forms ref="regForm" :modelValue="regUser">
<uni-forms-item label="手机/邮箱" label-width="180rpx" required>
<uni-easyinput v-model="regUser.username" placeholder="请输入手机/邮箱" />
</uni-forms-item>
<uni-forms-item label=" " label-width="180rpx">
<button type="default" @click="sendMsg">发送验证码</button>
</uni-forms-item>
<uni-forms-item label="密码" label-width="180rpx" required>
<uni-easyinput v-model="regUser.password" type="password" placeholder="请输入密码" />
</uni-forms-item>
<uni-forms-item label="确认密码" label-width="180rpx" required>
<uni-easyinput v-model="regUser.confirmPass" type="password" placeholder="请输入确认密码" />
</uni-forms-item>
<uni-forms-item label="性别" label-width="180rpx" required>
<uni-data-checkbox v-model="regUser.gender" :localdata="genders" />
</uni-forms-item>
<uni-forms-item label="出生日期" label-width="180rpx">
<uni-datetime-picker type="datet" return-type="date" v-model="regUser.birthday" />
</uni-forms-item>
<uni-forms-item label="关注领域" label-width="180rpx">
<uni-data-checkbox v-model="regUser.favorite" multiple :localdata="favorites" />
</uni-forms-item>
<uni-forms-item label="选择学历" label-width="180rpx">
<uni-data-picker v-model="regUser.education" :localdata="eductions" popup-title="选择学历">
</uni-data-picker>
</uni-forms-item>
<uni-forms-item label="自我介绍" label-width="180rpx">
<uni-easyinput type="textarea" v-model="regUser.introduction" placeholder="请输入自我介绍" />
</uni-forms-item>
<uni-forms-item label="验证码" label-width="180rpx" required>
<uni-easyinput v-model="regUser.validateCode" placeholder="请输入验证码" />
</uni-forms-item>
</uni-forms>
<view>
<button type="primary" @click="doReg()">注册</button>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 默认显示0
index: 0,
token: new Date().getMilliseconds() + "",
randomCodeUrl: 'https://www.simoniu.com/commons/validateCode/hutoolRandomCodeImage?token=' + new Date()
.getMilliseconds(),
loginUser: {
username: '',
password: '',
validateCode: ''
},
regUser: {
username: '',
password: '',
confirmPass: '',
education: '本科',
gender: '男',
favorite: 'server',
birthday: '',
introduction: '',
validateCode: ''
},
// 单选数据源
genders: [{
text: '男',
value: '男'
}, {
text: '女',
value: '女'
}],
// 多选数据源
favorites: [{
text: '后端',
value: 'server'
}, {
text: '前端',
value: 'h5'
}, {
text: '算法',
value: 'alg'
}, {
text: 'A I ',
value: 'ai'
}, {
text: '网络',
value: 'net'
}, {
text: '其他',
value: 'other'
}],
// 城市数据
eductions: [{
text: "文盲",
value: "文盲",
}, {
text: "小学",
value: "小学",
}, {
text: "初中",
value: "初中",
}, {
text: "高中",
value: "高中",
},
{
text: "大专",
value: "大专",
},
{
text: "本科",
value: "本科",
},
{
text: "研究生",
value: "研究生",
}
]
};
},
onLoad() {
/*
uni.request({
url: this.randomCodeUrl,
method:'GET',
data:{
token: this.token
},
success: (resp) => {
console.log(resp)
}
})*/
},
methods: {
// 切换
changeTab(index) {
this.index = index;
console.log('当前tab编号：' + index)
},
sendMsg() {
uni.showToast({
title: '发送验证码',
duration: 2000
})
},
changeRandomCode() {
this.randomCodeUrl = 'https://www.simoniu.com/commons/validateCode/hutoolRandomCodeImage?token=' +
new Date().getMilliseconds();
},
doLogin() {
console.log("------------登录用户资料-----------");
console.log(this.loginUser);
uni.showToast({
title: '执行登录',
duration: 2000
})
},
doReg() {
console.log("------------注册用户资料-----------");
console.log(this.regUser);
uni.showToast({
title: '执行注册',
duration: 2000
})
}
}
}
</script>
<style lang="scss">
.content {
.tabs {
height: 60rpx;
padding: 40rpx;
display: flex;
margin-top: 10rpx;
.tabs-item {
// 平均分布
flex: 1;
text-align: center;
color: #111111;
height: 60rpx;
line-height: 60rpx;
}
.tabs-item-tag {
color: #5BA7FF;
border-bottom: 4rpx solid #5BA7FF;
}
}
.item {
padding: 40rpx;
display: grid;
image {
width: 64rpx;
height: 64rpx;
margin: auto;
margin-top: 400rpx;
}
text {
text-align: center;
}
}
}
</style>
运行效果：
