213 lines
7.2 KiB
Vue
213 lines
7.2 KiB
Vue
<template>
|
||
<div class="min-h-screen bg-primary py-10">
|
||
<div class="max-w-3xl mx-auto p-8 bg-white rounded-2xl shadow-lg">
|
||
<h1 class="text-3xl font-bold mb-6 text-center text-secondary">
|
||
永平中学校友会入会申请表
|
||
</h1>
|
||
|
||
<p class="text-sm text-gray-600 my-6 text-center leading-relaxed">
|
||
兹申请加入成为永平中学校友会会员，愿遵守会规及议决案，并填此表为据。<br />
|
||
入会费 <span class="font-bold text-secondary">RM60 / 年</span>。<br />
|
||
填写此表格之后，会有理事联系您协商入会费事宜。
|
||
</p>
|
||
|
||
<el-form :model="form" :rules="rules" ref="formRef" label-width="130px" status-icon>
|
||
<!-- 中文姓名 -->
|
||
<el-form-item label="中文姓名" prop="chineseName">
|
||
<el-input v-model="form.chineseName" placeholder="请输入中文姓名" />
|
||
</el-form-item>
|
||
|
||
<!-- 英文姓名 (自动转大写) -->
|
||
<el-form-item label="英文姓名" prop="englishName">
|
||
<el-input v-model="form.englishName" placeholder="请输入英文姓名" @input="toUpperCaseEnglish" />
|
||
</el-form-item>
|
||
|
||
<!-- IC -->
|
||
<el-form-item label="IC" prop="ic">
|
||
<el-input v-model="form.ic" placeholder="000000-00-0000" v-maska="'######-##-####'" />
|
||
</el-form-item>
|
||
|
||
<!-- 电邮 -->
|
||
<el-form-item label="电邮" prop="email">
|
||
<el-input v-model="form.email" placeholder="选填 / 国外必填"
|
||
v-maska="['###-#######', '###-########', '+#############']" />
|
||
</el-form-item>
|
||
|
||
<!-- 电话 -->
|
||
<el-form-item label="电话" prop="phone">
|
||
<el-input v-model="form.phone" placeholder="请输入电话（使用 WhatsApp 号码为佳，可加入校友会群组）" />
|
||
</el-form-item>
|
||
|
||
<!-- 毕业层次 -->
|
||
<el-form-item label="毕业层次" prop="educationLevel">
|
||
<el-radio-group v-model="form.educationLevel">
|
||
<el-radio label="初中毕业">初中毕业</el-radio>
|
||
<el-radio label="高中毕业">高中毕业</el-radio>
|
||
<el-radio label="辍学/转学肄业">辍学/转学肄业</el-radio>
|
||
<el-radio label="不确定">不确定</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
|
||
<!-- 毕业年份 -->
|
||
<el-form-item label="毕业年份" prop="gradYear">
|
||
<el-input-number v-model="form.gradYear" :min="1957" :max="currentYear" :step="1"
|
||
:disabled="form.unknownGradYear" />
|
||
<el-checkbox v-model="form.unknownGradYear">毕业年份不详</el-checkbox>
|
||
<span class="text-sm text-gray-500 ml-2" v-if="graduationBatch">
|
||
您是第 <span class="font-bold">{{ graduationBatch }}</span> 届毕业生
|
||
</span>
|
||
</el-form-item>
|
||
|
||
|
||
|
||
<!-- 婚姻状态 -->
|
||
<el-form-item label="婚姻状态" prop="maritalStatus">
|
||
<el-radio-group v-model="form.maritalStatus">
|
||
<el-radio label="未婚">未婚</el-radio>
|
||
<el-radio label="已婚">已婚</el-radio>
|
||
<el-radio label="其他">其他</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
|
||
<!-- 国家选择 -->
|
||
<el-form-item label="国家" prop="country">
|
||
<el-select v-model="form.country" placeholder="请选择国家">
|
||
<el-option label="马来西亚" value="马来西亚" />
|
||
<el-option label="新加坡" value="新加坡" />
|
||
<el-option label="中国" value="中国" />
|
||
<el-option label="美国" value="美国" />
|
||
<el-option label="其他" value="其他" />
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<!-- 详细地址 -->
|
||
<el-form-item label="详细地址" prop="address">
|
||
<el-input type="textarea" v-model="form.address" placeholder="请输入现居详细地址" />
|
||
</el-form-item>
|
||
|
||
<!-- 提交按钮 -->
|
||
<div class="text-center mt-8">
|
||
<el-button type="warning"
|
||
class="bg-secondary border-none px-8 py-2 rounded-xl text-white font-bold shadow hover:scale-105 transition"
|
||
@click="handleSubmit">
|
||
提交申请
|
||
</el-button>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive } from "vue";
|
||
import { ElMessage } from "element-plus";
|
||
import { vMaska } from 'maska/vue'
|
||
|
||
const currentYear = new Date().getFullYear();
|
||
const formRef = ref(null);
|
||
|
||
const form = reactive({
|
||
chineseName: "",
|
||
englishName: "",
|
||
ic: "",
|
||
email: "",
|
||
phone: "",
|
||
gradYear: null,
|
||
maritalStatus: "",
|
||
country: "",
|
||
address: "",
|
||
});
|
||
|
||
// 英文名自动转大写
|
||
const toUpperCaseEnglish = () => {
|
||
form.englishName = form.englishName.toUpperCase();
|
||
};
|
||
|
||
// 1966 年为第一届高中生毕业年份。由此根据 gradYear 计算毕业届别
|
||
const graduationBatch = computed(() => {
|
||
if (form.gradYear) {
|
||
if (form.educationLevel === "高中毕业") {
|
||
return form.gradYear - 1965; // 高中届别
|
||
} else if (form.educationLevel === "初中毕业") {
|
||
return form.gradYear - 1958; // 假设 1959 第一届初中
|
||
}
|
||
}
|
||
return null;
|
||
});
|
||
|
||
|
||
// 表单验证规则
|
||
const rules = {
|
||
chineseName: [{ required: true, message: "请输入中文姓名", trigger: "blur" }],
|
||
englishName: [{ required: true, message: "请输入英文姓名", trigger: "blur" }],
|
||
ic: [
|
||
{ required: true, message: "请输入 IC", trigger: "blur" },
|
||
{
|
||
pattern: /^\d{6}-\d{2}-\d{4}$/,
|
||
message: "格式应为 000000-00-0000",
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
email: [
|
||
{
|
||
validator: (rule, value, callback) => {
|
||
if (!value && form.country !== "马来西亚") {
|
||
callback(new Error("国外居住必须填写电邮"));
|
||
} else if (value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
|
||
callback(new Error("请输入有效的电邮地址"));
|
||
} else {
|
||
callback();
|
||
}
|
||
},
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
phone: [
|
||
{ required: true, message: "请输入电话", trigger: "blur" },
|
||
{
|
||
validator: (rule, value, callback) => {
|
||
if (/^01\d{1}-\d{7,8}$/.test(value)) {
|
||
callback();
|
||
} else if (/^\+\d{1,3}\s?\d+$/.test(value)) {
|
||
callback();
|
||
} else {
|
||
callback(new Error("请输入马来西亚号 (01x-xxxxxxx) 或带区号的号码"));
|
||
}
|
||
},
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
educationLevel: [
|
||
{ required: true, message: "请选择毕业层次", trigger: "change" },
|
||
],
|
||
gradYear: [
|
||
{
|
||
validator: (rule, value, callback) => {
|
||
if (!form.unknownGradYear && !value) {
|
||
callback(new Error("请输入毕业年份或勾选“毕业年份不详”"));
|
||
} else {
|
||
callback();
|
||
}
|
||
},
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
maritalStatus: [
|
||
{ required: true, message: "请选择婚姻状态", trigger: "change" },
|
||
],
|
||
country: [{ required: true, message: "请选择国家", trigger: "change" }],
|
||
address: [{ required: true, message: "请输入详细地址", trigger: "blur" }],
|
||
};
|
||
|
||
// 提交
|
||
const handleSubmit = () => {
|
||
formRef.value.validate((valid) => {
|
||
if (valid) {
|
||
ElMessage.success("提交成功！理事会将尽快联系您。");
|
||
} else {
|
||
ElMessage.error("请完善表单信息");
|
||
}
|
||
});
|
||
};
|
||
</script>
|