cxyy-applet/pagesHome/match/active.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">
							<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">
							<uni-data-checkbox v-model="form.type" :localdata="signTypeList"
								:map="{text:'label',value:'value'}" />
							<span v-if="errors.type" class="error-message">{{ errors.type }}</span>
						</view>
					</view>
					<view class="value other">
						<view class="title">公司</view>
						<view class="label" style="width: 250px;">
							<linSelect :list="companyList" :loading="loading" loading-text="数据加载中" value-key="name"
								name-key="name" max-height="180" placeholder="请输入公司名称" @input="toCompany"
								v-model="form.company" />
							<span v-if="errors.company" class="error-message">{{ errors.company }}</span>
						</view>
					</view>
					<view class="value other" v-if="form.type==='1'">
						<view class="title">路演名称</view>
						<view class="label">
							<input name="project_name" class="input" :value="form.project_name" placeholder="请输入路演名称" />
							<span v-if="errors.project_name" class="error-message">{{ errors.project_name }}</span>
						</view>
					</view>
					<view class="value other" v-if="form.type==='1'">
						<view class="title">路演介绍</view>
						<view class="label">
							<input name="project_brief" class="input" :value="form.project_brief"
								placeholder="请输入路演介绍" />
							<span v-if="errors.project_brief" class="error-message">{{ errors.project_brief }}</span>
						</view>
					</view>
					<view class="value other" v-if="form.type==='1'">
						<view class="title">路演附件</view>
						<view class="label">
							<upload class='upload' :list="form.project_file" name="project_file" :count="1"
								@uplSuc="uplSuc" @uplDel="uplDel">
							</upload>
							<span v-if="errors.project_file" class="error-message">{{ errors.project_file }}</span>
						</view>
					</view>
					<view class="button">
						<button type="warn" form-type="submit">提交</button>
					</view>
				</form>
			</view>
		</view>
	</view>
</template>

<script>
	import upload from '../../components/upload/index.vue';
	import linSelect from '../../components/lin-select/index.vue';
	import moment from 'moment';
	export default {
		components: {
			upload,
			linSelect
		},
		data() {
			return {
				user: {},
				id: '',
				form: {
					name: "",
					type: "",
					company: "",
					phone: "",
					project_name: "",
					project_brief: "",
					project_file: []
				},
				info: {},
				signTypeList: [],
				typeList: [],
				statusList: [],
				companyList: [],
				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: 'signType',
					is_use: '0',
				})
				if (res.errcode == '0') that.$set(that, `signTypeList`, 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 month = start.getMonth();
					const start_hours = start.getHours();
					const start_minutes = start.getMinutes();
					const end_hours = end.getHours();
					const end_minutes = end.getMinutes();
					return `${month}/${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 '暂无'
			},
			// 图片上传
			uplSuc(e) {
				const that = this;
				that.$set(that.form, `${e.name}`, [...that.form[e.name], e.data]);
			},
			// 图片删除
			uplDel(e) {
				const that = this;
				let data = that.form[e.name];
				let arr = data.filter((i, index) => index != e.data.index);
				that.$set(that.form, `${e.name}`, arr)
			},
			// 自定义的验证函数
			validateObject(obj) {
				const that = this;
				const errors = {};
				if (!obj.name || obj.name.trim() === '') {
					errors.name = '请填写姓名！';
				}
				if (!obj.type || obj.type.trim() === '') {
					errors.type = '请选择报名类型！';
				}
				if (!obj.phone || obj.phone.trim() === '') {
					errors.phone = '请填写手机号！';
				} else {
					const regex = /^1[3456789]\d{9}$/;
					if (!regex.test(obj.phone)) errors.phone = '请填写正确的手机号码！';
				}
				if (!obj.company || obj.company.trim() === '') {
					errors.company = '请填写公司名称！';
				}
				if (that.form.type == '1') {
					if (!obj.project_name || obj.project_name.trim() === '') {
						errors.project_name = '请填写路演名称！';
					}
					if (!obj.project_brief || obj.project_brief.trim() === '') {
						errors.project_brief = '请填写路演简介！';
					}
				}
				// 如果有错误，返回错误对象
				if (Object.keys(errors).length > 0) {
					return errors;
				}
				// 如果没有错误，返回null或undefined
				return null;
			},
			// 远程加载数据
			toCompany(name) {
				const that = this;
				setTimeout(async () => {
					const res = await that.$api(`/company`, 'GET', {
						status: '1',
						name
					})
					if (res.errcode == '0') {
						if (res.total > 0) that.$set(that, `companyList`, res.data)
						else that.$set(that, `companyList`, [{
							value: name,
							name
						}])
					}
				}, 1000)
			},
			async formSubmit(e) {
				const that = this;
				var formdata = e.detail.value
				formdata.type = that.form.type
				formdata.project_file = that.form.project_file
				formdata.company = that.form.company
				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>