love/public/themes/simpleboot3/matchmaker/register/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%;}

        .informed {width:90vw;border-radius:10px;position:relative;box-sizing:border-box;}
        .van-dialog__message{text-align:left;white-space:unset;}
        .van-dialog__message p {margin-top:10px;text-indent:2em;}
    </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="请输入电话号码"
            required
    ></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>

    <van-popup v-model="showTip" round>
        <div class="informed">
            <div class="van-dialog__header" style="font-weight:bold;">知情通知书</div>
            <div class="van-dialog__content">
                <div class="van-dialog__message van-dialog__message--has-title">
                    <p>Hi，朋友~</p>
                    <p>欢迎您的加入！</p>
                    <p>1.本平台为晋江市妇女联合会联合晋江市致和社工事务所倾情打造的公益红娘信息平台。该服务属于公益性质，相关服务活动自愿参加、风险自担、责任自负。</p>
                    <p>2.信息录入的青年必须是单身人士，请如实填写个人信息，诚信参与。</p>
                    <p>3.所录入的信息平台会绝对保护隐私，请放心填写。</p>
                    <p>4.红娘在提供婚恋服务的过程中，不可收取任何费用。</p>
                    <p>如认可以上信息，请按同意，继续填写您的个人信息。</p>
                    <p>谢谢配合！</p>
                </div>
            </div>
            <div class="van-hairline--top van-dialog__footer" @click="showTip = false">
                <button type="button" class="van-button van-button--default van-button--large van-dialog__confirm">
                    <div class="van-button__content">
                        <span class="van-button__text">同意</span>
                    </div>
                </button>
            </div>
        </div>
    </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: {
                        matchmaker_id: {$id},
                        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,
                    showTip: true,
                };
            },
            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.mobile == '') {
                        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;
                    }

                    let self = this;
                    $.post("{:url('infoAddPost')}", this.form, function (json) {
                        if (json.code) {
                            location.href = "{:url('matingAdd')}?id=" + json.data.id;
                        } else {
                            self.$toast(json.msg);
                        }
                    }, '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>