love/public/themes/simpleboot3/matchmaker/user/info_add.html

<extend name="public/base"/>
<block name="css">
    <style>
        .van-nav-bar--fixed {z-index:100;}
        .van-nav-bar .van-icon,.van-nav-bar__text {color:white;}
        .van-step--horizontal .van-step__title {font-size:16px;}
        .van-step--horizontal .van-step__icon {font-size:16px;}
        .van-step__circle {width:10px;height:10px;}

        .van-row {width:100%;}
        .btn_search_item{background:#f2f6ff;display:inline-block;border-radius:5px;line-height:35px;height:35px;text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;position:relative;font-size:13px;width:100%;color:#666;margin-bottom:10px;}
        .btn_search_item.active{color:var(--pink);background:#fff7fa;}
        .btn_search_icon{position:absolute;bottom:-3px;right:-3px;font-size:30px;}
        .van-uploader__input-wrapper {width:100%;}
    </style>
</block>
<block name="body">
    <!--头部-->
    <van-nav-bar
            class="bg-pink"
            left-text="返回"
            left-arrow
            @click-left="onBack"
            fixed="true"
    >
        <template #title>
            <span style="color:white;">基本资料(1/2)</span>
        </template>
    </van-nav-bar>
    <div style="width:100%;height:46px;"></div>

    <van-steps :active="0">
        <van-step>基本资料</van-step>
        <van-step>择偶要求</van-step>
    </van-steps>


    <!--头图-->
    <van-uploader :max-count="1" :after-read="uploadHead" style="padding:20px 0;width:100%;">
        <van-image width="30%" style="display:block;margin:0 auto;" :src="head_image"></van-image>
        <div style="text-align:center;font-size:14px;color:#999;">点击上传头像</div>
    </van-uploader>
    <!--增空-->
    <van-field
            v-model="form.realname"
            label="真实姓名"
            placeholder="请输入真实姓名"
            required
    ></van-field>
    <van-field
            v-model="form.mobile"
            label="电话"
            placeholder="请输入电话号码"
    ></van-field>
    <van-field name="radio" label="单选框" required>
        <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
            readonly
            clickable
            :value="form.birthday"
            label="生日"
            placeholder="点击选择生日"
            @click="showBirthday = true"
    ></van-field>
    <van-popup position="bottom" v-model="showBirthday">
        <van-datetime-picker
                title="生日"
                :value="new Date(form.birthday)"
                type="date"
                :min-date="minDate"
                @confirm="onBirthdayConfirm"
                @cancel="showBirthday = false"
        ></van-datetime-picker>
    </van-popup>

    <!--身高-->
    <van-field
            required
            readonly
            clickable
            :value="form_high"
            label="身高"
            placeholder="请选择身高（CM）"
            @click="showHigh = true"
    ></van-field>
    <van-popup position="bottom" v-model="showHigh">
        <van-picker
                title="身高"
                show-toolbar
                :columns="high"
                @confirm="onHighConfirm"
                @cancel="showHigh = false"
        ></van-picker>
    </van-popup>

    <!--体重-->
    <van-field
            required
            readonly
            clickable
            :value="form_weight"
            label="体重"
            placeholder="请选择体重（KG）"
            @click="showWeight = true"
    ></van-field>
    <van-popup position="bottom" v-model="showWeight">
        <van-picker
                title="体重"
                show-toolbar
                :columns="weight"
                @confirm="onWeightConfirm"
                @cancel="showWeight = false"
        ></van-picker>
    </van-popup>

    <van-field
            required
            readonly
            clickable
            :value="form.marry"
            label="婚姻状况"
            placeholder="请选择婚姻状况"
            @click="showMarry = true"
    ></van-field>
    <van-popup position="bottom" v-model="showMarry">
        <van-picker
                title="婚姻状况"
                show-toolbar
                :columns="marry"
                @confirm="onMarryConfirm"
                @cancel="showMarry = false"
        ></van-picker>
    </van-popup>

    <!--生肖-->
    <van-field
            required
            readonly
            clickable
            :value="form.animal"
            label="生肖"
            placeholder="点击选择生肖"
            @click="showAnimal = true"
    ></van-field>
    <van-popup position="bottom" v-model="showAnimal">
        <van-picker
                title="生肖"
                show-toolbar
                :columns="animal"
                @confirm="onAnimalConfirm"
                @cancel="showAnimal = false"
        ></van-picker>
    </van-popup>

    <!--学历-->
    <van-field
            required
            readonly
            clickable
            :value="form.education"
            label="学历"
            placeholder="点击选择学历"
            @click="showEducation = true"
    ></van-field>
    <van-popup position="bottom" v-model="showEducation">
        <van-picker
                title="学历"
                show-toolbar
                :columns="education"
                @confirm="onEducationConfirm"
                @cancel="showEducation = false"
        ></van-picker>
    </van-popup>

    <!--年收入-->
    <van-field
            required
            readonly
            clickable
            :value="form.income"
            label="年收入"
            placeholder="点击选择年收入"
            @click="showIncome = true"
    ></van-field>
    <van-popup position="bottom" v-model="showIncome">
        <van-picker
                title="年收入"
                show-toolbar
                :columns="income"
                @confirm="onIncomeConfirm"
                @cancel="showIncome = false"
        ></van-picker>
    </van-popup>

    <!--工作单位和职务-->
    <van-field
            required
            v-model="form.company"
            label="工作单位"
            placeholder="请输入工作单位"
    ></van-field>
    <van-field
            v-model="form.job"
            label="职务"
            placeholder="请输入职务"
    ></van-field>

    <!--家庭成员-->
    <van-field name="form.family" label="家庭成员">
        <template #input>
            <van-row :gutter="10">
                <van-col span="8" v-for="(item) in family">
                    <div :class="{btn_search_item:true,active: in_array(item,form.family)}"
                         @click="selectFamily(item)">
                        {{item}}
                        <van-icon v-if="in_array(item,form.family)"
                                  class="iconfont icon-gouxuan-youxiajiaogouxuan btn_search_icon text-pink"></van-icon>
                    </div>
                </van-col>
            </van-row>
        </template>
    </van-field>

    <!--籍贯-->
    <van-field
            v-model="form.native"
            label="籍贯"
            placeholder="请输入籍贯"
    ></van-field>
    <van-field
            v-model="form.live_place"
            label="居住地"
            placeholder="请输入居住地"
    ></van-field>

    <!--民族-->
    <van-field
            readonly
            clickable
            :value="form.nation"
            label="民族"
            placeholder="点击选择民族"
            @click="showNation = true"
    ></van-field>
    <van-popup position="bottom" v-model="showNation">
        <van-picker
                title="民族"
                show-toolbar
                :columns="nation"
                @confirm="onNationConfirm"
                @cancel="showNation = false"
        ></van-picker>
    </van-popup>

    <!--兴趣爱好-->
    <van-field
            v-model="form.hobby"
            autosize
            label="兴趣爱好"
            type="textarea"
            placeholder="请输入兴趣爱好"
    ></van-field>

    <van-field
            v-model="form.comment"
            autosize
            label="备注"
            type="textarea"
            placeholder="请输入备注"
    ></van-field>

    <h3 class="fz16 mb10 pt20 plr12">工作生活</h3>

    <!--房车，与父母同住-->
    <van-field
            readonly
            clickable
            :value="tinyint[form.have_house]"
            label="是否有房"
            placeholder="点击选择是否有房"
            @click="showHaveHouse = true"
    ></van-field>
    <van-popup position="bottom" v-model="showHaveHouse">
        <van-picker
                title="是否有房"
                show-toolbar
                :columns="tinyint"
                @confirm="onHaveHouseConfirm"
                @cancel="showHaveHouse = false"
        ></van-picker>
    </van-popup>
    <van-field
            readonly
            clickable
            :value="tinyint[form.have_car]"
            label="是否有车"
            placeholder="点击选择是否有车"
            @click="showHaveCar = true"
    ></van-field>
    <van-popup position="bottom" v-model="showHaveCar">
        <van-picker
                title="是否有车"
                show-toolbar
                :columns="tinyint"
                @confirm="onHaveCarConfirm"
                @cancel="showHaveCar = false"
        ></van-picker>
    </van-popup>
    <van-field
            readonly
            clickable
            :value="tinyint[form.with_parent_live]"
            label="婚后是否愿意与父母同住"
            placeholder="点击选择"
            @click="showWithParentLive = true"
    ></van-field>
    <van-popup position="bottom" v-model="showWithParentLive">
        <van-picker
                title="婚后是否愿意与父母同住"
                show-toolbar
                :columns="tinyint"
                @confirm="onWithParentLiveConfirm"
                @cancel="showWithParentLive = false"
        ></van-picker>
    </van-popup>
    <van-field
            readonly
            clickable
            :value="tinyint[form.want_birth]"
            label="是否愿意生育"
            placeholder="点击选择"
            @click="showWantBirth = true"
    ></van-field>
    <van-popup position="bottom" v-model="showWantBirth">
        <van-picker
                title="是否愿意生育"
                show-toolbar
                :columns="tinyint"
                @confirm="onWantBirthConfirm"
                @cancel="showWantBirth = false"
        ></van-picker>
    </van-popup>


    <!--是否吸烟-->
    <van-field
            readonly
            clickable
            :value="form.smoke"
            label="是否吸烟"
            placeholder="点击选择是否吸烟"
            @click="showSmoke = true"
    ></van-field>
    <van-popup position="bottom" v-model="showSmoke">
        <van-picker
                title="是否吸烟"
                show-toolbar
                :columns="smoke"
                @confirm="onSmokeConfirm"
                @cancel="showSmoke = false"
        ></van-picker>
    </van-popup>

    <!--是否喝酒-->
    <van-field
            readonly
            clickable
            :value="form.drink"
            label="是否喝酒"
            placeholder="点击选择是否喝酒"
            @click="showDrink = true"
    ></van-field>
    <van-popup position="bottom" v-model="showDrink">
        <van-picker
                title="是否喝酒"
                show-toolbar
                :columns="drink"
                @confirm="onDrinkConfirm"
                @cancel="showDrink = false"
        ></van-picker>
    </van-popup>

    <div style="padding:16px;">
        <van-button block class="bg-pink" @click="onSubmit">下一步</van-button>
    </div>
</block>
<block name="script">
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    form: {
                        realname: '',
                        sex: 0,
                        mobile: '',
                        avatar: '',
                        birthday: '',
                        animal: '',
                        high: 0,
                        weight: 0,
                        education: '',
                        company: '',
                        job: '',
                        income: '',
                        nation: '',
                        hobby: '',
                        smoke: '',
                        drink: '',
                        family: [],
                        native: '',
                        live_place: '',
                        have_house: 0,
                        want_birth: 1,
                        have_car: 0,
                        with_parent_live: 0,
                        marry: '',
                        comment: '',
                    },
                    showSex: false,
                    sex: {$sex},
                    showBirthday: false,
                    minDate: new Date(1970, 0, 1),
                    showHigh: false,
                    high: {$high},
                    showWeight: false,
                    weight: {$weight},
                    showMarry: false,
                    marry: {$marry},
                    showEducation: false,
                    education: {$education},
                    showIncome: false,
                    income: {$income},
                    showNation: false,
                    nation: {$nation},
                    showTalentLevel: false,
                    showSmoke: false,
                    smoke: {$smoke},
                    showDrink: false,
                    drink: {$drink},
                    family: {$family},
                    showHaveHouse: false,
                    showHaveCar: false,
                    showWithParentLive: false,
                    tinyint: {$tinyint},
                    animal: {$animal},
                    showAnimal: false,
                    showWantBirth: false,
                };
            },
            methods: {
                in_array(search,array){
                    for(var i in array){
                        if(array[i] == search){
                            return true;
                        }
                    }
                    return false;
                },
                onBack() {
                    history.back();
                },
                onSubmit() {
                    if (this.form.realname == '') {
                        this.$toast('请输入真实姓名');
                        return false;
                    }
                    if (this.form.sex == 0) {
                        this.$toast('请选择性别');
                        return false;
                    }
                    if (this.form.birthday == '') {
                        this.$toast('请选择正确的生日');
                        return false;
                    }
                    if (this.form.animal == '') {
                        this.$toast('请选择生肖');
                        return false;
                    }
                    if (this.form.marry == '') {
                        this.$toast('请选择婚姻状况');
                        return false;
                    }
                    if (this.form.education == '') {
                        this.$toast('请选择学历');
                        return false;
                    }
                    if (this.form.income == '') {
                        this.$toast('请选择年收入');
                        return false;
                    }

                    if (this.form.company == '') {
                        this.$toast('请输入工作单位');
                        return false;
                    }

                    $.post("{:url('infoAddPost')}", this.form, function (json) {
                        location.href = "{:url('matingAdd')}?id=" + json.data.id;
                    }, 'json');
                },
                onBirthdayConfirm(date) {
                    let year = date.getFullYear();
                    let month = date.getMonth() + 1;
                    if (month < 10) {
                        month = "0" + month;
                    }
                    let day = date.getDate();
                    if (day < 10) {
                        day = "0" + day;
                    }
                    this.form.birthday = `${year}-${month}-${day}`;
                    this.showBirthday = false;
                },
                onHighConfirm(value) {
                    this.form.high = value == '保密' ? 0 : value;
                    this.showHigh = false;
                },
                onWeightConfirm(value) {
                    this.form.weight = value == '保密' ? 0 : value;
                    this.showWeight = false;
                },
                onMarryConfirm(value) {
                    this.form.marry = value;
                    this.showMarry = false;
                },
                onAnimalConfirm(value) {
                    this.form.animal = value;
                    this.showAnimal = false;
                },
                onEducationConfirm(value) {
                    this.form.education = value;
                    this.showEducation = false;
                },
                onIncomeConfirm(value) {
                    this.form.income = value;
                    this.showIncome = false;
                },
                onNationConfirm(value) {
                    this.form.nation = value;
                    this.showNation = false;
                },
                onHaveHouseConfirm(value,index) {
                    this.form.have_house = index;
                    this.showHaveHouse = false;
                },
                onHaveCarConfirm(value,index) {
                    this.form.have_car = index;
                    this.showHaveCar = false;
                },
                onWithParentLiveConfirm(value,index) {
                    this.form.with_parent_live = index;
                    this.showWithParentLive = false;
                },
                onWantBirthConfirm(value,index){
                    this.form.want_birth = index;
                    this.showWantBirth = false;
                },
                onSmokeConfirm(value) {
                    this.form.smoke = value;
                    this.showSmoke = false;
                },
                onDrinkConfirm(value) {
                    this.form.drink = value;
                    this.showDrink = false;
                },
                removeByVal(arrylist , val) {
                    for(var i = 0; i < arrylist .length; i++) {
                        if(arrylist[i] == val) {
                            arrylist .splice(i, 1);
                            break;
                        }
                    }
                },
                selectFamily(value) {
                    if (this.in_array(value,this.form.family)) {
                        this.removeByVal(this.form.family,value);
                    } else {
                        this.form.family.push(value);
                    }
                },
                uploadHead(file) {
                    let self = this;
                    $.post("{:url('imageUpload')}",{file:file.content,name:file.file.name},function(json){
                        if (json.code) {
                            self.form.avatar = json.data.avatar;
                            self.$forceUpdate();
                        } else {
                            self.$toast(json.msg);
                        }
                    },'json')
                },
            },
            computed: {
                form_high() {
                    return this.form.high ? this.form.high + 'CM' : '保密';
                },
                form_weight() {
                    return this.form.weight ? this.form.weight + 'KG' : '保密';
                },
                head_image() {
                    return this.form.avatar ? this.form.avatar : '__TMPL__/public/assets/images/matchmaker/avatar2.png';
                }
            },
        });
    </script>
</block>