Refactor code structure and remove redundant changes
This commit is contained in:
wangqiao
201
pages/channel/components/ChannelHeader.vue
Normal file
201
pages/channel/components/ChannelHeader.vue
Normal file
@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<div class="channel-header">
|
||||
<div class="header-container">
|
||||
<!-- Logo and Title Section -->
|
||||
<div class="logo-title-section">
|
||||
<div class="logo">
|
||||
<img :src="lunTanRes.channelIcon" alt="JRS Logo" />
|
||||
</div>
|
||||
<div class="title-section">
|
||||
<h1 class="main-title">#{{ lunTanRes.channelTitle }}</h1>
|
||||
<div class="action-buttons">
|
||||
<el-button v-if="!lunTanRes.isFollow" type="danger" class="subscribe-btn" @click="handleFollow"
|
||||
><el-icon class="mr-4px color-#fff!"><Plus /></el-icon> 关注
|
||||
</el-button>
|
||||
<el-button v-else type="danger" class="subscribe-btn" @click="handleUnfollow"> 取消关注 </el-button>
|
||||
<el-button type="danger" class="post-btn" @click="handleClick">
|
||||
<el-icon class="mr-4px color-#fff!"><EditPen /></el-icon> 发帖
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- Channel Info -->
|
||||
<div class="channel-info">
|
||||
<span class="info-item">话题介绍</span>
|
||||
<span class="info-item">{{ lunTanRes.channelProfile }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Stats -->
|
||||
<div class="channel-stats">
|
||||
<div class="stats-item">
|
||||
<span class="stats-label">话题热度</span>
|
||||
<span class="stats-value"><i class="el-icon-arrow-up"></i> 220.4w</span>
|
||||
</div>
|
||||
<div class="stats-item">
|
||||
<span class="stats-label">关注人数</span>
|
||||
<span class="stats-value"><i class="el-icon-arrow-up"></i> {{ lunTanRes.followCount }}人</span>
|
||||
</div>
|
||||
<div class="stats-item">
|
||||
<span class="stats-label">当前有</span>
|
||||
<span class="stats-value"><i class="el-icon-arrow-up"></i> {{ lunTanRes.chatUserCount }}人聊天</span>
|
||||
<span class="stats-value ml-2px cursor-pointer color-#1a65ff!" @click="handleChat">立即加入</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tags -->
|
||||
<div class="channel-tags">
|
||||
<span class="tag-label">标签:</span>
|
||||
<span v-for="(item, index) in lunTanRes.hotTags" :key="index" class="tag-item"
|
||||
>{{ item }}{{ index === lunTanRes.hotTags.length - 1 ? '' : '、' }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 打开群聊窗口 -->
|
||||
<ChatPage
|
||||
v-if="isChat"
|
||||
v-model:is-chat="isChat"
|
||||
:chat-title="lunTanRes.channelTitle"
|
||||
:chat-description="lunTanRes.channelProfile"
|
||||
:channel-id="lunTanRes.channelId"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { Plus, EditPen } from '@element-plus/icons-vue'
|
||||
import { ChannelRespVO } from '@/api/channel/types'
|
||||
import { createChannelFollow, deleteChannelFollow } from '@/api/channel/index'
|
||||
import ChatPage from '@/pages/chat-page/index.vue'
|
||||
import useUserStore from '@/store/user'
|
||||
const userStore = useUserStore()
|
||||
|
||||
const lunTanRes = defineModel<ChannelRespVO>('modelValue', {
|
||||
required: true,
|
||||
})
|
||||
|
||||
const handleClick = () => {
|
||||
window.open('/channel/create?channelId=' + lunTanRes.value.channelId, '_blank')
|
||||
}
|
||||
const handleFollow = () => {
|
||||
createChannelFollow({ channelId: lunTanRes.value.channelId }).then((res) => {
|
||||
if (res.code === 0) {
|
||||
lunTanRes.value.isFollow = true
|
||||
ElMessage.success('关注成功')
|
||||
}
|
||||
})
|
||||
}
|
||||
const handleUnfollow = () => {
|
||||
deleteChannelFollow({ channelId: lunTanRes.value.channelId }).then((res) => {
|
||||
if (res.code === 0) {
|
||||
lunTanRes.value.isFollow = false
|
||||
ElMessage.success('取消关注成功')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 订阅群聊
|
||||
const isChat = ref(false)
|
||||
const handleChat = async () => {
|
||||
// 登录判断
|
||||
if (!userStore.token) {
|
||||
ElMessage.warning('请先登录')
|
||||
return
|
||||
}
|
||||
await userStore.mqttClient?.subscribe(`zbjk_message_group/${lunTanRes.value.channelId}`)
|
||||
isChat.value = true
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.channel-header {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
/* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
|
||||
border: 1px solid #eeeeee;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.header-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.logo-title-section {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.title-section {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.subscribe-btn,
|
||||
.post-btn {
|
||||
font-size: 14px;
|
||||
padding: 0px 12px !important;
|
||||
}
|
||||
|
||||
.channel-info {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.channel-stats {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.stats-value {
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.channel-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.tag-label {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tag-item {
|
||||
color: #1a65ff;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user