Add new components for login and comment functionality

2025-08-17 20:15:33 +08:00
parent 99df1d1f81
commit 07b4d3de99
37 changed files with 4744 additions and 263 deletions
--- a/components/kl-quick-menu/index.vue
+++ b/components/kl-quick-menu/index.vue
@ -0,0 +1,157 @@
+<template>
+  <div class="fixed-button-group">
+    <div class="button-item" @click="handleVip">
+      <el-badge :is-dot="readCount" class="item">
+        <el-icon class="icon-item color-#10c55b!"><Trophy /></el-icon>
+      </el-badge>
+      <span class="button-text">VIP</span>
+    </div>
+    <div class="button-item" @click="handleService">
+      <el-badge :is-dot="readCount" class="item">
+        <el-icon class="icon-item color-#10c55b!"><Service /></el-icon>
+      </el-badge>
+      <span class="button-text">客服</span>
+    </div>
+    <div class="button-item" @click="handleSign">
+      <el-icon class="icon-item color-#10c55b!"><Checked /></el-icon>
+      <span class="button-text">签到</span>
+    </div>
+    <div class="button-item" @click="handlePublish">
+      <el-icon class="icon-item color-#C561F9!"><Promotion /></el-icon>
+      <span class="button-text">发布</span>
+    </div>
+    <div class="button-item mt-10px" @click="scrollToTop">
+      <el-icon class="icon-item"><Top /></el-icon>
+      <span class="button-text">顶部</span>
+    </div>
+  </div>
+  <!-- 打开客服弹窗 弄成组件 -->
+  <KlService v-if="dialogVisible" v-model:dialog-visible="dialogVisible"></KlService>
+  <!-- vip组件 -->
+  <KlVip v-if="showVip" v-model="showVip"></KlVip>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted } from 'vue'
+  import useUserStore from '@/store/user'
+  import { Service, Top, Promotion, Checked, Trophy } from '@element-plus/icons-vue'
+  import KlService from './components/kl-service.vue'
+
+  const showVip = ref(false)
+  const handleVip = () => {
+    // 判断是否登录
+    const userStore = useUserStore()
+    if (!userStore.token) {
+      ElMessage.error('请先登录')
+      return
+    }
+    showVip.value = true
+  }
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth', // 平滑滚动
+    })
+  }
+
+  const handlePublish = () => {
+    // 判断是否登录
+    const userStore = useUserStore()
+    if (!userStore.token) {
+      ElMessage.error('请先登录')
+      return
+    }
+    // 新开窗口 用router跳转 新窗口打开
+    navigateTo('/upnew/drawe')
+  }
+
+  const dialogVisible = ref(false)
+  const handleService = () => {
+    // 判断是否登录
+    const userStore = useUserStore()
+    if (!userStore.token) {
+      ElMessage.error('请先登录')
+      return
+    }
+    dialogVisible.value = true
+    // 读取未读消息
+    readCount.value = false
+  }
+
+  // 签到
+  const handleSign = () => {
+    // 判断是否登录
+    const userStore = useUserStore()
+    if (!userStore.token) {
+      ElMessage.error('请先登录')
+      return
+    }
+    navigateTo('/sign-page')
+  }
+
+  const readCount = ref(false)
+  onMounted(() => {
+    const userStore = useUserStore()
+    userStore.mqttClient?.onMessage((topic: string, message: any) => {
+      if (topic.indexOf(`zbjk_message_kefu`) === -1) return
+      console.log('接收消息---------', topic, message)
+      const msg = JSON.parse(message)
+      if (msg.userId === userStore.userInfoRes.id) return
+      if (!dialogVisible.value) {
+        // 显示未读
+        readCount.value = true
+      }
+    })
+  })
+</script>
+
+<style lang="scss" scoped>
+  .fixed-button-group {
+    position: fixed;
+    right: 10px;
+    bottom: 120px;
+    z-index: 9;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+
+    .button-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 41px;
+      height: 52px;
+      background-color: #fff;
+      border-radius: 4px;
+      cursor: pointer;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+      transition: all 0.3s;
+
+      &:hover {
+        background-color: #10c55b;
+        .button-text,
+        .icon-item {
+          color: #fff !important;
+        }
+      }
+
+      .el-icon {
+        font-size: 20px;
+        color: #666;
+        margin-bottom: 2px;
+      }
+
+      .button-text {
+        font-size: 12px;
+        color: #666;
+        line-height: 1;
+      }
+
+      .el-badge {
+        margin-bottom: 2px;
+      }
+    }
+  }
+</style>