gypsy-crm-frontend-vu/windows/top-window.vue

<template>
  <header class="cwg-pc-header bg-body" :class="{ 'dark': isDark }">
    <div class="left">
      <image class="left-img" v-if="!isDark" src="/static/images/vu/logo-full.svg" mode="widthFix" alt="logo"
        @click="openLeftDrawer" />
      <image class="left-img" v-else src="/static/images/vu/logo-full-white.svg" mode="widthFix" alt="logo"
        @click="openLeftDrawer" />
      <div class="cid" v-if="visible"  @click="copy(cId)">{{t('newSignin.item1')}} {{name}} - {{ cId}}</div>
    </div>
    <div class="right" v-if="visible">
      <cwg-payment />
      <cwg-system event-source="top"/>
      <cwg-language />
      <cwg-notice />
      <cwg-right-drawer />
    </div>
  </header>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import useUserStore from '@/stores/use-user-store'
import { useI18n } from 'vue-i18n'
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
import useGlobalStore from '@/stores/use-global-store'
const globalStore = useGlobalStore()
const isDark = computed(() => globalStore.theme === 'dark')
const visible = ref(true)
const { t } = useI18n()

watch(() => userInfo.value, (val) => {
  visible.value = !!val
})
const props = defineProps({
  sidebarVisible: {
    type: Boolean,
    default: false,
  },
})

const cId = computed(() => {
  const info = userStore.userInfo?.customInfo || {}
  return info.cId || info.id || '--'
})

const name = computed(() => {
  const info = userStore.userInfo?.customInfo || {}
  return `${info.firstName} ${info.lastName}`
})

onMounted(()=>{
  uni.$emit('updateSystemList','top')
})

// 复制文本
const copy = (text: string) => {
  uni.setClipboardData({
    data: text,
    success: function () {
      uni.showToast({
        title: t('Btn.item8'),
        icon: 'none',
        duration: 2000
      });
    }
  });
};

</script>

<style scoped lang="scss">
@import "@/uni.scss";
.cwg-pc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: px2rpx(55);
  border-bottom: 1px solid var(--bs-border-color);
  padding: 0 px2rpx(16);
  position: relative;
  z-index: 10;
}

.left {
  display: flex;
  align-items: center;
  .cid{
    margin-left: px2rpx(50);
    cursor: pointer;
  }
}


.center {
  flex: 1;
}

.right {
  display: flex;
  align-items: center;
  gap: 0;
}

.bell .dot {
  position: absolute;
  top: 0;
  right: -2px;
  width: 7px;
  height: 7px;
  background: #27ae60;
  border-radius: 50%;
  display: inline-block;
}

.left-img {
  width: px2rpx(120);
}

.avatar .img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #eee;
}

.logo .img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
}
</style>