program/src/pages/user_center/edit/index.vue

<template>
  <div class="uc_edit_container">
    <van-cell title="头像">
      <img :src="userinfo.portrait" alt="" class="avatar">
    </van-cell>
    <van-cell title="手机号" :value="userinfo.phone" is-link url="/pages/user_center/edit/confirm_phone_first/main"/>
    <van-cell title="会员码" is-link url="/pages/user_center/vip_code/main">
      <van-icon name="qr"/>
    </van-cell>
    <van-cell title="昵称" :value="userinfo.user_name"/>
    <van-cell title="性别" is-link @click="gender_picker = true">
      <template v-if="userinfo.sex == 1">
        男
      </template>
      <template v-if="userinfo.sex == 2">
        女
      </template>
      <template v-if="userinfo.sex == 0">
        保密
      </template>
    </van-cell>
    <van-cell title="生日" :value="userinfo.birthday" is-link @click="birthday_picker = true"/>
    <!--    <van-cell title="家庭组" :value="userinfo.home_group" is-link/>-->
    <van-cell title="推荐人" :value="userinfo.invite_name"/>

    <van-popup
      :show="gender_picker"
      round
      position="bottom"
    >
      <van-picker
        :columns="gender"
        @confirm="onGenderChange"
        @cancel="gender_picker = false"
        show-toolbar
        title="更换性别"
        :default-index="userinfo.gender"
      />
    </van-popup>


    <van-toast id="van-toast"/>

    <van-popup
      :show="birthday_picker"
      round
      position="bottom"
    >
      <van-datetime-picker
        type="date"
        :value="_birthday"
        @confirm="onDateChange"
        @cancel="birthday_picker = false"
        :max-date="max_date"
        :min-date="min_date"
      />
    </van-popup>

  </div>
</template>

<script>
import {userChangeBirthday, userChangeSex, userDetail} from "../../../requests/user";
import Toast from "../../../../static/vant/toast/toast";
import {formatBirthday} from '../../../utils/index'
import {reload_userinfo} from "../../../utils/user";

var $this
export default {
  name: "uc_edit_container",
  components: {},
  data() {
    return {
      gender: [
        '保密', '男', '女'
      ],
      _birthday: "",
      min_date: -1,
      max_date: new Date().getTime(),
      userinfo: {
        avatar: "https://img.shuimuai.com/weixintouxiang.png",
        phone: '13722886629',
        code: "",
        nickname: "嘤嘤怪",
        gender: 1,
        birthday: "1862-02-32",
        home_group: "超级复读机",
        recommend: "莲花山云雨"
      },
      gender_picker: false,
      birthday_picker: false
    }
  },
  methods: {
    //修改性别
    onGenderChange($val) {
      let $gender = $this.userinfo.sex = $val.mp.detail.index
      let $params = {
        sex: $gender
      }
      userChangeSex($params).then((res) => {
        let $data = res.data
        Toast.success($data.errmsg)
      })
      $this.gender_picker = false
    },
    onDateChange($val) {
      console.log($val.mp.detail)
      let $birthday = $val.mp.detail / 1000
      let $params = {
        birthday: $birthday
      }
      $this.userinfo.birthday = formatBirthday($birthday)
      userChangeBirthday($params).then((res) => {
        let $data = res.data;
        Toast.success($data.errmsg)
        reload_userinfo($this)
      })
      $this.birthday_picker = false

    }
  }
  ,
  onShow() {
    reload_userinfo($this)
  },
  created() {
    $this = this;
  },
  onLoad() {
  }
}
</script>

<style scoped>
/*头像*/
.avatar {
  width: 40px;
  height: 40px;
}
</style>