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>

components/FormCard/propmt.md

@@ -0,0 +1,14 @@
+## 表单组件
+
+## 提示词：
+
+使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
+1、参考图片，高度还原交互设计，完成组件封装
+2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.form-wrapper
+3、可以使用 uniapp 内置的组件
+4、姓名、手机号，需要用户自己填写
+5、验证手机号格式是否正确
+
+## 备注
+
+仅供学习、交流使用，请勿用于商业用途。

components/FormCard/styles/index.scss

@@ -0,0 +1,46 @@
+.form-wrapper {
+  background-color: #fff;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.form-header {
+  background-color: rgba(25, 144, 255, 0.06);
+  border: 1px solid #e5e8ef;
+  border-radius: 8px 8px 0 0;
+  display: flex;
+  align-items: center;
+  padding: 10px 12px;
+}
+
+.form-icon {
+  height: 16px;
+  width: 16px;
+  margin-right: 8px;
+}
+
+.form-title {
+  font-size: 16px;
+  color: #00a6ff;
+}
+
+.form-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 24px 12px 16px;
+}
+
+.form-label {
+  font-size: 16px;
+  color: #86909c;
+  margin-right: 10px;
+  width: 50px;
+}
+
+.form-input {
+  flex: 1;
+  font-size: 16px;
+  color: #333;
+  border-bottom: 1px solid #ddd;
+  padding-bottom: 6px;
+}