love/public/themes/simpleboot3/love/my/profile.html

<extend name="public@base"/>
<block name="css">
    <style>
        .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
            left-text="返回"
            right-text="完成"
            left-arrow
            @click-left="onBack"
            @click-right="onSubmit"
            fixed="true"
    >
        <template #title>
            <span>编辑资料</span>
        </template>
    </van-nav-bar>
    <div style="width:100%;height:46px;"></div>

    <!--增空-->
    <van-field
            required
            v-model="form.realname"
            label="真实姓名"
            placeholder="请输入真实姓名"
    ></van-field>
    <van-field
            required
            v-model="form.mobile"
            label="电话"
            placeholder="请输入电话号码"
    ></van-field>
    <van-field
            v-model="form.sex == 1 ? '男' : '女'"
            label="性别"
            placeholder="性别"
            disabled
    ></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.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
            required
            v-model="form.job"
            label="职务"
            placeholder="请输入职务"
    ></van-field>

    <!--身份类型-->
    <van-field
            required
            clickable
            :value="form.id_type"
            label="身份类型"
            placeholder="点击选择身份类型"
            @click="showIdType = true"
    ></van-field>
    <van-popup position="bottom" v-model="showIdType">
        <van-picker
                title="身份类型"
                show-toolbar
                :columns="idType"
                @confirm="onIdTypeConfirm"
                @cancel="showIdType = false"
        ></van-picker>
    </van-popup>

    <!--家庭成员-->
    <van-field required 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
            required
            v-model="form.native"
            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>

    <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="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 class="split-block"></div>
    <h3 class="fz16 mb10 pt20 plr12">其他</h3>
    <van-cell center title="是否显示足迹">
        <template #right-icon>
            <van-switch v-model="form.show_footmark" size="24" :active-value="1" :inactive-value="2" active-color="#FF589B"></van-switch>
        </template>
    </van-cell>
</block>
<block name="script">
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    form: {$user},
                    showBirthday: false,
                    minDate: new Date(1920, 0, 1),
                    showHigh: false,
                    high: {$high},
                    showWeight: false,
                    weight: {$weight},
                    showEducation: false,
                    education: {$education},
                    showIncome: false,
                    income: {$income},
                    showIdType: false,
                    idType: {$id_type},
                    showNation: false,
                    nation: {$nation},
                    showSmoke: false,
                    smoke: {$smoke},
                    showDrink: false,
                    drink: {$drink},
                    family: {$family},
                    showHaveHouse: false,
                    showHaveCar: false,
                    showWithParentLive: false,
                    tinyint: {$tinyint},
                };
            },
            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.username == '') {
                        this.$toast('请输入用户名');
                        return false;
                    }
                    if (this.form.realname == '') {
                        this.$toast('请输入真实姓名');
                        return false;
                    }
                    if (this.form.mobile == '') {
                        this.$toast('请输入电话号码');
                        return false;
                    }
                    if (this.form.birthday == '1970-01-01') {
                        this.$toast('请选择正确的生日');
                        return false;
                    }
                    if (this.form.education == '') {
                        this.$toast('请选择学历');
                        return false;
                    }
                    if (this.form.id_type == '') {
                        this.$toast('请选择身份类型');
                        return false;
                    }
                    if (this.form.income == '') {
                        this.$toast('请选择年收入');
                        return false;
                    }
                    if (this.form.company == '') {
                        this.$toast('请输入工作单位');
                        return false;
                    }
                    if (this.form.job == '') {
                        this.$toast('请输入职务');
                        return false;
                    }
                    if (this.form.family.length == 0) {
                        this.$toast('请选择家庭成员');
                        return false;
                    }
                    if (this.form.native == '') {
                        this.$toast('请输入籍贯');
                        return false;
                    }
                    $.post("{:url('profilePost')}", this.form, function (json) {
                        history.back();
                    }, '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;
                },
                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;
                },
                onIdTypeConfirm(value) {
                    this.form.id_type = value;
                    this.showIdType = 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;
                },
                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);
                    }
                },
            },
            computed: {
                form_high() {
                    return this.form.high ? this.form.high + 'CM' : '保密';
                },
                form_weight() {
                    return this.form.weight ? this.form.weight + 'KG' : '保密';
                },
            },
        });
    </script>
</block>