提交

src/api/mice.ts

@@ -22,3 +22,29 @@ export function getSignUpFormConfig(data: {
     params: data,
   })
 }
+
+/**
+ * 通过手机号发送短信
+ * @param phone 手机号
+ * @returns 短信
+ */
+export function smsSend(phone: string) {
+  return request({
+    url: '/sms/send',
+    method: 'post',
+    data: {
+      phone,
+    },
+  })
+}
+
+/**
+ * 报名注册
+ */
+export function signUp(data: any) {
+  return request({
+    url: '/backstageApply/enroll',
+    method: 'post',
+    data,
+  })
+}

src/components.d.ts

@@ -14,6 +14,7 @@ declare module 'vue' {
     VanButton: typeof import('vant/es')['Button']
     VanCell: typeof import('vant/es')['Cell']
     VanCellGroup: typeof import('vant/es')['CellGroup']
+    VanCheckbox: typeof import('vant/es')['Checkbox']
     VanConfigProvider: typeof import('vant/es')['ConfigProvider']
     VanEmpty: typeof import('vant/es')['Empty']
     VanField: typeof import('vant/es')['Field']

src/views/signUp/components/FormItem.vue

@@ -1,27 +1,29 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+
+defineProps({
+  item: {
+    type: Object as PropType<any>,
+    required: true,
+  },
+})
+
+const form = defineModel({
+  type: Object as PropType<any>,
+  required: true,
+})
+</script>
+
 <template>
   <div>
+    <!-- {{ item }} -->
     <!--  输入框 -->
     <van-field
-      v-model="form[item.name]"
+      v-model="form[item.paramsName]"
-      name="用户名"
+      :name="item.name"
-      label="用户名"
+      :label="item.name"
-      placeholder="用户名"
+      :placeholder="`请输入${item.name}`"
-      :rules="[{ required: true, message: '请填写用户名' }]"
+      :rules="[{ required: true, message: `请输入${item.name}` }]"
     />
   </div>
 </template>
-
-<script setup lang="ts">
-import type { PropType } from "vue";
-
-defineProps({
-  form: {
-    type: Object as PropType<any>,
-    required: true
-  },
-  item: {
-    type: Object as PropType<any>,
-    required: true
-  }q
-});
-</script>

src/views/signUp/components/SignForm.vue

@@ -1,28 +1,73 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import { showToast } from 'vant'
+import FormItem from './FormItem.vue'
+import { getSignUpFormConfig, signUp, smsSend } from '@/api/mice'
+
+const form = defineModel({
+  type: Object as PropType<any>,
+  required: true,
+})
+
+// 表单配置项
+const formConfigs = ref<any[]>([])
+
+onMounted(() => {
+  const miceLink = getUrlMiceLink()
+  form.value.miceLink = miceLink
+  getSignUpFormConfig({ miceLink }).then((res: any) => {
+    formConfigs.value = res
+  })
+})
+
+// 提交注册报名
+function onSubmit() {
+  signUp(form.value).then((res: any) => {
+    console.log(res)
+  })
+}
+
+// 发送短信验证码
+async function sendSmsHandler() {
+  if (!form.value.phone || !/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(form.value.phone)) {
+    return showToast('请输入正确的手机号')
+  }
+  const res = await smsSend(form.value.phone)
+  console.log(res)
+}
+</script>
+
 <template>
-  <van-form @submit="onSubmit" :required="true">
+  <van-form :required="true" class="bg-white py-4" @submit="onSubmit">
+    <FormItem v-for="(item, index) in formConfigs" :key="index" v-model="form" :item="item" />
+
+    <!-- 验证码 -->
     <van-field
-      v-model="form.code"
+      v-model="form.verifyCode"
       center
       clearable
       label="短信验证码"
       placeholder="请输入短信验证码"
     >
       <template #button>
-        <van-button size="small" type="primary">发送验证码</van-button>
+        <van-button size="small" type="primary" @click="sendSmsHandler">
+          发送验证码
+        </van-button>
       </template>
     </van-field>
+
+    <!-- 协议 -->
+    <div class="flex items-center justify-end p-6">
+      <van-checkbox v-model="form.agree" icon-size="16px" shape="square" class="text-5xl">
+        我已阅读并同意 <span class="color-[#1890ff]">《注册服务协议》</span>
+      </van-checkbox>
+    </div>
+
+    <!-- 提交 -->
+    <div class="p-10">
+      <van-button round block type="primary" :disabled="!form.agree" native-type="submit">
+        提交
+      </van-button>
+    </div>
   </van-form>
 </template>
-
-<script lang="ts" setup>
-import { ref } from "vue";
-
-const form = ref({
-  username: "",
-  code: ""
-});
-
-function onSubmit() {}
-</script>
-
-<style lang="scss" scoped></style>

src/views/signUp/index.vue

@@ -1,15 +1,8 @@
 <script setup lang="ts" name="SignUp">
-import { getSignUpFormConfig } from '@/api/mice'
 import SignForm from '@/views/signUp/components/SignForm.vue'
 
 const formConfigs = ref<any[]>([])
-
+const form = ref({})
-onMounted(() => {
-  const miceLink = getUrlMiceLink()
-  getSignUpFormConfig({ miceLink }).then((res: any) => {
-    formConfigs.value = res.data
-  })
-})
 </script>
 
 <template>
@@ -19,6 +12,6 @@ onMounted(() => {
       src="https://sn202108-1305501521.cos.ap-shanghai.myqcloud.com/202401162355044675902.jpg"
       alt=""
     >
-    <SignForm />
+    <SignForm v-model="form" :form-configs="formConfigs" />
   </div>
 </template>