linsxw
7 months ago
5 changed files with 113 additions and 46 deletions
@ -1,27 +1,29 @@
@@ -1,27 +1,29 @@
|
||||
<template> |
||||
<div> |
||||
<!-- 输入框--> |
||||
<van-field |
||||
v-model="form[item.name]" |
||||
name="用户名" |
||||
label="用户名" |
||||
placeholder="用户名" |
||||
:rules="[{ required: true, message: '请填写用户名' }]" |
||||
/> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import type { PropType } from "vue"; |
||||
import type { PropType } from 'vue' |
||||
|
||||
defineProps({ |
||||
form: { |
||||
type: Object as PropType<any>, |
||||
required: true |
||||
}, |
||||
item: { |
||||
type: Object as PropType<any>, |
||||
required: true |
||||
}q |
||||
}); |
||||
required: true, |
||||
}, |
||||
}) |
||||
|
||||
const form = defineModel({ |
||||
type: Object as PropType<any>, |
||||
required: true, |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<div> |
||||
<!-- {{ item }} --> |
||||
<!-- 输入框 --> |
||||
<van-field |
||||
v-model="form[item.paramsName]" |
||||
:name="item.name" |
||||
:label="item.name" |
||||
:placeholder="`请输入${item.name}`" |
||||
:rules="[{ required: true, message: `请输入${item.name}` }]" |
||||
/> |
||||
</div> |
||||
</template> |
||||
|
@ -1,28 +1,73 @@
@@ -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> |
||||
</van-form> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { ref } from "vue"; |
||||
|
||||
const form = ref({ |
||||
username: "", |
||||
code: "" |
||||
}); |
||||
<!-- 协议 --> |
||||
<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> |
||||
|
||||
function onSubmit() {} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped></style> |
||||
<!-- 提交 --> |
||||
<div class="p-10"> |
||||
<van-button round block type="primary" :disabled="!form.agree" native-type="submit"> |
||||
提交 |
||||
</van-button> |
||||
</div> |
||||
</van-form> |
||||
</template> |
||||
|
Loading…
Reference in new issue