gypsy-crm-frontend-vu/components/cwg-right-drawer.vue

<template>
    <view class="notice-container">
        <cwg-dropdown ref="dropdownRef" :menu-list="[]">
            <view class="pc-header-btn cursor-pointer" :data-tooltip="t('vu.tooltip.t100')">
                <cwg-icon name="icon_my" color="#97A1C0" @click="openNotice" />
              <cwg-match-media :min-width="791">
                <view>{{ name }}</view>
              </cwg-match-media>
            </view>
            <template #btn>
                <view class="dropdown-menu dropdown-menu-end w-225px mt-1 show">
                    <view class="d-flex align-items-center p-2">
                        <view class="avatar avatar-sm rounded-circle">
                            <image class="avatar1" src="/static/images/vu/logo.png" mode="aspectFill" />
                        </view>
                        <view class="ms-2">
                            <view class="fw-bold text-dark text-ellipsis mb-2">{{ _displayName }}</view>
                            <view class="text-body d-block lh-sm text-ellipsis mb-2">{{ _email }}</view>
                            <text class="cid">CID: <text class="cwg-cursor cursor-pointer cursor-pointer1" :data-tooltip="t('vu.tooltip.t102')" @click="copy(_displayCid)">{{ _displayCid
                                    }}</text></text>
                        </view>
                    </view>
                    <view>
                        <view class="dropdown-divider my-1"></view>
                    </view>
                    <view v-for="item in menuList" :key="item.id">
                        <view class="dropdown-item user-menu-item d-flex align-items-center gap-2 cursor-pointer"
                            @click="handleNavigate(item.path)">
                            <cwg-icon :name="item.icon" :size="16" color="#000" />
                            <text v-t="item.name"></text>
                        </view>
                    </view>
                  <cwg-match-media :max-width="990" >
                    <view>
                        <view class="dropdown-divider my-1"></view>
                    </view>
                    <view>
                        <view class="dropdown-item d-flex align-items-center gap-2 text-danger cursor-pointer"
                            @click="handleLogout">
                            <cwg-icon name="logout" :size="16" color="#FF401C" />
                            <text v-t="'language.i6'"></text>
                        </view>
                    </view>
                  </cwg-match-media>
                </view>
            </template>
        </cwg-dropdown>
    </view>
  <cwg-global-popup/>
</template>

<script setup lang="ts">
import { ref, watch, onMounted, computed } from 'vue'
import { onLoad, onShow, onLaunch } from '@dcloudio/uni-app'
import useRoute from '@/hooks/useRoute'
import useUserStore from '@/stores/use-user-store'
import { userApi } from '@/api/user'
import { useI18n } from "vue-i18n"
import useRouter from "@/hooks/useRouter"
import useGlobalStore from '@/stores/use-global-store'
import { usePopup } from '@/hooks/usePopup'
const globalStore = useGlobalStore()
const isDark = computed(() => globalStore.theme === 'dark')

const { t } = useI18n()
const router = useRouter()
const { confirm } = usePopup()
const dropdownRef = ref(null)
const userStore = useUserStore()
const route = useRoute()

// 强制用 ref 让插槽能渲染
const menuList = ref([])
const _displayName = ref('--')
const _displayCid = ref('--')
const _activePath = ref('')
const _email = ref('--')

const name = computed(() => {
  const info = userStore.userInfo?.customInfo || {}
  const firstName = info.firstName || ''
  const lastName = info.lastName || ''
  return (firstName + ' ' + lastName).trim() || info.name
})
// 复制文本
const copy = (text: string) => {
    uni.setClipboardData({
        data: text,
        success: function () {
            uni.showToast({
                title: t('Btn.item8'),
                icon: 'none',
                duration: 2000
            });
        }
    });
};
// 初始化菜单
function initMenu() {
    menuList.value = [
        { id: 1, path: '/pages/mine/info?type=1', name: 'PersonalManagement.Title.PersonalInformation', icon: 'crm-circle-user' },
        { id: 2, path: '/pages/mine/info?type=2', name: 'PersonalManagement.Title.BankInformation', icon: 'crm-building-columns' },
        { id: 3, path: '/pages/mine/info?type=3', name: 'PersonalManagement.Title.FileManagement', icon: 'crm-file' },
        { id: 4, path: '/pages/mine/info?type=4', name: 'PersonalManagement.Title.SecurityCenter', icon: 'crm-lock' },
    ]
}

