Kingsmai/yphsalumni.org
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
xiaomai
2025-10-01 16:52:52 +08:00
commit e93b931288
35 changed files with 12784 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

212
app/pages/join-us/index.vue Normal file
View File

@@ -0,0 +1,212 @@
<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>