feat: 门票组件封装

components/FormCard/index.vue

@@ -0,0 +1,46 @@
+<template>
+  <view class="form-wrapper">
+    <view class="form-header">
+      <image class="form-icon" src="./images/icon_minus.png"></image>
+      <text class="form-title">游客1</text>
+    </view>
+    <view class="form-item">
+      <text class="form-label">姓 名</text>
+      <input class="form-input" v-model="name" placeholder="请输入姓名" />
+    </view>
+    <view class="form-item">
+      <text class="form-label">手机号</text>
+      <input
+        class="form-input"
+        v-model="phone"
+        placeholder="请输入手机号"
+        @blur="validatePhone"
+      />
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+// Local state
+const name = ref("");
+const phone = ref("");
+const phoneError = ref("");
+
+// Methods
+const validatePhone = () => {
+  const phoneRegex = /^1[3-9]\d{9}$/;
+  if (!phone.value) {
+    phoneError.value = "手机号不能为空";
+  } else if (!phoneRegex.test(phone.value)) {
+    phoneError.value = "请输入正确的手机号";
+  } else {
+    phoneError.value = "";
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>