adultDeviceApp/pageTwo/login/userinfo.vue

<template>
  <view class="box">
    <view class="lanBox">
      <form action>
        <view class="headbox">
          <view class="touxiang">
            <icon class="t-icon t-icon-touxiang headimage"></icon>
          </view>
        </view>
        <view class="lan2">
          请补充信息，帮助我们更准确的分析数据
        </view>
        <view class="lan border-bottom">
          <view class="left">用户名/昵称</view>
          <view class="right">
            <input name="name" type="text" v-model="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">{{sex==0?'请选择':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="height" placeholder="请输入身高" />cm
            <!-- <view class="uni-input">{{height?height+"cm":"请选择"}}</view>
                        <icon class="iconfont icon-arrow-down ml-15"></icon> -->
            <!-- <picker mode="selector" class="f-r" value="85" :range="heightArr" @change="onheightArr">
                                <view class="uni-input">{{height!=0?height:"请选择"}}</view>
                                <icon class="iconfont icon-arrow-down"></icon>
                            </picker> -->
          </view>
        </view>
        <view class="lan border-bottom">
          <view class="left">出生日期</view>
          <view class="right">
            <picker class="picker" mode="date" :end="endDate" :value="birthday" @change="bindDateChange">
              <view class="uni-input">{{birthday?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">{{height}}cm</view>
            <view class="subtn" @click="isHeight = false">确定</view>
          </view>
          <slide-choose v-model="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: [
          "男",
          "女"
        ],
        sex: 0,
        name: null,
        birthday: "",
        height: "",
        isHeight: false,
      };
    },
    computed: {
      ...mapState(["user", "appTheme"]),
      userInfo() {
        return this.user
      },
      endDate() {
        return this.$tools.getDate("start")
      }
    },
    methods: {
      // 提交
      confirmInfo() {
        let data = {};
        if (!this.name) {
          this.$tools.msg("请输入用户名")
          return;
        }
        if (!this.sex) {
          this.$tools.msg("请选择性别")
          return;
        }
        if (!this.height) {
          this.$tools.msg("请选择身高")
          return;
        }
        if (!this.birthday) {
          this.$tools.msg("请选择出生日期")
          return;
        }
        data.name = this.name
        data.sex = this.sex;
        data.height = this.height;
        data.birthday = this.birthday;
        data.id = this.user.familyid
        console.log("提交", data)
        this.subInfo(data);
      },
      subInfo(data) {
        let that = this
        that.$model.getsubmit(data).then(res => {
          if (res.code == 0) {
            that.$tools.msg("提交成功");
            uni.reLaunch({
              url: "/pages/index/index"
            })
          } else {
            that.$tools.msg(res.message);
          }
        });
      },
      //确定年龄
      bindDateChange(e) {
        console.log(e.target.value, this.startDate)
        this.birthday = e.target.value
      },
      onAgeArr(e) {
        this.age = this.ageArr[e.target.value]
      },
      //确定性别
      onsexArr(e) {
        this.sex = this.sexItem[e.target.value] == "男" ? 1 : 2
      },
      onTap() {
        this.height = ""
        this.isHeight = false
      },
    },
    onLoad(options) {
      // 导航栏颜色
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: this.appTheme,
      })
      this.name = this.userInfo.nickname ? this.userInfo.nickname : this.userInfo.name
      var agedata = []
      for (var i = 12; i <= 80; i++) {
        agedata.push(i);
      }
      this.ageArr = agedata
    },
  };
</script>

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

  .touxiang {
    position: absolute;
    top: 0;
    margin: 0 auto;
    z-index: 2;
  }

  input {
    border: none;
    background: inherit;
  }

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

  .headimage,
  .icontouxiang {
    display: block;
    width: 70px;
    height: 70px;
    border-radius: 50%;
  }

  .icontouxiang {
    font-size: 70px;
    color: $btncolor;
  }

  .lanBox {
    padding: 15px 0;
  }

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

  .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 {
    width: auto;
    margin: 40px 15px 0;
  }

  .lan2 {
    height: 35px;
    line-height: 35px;
    background: #f7f7f7;
    font-size: 12px;
    padding-left: 15px;
    color: #999;
  }
</style>