我的-个人信息

pages.json

@@ -42,11 +42,23 @@
       }
     },
     {
-      "path": "pages/mine/info/index",
+      "path": "pages/mine/me/index",
       "style": {
         "navigationBarTitleText": "个人信息"
       }
     },
+    {
+      "path": "pages/mine/me/basicInfo",
+      "style": {
+        "navigationBarTitleText": "基本信息"
+      }
+    },
+    {
+      "path": "pages/mine/me/bindingPhone",
+      "style": {
+        "navigationBarTitleText": "已绑定手机号"
+      }
+    },
     {
       "path": "pages/mine/info/edit",
       "style": {

pages/mine/index.vue

@@ -1,198 +1,180 @@
 <template>
-  <view class="mine-container" :style="{height: `${windowHeight}px`}">
-    <!--顶部个人信息栏-->
-    <view class="header-section">
-      <view class="flex padding justify-between">
-        <view class="flex align-center">
-          <view v-if="!avatar" class="cu-avatar xl round bg-white">
-            <view class="iconfont icon-people text-gray icon"></view>
-          </view>
-          <image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round" mode="widthFix">
-          </image>
-          <view v-if="!name" @click="handleToLogin" class="login-tip">
-            点击登录
-          </view>
-          <view v-if="name" @click="handleToInfo" class="user-info">
-            <view class="u_title">
-              用户名：{{ name }}
-            </view>
-          </view>
-        </view>
-        <view @click="handleToInfo" class="flex align-center">
-          <text>个人信息</text>
-          <view class="iconfont icon-right"></view>
-        </view>
+  <view class="container">
+    <!-- 顶部标题 -->
+    <view class="header">
+      <text class="title">我的</text>
+    </view>
+
+    <!-- 用户信息区域 -->
+    <view class="user-info">
+      <view class="avatar-wrapper">
+        <image class="avatar" src="/static/avatar.png" mode="aspectFill"></image>
+      </view>
+      <view class="user-detail">
+        <text class="username">冯武鹏</text>
+      </view>
+      <view class="star-icon">
+        <uni-icons type="star" size="24" color="#ff9900"></uni-icons>
       </view>
     </view>
 
-    <view class="content-section">
-      <view class="mine-actions grid col-4 text-center">
-        <view class="action-item" @click="handleJiaoLiuQun">
-          <view class="iconfont icon-friendfill text-pink icon"></view>
-          <text class="text">交流群</text>
+    <!-- 我的服务区域 -->
+    <view class="services">
+      <text class="services-title">我的服务</text>
+      <view class="grid-container">
+        <!-- 个人信息 -->
+        <view class="grid-item" @click="navigateTo('/pages/mine/me/index')">
+
+          <view class="icon-wrapper">
+<!--            <uni-icons type="person" size="24" color="#666"></uni-icons>-->
+            <image style="width: 28px;height: 28px;" src="/static/images/my/notice.png"></image>
+          </view>
+          <text class="icon-text">个人信息</text>
         </view>
-        <view class="action-item" @click="handleBuilding">
-          <view class="iconfont icon-service text-blue icon"></view>
-          <text class="text">在线客服</text>
+
+        <!-- 通知公告 -->
+        <view class="grid-item" @click="navigateTo('/pages/mine/me/index')">
+          <view class="icon-wrapper">
+<!--            <uni-icons type="notification" size="24" color="#666"></uni-icons>-->
+            <image style="width: 28px;height: 28px;" src="/static/images/my/notice.png"></image>
+          </view>
+          <text class="icon-text">通知公告</text>
         </view>
-        <view class="action-item" @click="handleBuilding">
-          <view class="iconfont icon-community text-mauve icon"></view>
-          <text class="text">反馈社区</text>
+
+        <!-- 投诉建议 -->
+        <view class="grid-item" @click="navigateTo('/pages/feedback/index')">
+          <view class="icon-wrapper">
+<!--            <uni-icons type="chat" size="24" color="#666"></uni-icons>-->
+            <image style="width: 28px;height: 28px;" src="/static/images/my/complaints.png"></image>
+          </view>
+          <text class="icon-text">投诉建议</text>
         </view>
-        <view class="action-item" @click="handleBuilding">
-          <view class="iconfont icon-dianzan text-green icon"></view>
-          <text class="text">点赞我们</text>
+
+        <!-- 食堂评价 -->
+        <view class="grid-item" @click="navigateTo('/pages/review/index')">
+          <view class="icon-wrapper">
+<!--            <uni-icons type="star" size="24" color="#666"></uni-icons>-->
+            <image style="width: 28px;height: 28px;" src="/static/images/my/evaluation.png"></image>
+          </view>
+          <text class="icon-text">食堂评价</text>
+        </view>
+
+        <!-- 体检报告 -->
+        <view class="grid-item" @click="navigateTo('/pages/survey/index')">
+          <view class="icon-wrapper">
+<!--            <uni-icons type="help" size="24" color="#666"></uni-icons>-->
+            <image style="width: 28px;height: 28px;" src="/static/images/my/report.png"></image>
+          </view>
+          <text class="icon-text">体检报告</text>
         </view>
       </view>
-
-      <view class="menu-list">
-        <view class="list-cell list-cell-arrow" @click="handleToEditInfo">
-          <view class="menu-item-box">
-            <view class="iconfont icon-user menu-icon"></view>
-            <view>编辑资料</view>
-          </view>
-        </view>
-        <view class="list-cell list-cell-arrow" @click="handleHelp">
-          <view class="menu-item-box">
-            <view class="iconfont icon-help menu-icon"></view>
-            <view>常见问题</view>
-          </view>
-        </view>
-        <view class="list-cell list-cell-arrow" @click="handleAbout">
-          <view class="menu-item-box">
-            <view class="iconfont icon-aixin menu-icon"></view>
-            <view>关于我们</view>
-          </view>
-        </view>
-        <view class="list-cell list-cell-arrow" @click="handleToSetting">
-          <view class="menu-item-box">
-            <view class="iconfont icon-setting menu-icon"></view>
-            <view>应用设置</view>
-          </view>
-        </view>
-      </view>
-
     </view>
   </view>
 </template>
 
 <script>
-  import storage from '@/utils/storage'
-  
-  export default {
-    data() {
-      return {
-        name: this.$store.state.user.name,
-        version: getApp().globalData.config.appInfo.version
-      }
-    },
-    computed: {
-      avatar() {
-        return this.$store.state.user.avatar
-      },
-      windowHeight() {
-        return uni.getSystemInfoSync().windowHeight - 50
-      }
-    },
-    methods: {
-      handleToInfo() {
-        this.$tab.navigateTo('/pages/mine/info/index')
-      },
-      handleToEditInfo() {
-        this.$tab.navigateTo('/pages/mine/info/edit')
-      },
-      handleToSetting() {
-        this.$tab.navigateTo('/pages/mine/setting/index')
-      },
-      handleToLogin() {
-        this.$tab.reLaunch('/pages/login')
-      },
-      handleToAvatar() {
-        this.$tab.navigateTo('/pages/mine/avatar/index')
-      },
-      handleLogout() {
-        this.$modal.confirm('确定注销并退出系统吗？').then(() => {
-          this.$store.dispatch('LogOut').then(() => {
-            this.$tab.reLaunch('/pages/index')
-          })
-        })
-      },
-      handleHelp() {
-        this.$tab.navigateTo('/pages/mine/help/index')
-      },
-      handleAbout() {
-        this.$tab.navigateTo('/pages/mine/about/index')
-      },
-      handleJiaoLiuQun() {
-        this.$modal.showToast('QQ群：①133713780、②146013835')
-      },
-      handleBuilding() {
-        this.$modal.showToast('模块建设中~')
-      }
+export default {
+  data() {
+    return {}
+  },
+  methods: {
+    navigateTo(url) {
+      uni.navigateTo({
+        url
+      })
     }
   }
+}
 </script>
 
 <style lang="scss">
-  page {
-    background-color: #f5f6f7;
+.container {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+}
+
+.header {
+  padding: 44px 16px 16px;
+  background: #fff;
+
+  .title {
+    font-size: 18px;
+    font-weight: 500;
+    color: #333;
+  }
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  background: #fff;
+  margin-bottom: 10px;
+
+  .avatar-wrapper {
+    margin-right: 12px;
+
+    .avatar {
+      width: 60px;
+      height: 60px;
+      border-radius: 30px;
+    }
   }
 
-  .mine-container {
-    width: 100%;
-    height: 100%;
+  .user-detail {
+    flex: 1;
 
-
-    .header-section {
-      padding: 15px 15px 45px 15px;
-      background-color: #3c96f3;
-      color: white;
-
-      .login-tip {
-        font-size: 18px;
-        margin-left: 10px;
-      }
-
-      .cu-avatar {
-        border: 2px solid #eaeaea;
-
-        .icon {
-          font-size: 40px;
-        }
-      }
-
-      .user-info {
-        margin-left: 15px;
-
-        .u_title {
-          font-size: 18px;
-          line-height: 30px;
-        }
-      }
+    .username {
+      font-size: 18px;
+      font-weight: 500;
+      color: #333;
     }
+  }
 
-    .content-section {
-      position: relative;
-      top: -50px;
+  .star-icon {
+    padding: 8px;
+  }
+}
 
-      .mine-actions {
-        margin: 15px 15px;
-        padding: 20px 0px;
-        border-radius: 8px;
-        background-color: white;
+.services {
+  background: #fff;
+  padding: 16px;
 
-        .action-item {
-          .icon {
-            font-size: 28px;
-          }
+  .services-title {
+    font-size: 16px;
+    color: #333;
+    margin-bottom: 26px;
 
-          .text {
-            display: block;
-            font-size: 13px;
-            margin: 8px 0px;
-          }
-        }
+    font-weight: 400;
+  }
+
+  .grid-container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px;
+
+    .grid-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .icon-wrapper {
+        width: 48px;
+        height: 48px;
+        //border-radius: 24px;
+        //background: #f5f5f5;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 3px;
+      }
+
+      .icon-text {
+        font-size: 14px;
+        color: #666;
       }
     }
   }
+}
 </style>
+

pages/mine/me/basicInfo.vue

@@ -0,0 +1,176 @@
+<template>
+  <view class="container">
+    <!-- 顶部导航栏 -->
+<!--    <view class="header">-->
+<!--      <view class="back-icon" @click="goBack">-->
+<!--        <image class="icon" :src="require('@/static/images/icons/back.png')" mode="aspectFit"></image>-->
+<!--      </view>-->
+<!--      <text class="title">基本信息</text>-->
+<!--    </view>-->
+
+    <!-- 个人信息表单 -->
+    <view class="form-container">
+      <!-- 头像区域 -->
+      <view class="avatar-section" @click="handleUpdateAvatar">
+        <image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
+        <view class="camera-icon">
+          <image class="icon" :src="require('@/static/images/my/notice.png')" mode="aspectFit"></image>
+        </view>
+      </view>
+
+      <!-- 信息列表 -->
+      <view class="info-list">
+        <!-- 姓名 -->
+        <view class="info-item" @click="navigateTo('/pages/edit-name/index')">
+          <text class="label">姓名</text>
+          <view class="value-wrapper">
+            <text class="value">冯武鹏</text>
+            <image class="arrow-icon" :src="require('@/static/images/my/enter.png')" mode="aspectFit"></image>
+          </view>
+        </view>
+
+        <!-- 手机号 -->
+        <view class="info-item" @click="navigateTo('/pages/mine/me/bindingPhone')">
+          <text class="label">手机号</text>
+          <view class="value-wrapper">
+            <text class="value">18407028572</text>
+            <image class="arrow-icon" :src="require('@/static/images/my/enter.png')" mode="aspectFit"></image>
+          </view>
+        </view>
+
+        <!-- 生日 -->
+        <view class="info-item" @click="navigateTo('/pages/edit-birthday/index')">
+          <text class="label">生日</text>
+          <view class="value-wrapper">
+            <text class="value placeholder">填写生日完善信息</text>
+            <image class="arrow-icon" :src="require('@/static/images/my/enter.png')" mode="aspectFit"></image>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      userInfo: {
+        avatar: require('@/static/images/my/notice.png'),
+        name: '冯武鹏',
+        phone: '18407028572',
+        birthday: ''
+      }
+    }
+  },
+  methods: {
+    goBack() {
+      uni.navigateBack()
+    },
+    navigateTo(url) {
+      uni.navigateTo({
+        url
+      })
+    },
+    handleUpdateAvatar() {
+      uni.chooseImage({
+        count: 1,
+        sizeType: ['compressed'],
+        sourceType: ['album', 'camera'],
+        success: (res) => {
+          // 这里可以处理选择的图片，比如上传到服务器
+          this.userInfo.avatar = res.tempFilePaths[0]
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.container {
+  min-height: 100vh;
+  background-color: #FBFCFF;
+}
+
+.form-container {
+  margin-top: 50rpx;
+  padding: 32rpx;
+  background-color: #FBFCFF;
+}
+
+.avatar-section {
+  position: relative;
+  width: 160rpx;
+  height: 160rpx;
+  margin: 0 auto 48rpx;
+
+  .avatar {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+  }
+
+  .camera-icon {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 48rpx;
+    height: 48rpx;
+    background: #fff;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+
+    .icon {
+      width: 32rpx;
+      height: 32rpx;
+    }
+  }
+}
+
+.info-list {
+  background: #fff;
+  border-radius: 16rpx;
+
+  .info-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 32rpx;
+    border-bottom: 1rpx solid #FFFFFF;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .label {
+      font-size: 32rpx;
+      color: #333;
+    }
+
+    .value-wrapper {
+      display: flex;
+      align-items: center;
+
+      .value {
+        font-size: 32rpx;
+        color: #333;
+        margin-right: 16rpx;
+
+        &.placeholder {
+          color: #999;
+        }
+      }
+
+      .arrow-icon {
+        width: 32rpx;
+        height: 32rpx;
+      }
+    }
+  }
+}
+</style>
+

pages/mine/me/bindingPhone.vue

@@ -0,0 +1,205 @@
+<template>
+  <view class="container">
+    <!-- 顶部导航栏 -->
+<!--    <view class="header">-->
+<!--      <view class="back-icon" @click="goBack">-->
+<!--        <image class="icon" :src="require('@/static/images/icons/back.png')" mode="aspectFit"></image>-->
+<!--      </view>-->
+<!--      <text class="title">更换手机号</text>-->
+<!--    </view>-->
+
+    <!-- 主要内容区域 -->
+    <view class="content">
+      <!-- 手机图标区域 -->
+      <view class="phone-icon-wrapper">
+        <view class="circle-bg"></view>
+        <image class="phone-icon" :src="require('@/static/images/my/notice.png')" mode="aspectFit"></image>
+      </view>
+
+      <!-- 手机号信息 -->
+      <view class="phone-info">
+        <text class="label">已绑定手机号</text>
+        <text class="phone-number">184****8572</text>
+      </view>
+
+      <!-- 提示信息 -->
+      <view class="tips">
+        <view class="tip-item">
+          <text class="number">1.</text>
+          <text class="text">更换后将使用新的手机号登录</text>
+        </view>
+        <view class="tip-item">
+          <text class="number">2.</text>
+          <text class="text">原手机号记录全部转移至新手机号</text>
+        </view>
+      </view>
+
+      <!-- 更换按钮 -->
+      <button class="change-btn" @click="handleChangePhone">更换手机号</button>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      currentPhone: '18407028572'
+    }
+  },
+  methods: {
+    goBack() {
+      uni.navigateBack()
+    },
+    handleChangePhone() {
+      uni.navigateTo({
+        url: '/pages/verify-phone/index'
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.container {
+  min-height: 100vh;
+  background-color: #fff;
+}
+
+.header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 88rpx;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  padding: 0 32rpx;
+  padding-top: 44px;
+  z-index: 100;
+
+  .back-icon {
+    padding: 20rpx;
+    margin-left: -20rpx;
+
+    .icon {
+      width: 40rpx;
+      height: 40rpx;
+    }
+  }
+
+  .title {
+    flex: 1;
+    text-align: center;
+    font-size: 34rpx;
+    font-weight: 500;
+    color: #333;
+    margin-right: 60rpx;
+  }
+}
+
+.content {
+  margin-top: 50rpx;
+  padding: 32rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.phone-icon-wrapper {
+  position: relative;
+  width: 240rpx;
+  height: 240rpx;
+  margin-bottom: 48rpx;
+
+  .circle-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(255,129,38,0.1) 0%, rgba(255,129,38,0.05) 50%, rgba(255,129,38,0) 100%);
+  }
+
+  .phone-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 80rpx;
+    height: 80rpx;
+    color: #FF8126;
+  }
+}
+
+.phone-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 48rpx;
+
+  .label {
+    font-size: 28rpx;
+    color: #999;
+    margin-bottom: 16rpx;
+  }
+
+  .phone-number {
+    font-size: 40rpx;
+    color: #333;
+    font-weight: 500;
+  }
+}
+
+.tips {
+  width: 100%;
+  margin-bottom: 80rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .tip-item {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 16rpx;
+    width: 80%;  /* 控制提示文本的宽度，可以根据需要调整 */
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .number {
+      font-size: 28rpx;
+      color: #999;
+      margin-right: 8rpx;
+    }
+
+    .text {
+      font-size: 28rpx;
+      color: #999;
+      flex: 1;
+    }
+  }
+}
+
+.change-btn {
+  width: 100%;
+  height: 88rpx;
+  background: #FF8126;
+  color: #fff;
+  font-size: 32rpx;
+  font-weight: 500;
+  border-radius: 44rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+
+  &:active {
+    opacity: 0.9;
+  }
+}
+</style>
+

pages/mine/me/index.vue

@@ -0,0 +1,136 @@
+<template>
+  <view class="container">
+    <!-- 顶部导航栏 -->
+<!--    <view class="header">-->
+<!--      <view class="back-icon" @click="goBack">-->
+<!--        <image class="icon" :src="require('@/static/images/my/notice.png')" mode="aspectFit"></image>-->
+<!--      </view>-->
+<!--      <text class="title">个人信息</text>-->
+<!--    </view>-->
+
+    <!-- 菜单列表 -->
+    <view class="menu-list">
+      <view
+        v-for="(item, index) in menuItems"
+        :key="index"
+        class="menu-item"
+        @click="navigateTo(item.path)"
+      >
+        <text class="menu-text">{{ item.title }}</text>
+        <image class="arrow-icon" :src="require('@/static/images/my/enter.png')" mode="aspectFit"></image>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      menuItems: [
+        {
+          title: '基本信息',
+          path: '/pages/mine/me/basicInfo'
+        },
+        {
+          title: '我的地址',
+          path: '/pages/my-address/index'
+        },
+        {
+          title: '健康信息',
+          path: '/pages/health-info/index'
+        },
+        {
+          title: '人脸上传',
+          path: '/pages/face-upload/index'
+        },
+        {
+          title: '修改密码',
+          path: '/pages/change-password/index'
+        },
+        {
+          title: '挂失解绑',
+          path: '/pages/unbind/index'
+        }
+      ]
+    }
+  },
+  methods: {
+    goBack() {
+      uni.navigateBack()
+    },
+    navigateTo(url) {
+      uni.navigateTo({
+        url
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.container {
+  background-color: #FBFCFF;
+}
+
+.header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 88rpx;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  padding: 0 32rpx;
+  padding-top: 44px;
+  z-index: 100;
+
+  .back-icon {
+    padding: 20rpx;
+    margin-left: -20rpx;
+
+    .icon {
+      width: 40rpx;
+      height: 40rpx;
+    }
+  }
+
+  .title {
+    flex: 1;
+    text-align: center;
+    font-size: 34rpx;
+    font-weight: 500;
+    color: #333;
+    margin-right: 60rpx;
+  }
+}
+
+.menu-list {
+  margin-top: 50rpx;
+  background: #FFFFFF;
+
+  .menu-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 32rpx;
+    border-bottom: 1rpx solid #f5f5f5;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .menu-text {
+      font-size: 32rpx;
+      color: #333;
+    }
+
+    .arrow-icon {
+      width: 32rpx;
+      height: 32rpx;
+    }
+  }
+}
+</style>
+