linsxw
7 months ago
5 changed files with 113 additions and 46 deletions
@ -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"> |
<script setup lang="ts"> |
||||||
import type { PropType } from "vue"; |
import type { PropType } from 'vue' |
||||||
|
|
||||||
defineProps({ |
defineProps({ |
||||||
form: { |
|
||||||
type: Object as PropType<any>, |
|
||||||
required: true |
|
||||||
}, |
|
||||||
item: { |
item: { |
||||||
type: Object as PropType<any>, |
type: Object as PropType<any>, |
||||||
required: true |
required: true, |
||||||
}q |
}, |
||||||
}); |
}) |
||||||
|
|
||||||
|
const form = defineModel({ |
||||||
|
type: Object as PropType<any>, |
||||||
|
required: true, |
||||||
|
}) |
||||||
</script> |
</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 @@ |
|||||||
|
<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> |
<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 |
<van-field |
||||||
v-model="form.code" |
v-model="form.verifyCode" |
||||||
center |
center |
||||||
clearable |
clearable |
||||||
label="短信验证码" |
label="短信验证码" |
||||||
placeholder="请输入短信验证码" |
placeholder="请输入短信验证码" |
||||||
> |
> |
||||||
<template #button> |
<template #button> |
||||||
<van-button size="small" type="primary">发送验证码</van-button> |
<van-button size="small" type="primary" @click="sendSmsHandler"> |
||||||
|
发送验证码 |
||||||
|
</van-button> |
||||||
</template> |
</template> |
||||||
</van-field> |
</van-field> |
||||||
</van-form> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script lang="ts" setup> |
|
||||||
import { ref } from "vue"; |
|
||||||
|
|
||||||
const form = ref({ |
<!-- 协议 --> |
||||||
username: "", |
<div class="flex items-center justify-end p-6"> |
||||||
code: "" |
<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> |
<div class="p-10"> |
||||||
|
<van-button round block type="primary" :disabled="!form.agree" native-type="submit"> |
||||||
<style lang="scss" scoped></style> |
提交 |
||||||
|
</van-button> |
||||||
|
</div> |
||||||
|
</van-form> |
||||||
|
</template> |
||||||
|
Loading…
Reference in new issue