baby-app/src/pages/myUser/component/userInformation.vue

<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
  },
}
</route>
<!--   个人信息 -->
<template>
  <view class="container">
    <headerTitle :title="'个人信息'" />

    <view class="content">
      <!-- 头像 -->
      <view class="section" @click="pictureBtn">
        <view class="gender-container">
          <view class="label">头像</view>
          <view class="gender">点击可查看</view>
        </view>
        <View class="avatar">
          <image :src="userAvatar" class="avatar-image" />
        </View>
        <view>
          <image style="width: 48rpx; height: 48rpx" src="@/static/icon/chevron-right.svg" />
        </view>
      </view>

      <!-- 昵称 -->
      <view class="section" @click="nicknameBtn">
        <view class="section-left">
          <view class="label">昵称</view>
          <wd-input v-model="nicknameValue" placeholder="请输入昵称" />
        </view>
      </view>

      <!-- 性别 -->
      <ItemForm label="性别">
        <template #default>
          <pickerUser
            :columns="columns"
            v-model:value="genderValue"
            title="选择性别"
            @confirm="handleConfirm"
          />
        </template>
      </ItemForm>

      <!-- 生日 -->
      <ItemForm label="生日">
        <template #default>
          <wd-datetime-picker type="date" v-model="datetimeValue" @confirm="handleTimes" />
        </template>
      </ItemForm>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  import headerTitle from './headerTitle.vue'
  import pickerUser from './pickerUser.vue'
  import ItemForm from './item-form.vue'
  import { formateDate } from '../../../utils/times'
  const columns = ref(['男', '女', '保密'])
  const genderValue = ref('男') // 性别
  const datetimeValue = ref('') // 生日
  const nicknameValue = ref('') // 昵称
  const handleConfirm = (value) => {
    console.log('选择的值：', value)
  }

  const userAvatar = ref(
    'https://ai-public.mastergo.com/ai/img_res/6e500f9fbe00a9cbad23aa49c6a2830b.jpg',
  )
  const nickname = ref('小奥特曼的爸爸')

  // 点击头像
  const pictureBtn = () => {
    console.log('点击头像')
  }
  // 点击昵称
  const nicknameBtn = () => {
    console.log('点击昵称')
  }
  // 点击性别
  const genderBtn = () => {
    console.log('点击性别')
  }
  // 点击生日
  const handleTimes = ({ value }) => {
    formateDate(value)
    console.log(formateDate(value), 'formattedDateformattedDate')
  }
</script>

<style lang="scss" scoped>
  .container {
    min-height: 100vh;
    background-color: #f2f2f2;
  }

  .content {
    background-color: #ffffff;
  }

  .section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx;
    border-bottom: 2rpx solid #f1f5f9;
  }

  .section-left {
    width: 100%;
    height: 120rpx;
  }

  .label {
    color: #333;
    height: 60rpx;
    font-size: 32rpx;
    font-style: normal;
    font-weight: 400;
    line-height: 48rpx;
  }

  .avatar {
    width: 130rpx;
    height: 96rpx;
    margin-right: 32rpx;
    overflow: hidden;
    border-radius: 50%;
    image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .gender-container {
    width: 100%;
  }

  .nickname {
    display: flex;
    align-items: center;
    height: 60rpx;
    font-family: 'PingFang SC';
    font-size: 28rpx;
    font-style: normal;
    font-weight: 400;
  }
  .gender {
    padding: 10rpx 0px;
    font-size: 28rpx;
    color: #333;
  }
  ::v-deep .wd-picker__cell {
    padding: 12rpx 0px;
  }
</style>