graduate_light/app/mobile/view/info/form.html

{extend name="public/base"/}
{block name="css"}

{/block}
{block name="body"}
<van-nav-bar
        class="nav-theme"
        :fixed="true"
        :placeholder="true"
        left-text="返回"
        left-arrow
        @click-left="onBack"
>
    <template #title>
        <span class="text-white">信息登记</span>
    </template>
</van-nav-bar>

<van-form @submit="onSubmit">
    <h2 class="lw-title">基础信息</h2>
    <van-cell-group inset>
        <!--专业类型-->
        <van-field
                v-model="type_text"
                is-link
                readonly
                required
                label="专业类型"
                placeholder="选择专业类型"
                @click="show_type = true"
        ></van-field>
        <van-popup v-model:show="show_type" round position="bottom">
            <van-picker
                    :columns="type_list"
                    @cancel="show_type = false"
                    @confirm="onTypeConfirm"
            ></van-picker>
        </van-popup>
        <van-field
                required
                v-model="form.name"
                label="姓名"
                placeholder="请填写姓名"
                :rules="[{ required: true, message: '请填写姓名' }]"
        ></van-field>
        <van-field required label="性别">
            <template #input>
                <van-radio-group v-model="form.sex" direction="horizontal">
                    <van-radio name="1">男</van-radio>
                    <van-radio name="2">女</van-radio>
                </van-radio-group>
            </template>
        </van-field>
        <van-field
                required
                v-model="form.mobile"
                label="手机号"
                placeholder="请填写手机号"
                :rules="[
                    { required: true, message: '请填写电话' },
                    { validator, message: '请输入正确的手机号'}
                ]"
        ></van-field>
    </van-cell-group>

    <h2 class="lw-title">学校信息</h2>
    <van-cell-group inset>
        <van-field
                required
                v-model="form.school"
                label="毕业学校"
                placeholder="请填写毕业学校"
                :rules="[{ required: true, message: '请填写毕业学校' }]"
        ></van-field>
        <van-field
                required
                v-model="form.major"
                label="专业"
                placeholder="请填写专业"
                :rules="[{ required: true, message: '请填写专业' }]"
        ></van-field>
        <van-field
                required
                v-model="form.company"
                label="意向单位"
                placeholder="请填写意向单位"
                :rules="[{ required: true, message: '请填写意向单位' }]"
        ></van-field>
        <van-field
                required
                v-model="form.introduction"
                rows="3"
                autosize
                label="个人简介"
                type="textarea"
                placeholder="请填写个人简介"
                :rules="[{ required: true, message: '请填写个人简介' }]"
        ></van-field>
        <van-field
                v-model="form.awards"
                rows="3"
                autosize
                label="获得的奖项"
                type="textarea"
                placeholder="请填写获得的奖项"
        ></van-field>
    </van-cell-group>
    <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
            提交
        </van-button>
    </div>
</van-form>
{/block}
{block name="script"}
<script>
    function v_setup() {
        let base = {};

        base.form = Vue.reactive({$info});

        base.onBack = () => {
            history.back();
        };

        // 专业类型
        base.type_list = {$type_list};
        base.type_text = Vue.ref('{$type_text}');
        base.show_type = Vue.ref(false);
        base.toggleType = (val) => {
            base.showType.value = val;
        };
        base.onTypeConfirm = (op) => {
            base.form.type = op.selectedValues[0];
            base.type_text.value = op.selectedOptions[0].text;
            base.show_type.value = false;
        };

        //手机号验证
        base.validator = (val) => {
            return /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/.test(val);
        };

        //表单提交
        base.onSubmit = (form) => {
            if (base.form.type === '') {
                vant.showToast('请选择类型');
                return false;
            }

            postJson("{:url('info/formPost')}",base.form).then(({data}) => {
                location.href = "{:url('info/index')}";
            });
        };

        return base;
    }
</script>
{/block}