cxyy-applet/pagesHome/match/sign.vue

<template>
	<view class="container main">
		<view class="one">
			<view class="one_1 name">{{info.name||'暂无活动名称'}}</view>
			<view class="one_1 one_2 text_color">
				<view class="one_left">
					<text class="t-icon t-icon-shizhong"></text>
					<span>{{getTime(info.start_time,info.end_time)||'暂无'}}</span>
				</view>
				<view class="one_right"
					:class="[info.match_status=='0'?'active_1':info.match_status=='1'?'active_2':info.match_status=='2'?'active_3':'active_4']">
					<text class="t-icon t-icon-shizhong-copy"></text>
					<span>{{getDict(info.match_status,'status')}}</span>
				</view>
			</view>
			<view class="one_1 text_color">
				<text class="t-icon t-icon-gonglve"></text>
				<span>{{getDict(info.match_type,'type')||'自办'}}</span>
			</view>
			<view class="one_1 text_color">
				<text class="t-icon t-icon-gongsi"></text>
				<span>{{info.work||'暂无组织单位'}}</span>
			</view>
		</view>
		<view class="two">
			<view class="two_1">
				<view class="two_text">填写报名信息</view>
				<view class="two_remark">*请如实填报报名信息，方便我们及时与您联系</view>
			</view>
			<view class="two_2">
				<form @submit="formSubmit">
					<view class="value other">
						<view class="title">姓名</view>
						<view class="label">
							<input name="name" class="input" :value="form.name" placeholder="请输入姓名" />
							<span v-if="errors.name" class="error-message">{{ errors.name }}</span>
						</view>
					</view>
					<view class="value other">
						<view class="title">证件类型</view>
						<view class="label">
							<uni-data-checkbox v-model="form.cardType" :localdata="cTypeList"
								:map="{text:'label',value:'value'}" />
							<span v-if="errors.cardType" class="error-message">{{ errors.cardType }}</span>
						</view>
					</view>
					<view class="value other">
						<view class="title">证件号码</view>
						<view class="label">
							<input name="card" class="input" :value="form.card" placeholder="请输入证件号码" />
							<span v-if="errors.card" class="error-message">{{ errors.card }}</span>
						</view>
					</view>
					<view class="value other">
						<view class="title">手机号</view>
						<view class="label">
							<input name="phone" class="input" :value="form.phone" placeholder="请输入手机号" />
							<span v-if="errors.phone" class="error-message">{{ errors.phone }}</span>
						</view>
					</view>
					<view class="value other">
						<view class="title">电子邮箱</view>
						<view class="label">
							<input name="email" class="input" :value="form.email" placeholder="请输入电子邮箱" />
							<span v-if="errors.email" class="error-message">{{ errors.email }}</span>
						</view>
					</view>
					<view class="value other">
						<view class="title">微信/QQ</view>
						<view class="label">
							<input name="communication" class="input" :value="form.communication"
								placeholder="请输入微信/QQ" />
							<span v-if="errors.communication" class="error-message">{{ errors.communication }}</span>
						</view>
					</view>
					<view class="button">
						<button type="warn" form-type="submit">提交</button>
					</view>
				</form>
			</view>
		</view>
	</view>
</template>

