shuhi-app/pages/my/my.vue

<template>
    <view class="settings-page" @click="playGlobalSound">
        <!-- 顶部用户信息 -->
        <view class="user-header">
            <view class="user-info">
                <u-avatar :size="60" :src="avatar || defaultAvatar"></u-avatar>

                <view class="greeting">
                    <text class="time">{{ greeting }}！</text>
                    <text class="name">{{ userName }}</text>
                </view>
            </view>
        </view>

        <!-- 设置列表 -->
        <view class="settings-list">
            <u-cell-group :border="false">
                <u-cell
                    v-for="(item, index) in settingsList"
                    :key="index"
                    :title="item.title"
                    :isLink="true"
                    @click="handleClick(item)"
                    :border="index == settingsList.length - 1 ? false : true"
                >
                    <template #icon>
                        <view class="cell-icon">
                            <u-icon :name="item.icon || 'setting'" size="22" color="#333"></u-icon>
                        </view>
                    </template>
                </u-cell>
            </u-cell-group>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";

// 点击全局音效
function playGlobalSound(){
    uni.$u.playClickSound()
}

let defaultAvatar =
    "https://img20.360buyimg.com/da/jfs/t1/141592/25/8861/261559/5f68d8c1E33ed78ab/698ad655bfcfbaed.png";

const settingsList = ref([
    {
        title: "用户信息",
        path: "/pages/my/page/user-info",
    },
    {
        title: "默认仓库",
        path: "/pages/my/page/warehouse",
    },
    {
        title: "学校设置",
        path: "/pages/my/page/school",
    },
    {
        title: "审核未完成",
        path: "/pages/my/page/audit-unfinished",
    },
    {
        title: "版本设置",
        path: "/pages/my/page/version",
        icon: "tags",
    },
    {
        title: "音频设置",
        path: "/pages/my/page/volume",
    },
    {
        title: "图书显示设置",
        path: "/pages/my/page/book-display",
    },
    {
        title: "修改密码",
        icon: "lock",
        path: "/pages/my/page/password",
    },
    {
        title: "退出账号",
        path: "/pages/my/page/logout",
        type: "logout",
    },
]);

const greeting = ref("");

const updateGreeting = () => {
    const hour = new Date().getHours();
    if (hour >= 5 && hour < 12) {
        greeting.value = "早上好";
    } else if (hour >= 12 && hour < 14) {
        greeting.value = "中午好";
    } else if (hour >= 14 && hour < 18) {
        greeting.value = "下午好";
    } else if (hour >= 18 && hour < 22) {
        greeting.value = "晚上好";
    } else {
        greeting.value = "夜深了";
    }
};
const userName = ref('-');
const avatar = ref('');
//获取登录者信息
function getUserInfo() {
    uni.$u.http.get("/app/appUser/getUserInfoById").then((res) => {
        if (res.code == 200) {
            userName.value = res.data.userName;
            avatar.value = res.data.avatar;
        }
    });
}

// 初始化时更新问候语
onLoad(() => {
    updateGreeting();
    // 可选：每分钟更新一次问候语
    setInterval(updateGreeting, 60 * 60 * 1000);
    getUserInfo();
});

const handleClick = (item) => {
    if (item.type === "logout") {
        uni.showModal({
            title: "提示",
            content: "确定要退出登录吗？",
            success: (res) => {
                if (res.confirm) {
                    // 执行退出登录逻辑
                    uni.clearStorageSync();
                    uni.reLaunch({
                        url: "/pages/login/login",
                    });
                }
            },
        });
        return;
    }
    uni.redirectTo({
        url: item.path,
    });
};
</script>

<style lang="scss" scoped>
.settings-page {
    .user-header {
        background: #22ac38;
        padding: 40rpx 32rpx;

        .user-info {
            display: flex;
            align-items: center;

            .greeting {
                display: flex;
                flex-direction: column;
                margin-left: 20rpx;

                .time {
                    font-size: 36rpx;
                    color: #ffffff;
                    margin-bottom: 8rpx;
                }

                .name {
                    font-size: 40rpx;
                    color: #ffffff;
                    font-weight: 500;
                }
            }
        }
    }

    :deep(.u-cell) {
        .u-cell__body {
            padding: 15px;
        }

        .u-cell__title-text {
            font-size: 34rpx;
        }
    }

    .settings-list {
        padding: 20rpx;

        :deep(.u-cell-group) {
            border-radius: 16rpx;
            overflow: hidden;
            background: #ffffff;
        }
    }
}
</style>