chore: initialize qiming workspace repository
This commit is contained in:
Codex
269
qiming-mobile/pages/index/header-menu/header-menu.uvue
Normal file
269
qiming-mobile/pages/index/header-menu/header-menu.uvue
Normal file
@@ -0,0 +1,269 @@
|
||||
<template>
|
||||
<x-dropdown v-if="userInfo" ref="dropdown" @open="checkSubscriptionEnable">
|
||||
<view class="trigger">
|
||||
<image
|
||||
:src="currentAvatar"
|
||||
mode="aspectFill"
|
||||
class="avatar"
|
||||
:alt="t('Mobile.Common.avatarAlt')"
|
||||
@error="handleImageError"
|
||||
/>
|
||||
<text class="iconfont icon-a-Chevrondown icon-down"></text>
|
||||
</view>
|
||||
|
||||
<template #menu>
|
||||
<view class="custom-menu-wrapper">
|
||||
<view class="custom-menu">
|
||||
<view class="flex flex-col user-info-box">
|
||||
<!-- 用户名 -->
|
||||
<text class="user-label text-ellipsis">{{
|
||||
userInfo.nickName || userInfo.userName
|
||||
}}</text>
|
||||
<!-- 手机号或邮箱 -->
|
||||
<text class="user-name text-ellipsis">{{
|
||||
userInfo.phone || userInfo.email
|
||||
}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 我的订阅 -->
|
||||
<view
|
||||
v-if="isSubscriptionEnabled"
|
||||
class="custom-menu-item"
|
||||
hover-class="custom-menu-item-active"
|
||||
@click="handleMySubscriptions"
|
||||
>
|
||||
<text class="iconfont icon-stars"></text>
|
||||
<text class="menu-text">{{
|
||||
t("Mobile.Header.mySubscriptions")
|
||||
}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 个人资料 -->
|
||||
<view
|
||||
class="custom-menu-item"
|
||||
hover-class="custom-menu-item-active"
|
||||
@click="handlePersonalInfo"
|
||||
>
|
||||
<text class="iconfont icon-User"></text>
|
||||
<text class="menu-text">{{ t("Mobile.Header.profile") }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 退出登录 -->
|
||||
<view
|
||||
class="custom-menu-item"
|
||||
hover-class="custom-menu-item-active"
|
||||
@click="handleLogout"
|
||||
>
|
||||
<text class="iconfont icon-Exit"></text>
|
||||
<text class="menu-text">{{ t("Mobile.Header.logout") }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</x-dropdown>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import type { MenuListItem } from "@/types/interfaces/common";
|
||||
import type { UserInfo, TenantConfigInfo } from "@/types/interfaces/login";
|
||||
import { SUCCESS_CODE } from "@/constants/codes.constants.uts";
|
||||
import { apiLogout, apiTenantConfig } from "@/servers/account";
|
||||
import defaultAvatar from "@/static/assets/avatar.png";
|
||||
import { ACCESS_TOKEN, TENANT_CONFIG_INFO } from "@/constants/home.constants";
|
||||
import { useI18n } from "@/utils/i18n";
|
||||
|
||||
const { t, loadI18n } = useI18n();
|
||||
|
||||
interface Props {
|
||||
userInfo: UserInfo;
|
||||
}
|
||||
|
||||
// 接收组件属性，设置默认值
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
userInfo: null,
|
||||
});
|
||||
|
||||
// 当前显示的头像，默认使用传入的 avatar
|
||||
const currentAvatar = ref<string>(defaultAvatar);
|
||||
|
||||
// 新增 ref
|
||||
const dropdown = ref<any>(null);
|
||||
|
||||
// 是否开启订阅
|
||||
const isSubscriptionEnabled = ref<boolean>(false);
|
||||
|
||||
const checkSubscriptionEnable = async () => {
|
||||
const tenantConfigInfoString = uni.getStorageSync(TENANT_CONFIG_INFO);
|
||||
if (tenantConfigInfoString) {
|
||||
try {
|
||||
const tenantConfig = JSON.parse(
|
||||
tenantConfigInfoString,
|
||||
) as TenantConfigInfo;
|
||||
isSubscriptionEnabled.value = tenantConfig.enableSubscription === 1;
|
||||
} catch (error) {
|
||||
console.error("解析租户配置失败:", error);
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await apiTenantConfig();
|
||||
if (res.code === SUCCESS_CODE && res.data != null) {
|
||||
const latestConfig = res.data!;
|
||||
isSubscriptionEnabled.value = latestConfig.enableSubscription === 1;
|
||||
uni.setStorageSync(TENANT_CONFIG_INFO, JSON.stringify(latestConfig));
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("同步最新租户配置失败:", e);
|
||||
}
|
||||
};
|
||||
|
||||
// 监听 userInfo 变化，更新当前头像和订阅状态
|
||||
watch(
|
||||
() => props.userInfo,
|
||||
(newUserInfo) => {
|
||||
currentAvatar.value = newUserInfo?.avatar || defaultAvatar;
|
||||
checkSubscriptionEnable();
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
const handlePersonalInfo = () => {
|
||||
uni.navigateTo({
|
||||
url: "/subpackages/pages/about-me/about-me",
|
||||
});
|
||||
};
|
||||
|
||||
const handleMySubscriptions = () => {
|
||||
uni.navigateTo({
|
||||
url: "/subpackages/pages/my-subscriptions/my-subscriptions",
|
||||
});
|
||||
};
|
||||
|
||||
// 图片加载错误时触发，切换为默认图片
|
||||
const handleImageError = () => {
|
||||
currentAvatar.value = defaultAvatar;
|
||||
};
|
||||
|
||||
// 退出登录
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
const result = await apiLogout();
|
||||
if (result.code === SUCCESS_CODE) {
|
||||
uni.showToast({
|
||||
title: t("Mobile.Header.logoutSuccess"),
|
||||
icon: "success",
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.setStorageSync(ACCESS_TOKEN, ""); // 清空token【兼容鸿蒙系统】
|
||||
uni.clearStorageSync(); // 清空所有缓存
|
||||
globalThis.appConfig.redirectUrl = null;
|
||||
// 获取一次语言
|
||||
loadI18n(false);
|
||||
|
||||
// #ifdef H5 || WEB
|
||||
uni.reLaunch({ url: "/subpackages/pages/login/login" });
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.reLaunch({ url: "/subpackages/pages/login-weixin/login-weixin" });
|
||||
// #endif
|
||||
}, 1000);
|
||||
}
|
||||
} catch (error) {
|
||||
uni.showToast({
|
||||
title: t("Mobile.Header.logoutFailed"),
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 暴露关闭方法
|
||||
defineExpose({
|
||||
closeDropdown: () => {
|
||||
if (dropdown.value) {
|
||||
dropdown.value.close();
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.trigger {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
|
||||
.avatar {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.icon-down {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-menu-wrapper {
|
||||
.custom-menu {
|
||||
width: 320rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
border: 2rpx solid rgba(81, 71, 255, 0.1);
|
||||
overflow: hidden;
|
||||
|
||||
.user-info-box {
|
||||
gap: 12rpx;
|
||||
padding: 28rpx 20rpx 20rpx 20rpx;
|
||||
border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
|
||||
|
||||
.user-label {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-menu-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 24rpx 20rpx;
|
||||
gap: 12rpx;
|
||||
border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
&-active {
|
||||
background: rgba(81, 71, 255, 0.05);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.menu-text {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user