feat:我的页面静态

src/pages/music/component/musicPlayback.vue

@@ -11,7 +11,7 @@
     <view class="header">
       <image
         @click="goBack"
-        style="width: 30px; height: 30px"
+        style="width: 60rpx; height: 60rpx"
         src="/src/static/icon/Left.svg"
       ></image>
     </view>
@@ -33,7 +33,7 @@
           <view class="favorite-btn">
             <image
               @click="cancelHeart"
-              style="width: 16px; height: 16px"
+              style="width: 32rpx; height: 32rpx"
               :src="
                 song.favorite
                   ? '/src/static/icon/fi-rr-heart-grey.svg'
@@ -56,39 +56,45 @@
         <view class="controls">
           <view class="control-btn" @click="palyCycleBtn">
             <image
-              style="width: 16px; height: 16px"
+              style="width: 32rpx; height: 32rpx"
               src="/src/static/icon/fi-rr-refresh.svg"
             ></image>
           </view>
           <view class="control-btn" @click="previousSongBtn">
-            <image style="width: 24px; height: 16px" src="/src/static/icon/Group-left.svg"></image>
+            <image
+              style="width: 48rpx; height: 32rpx"
+              src="/src/static/icon/Group-left.svg"
+            ></image>
           </view>
           <!-- 播放 暂停 -->
           <view class="control-paly" @click="togglePlayPause">
             <button class="control-btn pause-btn" v-if="isPlaying">
-              <image style="width: 20px; height: 20px" src="/src/static/icon/Vector.svg"></image>
+              <image style="width: 40rpx; height: 40rpx" src="/src/static/icon/Vector.svg"></image>
             </button>
             <button class="control-btn pause-btn" v-else>
               <view class="control-Vector">
                 <image
-                  style="width: 4px; height: 20px"
+                  style="width: 8rpx; height: 40rpx"
                   src="/src/static/icon/Vector-paly.svg"
                 ></image>
               </view>
               <view class="control-Vector">
                 <image
-                  style="width: 4px; height: 20px"
+                  style="width: 8rpx; height: 40rpx"
                   src="/src/static/icon/Vector-paly.svg"
                 ></image>
               </view>
             </button>
           </view>
           <view class="control-btn" @click="nextSongBtn">
-            <image style="width: 24px; height: 16px" src="/src/static/icon/Group-right.svg"></image>
+            <image
+              style="width: 24rpx; height: 32rpx"
+              src="/src/static/icon/Group-right.svg"
+            ></image>
           </view>
           <view class="control-btn">
             <image
-              style="width: 16px; height: 16px"
+              style="width: 32rpx; height: 32rpx"
               src="/src/static/icon/fi-rr-shuffle.svg"
             ></image>
           </view>
@@ -159,8 +165,8 @@
   }
 
   .record-image {
-    width: 310px;
-    height: 320px;
+    width: 620rpx;
+    height: 640rpx;
   }
 
   // 播放
@@ -189,10 +195,10 @@
   .progress-bar {
     position: relative;
     width: 100%;
-    height: 4px;
+    height: 8rpx;
     margin-bottom: 0.5rem;
     background-color: #eee;
-    border-radius: 2px;
+    border-radius: 4rpx;
   }
 
   .progress-current {
@@ -202,7 +208,7 @@
     width: 30%;
     height: 100%;
     background-color: #ff8c69;
-    border-radius: 2px;
+    border-radius: 4rpx;
   }
 
   .time-info {
@@ -223,17 +229,17 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 40px;
-    height: 40px;
+    width: 80rpx;
+    height: 80rpx;
     padding: 0.5rem;
   }
   .pause-btn {
-    width: 66px;
-    height: 66px;
+    width: 132rpx;
+    height: 132rpx;
     background: #f88842;
     border-radius: 50%;
   }
   .control-Vector {
-    width: 10px;
+    width: 20rpx;
   }
 </style>

src/pages/music/component/musicRecommend.vue

@@ -6,7 +6,7 @@
       <view class="play-circle">
         <image
           @click="palyBtn"
