From 3401859db972e9656088c9e4be31cbf61cce611a Mon Sep 17 00:00:00 2001
From: liruiqiang <3151805288@qq.com>
Date: Thu, 21 Aug 2025 14:40:18 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E4=BF=A1=E6=81=AF=E6=B8=B2?=
 =?UTF-8?q?=E6=9F=93=E4=B8=8E=E5=A4=B4=E5=83=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages.json                      |   9 ++
 src/pagesMember/profile/profile.vue | 257 ++++++++++++++++++++++++++++++++++++
 src/services/profile.ts             |  12 ++
 src/types/member.d.ts               |  22 ++-
 4 files changed, 298 insertions(+), 2 deletions(-)
 create mode 100644 src/pagesMember/profile/profile.vue
 create mode 100644 src/services/profile.ts

diff --git a/src/pages.json b/src/pages.json
index bcd945d..a28244d 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -113,6 +113,15 @@
           {
             "navigationBarTitleText" : "设置"
           }
+        },
+        {
+          "path" : "profile/profile",
+          "style" :
+          {
+            "navigationStyle": "custom",
+            "navigationBarTextStyle": "white",
+            "navigationBarTitleText" : "个人中心"
+          }
         }
       ]
     }
diff --git a/src/pagesMember/profile/profile.vue b/src/pagesMember/profile/profile.vue
new file mode 100644
index 0000000..f1c0a52
--- /dev/null
+++ b/src/pagesMember/profile/profile.vue
@@ -0,0 +1,257 @@
+<template>
+  <view class="viewport">
+    <!-- 导航栏 -->
+    <view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
+      <navigator open-type="navigateBack" class="back icon-left" hover-class="none"></navigator>
+      <view class="title">个人信息</view>
+    </view>
+    <!-- 头像 -->
+    <view class="avatar">
+      <view class="avatar-content" @tap="onAvatarChange">
+        <image class="image" :src="profile?.avatar" mode="aspectFill" />
+        <text class="text">点击修改头像</text>
+      </view>
+    </view>
+    <!-- 表单 -->
+    <view class="form">
+      <!-- 表单内容 -->
+      <view class="form-content">
+        <view class="form-item">
+          <text class="label">账号</text>
+          <text class="account">{{ profile?.account }}</text>
+        </view>
+        <view class="form-item">
+          <text class="label">昵称</text>
+          <input class="input" type="text" placeholder="请填写昵称" :value="profile?.nickname" />
+        </view>
+        <view class="form-item">
+          <text class="label">性别</text>
+          <radio-group>
+            <label class="radio">
+              <radio value="男" color="#27ba9b" :checked="profile?.gender === '男'" />
+              男
+            </label>
+            <label class="radio">
+              <radio value="女" color="#27ba9b" :checked="profile?.gender === '女'" />
+              女
+            </label>
+          </radio-group>
+        </view>
+        <view class="form-item">
+          <text class="label">生日</text>
+          <picker
+            class="picker"
+            mode="date"
+            start="1900-01-01"
+            :end="new Date()"
+            :value="profile?.birthday"
+          >
+            <view v-if="profile?.birthday">{{ profile?.birthday }}</view>
+            <view class="placeholder" v-else>请选择日期</view>
+          </picker>
+        </view>
+        <!-- 只有微信小程序端内置了省市区数据 -->
+        <!-- #ifdef MP-WEIXIN -->
+        <view class="form-item">
+          <text class="label">城市</text>
+          <picker class="picker" mode="region" :value="profile?.fullLocation?.split(' ')">
+            <view v-if="profile?.fullLocation">{{ profile?.fullLocation }}</view>
+            <view class="placeholder" v-else>请选择城市</view>
+          </picker>
+        </view>
+        <!-- #endif -->
+        <view class="form-item">
+          <text class="label">职业</text>
+          <input class="input" type="text" placeholder="请填写职业" :value="profile?.profession" />
+        </view>
+      </view>
+      <!-- 提交按钮 -->
+      <button class="form-button">保 存</button>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { onLoad } from '@dcloudio/uni-app'
+import { ref } from 'vue'
+import type { Gender, ProfileDetail } from '@/types/member'
+import { getMemberProfileAPI } from '@/services/profile'
+
+// 获取屏幕边界到安全区域距离
+const { safeAreaInsets } = uni.getSystemInfoSync()
+
+// 获取个人信息
+const profile = ref<ProfileDetail>()
+const getMemberProfileData = async () => {
+  const res = await getMemberProfileAPI()
+  profile.value = res.result
+}
+
+// 修改头像
+const onAvatarChange = () => {
+  // 调用拍照/选择图片
+  uni.chooseMedia({
+    // 文件个数
+    count: 1,
+    // 文件类型
+    mediaType: ['image'],
+    success: (res) => {
+      // 本地路径
+      const { tempFilePath } = res.tempFiles[0]
+      // 文件上传
+      uni.uploadFile({
+        url: '/member/profile/avatar',
+        name: 'file', // 后端数据字段名
+        filePath: tempFilePath, // 新头像
+        success: (res) => {
+          // 判断状态码是否上传成功
+          if (res.statusCode === 200) {
+            // 提取头像
+            const { avatar } = JSON.parse(res.data).result
+            // 当前页面更新头像
+            profile.value!.avatar = avatar
+            uni.showToast({ icon: 'success', title: '更新成功' })
+          } else {
+            uni.showToast({ icon: 'error', title: '出现错误' })
+          }
+        },
+      })
+    },
+  })
+}
+
+onLoad(() => {
+  getMemberProfileData()
+})
+</script>
+
+<style lang="scss">
+page {
+  background-color: #f4f4f4;
+}
+
+.viewport {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/order_bg.png);
+  background-size: auto 420rpx;
+  background-repeat: no-repeat;
+}
+
+// 导航栏
+.navbar {
+  position: relative;
+
+  .title {
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 16px;
+    font-weight: 500;
+    color: #fff;
+  }
+
+  .back {
+    position: absolute;
+    height: 40px;
+    width: 40px;
+    left: 0;
+    font-size: 20px;
+    color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+// 头像
+.avatar {
+  text-align: center;
+  width: 100%;
+  height: 260rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .image {
+    width: 160rpx;
+    height: 160rpx;
+    border-radius: 50%;
+    background-color: #eee;
+  }
+
+  .text {
+    display: block;
+    padding-top: 20rpx;
+    line-height: 1;
+    font-size: 26rpx;
+    color: #fff;
+  }
+}
+
+// 表单
+.form {
+  background-color: #f4f4f4;
+
+  &-content {
+    margin: 20rpx 20rpx 0;
+    padding: 0 20rpx;
+    border-radius: 10rpx;
+    background-color: #fff;
+  }
+
+  &-item {
+    display: flex;
+    height: 96rpx;
+    line-height: 46rpx;
+    padding: 25rpx 10rpx;
+    background-color: #fff;
+    font-size: 28rpx;
+    border-bottom: 1rpx solid #ddd;
+
+    &:last-child {
+      border: none;
+    }
+
+    .label {
+      width: 180rpx;
+      color: #333;
+    }
+
+    .account {
+      color: #666;
+    }
+
+    .input {
+      flex: 1;
+      display: block;
+      height: 46rpx;
+    }
+
+    .radio {
+      margin-right: 20rpx;
+    }
+
+    .picker {
+      flex: 1;
+    }
+    .placeholder {
+      color: #808080;
+    }
+  }
+
+  &-button {
+    height: 80rpx;
+    text-align: center;
+    line-height: 80rpx;
+    margin: 30rpx 20rpx;
+    color: #fff;
+    border-radius: 80rpx;
+    font-size: 30rpx;
+    background-color: #27ba9b;
+  }
+}
+</style>
diff --git a/src/services/profile.ts b/src/services/profile.ts
new file mode 100644
index 0000000..eb224f0
--- /dev/null
+++ b/src/services/profile.ts
@@ -0,0 +1,12 @@
+import type { ProfileDetail } from '@/types/member'
+import { http } from '@/utils/http'
+
+/**
+ * 获取个人信息
+ */
+export const getMemberProfileAPI = () => {
+  return http<ProfileDetail>({
+    method: 'GET',
+    url: '/member/profile',
+  })
+}
diff --git a/src/types/member.d.ts b/src/types/member.d.ts
index 05a7384..85dda74 100644
--- a/src/types/member.d.ts
+++ b/src/types/member.d.ts
@@ -1,5 +1,5 @@
-/** 小程序登录 登录用户信息 */
-export type LoginResult = {
+/** 封装通用信息 */
+type BaseProfile = {
   /** 用户ID */
   id: number
   /** 头像  */
@@ -8,8 +8,26 @@ export type LoginResult = {
   account: string
   /** 昵称 */
   nickname?: string
+}
+
+/** 小程序登录 登录用户信息 */
+export type LoginResult = BaseProfile & {
   /** 手机号 */
   mobile: string
   /** 登录凭证 */
   token: string
 }
+
+/** 个人信息 用户详情信息 */
+export type ProfileDetail = BaseProfile & {
+  /** 性别 */
+  gender?: Gender
+  /** 生日 */
+  birthday?: string
+  /** 省市区 */
+  fullLocation?: string
+  /** 职业 */
+  profession?: string
+}
+/** 性别 */
+export type Gender = '女' | '男'