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

<extend name="public/base"/>
<block name="css">
    <style>
        .van-nav-bar--fixed {z-index:100;}
        .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-nav-bar .van-icon,.van-nav-bar__text {color:white;}

        .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;}
    </style>
</block>
<block name="body">
    <!--头部-->
    <van-nav-bar
            class="bg-pink"
            fixed="true"
    >
        <template #title>
            <span style="color:white;">择偶要求(2/2)</span>
        </template>
    </van-nav-bar>
    <div style="width:100%;height:46px;"></div>

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

    <!--年龄-->
    <van-field
            readonly
            clickable
            :value="form_age"
            label="年龄"
            placeholder="点击选择年龄"
            @click="showAge = true"
    ></van-field>
    <van-popup position="bottom" v-model="showAge">
        <van-picker
                title="年龄"
                show-toolbar
                :columns="age"
                @confirm="onMultiPikerConfirm('age',$event)"
                @cancel="showAge = false"
        ></van-picker>
    </van-popup>

    <!--身高-->
    <van-field
            readonly
            clickable
            :value="form_high"
            label="身高"
            placeholder="点击选择身高"
            @click="showHigh = true"
    ></van-field>
    <van-popup position="bottom" v-model="showHigh">
        <van-picker
                title="身高"
                show-toolbar
                :columns="high"
                @confirm="onMultiPikerConfirm('high',$event)"
                @cancel="showHigh = false"
        ></van-picker>
    </van-popup>

    <!--体重-->
    <van-field
            readonly
            clickable
            :value="form_weight"
            label="体重"
            placeholder="点击选择体重"
            @click="showWeight = true"
    ></van-field>
    <van-popup position="bottom" v-model="showWeight">
        <van-picker
                title="体重"
                show-toolbar
                :columns="weight"
                @confirm="onMultiPikerConfirm('weight',$event)"
                @cancel="showWeight = false"
        ></van-picker>
    </van-popup>

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

    <!--籍贯-->
    <van-field
            readonly
            clickable
            :value="form.native"
            label="籍贯"
            placeholder="点击选择籍贯"
            @click="showNative = true"
    ></van-field>
    <van-popup position="bottom" v-model="showNative">
        <van-picker
                title="籍贯"
                show-toolbar
                :columns="native"
                @confirm="onNativeConfirm"
                @cancel="showNative = false"
        ></van-picker>
    </van-popup>

    <!--学历-->
    <van-field
            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
            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
            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="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-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>

    <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: {$mating},
                    showAge: false,
                    showHigh: false,
                    showWeight: false,
                    showMarry: false,
                    showEducation: false,
                    education: {$education},
                    showNative: false,
                    native: {$native},
                    showIncome: false,
                    income: {$income},
                    tinyint: {$tinyint},
                    showSmoke: false,
                    smoke: {$smoke},
                    showDrink: false,
                    drink: {$drink},
                    showHaveHouse: false,
                    showHaveCar: false,
                    showWithParentLive: false,
                    animal: {$animal},
                    showWantBirth:false,
                };
            },
            methods: {
                onSubmit() {
                    $.post("{:url('matingAddPost')}", this.form, function (json) {
                        location.href = '{:url("matchmaker/index/index")}';
                    }, 'json');
                },
                onEducationConfirm(value) {
                    this.form.education = value;
                    this.showEducation = false;
                },
                onNativeConfirm(value) {
                    this.form.native = value;
                    this.showNative = false;
                },
                onPikerConfirm(key, value) {
                    let upperKey = key.slice(0, 1).toUpperCase() + key.slice(1)
                    this.form[key] = value;
                    this[`show${upperKey}`] = false;
                },
                onMultiPikerConfirm(key, value) {
                    if (value[1] < value[0]) {
                        this.$toast('第二个值不能比第一个值小');
                        return false;
                    }
                    this.form[`min_${key}`] = value[0] === '不限' ? 0 : value[0];
                    this.form[`max_${key}`] = value[1] === '不限' ? 0 : value[1];
                    let upperKey = key.slice(0, 1).toUpperCase() + key.slice(1);
                    this[`show${upperKey}`] = false;
                },

                //多列选择器
                getColumns(min,min_value,max,max_value){
                    let min_default = this.findKey(min, min_value);
                    if (min_default === undefined) {
                        min_default = 0;
                    }
                    let max_default = this.findKey(max, max_value);
                    if (max_default === undefined) {
                        max_default = 0;
                    }

                    return [
                        {
                            values: min,
                            default: min_default,
                        },
                        {
                            values: max,
                            default: max_default,
                        },
                    ];
                },

                //多列选择器值
                getColumnsValue(min,max,ext) {
                    if (min === '' || max === '') {
                        return '';
                    }

                    if (min === 0 && max === 0) {
                        return '不限';
                    }

                    let min_ext = min + ext;
                    if (min === 0) {
                        min_ext = '不限';
                    }
                    let max_ext = max + ext;
                    if (max === 0) {
                        max_ext = '不限';
                    }
                    return `${min_ext}-${max_ext}`;
                },

                //找键
                findKey(obj, value, compare = (a, b) => a === b) {
                    return Object.keys(obj).find(k => compare(obj[k], value))
                },
                onIncomeConfirm(value) {
                    this.form.income = value;
                    this.showIncome = 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;
                },
                onSmokeConfirm(value) {
                    this.form.smoke = value;
                    this.showSmoke = false;
                },
                onDrinkConfirm(value) {
                    this.form.drink = value;
                    this.showDrink = false;
                },
                onWantBirthConfirm(value,index){
                    this.form.want_birth = index;
                    this.showWantBirth = false;
                },
                selectAnimal(value) {
                    if (this.in_array(value,this.form.animal)) {
                        this.removeByVal(this.form.animal,value);
                    } else {
                        this.form.animal.push(value);
                    }
                },
                in_array(search,array){
                    for(var i in array){
                        if(array[i] == search){
                            return true;
                        }
                    }
                    return false;
                },
                removeByVal(arrylist , val) {
                    for(var i = 0; i < arrylist .length; i++) {
                        if(arrylist[i] == val) {
                            arrylist .splice(i, 1);
                            break;
                        }
                    }
                },
            },
            computed: {
                //年龄
                age() {
                    return this.getColumns({$min_age},this.form.min_age,{$max_age},this.form.max_age);
                },
                form_age() {
                    return this.getColumnsValue(this.form.min_age,this.form.max_age,'岁');
                },

                //身高
                high() {
                    return this.getColumns({$min_high},this.form.min_high,{$max_high},this.form.max_high);
                },
                form_high() {
                    return this.getColumnsValue(this.form.min_high,this.form.max_high,'CM');
                },

                //体重
                weight() {
                    return this.getColumns({$min_weight},this.form.min_weight,{$max_weight},this.form.max_weight);
                },
                form_weight() {
                    return this.getColumnsValue(this.form.min_weight,this.form.max_weight,'KG');
                },
            }
        });
    </script>
</block>