-          style="width: 24px; height: 24px"
+          style="width: 48rpx; height: 48rpx"
           src="/src/static//icon/fi-rr-play-alt.svg"
         ></image>
       </view>
@@ -17,10 +17,10 @@
     <view class="header-right">
       <image
         @click="cycleBtn"
-        style="width: 16px; height: 16px"
+        style="width: 32rpx; height: 32rpx"
         src="/src/static/icon/fi-rr-refresh.svg"
       ></image>
-      <image style="width: 16px; height: 16px" src="/src/static/icon/fi-rr-shuffle.svg"></image>
+      <image style="width: 32rpx; height: 32rpx" src="/src/static/icon/fi-rr-shuffle.svg"></image>
     </view>
   </view>
 
@@ -30,13 +30,13 @@
       <view class="play-circle">
         <image
           @click="palyBtn"
-          style="width: 14px; height: 14px"
+          style="width: 28rpx; height: 28rpx"
           src="/src/static//icon/fi-rr-play.svg"
           v-if="type === 0"
         ></image>
         <image
           @click="palyBtn"
-          style="width: 14px; height: 14px"
+          style="width: 28rpx; height: 28rpx"
           src="/src/static//icon/fi-rr-play.svg"
           v-else
         ></image>
@@ -44,13 +44,16 @@
       <text class="text-gray">继续播放: 小燕子(供暖版) - 贝乐虎儿歌贝乐虎儿歌贝乐虎儿歌</text>
     </view>
     <!-- 循环播放 -->
-    <view style="display: flex; gap: 40px">
+    <view style="display: flex; gap: 80rpx">
       <image
         @click="cycleBtn"
-        style="width: 16px; height: 16px"
+        style="width: 32rpx; height: 32rpx"
         src="/src/static/icon/fi-rr-pause.svg"
       ></image>
-      <image style="width: 16px; height: 16px" src="/src/static/icon/fi-rr-cross-small.svg"></image>
+      <image
+        style="width: 32rpx; height: 32rpx"
+        src="/src/static/icon/fi-rr-cross-small.svg"
+      ></image>
     </view>
   </view>
 
@@ -60,7 +63,7 @@
       <view class="album-cover">
         <view class="cover-inner">
           <image
-            style="width: 50px; height: 50px"
+            style="width: 100rpx; height: 100rpx"
             src="/src/static/icon/fi-rr-big-play.svg"
           ></image>
         </view>
@@ -71,7 +74,7 @@
       <view class="song-controls">
         <text>{{ song.duration }}</text>
         <image
-          style="width: 20px; height: 20px"
+          style="width: 40rpx; height: 40rpx"
           v-if="type === 0"
           :src="
             song.favorite
@@ -83,7 +86,7 @@
 
         <image
           v-else
-          style="width: 20px; height: 20px"
+          style="width: 40rpx; height: 40rpx"
           src="/src/static/icon/fi-rr-heart.svg"
           @click="toggHeartCancel(song)"
         ></image>
