zhxf-app/pages/deviceManage/deviceAdd/deviceAdd.vue

<template>
	<view class="appWrapper">
		<!-- <form action=""  @submit="formSubmit">
			<view class="form-item margin-top">
				<view class="title">
					<text class="necessary">*</text>
					用户名称:
				</view>
				<input name="userName" v-model="formMess.userName"></input>
			</view>
			<view class="form-item">
				<view class="title">地址:</view>
				<input name="input" v-model="formMess.place"></input>
			</view>
			<view class="form-item">
				<view class="title">经度:</view>
				<input name="input" v-model="formMess.longitude"></input>
			</view>
			<view class="form-item">
				<view class="title">维度:</view>
				<input name="input" v-model="formMess.dimension"></input>
			</view>
			<view class="form-item">
				<view class="title">联系人:</view>
				<input name="input" v-model="formMess.contactor"></input>
			</view>
			<view class="form-item">
				<view class="title">手机号码:</view>
				<input name="input" v-model="formMess.mobile"></input>
			</view>
		
		
			<view class="btn-area submitBottomBtn padding-lr-sm">
				<button class="bg-blue round  margin-top" form-type="submit">提 交 </button>
			</view>
		</form> -->
		<form action="">
			<view class="form-item margin-top">
				<view class="title">
					<text class="necessary">*</text>
					设备编号:
				</view>
				<input name="input" v-model="formMess.deviceNo"></input>
			</view>
			<view class="form-item">
				<view class="title"><text class="necessary">*</text>设备名称:</view>
				<input name="input" v-model="formMess.deviceName"></input>
			</view>
			<view class="form-item">
				<view class="title"><text class="necessary">*</text>单元地址:</view>
				<input name="input" v-model="formMess.place"></input>
			</view>
			<view class="form-item">
				<view class="title"><text class="necessary">*</text>所属楼层:</view>
				<select name="" id="">
					<option value="">楼层一</option>
					<option value="">楼层一</option>
					<option value="">楼层一</option>
				</select>
			</view>
			<view class="form-item">
				<view class="title">物联网卡号:</view>
				<input name="input" v-model="formMess.place"></input>
			</view>
			<view class="form-item">
				<view class="title"><text class="necessary">*</text>所属单位:</view>
				<select name="" id="">
					<option value="">楼层一</option>
					<option value="">楼层一</option>
					<option value="">楼层一</option>
				</select>
			</view>
			<view class="form-item">
				<view class="title"><text class="necessary">*</text>设备类型:</view>
				<select name="" id="">
					<option value="">类型一</option>
					<option value="">类型一</option>
					<option value="">类型一</option>
				</select>
			</view>
			<view class="form-item">
				<view class="title"><text class="necessary">*</text>传输方式:</view>
				<select name="" id="">
					<option value="">方式一</option>
					<option value="">方式一</option>
					<option value="">方式一</option>
				</select>
			</view>
			<view class="form-item margin-top">
				<view class="title">
					<text class="necessary">*</text>
					是否顶楼
				</view>
				<radio-group name="gender">
					<label class="margin-right">
						<radio value="是"/><text>是</text>
					</label>
					<label>
						<radio value="否"  checked /><text>否</text>
					</label>
				</radio-group>
			</view>
		

			<view class="btn-area submitBottomBtn padding-lr-sm">
				<button class="bg-blue round  margin-top">提 交 </button>
			</view>
		</form>
		
		
	</view>
</template>

<script>
	// var graceChecker = require("../../common/graceChecker.js");
	// import add from '../../common/select.js';
	export default {
		
		data() {
			return {
				index: -1,
				picker: ['楼层一', '楼层二', '楼层三'],
				type: '0',


				formMess: {
					"userName": "sss",
					"place": "",
					"longitude": "",
					"dimension": "",
					"contactor": "",
					"mobile": "",
				},
				
				// 站点多选下拉
				data2: [
					{id: 1, value: '选项1'},
					{id: 2, value: '选项2'},
					{id: 3, value: '选项3'},
					{id: 4, value: '选项4'},
					{id: 5, value: '选项5'},
					{id: 6, value: '这是6'},
					{id: 7, value: '这是7'},
					{id: 8, value: '这是8'},
					{id: 9, value: '这是9'},
					{id: 10, value: '这是10'},
				],
				// 站点多选下拉 end


			}
		},
		onLoad: function(option) {
			


		},
		methods: {
			// 站点多选下拉
			getBackVal:function(e){
				console.log(e)
			},
			// 站点多选下拉 end
			
			
			formSubmit: function(e) {
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				//定义表单规则
				var rule = [{
						name: "userName",
						checkType: "string",
						checkRule: "1,3",
						errorMsg: "姓名应为1-3个字符..."
					},
					// {name:"gender", checkType : "in", checkRule:"男,女",  errorMsg:"请选择性别"},
					// {name:"loves", checkType : "notnull", checkRule:"",  errorMsg:"请选择爱好"}
				];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					uni.showToast({
						title: "验证通过!",
						icon: "none"
					});
				} else {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
				}
			},
			formReset: function(e) {
				console.log('清空数据')
			}





		}
	}
</script>




<style lang="scss">


	input,
	select,
	option {
		line-height: 70rpx;
		padding: 0 20rpx;
		height: 70rpx;
		border: 1px solid #EDEDED;
		// width:500rpx!important;
		background-color: #fff;
		box-sizing: border-box;
		appearance: none;
		-moz-appearance: none;
		-webkit-appearance: none;
		color: #999;
	}



	
	/* 站点多选下拉样式end */
</style>