adultDeviceApp/pageTwo/me/adduser.vue

<template>
    <view class="box">
        <view class="lanBox">
            <form action>
                <view class="headbox">
                    <view class="touxiang">
                        <image v-if="memInfo.headimg" :src="memInfo.headimg" class="headimage" />
                        <icon v-else class="t-icon t-icon-touxiang headimage"></icon>
                    </view>
                </view>
                <view class="lan border-bottom">
                    <view class="left">用户名</view>
                    <view class="right">
                        <input name="name" type="text" v-model="memInfo.name" placeholder="请输入用户名/昵称" />
                    </view>
                </view>
                <view class="lan border-bottom">
                    <view class="left">性别</view>
                    <view class="right">
                        <picker mode="selector" :range="sexItem" @change="onsexArr">
                            <view class="uni-input">{{!memInfo.sex?'请选择':memInfo.sex==1?'男':'女'}}</view>
                            <icon class="iconfont icon-arrow-down"></icon>
                        </picker>
                    </view>
                </view>
                <view class="lan border-bottom">
                    <view class="left">身高</view>
                    <view class="right">
                        <input type="digit" class="mr-5" v-model="memInfo.height" placeholder="请输入身高"/> cm
                    </view>
                </view>
                <view class="lan border-bottom">
                    <view class="left">出生日期</view>
                    <view class="right">
                        <picker class="picker" mode="date" :end="startDate" :value="memInfo.birthday"
                            @change="bindDateChange">
                            <view class="uni-input">{{memInfo.birthday?memInfo.birthday:"请选择"}}</view>
                            <icon class="iconfont icon-arrow-down"></icon>
                        </picker>
                    </view>
                </view>
            </form>
        </view>
        <view v-if="isHeight" class="slidePopup">
            <view class="bg" @click="onTap">
                <view class="slide-box" @click.stop>
                    <view class="btnGroup">
                        <view class="subtn close" @click="onTap">取消</view>
                        <view class="heightVal">{{memInfo.height}}cm</view>
                        <view class="subtn" @click="isHeight = false">确定</view>
                    </view>
                    <slide-choose v-model="memInfo.height" ref="slide"></slide-choose>
                </view>
            </view>
        </view>
        <view class="btn" @click="confirmInfo">提交</view>
    </view>
</template>

<script>
    import {
        mapState
    } from "vuex";
    export default {
        data() {
            return {
                ageArr: [],
                sexItem: [
                    "男",
                    "女"
                ],
                isHeight: false,
                isEdit: false,
                memInfo: {
                    birthday: "",
                    height: "",
                    sex: "",
                    name: ""
                },
            };
        },
        computed: {
            ...mapState(["user"]),
            startDate() {
                return this.$tools.getDate('start');
            }
        },
        methods: {
            // 提交
            confirmInfo() {
                let that = this
                that.isHeight = false
                if (!this.memInfo.name) {
                    this.$tools.msg("请输入用户名")
                    return;
                }
                if (!this.memInfo.sex) {
                    this.$tools.msg("请选择性别")
                    return;
                }
                if (!this.memInfo.height) {
                    this.$tools.msg("请选则身高")
                    return;
                }
                if (!this.memInfo.birthday) {
                    this.$tools.msg("请选择出生日期")
                    return;
                }
                // console.log("提交", this.memInfo)
                that.subInfo(this.memInfo)
            },
            subInfo(data) {
                let that = this
                data.fansid = uni.getStorageSync("unionid");
                that.$model.getsubmit(data).then(res => {
                    if (res.code == 0) {
                        if (that.isEdit) {
                            that.$store.dispatch("getUserInfo", {
                                familyid: that.user.id
                            })
                        }
                        that.$store.dispatch("getFamilyList")
                        that.$tools.msg("提交成功");
                        uni.navigateBack({
                            delta: 1
                        });
                    } else {
                        that.$tools.msg(res.message);
                    }
                });
            },
            //确定年龄
            bindDateChange(e) {
                // console.log("年龄", e)
                this.memInfo.birthday = e.target.value
            },
            //确定性别
            onsexArr(e) {
                // console.log("性别", e)
                this.memInfo.sex = this.sexItem[e.target.value] == "男" ? 1 : 2
            },
            // 确定身份
            ontypeArr(e) {
                this.type = this.typeItem[e.target.value] == "成人" ? 1 : this.typeItem[e.target.value] == "儿童" ? 2 : 3
            },
        },
        onLoad(options) {
            var agedata = []
            for (var i = 12; i <= 80; i++) {
                agedata.push(i);
            }
            this.ageArr = agedata
            // 编辑
            if (options.familayData) {
                let info = options.familayData
                this.memInfo = JSON.parse(info)
                this.isEdit = true
                // console.log("编辑", this.memInfo)
            }
            // 添加
            if (options.type) {
                this.isEdit = false
                this.memInfo = {
                    birthday: "",
                    height: "",
                    sex: "",
                    name: ""
                }
            }
        },
    };
</script>

<style scoped="scoped" lang="scss">
    .box {
        height: 100vh;
        padding: 0 15px;
        background-color: #fff;
    }

    .headimage,
    .icontouxiang {
        display: block;
        width: 65px;
        height: 65px;
        font-size: 65px;
        color: $btncolor;
        border-radius: 50%;
    }

    .headbox {
        text-align: center;
        position: relative;
        display: flex;
        justify-content: center;
        height: 65px;
        margin: 15px;
    }

    .lanBox {
        padding: 15px 0;
    }

    .lan {
        display: flex;
        align-items: center;
        font-size: 14px;
        padding: 5px 0;
        margin: 4px auto;
        border-bottom: 1px solid #f7f7f7;

        input {
            border: none;
            background: inherit;
        }
    }

    .lan .left {
        width: 24%;
        text-align: left;
    }

    .lan .right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 72%;
        min-height: 38px;
        box-sizing: border-box;
        line-height: 36px;
        position: relative;
        text-align: right;

        picker {
            width: 100%;
            text-align: right;
            border: none;
            margin-right: 8px;
        }

        .iconfont {
            color: #333333;
            font-size: 16px;
            position: absolute;
            right: -10px;
            top: 0;
        }
    }

    .btn {
        margin: 10px auto 0;
    }
</style>