@@ -150,7 +153,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    border-bottom: 1px solid #f0f0f0;
+    border-bottom: 2rpx solid #f0f0f0;
   }
 
   .header-left {
@@ -161,31 +164,31 @@
     display: flex;
     /* justify-content: center; */
     align-items: center;
-    width: 35px;
-    height: 50px;
+    width: 70rpx;
+    height: 100rpx;
   }
   .orange-icon {
-    margin-right: 8px;
+    margin-right: 16rpx;
     color: #f97316;
   }
 
   .text-gray {
     display: flex;
     align-items: center;
-    width: 220px;
+    width: 440rpx;
     overflow: hidden;
     font-family: 'PingFang SC';
-    font-size: 12px;
+    font-size: 24rpx;
     font-style: normal;
     font-weight: 400;
-    color: var(--333, #333);
+    color: #333;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
   .header-right {
     display: flex;
-    gap: 16px;
+    gap: 32rpx;
   }
 
   .gray-icon {
@@ -205,7 +208,7 @@
   }
   /* 列表 */
   .playlist {
-    height: calc(100vh - 260px);
+    height: calc(100vh - 630rpx);
     overflow: auto;
   }
   .playlist::-webkit-scrollbar {
@@ -214,9 +217,9 @@
   .playlist-item {
     display: flex;
     align-items: center;
-    padding: 12px 0px;
+    padding: 24rpx 0px;
     cursor: pointer;
-    border-bottom: 1px solid #f0f0f0;
+    border-bottom: 2rpx solid #f0f0f0;
   }
 
   .playlist-item:hover {
@@ -224,9 +227,9 @@
   }
 
   .album-cover {
-    width: 50px;
-    height: 50px;
-    margin-right: 12px;
+    width: 100rpx;
+    height: 100rpx;
+    margin-right: 24rpx;
     overflow: hidden;
   }
 
@@ -243,17 +246,17 @@
 
   .song-name {
     font-family: 'PingFang SC';
-    font-size: 16px;
+    font-size: 32rpx;
     font-style: normal;
     font-weight: 400;
-    color: var(--333, #333);
+    color: #333;
   }
 
   .song-controls {
     display: flex;
-    gap: 16px;
+    gap: 32rpx;
     align-items: center;
-    font-size: 12px;
+    font-size: 24rpx;
     font-style: normal;
     font-weight: 400;
     color: var(--999, #999);

src/pages/music/music.vue

@@ -13,7 +13,7 @@
     <view class="music-search">
       <wd-search @change="searchBtn" v-model="searchValue" placeholder-left hide-cancel />
     </view>
-    <view>
+    <view class="bg">
       <wd-tabs>
         <wd-tab title="综合推荐">
           <view class="music-recommend">
@@ -45,15 +45,15 @@
   .music-search {
     display: flex;
     flex: 1 0 0;
-    gap: 10px;
+    gap: 20rpx;
     align-items: center;
-    padding: 10px 0px;
+    padding: 20rpx 0px;
   }
   .wd-search {
     width: 100%;
   }
   .music-recommend {
-    padding: 16px;
+    padding: 32rpx;
     overflow: auto;
   }
 </style>

src/pages/myUser/component/babyInformation.vue

@@ -5,29 +5,186 @@
   },
 }
 </route>
+<!-- 宝宝信息 -->
 <template>
   <view>
-    <headerTitle title="我的宝宝"></headerTitle>
-    <view>
-      <image class="Empty-baby" src="/src/static/icon/Empty.svg"></image>
+    <headerTitle
+      v-if="!isQueryListEmpty"
+      :is-show="true"
+      title="宝宝信息"
+      @deleteBaby="deleteBaby"
+    ></headerTitle>
+    <headerTitle v-else title="宝宝信息" @deleteBaby="deleteBaby"></headerTitle>
+
+    <view class="avatar-wrapper">
+      <view class="card-container" @click="photoBtn">
+        <view class="info-profile"><image :src="camera" /></view>
+        <view class="info-camera"><image src="/src/static/icon/camera.svg" /></view>
+      </view>
+      <view class="card-item">
+        <!-- 昵称 -->
+        <view class="section" @click="nicknameBtn">
+          <view class="section-left">
+            <view class="label">宝宝昵称</view>
+            <view class="nickname">
+              <wd-input v-model="nicknameValue" placeholder="请输入昵称" />
+            </view>
+          </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>
+        <!-- 血型 -->
+        <ItemForm label="宝宝血型">
+          <template #default>
+            <pickerUser
+              required
+              :columns="columnsBlood"
+              title="血型"
+              v-model:value="bloodValue"
+              @confirm="handleConfirm"
+            />
+          </template>
+        </ItemForm>
+      </view>
+    </view>
+    <view class="baby-Bottom" v-if="!isQueryListEmpty">
+      <wd-button @click="addBaby">保存</wd-button>
     </view>
-    <view class="baby-Bottom"></view>
+    <view class="baby-Bottom" v-else>
+      <wd-button @click="addBaby">开始育人</wd-button>
+    </view>
+    <wd-message-box />
   </view>
 </template>
 
 <script setup>
+  import { ref, computed } from 'vue'
   import headerTitle from './headerTitle.vue'
+  import ItemForm from './item-form.vue'
+  import pickerUser from './pickerUser.vue'
+  import { formateDate } from '../../../utils/times'
+  const queryList = ref({}) // 宝宝信息
+  const columns = ref(['男', '女', '保密'])
+  const columnsBlood = ref(['A型', 'B型', 'AB型', 'O型'])
+  const genderValue = ref('') // 性别
+  const bloodValue = ref('') // 血型
+  const nicknameValue = ref('') // 宝宝昵称
+  const datetimeValue = ref('') // 生日
+
+  const camera = 'https://ai-public.mastergo.com/ai/img_res/d2b4d6b8d90031e1134ed22cfb120081.jpg'
+  // 删除
+  const deleteBaby = () => {}
+  const handleConfirm = () => {
+    console.log(genderValue.value)
+  }
+  const nicknameBtn = () => {}
+  const photoBtn = () => {
+    console.log('换头像')
+  }
+  // 开始育人
+  const addBaby = () => {
+    console.log('开始育人')
+  }
+  const handleTimes = ({ value }) => {
+    formateDate(value)
+    console.log(formateDate(value), 'formattedDateformattedDate')
+  }
+  // 计算属性判断 queryList 是否为空
+  const isQueryListEmpty = computed(() => Object.keys(queryList.value).length === 0)
+  onLoad((query) => {
+    if (query.songDate) {
+      queryList.value = JSON.parse(decodeURIComponent(query.songDate))
+    }
+  })
 </script>
 
 <style lang="scss" scoped>
-  .Empty-baby {
-    width: 100%;
-    height: calc(100vh - 136px);
+  .avatar-wrapper {
+    height: calc(100vh - 280rpx);
+    background: #f2f2f2;
+  }
+  .card-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 320rpx;
+    padding-top: 32rpx;
+    background: #fff;
+  }
+  .info-profile {
+    overflow: hidden;
+    border-radius: 50%;
+    image {
+      width: 200rpx;
+      height: 200rpx;
+    }
+  }
+  .info-camera {
+    position: absolute;
+    top: 240rpx;
+    left: 410rpx;
+    background: #f88842;
+    border-radius: 50%;
+    image {
+      width: 52rpx;
+      height: 52rpx;
+    }
+  }
+  .card-item {
+    background: #fff;
+    .section {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 32rpx 32rpx 0px 32rpx;
+      border-bottom: 1px solid #f1f5f9;
+    }
+    .section-left {
+      width: 100%;
+      height: 120rpx;
+    }
+
+    .label {
+      height: 60rpx;
+      font-size: 1rem;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 48rpx;
+    }
+    .nickname {
+      display: flex;
+      align-items: center;
+      height: 60rpx;
+      font-family: 'PingFang SC';
+      font-size: 28rpx;
+      font-style: normal;
+      font-weight: 400;
+    }
   }
   .baby-Bottom {
     display: flex;
-    width: 100%;
-    height: 80px;
-    background: pink;
+    align-items: center;
+    justify-content: center;
+    height: 128rpx;
+    padding: 16rpx 32rpx;
+  }
+  ::v-deep .wd-picker__cell {
+    padding: 12rpx 0px;
   }
 </style>

src/pages/myUser/component/headerTitle.vue

@@ -1,11 +1,11 @@
 <template>
   <view class="header">
     <view class="back-button" @click="goBack">
-      <image style="width: 30px; height: 30px" src="/src/static/icon/Left.svg"></image>
+      <image style="width: 60rpx; height: 60rpx" src="/src/static/icon/Left.svg"></image>
     </view>
     <view class="header-title">{{ title }}</view>
-    <view class="header-delete" v-if="show">
-      <image class="w-[20px] h-[20px]" src="/src/static/icon/fi-rr-trash.svg"></image>
+    <view class="header-delete" v-if="isShow" @click="handleDelete">
+      <image class="w-[40rpx] h-[40rpx]" src="/src/static/icon/fi-rr-trash.svg"></image>
     </view>
   </view>
 </template>
@@ -21,7 +21,11 @@
       default: false,
     },
   })
-
+  // 定义事件
+  const emit = defineEmits(['deleteBaby'])
+  const handleDelete = () => {
+    emit('deleteBaby')
+  }
   const goBack = () => {
     uni.navigateBack()
   }
@@ -30,8 +34,8 @@
 <style lang="scss" scoped>
   .header {
     display: flex;
-    height: 44px;
-    padding: 6px 16px;
+    height: 88rpx;
+    padding: 12rpx 32rpx;
     background-color: white;
   }
   .back-button {
@@ -44,7 +48,7 @@
     flex: 1;
     align-items: center;
     justify-content: center;
-    font-size: 18px;
+    font-size: 36rpx;
     font-weight: 600;
     color: #333;
   }

src/pages/myUser/component/messageCenter.vue

@@ -5,6 +5,7 @@
   },
 }
 </route>
