uniProject/pages/zsjyYubaoming/zsjyYubaoming.vue

<template>
	<view class="dljt-page-box zsjy-page">
		<MtaNavbar></MtaNavbar>
		<view class="dljt-container-box">
			<view class="dljt-page-title">招生就业</view>
			<view class="dljt-page-content-box">
				<view class="dljt-breadcrumb-box">
					<view class="breadcrumb-text" @click="handleGo()">首页</view>
					<icon class="breadcrumb-jt"></icon>
					<view class="breadcrumb-text">招生就业</view>
					<icon class="breadcrumb-jt"></icon>
					<view class="breadcrumb-active">预报名</view>
				</view>
				<view>
					<form @submit="formSubmit" class="dljt-form-box">
						<view class="dljt-input-row require-row">
							<view class="input-title">姓名</view>
							<input class="form-input" name="input" v-model="formData.name" placeholder="请输入姓名" />
						</view>
						<view class="dljt-input-row require-row">
							<view class="input-title">身份证号</view>
							<input class="form-input" name="input" v-model="formData.idcard" placeholder="请输入身份证号" />
						</view>
						<view class="dljt-input-row require-row">
							<view class="input-title">预报专业</view>
							<uni-data-select class="form-select" v-model="formData.zhuanye" :localdata="range"
								placeholder="请选择预报专业"></uni-data-select>
						</view>
						<view class="dljt-input-row require-row">
							<view class="input-title">联系电话</view>
							<input class="form-input" name="input" v-model="formData.dianhua" placeholder="请输入联系电话" />
						</view>
						<view class="dljt-input-row">
							<view class="input-title">初中毕业学校</view>
							<input class="form-input" name="input" v-model="formData.xuexiao" placeholder="请输入初中毕业学校" />
						</view>
						<view class="dljt-input-row">
							<view class="input-title">模拟考试分数</view>
							<input class="form-input" name="input" v-model="formData.fenshu" placeholder="请输入模拟考试分数" />
						</view>
						<view class="dljt-input-row">
							<view class="input-title">身高</view>
							<input class="form-input" name="input" v-model="formData.shengao" placeholder="请输入身高" />
						</view>
						<view class="dljt-input-row">
							<view class="input-title">体重</view>
							<input class="form-input" name="input" v-model="formData.tizhong" placeholder="请输入体重" />
						</view>
						<view class="dljt-input-row">
							<button class="form-btn-box" form-type="submit">确认报名</button>
						</view>
					</form>

				</view>
			</view>
			<!-- 底部导航 -->
			<MtaFooter></MtaFooter>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import * as httpApi from "@/api/common.js"
	import MtaScrollViewVue from "@/components/MtaScrollView/MtaScrollView.vue";
	import {
		formatDateToYearMonthDay,
		getStringByHtml3,
		validateIdCard,
		validatePhone
	} from "@/utils/common.js"
	import MtaFooter from "@/components/MtaFooter.vue"
	import default1 from '@/static/images/common/news-bj1.jpg'

	const range = ref([])

	const formData = reactive({
		name: '',
		idcard: '',
		fenshu: '',
		dianhua: '',
		shengao: '',
		tizhong: '',
		xuexiao: '',
		zhuanye: '',
	})

	function formSubmit() {
		
		if (!formData.name) {
			uni.showToast({
				title: '请输入姓名',
				icon: 'error'
			})
			return;
		}
		
		if (!validateIdCard(formData.idcard)) {
			uni.showToast({
				title: '请输入有效身份证号',
				icon: 'error'
			})
			return;
		}
		if (!formData.zhuanye) {
			uni.showToast({
				title: '请选择预报专业',
				icon: 'error'
			})
			return;
		}
		
		if (!validatePhone(formData.dianhua)) {
			uni.showToast({
				title: '请输入有效联系电话',
				icon: 'error'
			})
			return;
		}
		
		httpApi.getCommonYubaoming(formData).then(res => {
			if (res.data) {
				uni.showToast({
					title: '报名成功！'
				})
			}
		})
	}

	function handleClick(data) {
		uni.navigateTo({
			url: `/pages/dqgzXueyuanfengcaiInfo/dqgzXueyuanfengcaiInfo?id=${data.id}`
		})
	}

	function getList(data) {
		return httpApi.getDangjianFengcaiList(data)
	}

	function handleGo() {
		uni.navigateTo({
			url: '/pages/index/index'
		})
	}

	function pageInit() {
		httpApi.getCommonYubaomingZhuanyeList().then(res => {
			range.value = res.data.map(item => {
				return {
					value: item,
					text: item
				}
			});

		})
	}
	onLoad(() => {
		pageInit();
	})
</script>

<style>

</style>