159 lines
4.1 KiB
Vue
159 lines
4.1 KiB
Vue
<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'
|
|
import KlVip from './components/kl-vip.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-content')
|
|
}
|
|
|
|
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>
|