feat: 个人编辑页

components/PickerCustom.vue

+<template>
+  <view class="picker-custom">
+    <!-- 插槽内容，点击触发弹层 -->
+    <view @click="open">
+      <slot></slot>
+    </view>
+    <!-- 遮罩层 -->
+    <view v-if="show" class="picker-layer-mask" @click="close"></view>
+    <!-- 底部弹出层 -->
+    <view v-if="show" class="picker-layer-popup">
+      <view class="picker-layer-panel">
+        <!-- 可自定义头部 -->
+        <view class="picker-layer-header">
+          <text @click="close" class="picker-layer-cancel">取消</text>
+          <text @click="confirm" class="picker-layer-confirm">确定</text>
+        </view>
+        <view class="picker-layer-view-mask-top"></view>
+        <view class="picker-layer-view-mask-bottom"></view>
+
+        <!-- 半屏picker-view -->
+        <picker-view
+          class="picker-layer-view"
+          mask-style="background: rgb(246, 248, 250); z-index: 0;"
+          indicator-style="border-radius: 10px; height: 50px;background:#ffffff; z-index:0"
+          :value="pickerValue"
+          @change="onChange"
+        >
+          <picker-view-column>
+            <view
+              v-for="(item, idx) in range"
+              :key="idx"
+              class="picker-layer-item"
+            >
+              {{ item }}
+            </view>
+          </picker-view-column>
+        </picker-view>
+      </view>
+    </view>
+  </view>
+</template>
+<script setup>
+import { ref } from "vue";
+
+const props = defineProps({
+  range: {
+    type: Array,
+    default: () => [],
+  },
+  value: {
+    default: 0,
+  },
+  onPickerChange: {
+    type: Function,
+    default: () => {},
+  },
+  onLayerVisibleChange: {
+    type: Function,
+    default: () => {},
+  },
+});
+
+const show = ref(false);
+
+const pickerValue = ref(props.value);
+
+function open() {
+  pickerValue.value = props.value;
+  show.value = true;
+
+  props.onLayerVisibleChange(true);
+}
+function close() {
+  show.value = false;
+  props.onLayerVisibleChange(false);
+}
+function confirm() {
+  /* 处理选中逻辑 */ close();
+  props.onPickerChange(pickerValue.value);
+}
+function onChange(e) {
+  console.log("onPcikChange", e);
+
+  pickerValue.value = e.detail.value;
+}
+</script>
+<style lang="less" scoped>
+.picker-layer-mask {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 3999;
+}
+.picker-layer-popup {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 4000;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  animation: picker-layer-up 0.3s;
+}
+@keyframes picker-layer-up {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+.picker-layer-panel {
+  width: 100vw;
+  height: 50vh;
+  background: #f6f8fa;
+  border-top-left-radius: 24rpx;
+  border-top-right-radius: 24rpx;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.picker-layer-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 140rpx;
+  box-sizing: border-box;
+  background: #f6f8fa;
+  padding: 0 32rpx;
+  .picker-layer-cancel {
+    color: #6f6d67;
+    font-size: 28rpx;
+    width: 136rpx;
+    height: 74rpx;
+    border-radius: 20rpx;
+    background: #ffffff;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .picker-layer-confirm {
+    color: #ffffff;
+    font-size: 28rpx;
+    width: 136rpx;
+    height: 74rpx;
+    border-radius: 20rpx;
+    background: #d3a358;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .picker-layer-title {
+    color: #222;
+    font-size: 32rpx;
+    font-weight: bold;
+  }
+}
+.picker-layer-view {
+  flex: 1;
+  width: 100%;
+}
+.picker-layer-item {
+  height: 100rpx;
+  line-height: 100rpx;
+  text-align: center;
+  font-size: 32rpx;
+  color: #1d1e25;
+}
+
+.picker-layer-view-mask-top {
+  position: absolute;
+  top: 140rpx;
+  left: 0;
+  width: 100%;
+  height: calc(50% - 100rpx);
+  z-index: 1;
+  background: linear-gradient(
+    to bottom,
+    rgb(246, 248, 250) 0%,
+    rgba(255, 255, 255, 0.5) 100%
+  );
+  pointer-events: none;
+}
+
+.picker-layer-view-mask-bottom {
+  position: absolute;
+  bottom: 0rpx;
+  left: 0;
+  width: 100%;
+  height: calc(50% - 100rpx);
+  z-index: 1;
+  background: linear-gradient(
+    to top,
+    rgb(246, 248, 250) 0%,
+    rgba(255, 255, 255, 0.5) 100%
+  );
+  pointer-events: none;
+}
+
+</style>
\ No newline at end of file

views/My.vue

@@ -25,6 +25,7 @@
           src="/static/my/icon_modify.png"
           mode="aspectFit"
           lazy-load="false"
+          @click="handleEditProfile"
         />
 
         <view class="user-detail">
@@ -38,7 +39,27 @@
       </view>
       <!-- user desc -->
       <view class="user-desc">
-        <text class="desc-text"> </text>
+        <view class="desc-top">
+          <text class="desc-title">宝宝变化</text>
+          <text class="desc-age">
+            {{ babyDetail[0].age }}
+          </text>
+        </view>
+
+        <view class="desc-content">
+          <text class="desc-text"
+            >{{
+              cfgStatus.openBabyCardDesc
+                ? babyDetail[0].desc
+                : babyDetail[0].desc.slice(0, 46) + "..."
+            }}
+          </text>
+          <text
+            class="desc-more"
+            @click="cfgStatus.openBabyCardDesc = !cfgStatus.openBabyCardDesc"
+            >{{ cfgStatus.openBabyCardDesc ? "点击收起" : "点击展开" }}</text
+          >
+        </view>
       </view>
     </view>
     <!-- 工具 -->
@@ -63,6 +84,17 @@
 <script setup>
 import { ref, onMounted } from "vue";
 
+const cfgStatus = ref({
+  openBabyCardDesc: false,
+});
+
+const babyDetail = ref([
+  {
+    age: "2月龄",
+    desc: "宝宝开始对周围环境产生兴趣，喜欢看、听、摸，开始对玩具感兴趣，开始对妈妈的声音产生反应。宝宝开始对周围环境产生兴趣，喜欢看、听、摸，开始对玩具感兴趣，开始对妈妈的声音产生反应。宝宝开始对周围环境产生兴趣，喜欢看、听、摸，开始对玩具感兴趣，开始对妈妈的声音产生反应。",
+  },
+]);
+
 const toolList = ref([
   {
     icon: "/static/my/code.png",
@@ -126,6 +158,7 @@ const handleHot = (e) => {
 const navigateTo = (url) => {
   uni.navigateTo({
     url,
+    animationDuration: 0,
     fail: (err) => {
       console.error("页面跳转失败:", err);
       uni.showToast({
@@ -138,7 +171,7 @@ const navigateTo = (url) => {
 
 // 编辑个人资料
 const handleEditProfile = () => {
-  navigateTo("/pages/user/profile");
+  navigateTo("/pages/person/person");
 };
 
 // 联系客服
@@ -238,7 +271,7 @@ defineExpose({});
     background-color: @color-white-soft;
 
     width: 686rpx;
-    height: 343rpx;
+    min-height: 343rpx;
     box-sizing: border-box;
     border-radius: 32rpx;
     position: relative;
@@ -339,14 +372,56 @@ defineExpose({});
 
     .user-desc {
       width: 100%;
-      height: 182rpx;
+      height: calc(100% - 161rpx);
       background-color: #fff;
       border-radius: 32rpx;
-      padding: 30rpx 32rpx;
+      padding: 32rpx 30rpx;
       box-sizing: border-box;
-      position: absolute;
-      bottom: 0;
-      left: 0;
+      margin-top: 161rpx;
+
+      .desc-top {
+        display: flex;
+        align-items: center;
+      }
+
+      .desc-title {
+        font-size: 32rpx;
+        font-weight: 500;
+        color: @color-black-deep;
+      }
+
+      .desc-age {
+        font-size: 24rpx;
+        color: @color-gold-cover;
+        background-color: #fef7f2;
+        padding: 7rpx 10rpx;
+        border-radius: 10rpx;
+        margin-left: 8rpx;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .desc-text {
+        font-size: 24rpx;
+        line-height: 34rpx;
+        display: inline-block;
+      }
+
+      .desc-more {
+        font-size: 24rpx;
+        color: @color-gold-cover;
+        line-height: 34rpx;
+        display: inline-block;
+        position: absolute;
+        right: 0;
+        bottom: 0;
+      }
+
+      .desc-content {
+        margin-top: 32rpx;
+        position: relative;
+      }
     }
   }
 
@@ -381,8 +456,7 @@ defineExpose({});
         }
       }
     }
-
-   
+  }
 
   .protocol-container {
     width: 360rpx;