// 强制同步用户信息
function syncUserInfo() {
    const info = userStore.userInfo?.customInfo || {}
    const firstName = info.firstName || ''
    const lastName = info.lastName || ''
    _displayName.value = (firstName + ' ' + lastName).trim() || info.name || info.email || '--'
    _displayCid.value = info.cId || info.id || '--'
    _email.value = info.email || '--'
}

// 强制同步路径
function syncPath() {
    _activePath.value = route.path + (route.query?.type ? `?type=${route.query.type}` : '')
}

onMounted(() => {
    initMenu()
    syncUserInfo()
    syncPath()
})

onShow(() => {
    initMenu()
    syncUserInfo()
    syncPath()
})

// 监听变化自动更新
watch(() => userStore.userInfo, () => {
    syncUserInfo()
}, { deep: true })

watch(() => route, () => {
    syncPath()
}, { deep: true })

// 打开抽屉
function openNotice() {
    // dropdownRef.value?.open()
}

// 关闭
function close() {
    dropdownRef.value?.close()
}

// 跳转
function handleNavigate(path) {
    router.push({ path })
    close()
}

// 登出
async function handleLogout() {
  const res = await confirm({
    title: t('Msg.SystemPrompt'),
    content: t('mine.p'),
    showCancel: t('mine.b2'),
    confirmText: t('mine.b1'),
  })
  if (!res) return
    try {
        await userApi.logout()
    } catch (e) { }
    userStore.clearUserInfo()
    uni.setStorageSync('logoutToSystem', 1)
    // uni.$emit('updateSystemList')
    router.push('/pages/login/index')
    close()
}

defineExpose({ openNotice, close })
</script>

<style scoped lang="scss">
@import "@/uni.scss";

.notice-container {
    .text-ellipsis {
        display: block !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        word-break: break-all !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }
    :deep(.cwg-dropdown-menu-container) {
        left: px2rpx(-150) !important;
        right: px2rpx(0) !important;

        .menu {
            border: 0;
            overflow: visible;
        }
    }

    @media screen and (max-width: 991px) {
        :deep(.cwg-dropdown-menu-container) {
            left: px2rpx(-150) !important;
            max-width: px2rpx(400);
        }
    }
    @media screen and (max-width: 768px) {
        :deep(.cwg-dropdown-menu-container) {
            left: px2rpx(-186) !important;
            max-width: px2rpx(400);
        }
    }

    .pc-header-btn {
      width: auto;
      padding: 0 px2rpx(5);
        position: relative;
    }

    .user-menu-item {
        color: var(--bs-emphasis-color);

        text {
            color: var(--bs-emphasis-color);
        }
    }

    .right-drawer {
        width: px2rpx(300);
        background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
        display: flex;
        flex-direction: column;
        padding: px2rpx(20) px2rpx(16);
        box-sizing: border-box;
    }

    .drawer-header {
        display: flex;
        align-items: center;
        gap: px2rpx(12);
        padding: px2rpx(20);
        border-bottom: 1px solid #d9dde5;
    }

    .avatar1 {
        width: px2rpx(40);
        height: px2rpx(40);
        border-radius: 50%;
        // background: #fff;
    }

    .user-info {
        display: flex;
        flex-direction: column;
        gap: px2rpx(6);
    }

    .name {
        font-size: px2rpx(22);
        font-weight: 600;
        color: var(--bs-heading-color);
    }

    .cid {
        font-size: px2rpx(14);
        color: #ef4444;
    }

    .menu-list {
        padding: px2rpx(12) 0;
    }

    .menu-item {
        height: px2rpx(48);
        display: flex;
        align-items: center;
        gap: px2rpx(10);
        padding: 0 px2rpx(16);
        color: var(--bs-heading-color);
        font-size: px2rpx(16);
        font-weight: 600;

        &:hover {
            background-color: rgba(0, 0, 0, 0.05);
        }
    }

    .menu-item.active {
        background: rgba(108, 133, 149, 0.12) !important;
        border-radius: 0.125rem;
    }

    .logout-wrap {
        margin-top: auto;
        padding: px2rpx(20);
        margin-bottom: px2rpx(20);
    }

    .logout-btn {
        height: px2rpx(44);
        background-color: var(--bs-btn-bg);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: px2rpx(8);
        color: #fff;
        font-weight: 600;
        font-size: px2rpx(16);
        cursor: pointer;
    }
}
</style>