+<!-- 消息 -->
 <template>
   <view class="message-center">
     <headerTitle :title="'消息中心'"></headerTitle>
@@ -29,38 +30,38 @@
   .message-center {
     min-height: 100vh;
     font-family: 'PingFang SC';
-    font-size: 14px;
+    font-size: 28rpx;
     font-weight: 400;
     color: #333;
     background-color: #f2f2f2;
   }
 
   .message-container {
-    padding: 16px 12px;
+    padding: 32rpx 24rpx;
   }
 
   .message-time {
-    margin-bottom: 12px;
+    margin-bottom: 24rpx;
     text-align: center;
   }
 
   .message-card {
-    padding: 12px 12px;
+    padding: 24rpx 24rpx;
     background-color: white;
-    border-radius: 8px;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    border-radius: 16rpx;
+    box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
   }
 
   .message-title {
     display: flex;
     align-items: center;
-    height: 35px;
-    border-bottom: 1px solid #f2f2f2;
+    height: 70rpx;
+    border-bottom: 2rpx solid #f2f2f2;
   }
 
   .message-text {
     display: flex;
     align-items: center;
-    height: 35px;
+    height: 70rpx;
   }
 </style>

src/pages/myUser/component/myBaby.vue

@@ -0,0 +1,114 @@
+<route lang="json5">
+{
+  style: {
+    navigationStyle: 'custom',
+  },
+}
+</route>
+<!-- 我的宝宝 -->
+<template>
+  <view>
+    <headerTitle title="我的宝宝"></headerTitle>
+    <view class="Empty-baby">
+      <!-- <view>
+        <image class="Empty-baby" src="/src/static/icon/Empty.svg"></image>
+      </view> -->
+      <view
+        class="baby-center"
+        v-for="(item, index) in babyList"
+        :key="index"
+        @click="JumpBtn(item)"
+      >
+        <view class="baby-profile">
+          <image style="width: 96rpx; height: 96rpx" :src="item.avatarUrl" />
+        </view>
+        <view>
+          <view class="baby-font">{{ item.baby }}</view>
+          <text class="baby-year">{{ item.year }}</text>
+        </view>
+      </view>
+    </view>
+    <view class="baby-Bottom">
+      <wd-button @click="addBaby">添加宝宝</wd-button>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+  import headerTitle from './headerTitle.vue'
+  const babyList = ref([
+    {
+      avatarUrl: 'https://ai-public.mastergo.com/ai/img_res/d2b4d6b8d90031e1134ed22cfb120081.jpg',
+      baby: '可爱宝宝',
+      year: '2岁三个月',
+    },
+    {
+      avatarUrl: 'https://ai-public.mastergo.com/ai/img_res/d2b4d6b8d90031e1134ed22cfb120081.jpg',
+      baby: '可爱宝宝',
+      year: '2岁三个月',
+    },
+    {
+      avatarUrl: 'https://ai-public.mastergo.com/ai/img_res/d2b4d6b8d90031e1134ed22cfb120081.jpg',
+      baby: '可爱宝宝',
+      year: '2岁三个月',
+    },
+  ])
+
+  // 添加宝宝
+  const addBaby = () => {
+    uni.navigateTo({
+      url: '/pages/myUser/component/babyInformation',
+    })
+  }
+
+  const JumpBtn = (item) => {
+    const songList = encodeURIComponent(JSON.stringify(item))
+    uni.navigateTo({
+      url: `/pages/myUser/component/babyInformation?songDate=${songList}`,
+    })
+  }
+</script>
+
+<style lang="scss" scoped>
+  .Empty-baby {
+    width: 100%;
+    height: calc(100vh - 272rpx);
+    background: #f2f2f2;
+  }
+
+  .baby-center {
+    display: flex;
+    height: 96rpx;
+    padding: 32rpx;
+    background: #fff;
+  }
+  .baby-profile {
+    margin-right: 24rpx;
+    overflow: hidden;
+    border-radius: 50%;
+  }
+  .baby-font {
+    font-size: 28rpx;
+    font-weight: 600;
+    line-height: 44rpx;
+    color: #333;
+  }
+  .baby-year {
+    font-size: 24rpx;
+    line-height: 24rpx;
+    color: #666;
+  }
+
+  .baby-Bottom {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 128rpx;
+  }
+  ::v-deep .wd-button {
+    background: #ffac78;
+    border-radius: 160rpx;
+  }
+</style>

