用户详情

common/server/user.js

@@ -48,5 +48,22 @@ export const mobileLogin = async (phone, code, pid = 0) => {
     return res;
 }
 
+/**
+ * 修改用户信息
+ * @param {String} nickname 昵称
+ * @param {String} avatar 头像
+ * @param {String} imagebase 图片base64
+ * @param {Number} gender 性别(1-男，2-女，3-保密，0-未设置)
+ * @returns {Promise} 是否成功
+ */
+export const updateUserInfo = async (nickname, avatar, imagebase, gender = 3) => {
+    const res = await HttpRequest.post('/update_userinfo', { 
+        nickname, 
+        headimg: avatar, 
+        imagebase,
+        gender
+    });
+    return res.status == 1;
+}
 
 

components/youdas-container/no-data.vue

@@ -5,22 +5,19 @@
     </view>
 </template>
 
-<script>
-export default {
-    name: 'NoData',
-    props: {
-        // 空状态显示的图片，默认使用kong.png
-        imageSrc: {
-            type: String,
-            default: '/static/app-plus/no-data.png'
-        },
-        // 空状态显示的文本
-        message: {
-            type: String,
-            default: '暂无数据'
-        }
+<script setup>
+defineProps({
+    // 空状态显示的图片，默认使用kong.png
+    imageSrc: {
+        type: String,
+        default: '/static/app-plus/no-data.png'
+    },
+    // 空状态显示的文本
+    message: {
+        type: String,
+        default: '暂无数据'
     }
-}
+});
 </script>
 
 <style lang="scss">

components/youdas-container/page-container.vue

@@ -18,6 +18,8 @@
 </template>
 
 <script setup>
+import { ref, computed } from 'vue'
+
 const props = defineProps({
     title: {
         type: String,
@@ -33,7 +35,9 @@ const props = defineProps({
     },
     refresh: {
         type: Function,
-        default: null
+        default: function (refresh) {
+            refresh.complete();
+        }
     }
 });
 let paging = ref(null);
@@ -48,7 +52,11 @@ const onClickLeft = () => {
     }
 }
 const onRefresh = () => {
-    props.refresh(paging.value);
+    if (props.refresh) {
+        props.refresh(paging.value);
+    } else {
+        paging.value.complete();
+    }
 }
 const getPaging = () => {
     return paging.value;

pages.json

@@ -57,6 +57,12 @@
 			"style": {
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path": "pages/me/account-info",
+			"style": {
+				"navigationStyle": "custom"
+			}
 		}
 	],
 	// "globalStyle": {

pages/me/account-info.vue

@@ -0,0 +1,282 @@
+<!-- 详情 -->
+<template>
+    <view>
+        <page-container ref="pageContainer" title="我的信息" show-back :show-not-data="false" :refresh="onRefresh">
+            <view class="content">
+                <view class="form-container">
+                    <view class="form-item" @click="onClickAvatar">
+                        <view class="form-label">头像:</view>
+                        <view class="form-input avatar-container">
+                            <image class="avatar" :src="avatarUrl"></image>
+                            <image class="arrow-icon" src="/static/app-plus/arrow-right.png" mode="aspectFill"
+                             style="width: 24rpx;height: 24rpx;"></image>
+                             
+                        </view>
+                    </view>
+
+                    <view class="form-item">
+                        <view class="form-label">昵称:</view>
+                        <view class="form-input">
+                            <input type="text" v-model="nickname" placeholder="请输入您的昵称" />
+                        </view>
+                    </view>
+
+                    <view class="form-item" @click="copyUid">
+                        <view class="form-label">ID:</view>
+                        <view class="form-input">
+                            <text class="form-text">{{ uid }}</text>
+                            <image class="copy-icon" src="/static/app-plus/copy.png" mode="aspectFill"
+                             style="width: 24rpx;height: 24rpx;"></image>
+                             
+                        </view>
+                    </view>
+
+                    <view class="form-item" @click="showGenderPicker">
+                        <view class="form-label">性别:</view>
+                        <view class="form-input">
+                            <text class="form-text">{{ genderText || '请选择性别' }}</text>
+                            <image class="arrow-icon" src="/static/ic_arrow.png" mode="aspectFill"
+                             style="width: 24rpx;height: 24rpx;"></image>
+                        </view>
+                    </view>
+
+                    <view class="form-item">
+                        <view class="form-label">已绑定手机号:</view>
+                        <view class="form-input">
+                            <input disabled :value="phoneNumber" placeholder="暂未绑定手机号" />
+                        </view>
+                    </view>
+                </view>
+
+                <view class="submit-btn" @click="handleUpdateUserInfo">确认修改</view>
+            </view>
+        </page-container>
+    </view>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { updateUserInfo } from '@/common/server/user'
+import { getAccountInfo } from '@/common/system/userInfo'
+//# 必须要引入
+import PageContainer from '@/components/youdas-container/page-container.vue'
+
+// 用户信息
+const pageContainer = ref(null)
+const avatarUrl = ref("")
+const nickname = ref("")
+const uid = ref("")
+const imageBase64 = ref("")
+const showNotData = ref(false)
+const gender = ref(3); // 0-未设置，1-男，2-女，3-保密
+const genderText = ref("保密"); // 性别文本，默认保密
+const phoneNumber = ref(""); // 已绑定手机号
+
+// 初始化用户信息
+onMounted(async () => {
+    const userInfo = await getAccountInfo();
+    if (userInfo) {
+        avatarUrl.value = userInfo.userIcon || "";
+        nickname.value = userInfo.username || "";
+        uid.value = userInfo.uid || "";
+        gender.value = userInfo.gender || 3; // 默认为保密
+        genderText.value = gender.value === 1 ? "男" : (gender.value === 2 ? "女" : "保密");
+        phoneNumber.value = userInfo.mobile || "";
+    }
+    console.log(userInfo);
+});
+
+// 选择头像
+const onClickAvatar = () => {
+    uni.chooseImage({
+        count: 1,
+        sourceType: ["album"],
+        success: async (res) => {
+            avatarUrl.value = res.tempFilePaths[0];
+            imageBase64.value = await imageToBase64Plus(avatarUrl.value);
+        }
+    });
+};
+
+// 图片转Base64
+const imageToBase64Plus = (filePath) => {
+    return new Promise((resolve, reject) => {
+        plus.io.resolveLocalFileSystemURL(filePath, entry => {
+            entry.file(file => {
+                const fileReader = new plus.io.FileReader();
+                fileReader.onloadend = function (e) {
+                    const base64 = e.target.result;
+                    resolve(base64);
+                };
+                fileReader.readAsDataURL(file);
+            }, reject);
+        }, reject);
+    });
+};
+
+// 更新用户信息
+const handleUpdateUserInfo = async () => {
+    if (!nickname.value) {
+        uni.showToast({
+            title: "请输入昵称",
+            icon: "none",
+        });
+        return;
+    }
+
+    const result = await updateUserInfo(
+        nickname.value, 
+        avatarUrl.value, 
+        imageBase64.value,
+        gender.value
+    );
+    
+    if (result) {
+        uni.showToast({
+            title: "修改成功",
+            icon: "success",
+        });
+        
+        // 延迟返回
+        setTimeout(() => {
+            uni.navigateBack();
+        }, 1000);
+    } else {
+        uni.showToast({
+            title: "修改失败",
+            icon: "none",
+        });
+    }
+};
+
+// 复制ID到剪贴板
+const copyUid = () => {
+    if (uid.value) {
+        uni.setClipboardData({
+            data: uid.value,
+            success: () => {
+                uni.showToast({
+                    title: 'ID已复制',
+                    icon: 'success'
+                });
+            }
+        });
+    }
+};
+
+// 显示性别选择器
+const showGenderPicker = () => {
+    uni.showActionSheet({
+        itemList: ["男", "女", "保密"],
+        success: (res) => {
+            gender.value = res.tapIndex + 1; // 1-男，2-女，3-保密
+            genderText.value = ["男", "女", "保密"][res.tapIndex];
+        }
+    });
+};
+
+// 刷新方法
+const onRefresh = async (paging) => {
+    await yds.sleep(500);
+    paging.complete();
+};
+</script>
+
+<style lang="scss" scoped>
+.content {
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    background-color: #FFFFFF;
+}
+
+.form-container {
+    width: 690rpx;
+    margin: 0 auto;
+}
+
+.form-item {
+    display: flex;
+    padding: 30rpx 0;
+    position: relative;
+    align-items: center;
+
+    &::after {
+        content: "";
+        display: block;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        height: 2rpx;
+        background: #F3F3F3;
+    }
+
+    .form-label {
+        width: 150rpx;
+        font-size: 24rpx;
+        color: #8A8A8A;
+        display: flex;
+        align-items: center;
+    }
+
+    .form-input {
+        flex: 1;
+        display: flex;
+        align-items: center;
+
+        input {
+            flex: 1;
+            text-align: right;
+            font-size: 24rpx;
+            color: #333333;
+        }
+        
+        .copy-icon {
+            margin-left: 10rpx;
+            width: 24rpx;
+            height: 24rpx;
+        }
+
+        .arrow-icon {
+            margin-left: 10rpx;
+            width: 24rpx;
+            height: 24rpx;
+        }
+        
+        .form-text {
+            flex: 1;
+            text-align: right;
+            font-size: 24rpx;
+            color: #333333;
+        }
+    }
+}
+
+.submit-btn {
+    width: 244rpx;
+    height: 72rpx;
+    background: #333333;
+    border-radius: 16rpx;
+    font-size: 24rpx;
+    color: #D8FD24;
+    margin: 200rpx auto 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.avatar-container {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    
+    .avatar {
+        width: 80rpx;
+        height: 80rpx;
+        border-radius: 50%;
+        margin-right: 10rpx;
+    }
+}
+</style>

pages/me/me.vue

@@ -6,7 +6,7 @@
 
 		<view class="main-container">
 			<!-- 用户信息区域 -->
-			<view class="user-info-section" v-if="userInfo">
+			<view class="user-info-section" v-if="userInfo" @click="navigateTo('/pages/me/account-info');">
 				<view class="avatar">
 					<image :src="userInfo.userIcon" mode="aspectFill"
 						style="width: 80.15rpx;height: 80.15rpx;border-radius: 10rpx;"></image>
@@ -57,7 +57,6 @@
 import { getUserInfo } from '@/common/server/user';
 import { onShow } from '@dcloudio/uni-app'
 import { navigateTo, navigateToAccountLogin } from '@/common/system/router';
-import { removeCache } from '@/common/system/cacheService';
 let _pagePopup = ref(null);
 const itemList = ref([
 
@@ -86,15 +85,21 @@ const loadMenu = async () => {
 			title: "优惠券",
 		}, {
 			id: 4,
-			title: "加入福利群",
+			title: "收货地址管理",
 		},
 		{
 			id: 5,
 			title: "用户协议",
+			onClick: (res) => {
+				yds.navigateToAgreement("user");
+			}
 		},
 		{
 			id: 6,
 			title: "隐私政策",
+			onClick: (res) => {
+				yds.navigateToAgreement("privacy");
+			}
 		},
 	];
 	if (yds.userInfo.isAccountLogin()) {
@@ -120,11 +125,7 @@ const loadMenu = async () => {
 	}
 	itemList.value = menuList;
 }
-const goToPage = (route) => {
-	uni.navigateTo({
-		url: route
-	});
-};
+
 </script>
 
 <style lang="scss">