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", "appTheme"]),
      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) {
      // 导航栏颜色
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: this.appTheme,
      })
      // 
      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>