xg_total_process_master_cloud_h5/pages/test/luckyDraw/LuckyDrawRegister.vue

<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">活动报名</block>
		</cu-custom>
		<form @submit="formSubmit()">
			<view class="cu-form-group margin-top">
				<view class="title"><text class="red-color ">* </text>姓名</view>
				<input placeholder="请输入姓名" name="name" v-model="inputForm.name"></input>
			</view>
			<view class="cu-form-group ">
				<view class="title"><text class="red-color ">* </text>部门</view>
				<picker @change="changeOffice" :value="officeIndex" :range="officeList">
					<view class="picker">
						{{officeIndex>-1?officeList[officeIndex]:'请选择'}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group ">
				<view class="title"><text class="red-color ">* </text>电话号码</view>
				<input placeholder="请输入电话号码" name="phone" v-model="inputForm.phone"></input>
			</view>
			<view class=" margin-top" style="padding-left: 7px;padding-right: 7px;">
				<button style="width: 100%;" class='cu-btn lg bg-gradual-blue shadow ' form-type="submit">提交</button>
			</view>
		</form>
	</view>
</template>

<script>
	var  graceChecker = require("@/common/graceChecker.js");
	import LuckyDrawMembersService from '@/api/test/luckyDraw/LuckyDrawMembersService.js'
	export default {
		data() {
			return {
				eventId: '',
				inputForm: {
					name: '',
					officeName: '',
					mobile: '',
					eventId: ''
				},
				officeList: [
					'工程一部','工程二部','工程三部','工程四部','工程五部','招标代理部','兴光评估','其他'
				],
				officeIndex: -1
			};
		},
		luckyDrawMembersService: null,
		onLoad(option) {
			this.luckyDrawMembersService = new LuckyDrawMembersService()
			let { eventId } = option
			this.inputForm.eventId = eventId
		},
		methods: {
			formSubmit: function(e) {
				//定义表单规则
				var rule = [
					  {name:"name", checkType : "notnull", checkRule:"",  errorMsg:"姓名不能为空"},
					  {name:"officeName", checkType : "notnull", checkRule:"",  errorMsg:"部门不能为空"},
					  {name:"phone", checkType : "notnull", checkRule:"",  errorMsg:"电话号码不能为空"},
					  {name:"phone", checkType : "isMobileNumber", checkRule:"",  errorMsg:"电话号码格式不正确"}
				];
				//进行表单检查
				var formData = this.inputForm;
				var checkRes = graceChecker.check(formData, rule);
				if(checkRes){
					uni.showLoading()
					this.luckyDrawMembersService.save(this.inputForm).then((data) => {
						uni.showToast({title:data, icon:"success"});
						uni.navigateTo({
						  url: '/pages/test/luckyDraw/LuckyDrawEvents?is_sucess='+'200'
						})
					}).catch((e)=>{
					})
				}else{
					uni.showToast({ title: graceChecker.error, icon: "none" });
				}
			},
			changeOffice(e){
				this.officeIndex = e.target.value;
				this.inputForm.officeName = this.officeList[this.officeIndex]
			}
		}
	}
</script>

<style>

</style>