签到签退界面

src/router/routes.ts

@@ -93,6 +93,14 @@ const routes: Array<RouteRecordRaw> = [
     meta: {
       title: "事件列表"
     }
+  },
+  {
+    path: "/signPage",
+    name: "signPage",
+    component: () => import("@/views/signPage/index.vue"),
+    meta: {
+      title: "签到签退"
+    }
   }
 ];
 

src/utils/validate.ts

@@ -5,3 +5,9 @@
 export function isExternal(path: string) {
   return /^(https?:|mailto:|tel:)/.test(path);
 }
+
+export function validatePhone(phoneNumber: string) {
+  const pattern = /^1(3|4|5|6|7|8|9)\d{9}$/;
+  // 使用正则表达式进行校验
+  return pattern.test(phoneNumber);
+}

src/views/signPage/index.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="container">
+    <van-form @submit="onSubmit">
+      <van-cell-group inset>
+        <van-field
+            v-model="form.name"
+            name="姓名"
+            label="姓名"
+            placeholder="姓名"
+            required
+            :rules="[{ required: true, message: '请填写姓名' }]"
+        />
+        <van-field
+            v-model="form.duties"
+            name="职务"
+            label="职务"
+            placeholder="职务"
+            required
+            :rules="[{ required: true, message: '请填写职务' }]"
+        />
+        <van-field
+            v-model="form.unit"
+            name="单位"
+            label="单位"
+            placeholder="单位"
+            required
+            :rules="[{ required: true, message: '请填写单位' }]"
+        />
+        <van-field
+            v-model="form.phone"
+            name="联系方式"
+            label="联系方式"
+            placeholder="联系方式"
+            required
+            :rules="[
+                { required: true, message: '请填写联系方式' },
+                { validator: validatePhone, message: '请输入正确的联系方式' }
+            ]"
+        />
+      </van-cell-group>
+      <div style="margin: 16px;">
+        <van-button round block type="primary" native-type="submit">
+          {{ type === '1' ? '确定签到' : '确定签退' }}
+        </van-button>
+        <van-button round block type="default" style="margin-top: 20px" @click="handleCancel">
+          {{ type === '1' ? '取消签到' : '取消签退' }}
+        </van-button>
+      </div>
+    </van-form>
+  </div>
+</template>
+
+<script lang="ts" setup name="signPage">
+import {onMounted, ref} from "vue";
+import {validatePhone} from "@/utils/validate";
+import {showSuccessToast} from "vant";
+
+// 1 签到 2 签退
+const type = ref('1');
+const form = ref({
+  name: '',
+  duties: '',
+  unit: '',
+  phone: ''
+})
+
+// 提交
+const onSubmit = () => {
+  const submitMethod = type.value === '1' ? '1' : '2';
+  showSuccessToast(type.value === '1' ? '签到成功' : '签退成功');
+}
+// 取消
+const handleCancel = () => {
+  const cancelMethod = type.value === '1' ? '1' : '2';
+  showSuccessToast(type.value === '1' ? '取消签到成功' : '取消签退成功');
+}
+onMounted(() => {
+  type.value = '1';
+  if (type.value === '2') {
+    form.value = {
+      name: '张胜',
+      duties: 'xxx',
+      unit: 'xxx',
+      phone: '18782728732'
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.container {
+  //padding-top: 25px;
+}
+</style>