src/pages/myUser/component/pickerUser.vue

@@ -2,41 +2,41 @@
   <wd-picker
     :columns="columns"
     :title="title"
-    :v-model="value"
-    :is-show="isShow"
-    size="large"
-    @confirm="handleConfirm"
+    :size="size"
+    :label="label"
+    v-model="value"
+    confirm-button-text="确认"
+    @confirm="emit('confirm')"
   />
 </template>
 
 <script setup>
-  import { ref, defineEmits } from 'vue'
-
+  import { defineEmits } from 'vue'
+  defineOptions({
+    name: 'PickerInfo',
+  })
   const props = defineProps({
     columns: {
       type: Array,
       required: true,
     },
-    value: {
-      type: [String, Number],
-      default: '',
+    size: {
+      type: String,
+      default: 'large',
     },
-    title: {
+    label: {
       type: String,
-      default: '请选择',
+      default: '',
     },
-  })
-  // 定义事件
-  const emit = defineEmits(['update:value', 'confirm'])
-  // 处理 Picker 确认操作
-  const handleConfirm = (value) => {
-    emit('update:value', value)
-    emit('confirm', value)
-  }
+  }) // 定义事件
+
+  const title = defineModel('title')
+  const value = defineModel('value')
+  const emit = defineEmits('confirm') // 处理 Picker 确认操作
 </script>
 
 <style scoped lang="scss">
   ::v-deep .wd-picker__cell {
-    padding: 6px 0px;
+    padding: 12rpx 0px;
   }
 </style>

