个人中心 (二) 01-编辑资料-基础布局-Popup弹出层-底部弹出-头像男女时间 & DatetimePicker时间选择转换-dayjs(value).format('YYYY-MM-DD')

个人中心-编辑资料-基础布局-Popup 弹出层-底部弹出模式-头像-男女-时间 & DatetimePicker 时间选择-年月日模式 & dayjs(value) 转换成日期对象，format(‘YYYY-MM-DD’)

静态结构： src/views/user/profile.vue

  <div class="container">
    <van-nav-bar left-arrow @click-left="$router.back()" title="编辑资料" right-text="保存">van-nav-bar>
    <van-cell-group>
      <van-cell is-link title="头像" center>
          //round src="https://img.yzcdn.cn/vant/cat.jpeg"
        <van-image slot="default" width="1.5rem" height="1.5rem" fit="cover" round :src="photo" />
      van-cell>
      <van-cell is-link title="名称" value="用户名称" />
      <van-cell is-link title="性别" value="男" />
      <van-cell is-link title="生日" value="2019-9-21" />
    van-cell-group>
  div>

交互效果动态结构： src/views/user/profile.vue

Popup 弹出层-底部弹出模式：https://youzan.github.io/vant/#/zh-CN/popup#dan-chu-wei-zhi

<template>
  <div class="container">
    <van-nav-bar left-arrow @click-left="$router.back()" title="编辑资料" right-text="保存">van-nav-bar>
    <van-cell-group>
      <van-cell is-link title="头像" center @click="showPhoto=true">
          //round src="https://img.yzcdn.cn/vant/cat.jpeg"
        <van-image slot="default" width="1.5rem" height="1.5rem" fit="cover" round :src="photo" />
      van-cell>
        //控制用户名显示隐藏
      <van-cell is-link title="名称" :value="user.name" @click="showName=true" />
        //控制相机显示隐藏
      <van-cell is-link title="性别" :value="user.gender===0?'男':'女'" @click="showGender=true" />
      <van-cell is-link title="生日" :value="user.birthday" @click="showBirthday=true"/>
    van-cell-group>
    
    <van-popup v-model="showPhoto" position="bottom">
      <van-cell value="本地相册选择" is-link/>
      <van-cell value="拍照" is-link/>
    van-popup>
    
    <van-popup v-model="showName" position="bottom">
      <van-field v-model="user.name" required placeholder="请输入用户名" />
    van-popup>
    
    <van-popup v-model="showGender" position="bottom">
      <van-cell value="男" @click="changeGender(0)" is-link/>
      <van-cell value="女" @click="changeGender(1)" is-link/>
    van-popup>
    
    <van-popup v-model="showBirthday" position="bottom">
      <van-datetime-picker
        title="选择生日"
        v-model="nowDate"
        type="date"
        :min-date="minDate"
        @cancel="showBirthday=false"
        @confirm="confirmDate"
      />
    van-popup>
  div>
template>

DatetimePicker 时间选择-年月日模式：

https://youzan.github.io/vant/#/zh-CN/datetime-picker#xuan-ze-ri-qi-nian-yue

数据&函数： src/views/user/profile.vue

import dayjs from 'dayjs'
export default {
  data () {
    return {
      showPhoto: false,
      showName: false,
      showGender: false,
      showBirthday: false,
      // 当前时间
      nowDate: new Date(),
      minDate: new Date('1980-01-01'),
      // 用户的资料
      user: {
        name: '一阵清风',
        gender: 0,  //默认为男
        // 格式 2019-10-10
        birthday: ''
      },
       //用户头像
       photo:''
    }
  },
  methods: {
      //选择性别
    changeGender (type) {
      this.user.gender = type
      this.showGender = false  //关闭输入框
    },
    confirmDate (value) {
      // 转换时间格式 赋值给birthday
          //dayjs(value) 转换成日期对象，format('YYYY-MM-DD') 转换成需要的时间格式 YYYY-MM-DD HH:mm:ss
      this.user.birthday = dayjs(value).format('YYYY-MM-DD')
        //关闭对话窗
      this.showBirthday = false
    }
  }
}

时间格式转换：https://www.npmjs.com/package/dayjs

API：

dayjs().format(’{YYYY} MM-DDTHH:mm:ss SSS [Z] A’) // display

渲染： methods里：

    async getUserProfile () {
      const data = await getUserProfile()
      this.user = data
      this.photo = data.photo
    }
created(){
   this.getUserProfile()
}

封装API src/api/user.js

/**
 * 获取个人中心编辑用户资料信息
 */
export const getUserProfile = () => {
  return request(`/app/v1_0/user/profile`, 'get')
}

src/views/user/profile.vue中script里导入：

import { getuserProfile } from '@/api/user'