当前位置:首页 > uni-app开发 > 正文

uni-app开发纪念日小程序(5) - 添加表单页,实现增加纪念日

今天来做增加纪念日的表单,这里表单检查用到了graceChecker,还挺好用的,支持验证空字符,数字,正则等等,需要哪个就用哪个。

image.png

  1. addform.vue页面代码:表单项样式用的是colorui的,主要注意几个表单组件的用法,比如日期,时间等。再就是学习下数据绑定,picker下拉列表初始化index值时要用字符串,如index:'0',如果换成数字会不识别。

<template>
	<view class="uni-padding-wrap">
		<view class="headerTitle">
			新增纪念日
			<view>{{today}}</view>
		</view>
		<view class="addform">
		<form @submit="formSubmit" @reset="formReset">
			<view class="cu-form-group">
				<text class='cuIcon-notice text-orange'></text>
				<view class="title">事件</view>
				<input placeholder="输入框事件标题" name="title" :disabled="title" v-model="title"></input>
			</view>
			<view class="cu-form-group">
				<text class='cuIcon-calendar text-orange'></text>
				<view class="title">日期选择</view>
				<picker name="theday" mode="date" :value="date" start="2015-09-01" end="2020-09-01" @change="DateChange">
					<view class="picker">
						{{date}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<text class='cuIcon-selection text-orange'></text>
				<view class="title">分类</view>
				<picker @change="PickerChange" :value="index" :range="addtype" name="type">
					<view class="picker">
						{{index>-1?addtype[index]:'禁止换行,超出容器部分会以 ... 方式截断'}}
					</view>
				</picker>
			</view>

			<view class="cu-form-group">
				<text class='cuIcon-time text-orange'></text>
				
				<view class="title">提醒时间</view>
				<picker mode="time" :value="time" start="09:01" end="21:01" @change="TimeChange">
					<view class="picker">
						{{time}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group align-start">
				<view class="title">备注</view>
				<textarea maxlength="-1" :disabled="modalName!=null" @input="textareaBInput" placeholder="多行文本输入框"></textarea>
			</view>

			<view class="uni-btn-v">
				<button form-type="submit" type='primary'>提交</button>
				<button type="default" form-type="reset">重置</button>
			</view>
		</form>
		</view>
	</view>
</template>

<style>
	.uni-form-item .title {
		padding: 20rpx 0;
	}
	.headerTitle{
		font-size: 18px;
		text-align: center;
	}
	.extraInfo {
		font-size: 24rpx;
		color:#666666;
		margin-top: 0px;
	}
	.headerQuestion{
		font-size: 18px;
	}
	.headerDesc{
		color:#7A7E83;
		font-size: 16px;
	}
	.headerRedDesc{
		color:red;
		font-size: 16px;
		display: inline;
	}

	.manageIn {
		position: absolute;
		top: 10rpx;
		right: 30rpx;
		color: #007aff;
	}
	.addform{
		margin-left:50upx;
		
	}

</style>
<script>
	var graceChecker = require('common/graceChecker.js');
	import moment from 'moment';
	import {
		mapState
	} from 'vuex';
	const app = getApp();
	export default {
		computed: mapState(['hasLogin']),
		data() {
			return {
				'today':moment().format('YYYY/MM/DD'),
				company:'',
				companyDisabled: false,
				jobnumber: '',
				jobnumberDisabled: false,
				department: '',
				departmentDisabled: false,
				name: '',
				nameDisabled: false,
				date: moment().format('YYYY-MM-DD'),
				time: '12:01',
				index: "0",
				addtype: ['未分类', '生日', '纪念日'],
			}
		},
		onLoad: function(option) {
			if(option.id) {
				this.company = option.id;
				this.companyDisabled = 1;
			}
			const employee = app.globalData.employee;
			if (employee.company) {
				this.company = employee.company;
				this.department = employee.department || '';
				this.jobnumber = employee.jobnumber;
				this.name = employee.name;
				
				this.companyDisabled = true;
				this.departmentDisabled = this.department;
				this.jobnumberDisabled = true;
				this.nameDisabled = true;
			}
		},
		methods: {
			goManage: function() {
				if (!this.hasLogin) {
					uni.navigateTo({
						url: '../user/login'
					});
				} else {
					uni.navigateTo({
						url: '../manager/index'
					});
				}
			},
			PickerChange(e) {
				this.index = e.detail.value
			},
			TimeChange(e) {
				this.time = e.detail.value
			},
			DateChange(e) {
				this.date = e.detail.value
			},
			
			formSubmit: function(e) {
				console.log('form发生了submit事件,携带数据为:' + JSON.stringify(e.detail.value))
				//定义表单规则
				var rule = [{
						name: "title",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "请填写事件标题"
					},
					{
						name: "type",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "请选择分类"
					},
					{
						name: "theday",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "请选择日期"
					}
					
				];
				//进行表单检查
				var formData = {data:e.detail.value};
				console.log(formData);
				var checkRes = graceChecker.check(formData.data, rule);
				if (!checkRes) {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
				} else {
					uni.showLoading({
						mask: true,
						title: '处理中...'
					});
					wx.cloud.callFunction({
						name: 'addform_collect_submit',
						data: formData
					}).then((res) => {
						console.log(res)
						uni.hideLoading()
						uni.switchTab({
							url: "../index/index",
							success:function(e){
								console.log(e);
							},
							fail:function(e){
								console.log(e);
							},
							});

						
						// uni.showModal({
						// 	content: `提交成功,建议:${res.result.status}`,
						// 	showCancel: false
						// })
					}).catch((err) => {
						uni.hideLoading()
						uni.showModal({
							content: `添加数据失败,错误信息为:${err.message}`,
							showCancel: false
						})
						console.error(err)
					})
				}
			},
			formReset: function(e) {
				console.log('清空数据')
			}

		}
	}
</script>

2.增加云函数addform_collect_submit,内容如下:

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()
const db = cloud.database();
exports.main = async (event, context) => {
//event为客户端上传的参数
console.log('event : ' + event)
//返回数据给客户端
const collection = db.collection('testcollection')
//插入数据库测试
await collection.add(event);
return {
  status: 1
}

};

3.另外还学习了跳转页面的uni.switchTab的用法,这里的url是相对路径,用sucess,fail来查找错误

uni.switchTab({
	url: "../index/index",
	success:function(e){
	console.log(e);
	},
	fail:function(e){
	console.log(e);
	},
	});

4.效果如下

image.png

剩余多少天这个需要在云函数里计算一下,下一步就是做这个计算剩余天数,以及对纪念日进行分类显示。


更新时间 2020-03-09

有话要说...