<script>
	import moment from 'moment';
	export default {
		components: {},
		data() {
			return {
				user: {},
				id: '',
				form: {
					name: "",
					cardType: "",
					card: "",
					phone: "",
					email: "",
					communication: ""
				},
				info: {},
				cTypeList: [],
				typeList: [],
				statusList: [],
				errors: {}
			}
		},
		onLoad: async function(e) {
			const that = this;
			that.$set(that, `id`, e && e.id || '');
			await that.searchToken();
			await that.searchOther();
			await that.search();
		},
		methods: {
			// 用户信息
			searchToken() {
				const that = this;
				try {
					const res = uni.getStorageSync('token');
					if (res) {
						const user = that.$jwt(res);
						that.$set(that, `user`, user);
					}
				} catch (e) {}
			},
			async searchOther() {
				const that = this;
				let res;
				// 查询证件类型
				res = await that.$api(`/dictData`, 'GET', {
					code: 'cardType',
					is_use: '0',
				})
				if (res.errcode == '0') that.$set(that, `cTypeList`, res.data);
				// 查询状态
				res = await that.$api(`/dictData`, 'GET', {
					code: 'matchStatus',
					is_use: '0',
				})
				if (res.errcode == '0') that.$set(that, `statusList`, res.data)
				// 赛事类型
				res = await that.$api(`/dictData`, 'GET', {
					code: 'activeType',
					is_use: '0',
				})
				if (res.errcode == '0') that.$set(that, `typeList`, res.data)
			},
			// 查询
			async search() {
				const that = this;
				if (that.id) {
					let res;
					res = await that.$api(`/match/${that.id}`, 'GET', {})
					if (res.errcode == '0') {
						that.$set(that, `info`, res.data)
					} else {
						uni.showToast({
							title: res.errmsg,
							icon: 'none'
						});
					}
				}
			},
			// 处理时间
			getTime(start_time, end_time) {
				if (start_time && end_time) {
					const start = new Date(start_time);
					const end = new Date(end_time);
					const weekdays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
					const day = start.getDate();
					const weekday = weekdays[start.getDay()];
					const year = start.getFullYear();
					const month = start.getMonth();
					const start_hours = start.getHours();
					const start_minutes = start.getMinutes();
					const end_hours = end.getHours();
					const end_minutes = end.getMinutes();
					return `${year}/${month+1}/${day < 10 ? '0' + day : day} ${weekday} ${start_hours.toString().padStart(2, '0')}:${start_minutes.toString().padStart(2, '0')} - ${end_hours.toString().padStart(2, '0')}:${end_minutes.toString().padStart(2, '0')} `;
				}
			},
			// 处理字典表
			getDict(item, model) {
				const that = this;
				let res
				if (model == 'status') res = that.statusList.find(i => i.value == item)
				else if (model == 'type') res = that.typeList.find(i => i.value == item)
				if (res) return res.label
				else return '暂无'
			},
			// 自定义的验证函数
			validateObject(obj) {
				const errors = {};
				if (!obj.name || obj.name.trim() === '') {
					errors.name = '请填写姓名！';
				}
				if (!obj.cardType || obj.cardType.trim() === '') {
					errors.cardType = '请选择证件类型！';
				}
				if (!obj.card || obj.card.trim() === '') {
					errors.card = '请填写证件号码！';
				} else {
					let regex;
					if (obj.cardType == '0') {
						regex = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
					} else {
						regex =
							/(^[EeKkGgDdSsPpHh]\d{8}$)|(^(([Ee][a-fA-F])|([DdSsPp][Ee])|([Kk][Jj])|([Mm][Aa])|(1[45]))\d{7}$)/;
					}
					if (!regex.test(obj.card)) errors.card = '请填写正确的证件号码！';
				}
				if (!obj.phone || obj.phone.trim() === '') {
					errors.phone = '请填写手机号！';
				} else {
					const regex = /^1[3456789]\d{9}$/;
					if (!regex.test(obj.phone)) errors.phone = '请填写正确的手机号码！';
				}
				if (!obj.email || obj.email.trim() === '') {
					errors.email = '请填写电子邮箱！';
				} else {
					const regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
					if (!regex.test(obj.email)) errors.email = '请填写正确的电子邮箱！';
				}
				if (!obj.communication || obj.communication.trim() === '') {
					errors.communication = '请填写微信/QQ！';
				}
				// 如果有错误，返回错误对象
				if (Object.keys(errors).length > 0) {
					return errors;
				}
				// 如果没有错误，返回null或undefined
				return null;
			},
			async formSubmit(e) {
				const that = this;
				var formdata = e.detail.value
				formdata.cardType = that.form.cardType
				const errorsInfo = await that.validateObject(formdata);
				// 检查是否有错误
				if (errorsInfo) {
					that.$set(that, `errors`, errorsInfo)
					// 遍历错误对象并显示错误信息
					for (const key in errorsInfo) {
						if (errorsInfo.hasOwnProperty(key)) {
							console.error(`${key} 错误: ${errorsInfo[key]}`);
						}
					}
				} else {
					that.$set(that, `errors`, {})
					let res;
					const data = {
						user: that.user.id,
						match: that.info.id,
						time: moment().format('YYYY-MM-DD HH:mm:ss')
					}
					res = await that.$api(`/sign`, 'POST', {
						...formdata,
						...data
					})
					if (res.errcode == '0') {
						uni.showModal({
							content: "报名成功！",
							showCancel: false
						});
						uni.navigateBack({
							delta: 1
						})
					} else {
						uni.showToast({
							title: res.errmsg,
							icon: 'none'
						});
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background-color: var(--footColor);

		.one {
			margin: 0 0 3vw 0;
			padding: 0 2vw;
			background-color: var(--mainColor);

			.one_1 {
				display: flex;
				align-items: center;
				padding: 3vw 0;
				border-bottom: 1px solid var(--f5Color);
				font-size: var(--font14Size);

				span {
					margin: 0 0 0 1vw;
				}

				.t-icon {
					width: var(--font15Size) !important;
					height: var(--font15Size) !important;
				}
			}

			.one_2 {
				justify-content: space-between;

				.one_left {
					display: flex;
					align-items: center;
				}

				.one_right {
					display: flex;
					align-items: center;
					color: var(--mainColor);
					padding: 1vw;

					.t-icon {
						color: var(--mainColor) !important;
					}
				}

				.active_1 {
					background-color: #4caf50;
				}

				.active_2 {
					background-color: #2196f3;
				}

				.active_3 {
					background-color: #FF5722;
				}

				.active_4 {
					background-color: #949698;
				}
			}

			.name {
				font-weight: bold;
				font-size: var(--font16Size);
			}

			.text_color {
				color: var(--f69Color);
			}

		}

		.two {
			padding: 2vw 0;
			background-color: var(--mainColor);

			.two_1 {
				.two_text {
					text-indent: 10px;
					border-left: 3px solid var(--f3CColor);
					font-weight: bold;
					font-size: var(--font16Size);
				}

				.two_remark {
					margin: 2vw 0 0 0;
					text-indent: 10px;
					color: var(--fF0Color);
					font-size: var(--font12Size);
				}
			}

			.two_2 {
				padding: 2vw;

				.other {
					padding: 4vw 2vw;
					border-bottom: 1px solid var(--footColor);
				}

				.value {
					display: flex;
					justify-content: space-between;
					align-items: center;
					background-color: var(--mainColor);

					.label {
						text-align: right;

						/deep/.uni-data-checklist .checklist-group .checklist-box {
							margin-right: 0 !important;
							margin-left: 25px !important;
						}

						.error-message {
							text-align: right;
							margin: 5px 0 0 0;
							color: var(--fF0Color);
							font-size: var(--font12Size);
						}
					}
				}

				.button {
					margin: 2vw 0 0 0;
					text-align: center;

					button {
						background-color: var(--f3CColor);
						border-radius: 2vw;
					}
				}
			}
		}
	}
</style>