xg_total_process_master_cloud_h5/pages/test/luckyDraw/LuckyDrawEventsDetail.vue

<template>
	<view>
		<view class="">
			<cu-custom :isBack="true" bgColor="bg-gradual-blue">
				<block slot="backText">返回</block>
				<block slot="content">活动详情</block>
			</cu-custom>
		</view>
		<view class="cu-card article">
			<view class="cu-item shadow">
				<!-- 活动名称 -->
				<view class="title">
					<view class="text-center"> {{dataDetail.name}} </view>
				</view>
				<!-- 活动详情 -->
				<view class="content">
					<view class="desc">
						<view class="text-content-luckyDraw"> {{dataDetail.detail}} </view>
					</view>
				</view>
				<!-- 图片 -->
				<view class="content" style="margin-top: 15px;">
					<image style="width: 100%;" src="/static/lucky_draw_events.jpg" mode="widthFix"></image>
				</view>
				
				<view class=" padding-lr" :key="'00'" :id="'00'">
					<view class="cu-bar solid-bottom bg-white">
						<view class="action">
<!--							<text class="cuIcon-present text-red"></text>-->
<!--							<text class="text-red" style="margin-left: 2upx;" @click="toLottery()">-->
<!--								中奖信息-->
<!--							</text>-->
						</view>
						<view class="action">
							<text class="text-red" style="" @click="toLuckyDrawMember()">
								报名详情
							</text>
							<text class="cuIcon-friend text-red"></text>
						</view>
					</view>
				</view>
				<!-- 表单 -->
				<form @submit="formSubmit">
					<view class="cu-form-group margin-top">
						<view class="title"><text class="red-color ">* </text>姓名</view>
						<input style=" margin-top: 30px;"  placeholder="请输入姓名" name="name" v-model="inputForm.name"></input>
					</view>
					<view class="cu-form-group margin-top">
						<view class="title"><text class="red-color ">* </text>部门</view>
						<input style=" margin-top: 30px;" placeholder="请输入部门" name="officeName" v-model="inputForm.officeName"></input>
					</view>
					<view class="cu-form-group ">
						<view class="title"><text class="red-color ">* </text>公司</view>
						<picker @change="changeCompany" :value="companyIndex" :range="companyList">
							<view class="picker" >
								{{companyIndex > -1 ? companyList[companyIndex] : '请选择'}}
							</view>
						</picker>
					</view>
					<view class="cu-form-group ">
						<view class="title"><text class="red-color ">* </text>电话号码</view>
						<input style=" margin-top: 30px;" placeholder="请输入电话号码" name="phone" v-model="inputForm.phone"></input>
					</view>
					<view class="margin-top" style="padding-left: 7px; padding-right: 7px;">
						<button :disabled="isSubmitting" style="width: 100%;" class='cu-btn lg bg-gradual-blue shadow' form-type="submit">
							{{ isSubmitting ? '提交中...' : '报名' }}
						</button>
					</view>
				</form>
			</view>
		</view>

	</view>
</template>

<script>
	var  graceChecker = require("@/common/graceChecker.js");
	import LuckyDrawEventsService from '@/api/test/luckyDraw/LuckyDrawEventsService'
	import LuckyDrawMembersService from '@/api/test/luckyDraw/LuckyDrawMembersService.js'
	export default {
		data() {
			return {
				inputForm: {
					name: '',
					officeName: '',
					companyName: '',
					phone: '',
					eventId: ''
				},
				list: [],
				dataDetail: {},
				companyList: [
					'评估公司','会计师事务所','中审分所','项目公司','咨询公司','其他'
				],
				isSubmitting: false, // 用于控制提交按钮的状态
				companyIndex: -1
			};
		},
		luckyDrawMembersService: null,
		luckyDrawEventsService: null,
		onLoad(option) {
			this.luckyDrawEventsService = new LuckyDrawEventsService()
			this.luckyDrawMembersService = new LuckyDrawMembersService()
			let { eventId } = option
			this.init(eventId)
		},
		onReady() {
		},
		methods: {
			// 数据初始化方法
			init(id) {
				this.luckyDrawEventsService.queryById(id).then((data) => {
				  this.dataDetail = data
				})
			},
			// 跳转活动报名页面   参数eventId为活动id
			signUp() {
				uni.navigateTo({
				  url: '/pages/test/luckyDraw/LuckyDrawRegister?eventId='+this.dataDetail.id
				})
			},
			// 跳转活动中奖信息页面   参数eventId为活动id
			toLottery() {
				uni.navigateTo({
				  url: '/pages/test/luckyDraw/LuckyDrawShowList?eventId='+this.dataDetail.id
				})
			},
			// 跳转报名详情页面   参数eventId为活动id
			toLuckyDrawMember() {
				uni.navigateTo({
				  url: '/pages/test/luckyDraw/LuckyDrawMemberList?eventId='+this.dataDetail.id
				})
			},
			async formSubmit(e) {
				if (this.isSubmitting) return; // 防止多次点击提交
				//定义表单规则
				var rule = [
					{name:"name", checkType : "notnull", checkRule:"",  errorMsg:"姓名不能为空"},
					{name:"officeName", checkType : "notnull", checkRule:"",  errorMsg:"部门不能为空"},
					{name:"companyName", 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);

				var flag = false;
				if (checkRes) {

				} else {
					uni.showToast({ title: graceChecker.error, icon: "none" });
				}
				if (this.inputForm.phone) {
					this.luckyDrawMembersService.findMobilePhoneOnly(this.inputForm.phone).then((data) => {
						if (data !== 0) {
							uni.showToast({
								title: '联系电话已存在，请重新填写',
								icon: "none",
								duration:2000
							})

						} else {
							this.isSubmitting = true;
							uni.showLoading();
							try {
								this.inputForm.eventId = this.dataDetail.id
								const data = this.luckyDrawMembersService.save(this.inputForm);
								uni.showToast({ title: data, icon: "success" });
								uni.navigateTo({
									url: '/pages/test/luckyDraw/LuckyDrawEvents?is_sucess=200'
								});
							} catch (error) {
								console.error(error);
							} finally {
								this.isSubmitting = false;
								uni.hideLoading();
							}
						}
					})
				}
			},
			changeCompany(e){
				this.companyIndex = e.target.value;
				this.inputForm.companyName = this.companyList[this.companyIndex]
			}
		},
	}
</script>

<style>
</style>