src/pages/myUser/component/setFocus.vue

@@ -6,145 +6,72 @@
 }
 </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: 24px; height: 24px" src="/src/static/icon/chevron-right.svg" />
-        </view>
-      </view>
-
-      <!-- 昵称 -->
+  <view>
+    <headerTitle title="设置"></headerTitle>
+    <view class="card-item">
       <view class="section" @click="nicknameBtn">
-        <view class="section-left">
-          <view class="label">昵称</view>
-          <view class="nickname">{{ nickname }}</view>
+        <view class="section-left">更换手机号码</view>
+        <view class="nickname">
+          <view class="phone">+8618716785955</view>
+          <view>
+            <image style="width: 48rpx; height: 48rpx" src="/src/static/icon/chevron-right.svg" />
+          </view>
         </view>
       </view>
-
-      <!-- 性别 -->
-      <ItemForm label="性别">
-        <template #default>
-          <pickerUser :columns="columns" :value="value" :title="gender" @confirm="handleConfirm" />
-        </template>
-      </ItemForm>
-
-      <!-- 生日 -->
-      <ItemForm label="生日">
-        <template #default>
-          <pickerUser :columns="columns" :value="value" :title="gender" @confirm="handleConfirm" />
-        </template>
-      </ItemForm>
+      <view class="clean" @click="cleanBtn">清除本地缓存</view>
+    </view>
+    <view class="baby-Bottom">
+      <wd-button @click="logOutBnt">退出登录</wd-button>
     </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'
-  const columns = ref(['男', '女', '保密'])
-  const value = ref('男')
-  const gender = ref('选择性别')
 
-  function handleConfirm(value) {
-    console.log('选择的值：', value)
-    // 处理确认后的操作
+  const cleanBtn = () => {
+    console.log('清楚缓存')
   }
-
-  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 birthdayBtn = () => {
-    console.log('点击生日')
+  const logOutBnt = () => {
+    console.log('退出登录')
   }
 </script>
 
 <style lang="scss" scoped>
-  .container {
-    min-height: 100vh;
-    background-color: #f2f2f2;
-  }
-
-  .content {
-    background-color: #ffffff;
+  .card-item {
+    height: calc(100vh - 280rpx);
+    background: #f2f2f2;
   }
-
   .section {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 16px;
-    border-bottom: 1px solid #f1f5f9;
+    padding: 32rpx;
+    background: #fff;
+    border-bottom: 2rpx solid #f1f5f9;
   }
-
   .section-left {
-    width: 100%;
-    height: 60px;
-  }
-
-  .label {
-    height: 30px;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 24px;
-  }
-
-  .avatar {
-    width: 52px;
-    height: 48px;
-    margin-right: 16px;
-    overflow: hidden;
-    border-radius: 50%;
-  }
-
-  .avatar-image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  .gender-container {
-    width: 100%;
+    display: flex;
+    align-items: center;
+    height: 60rpx;
   }
 
   .nickname {
     display: flex;
     align-items: center;
-    height: 30px;
-    font-family: 'PingFang SC';
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
+    height: 60rpx;
+    font-size: 28rpx;
+    .phone {
+      width: 100%;
+    }
+  }
+  .clean {
+    padding: 32rpx;
+    margin-top: 10px;
+    background: #fff;
   }
-  .gender {
-    padding: 5px 0px;
+  .baby-Bottom {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 128rpx;
+    padding: 16rpx 32rpx;
   }
 </style>

src/pages/myUser/component/userInformation.vue

@@ -0,0 +1,160 @@
+<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="/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 {
+    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;
+  }
+  ::v-deep .wd-picker__cell {
+    padding: 12rpx 0px;
+  }
+</style>

src/pages/myUser/myuser.vue

@@ -15,7 +15,7 @@
       <view class="avatar-container" @click="modifyBtn">
         <image :src="userInfo.avatar" class="avatar" mode="aspectFill" />
         <view class="avatar-badge">
-          <image style="width: 26px; height: 26px" src="/src/static/icon/modify.svg"></image>
+          <image style="width: 52rpx; height: 52rpx" src="/src/static/icon/modify.svg"></image>
         </view>
       </view>
       <text class="user-id">{{ userInfo.id }}</text>
@@ -29,9 +29,9 @@
         class="menu-item"
         @click="handleMenuClick(item.key, index)"
       >
-        <image style="width: 24px; height: 24px" :src="item.icon"></image>
+        <image style="width: 48rpx; height: 48rpx" :src="item.icon"></image>
         <view class="menu-label">{{ item.label }}</view>
-        <image style="width: 24px; height: 24px; margin-right: 15px" :src="item.right"></image>
+        <image style="width: 48rpx; height: 48rpx; margin-right: 30rpx" :src="item.right"></image>
       </view>
     </view>
   </view>
@@ -69,7 +69,7 @@
     console.log('Clicked menu item:', item, index)
     if (item === 'baby') {
       uni.navigateTo({
-        url: '/pages/myUser/component/babyInformation',
+        url: '/pages/myUser/component/myBaby',
       })
     } else if (item === 'notification') {
       uni.navigateTo({
@@ -82,14 +82,16 @@
     }
   }
   const modifyBtn = () => {
-    console.log('修改头像')
+    uni.navigateTo({
+      url: '/pages/myUser/component/userInformation',
+    })
   }
 </script>
 
 <style scoped>
   .container {
     min-height: 100vh;
-    font-size: 16px;
+    font-size: 32rpx;
     background-color: #f9fafb;
   }
 
@@ -98,8 +100,8 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    height: 175px;
-    padding: 36px 16px 0px 16px;
+    height: 350rpx;
+    padding: 72rpx 32rpx 0px 32rpx;
   }
 
   .avatar-container {
@@ -107,8 +109,8 @@
   }
 
   .avatar {
-    width: 88px;
-    height: 88px;
+    width: 176rpx;
+    height: 176rpx;
     border-radius: 50%;
   }
 
@@ -117,7 +119,7 @@
     right: 0;
     bottom: 0;
     background: #f88842;
-    border-radius: 24px;
+    border-radius: 24rpx;
   }
 
   .user-id {

src/static/icon/camera.svg

@@ -0,0 +1,6 @@
+<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 1532">
+<path id="Vector" d="M15.6027 13H2.3944C1.62449 13 1 12.39 1 11.6379V4.63231C1 3.88022 1.62449 3.2702 2.3944 3.2702H4.21939C4.43611 3.2702 4.64712 3.08357 4.66708 2.87187L4.72126 2.30919C4.79255 1.58774 5.45411 1 6.19836 1H11.8016C12.5459 1 13.2074 1.58774 13.2787 2.30919L13.3329 2.87187C13.3529 3.08357 13.5639 3.2702 13.7806 3.2702H15.6056C16.3755 3.2702 17 3.88022 17 4.63231V11.6379C16.9971 12.39 16.3727 13 15.6027 13ZM2.3944 4.27855C2.1948 4.27855 2.03226 4.43733 2.03226 4.63231V11.6379C2.03226 11.8301 2.19765 11.9916 2.3944 11.9916H15.6027C15.7995 11.9916 15.9649 11.8301 15.9649 11.6379V4.63231C15.9649 4.43733 15.8024 4.27855 15.6027 4.27855H13.7778C13.0335 4.27855 12.3719 3.69081 12.3007 2.96936L12.2465 2.40669C12.2265 2.19499 12.0155 2.00836 11.7988 2.00836H6.19836C5.98164 2.00836 5.77063 2.19499 5.75067 2.40669L5.69649 2.96936C5.6252 3.69081 4.96364 4.27855 4.21939 4.27855H2.3944Z" fill="white" stroke="white" stroke-width="0.6"/>
+<path id="Vector_2" d="M8.99872 11C7.34496 11 6 9.65447 6 8C6 6.34553 7.34496 5 8.99872 5C10.6525 5 12 6.34298 12 8C12 9.65702 10.6525 11 8.99872 11ZM8.99872 5.9217C7.85538 5.9217 6.92386 6.85362 6.92386 7.99745C6.92386 9.14128 7.85538 10.0732 8.99872 10.0732C10.1421 10.0732 11.0736 9.14128 11.0736 7.99745C11.0736 6.85362 10.1446 5.9217 8.99872 5.9217Z" fill="white" stroke="white" stroke-width="0.6"/>
+</g>
+</svg>

src/utils/times.js

@@ -0,0 +1,20 @@
+/**
+ * @formateDate  将格林威治时间转换为北京时间格式
+ * @date  格林威治标准时间格式
+ * @status times:时间戳
+ * @return str String  '2022-01-02 14:00:00'   '2022/01/02 14:00:00'
+ */
+export function formateDate(times, status = 1) {
+  const date = new Date(times)
+  const y = date.getFullYear()
+  let m = date.getMonth() + 1
+  let d = date.getDate()
+  m = m < 10 ? '0' + m : m
+  d = d < 10 ? '0' + d : d
+
+  let str = ''
+  if (status === 1 || status === 2) {
+    str = `${y}-${m}-${d}`
+  }
+  return str
+}