xz/wx-chant-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wew

Browse Source
This commit is contained in:
左哥 2025-11-06 23:13:27 +08:00
parent 4e87f437e1
commit 66fabbf475
6 changed files with 223 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/api/chat/index.ts
View File

@ -41,3 +41,14 @@ export const send_template_message = (data) => {
data
})
}
// 查看小程序状态
export const checkMiniProgramStatus = (params) => {
return request({
url: `admin/app/check_status`,
method: 'get',
params
})
}

7
src/components/UserCard/index.vue
View File

@ -2,7 +2,7 @@
<div style="width: 100%;">
<!-- <el-input v-model="centent" suffix-icon="Search" @input="inputSearch" placeholder="搜索"></el-input> -->
<ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto" :style="'height:' + height" :infinite-scroll-immediate="false" infinite-scroll-distance="5">
<li v-for="item in cardlist" :key="item.sender_id" class="infinite-list-item" :class="{ active: item.active }"
<li v-for="item in cardlist" :key="item.sender_id" class="infinite-list-item" :class="{ active: item.sender_id == activeId }"
@click="handleItem(item)">
<div class="avatar-container">
<el-image class="user-avatar" :src="item.sender_avatar"></el-image>
@ -65,8 +65,9 @@ const inputSearch = (e) => {
emits('input', e)
}, 500)
}
const activeId = ref(null)
const handleItem = (row) => {
activeId.value = row.sender_id
if (props.multiple) {
if (!row.active) {
row.active = true
@ -272,7 +273,7 @@ onMounted(() => {
}
.active {
background-color: var(--el-color-primary-light-7);
background-color: var(--el-color-primary-light-9);
}
.infinite-list .infinite-list-item+.list-item {

23
src/layout/tabbar/index.vue
View File

@ -1,16 +1,33 @@
<script setup>
import { computed } from 'vue'
import { computed, onMounted, onUnmounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import Setting from '@/layout/tabbar/setting/index.vue'
import appDetail from '@/store/modules/appDetail'
const appInfoStore = appDetail()
// ensure route/router are defined
const route = useRoute()
const router = useRouter()
console.log('appInfoStore', appInfoStore);
const appStatus = computed(() => {
// guard access and provide fallback
try {
return appInfoStore.appDetail?.check_status_text || ''
} catch (e) {
return ''
}
})
const newPath = computed(() => {
return route.path
})
const toLink = (path) => {
router.push(path)
}
</script>
<template>
@ -25,7 +42,8 @@ const toLink = (path) => {
小程序聊天系统
</div>
<div class="right">
<div class="nav">
<div class="nav" v-if="newPath == '/chat'">
状态：{{ appStatus }}
<!-- <ul><li @click="toLink('/dashboard')" :class="{ active: newPath == '/dashboard' }">首页</li></ul> -->
</div>
@ -70,6 +88,7 @@ const toLink = (path) => {
padding-left: 10px;
width: calc(100% - 300px);
.nav{
padding-left: 10px;
li{
display: inline-block;
padding: 0 12px;

24
src/store/modules/appDetail.ts Normal file
View File

@ -0,0 +1,24 @@
// 机器人相关仓库
import { defineStore } from 'pinia'
import { ref } from 'vue'
const appDetail = defineStore(
'appDetail',
() => {
const appDetail = ref({
check_status_text: ''
})
return {
appDetail
}
},
{
persist: true
}
)
export default appDetail

5
src/styles/index.scss
View File

@ -429,3 +429,8 @@ span[class=el-tooltip__trigger] {
padding-top: 0!important;
}
}
.el-image__error{
font-size: 12px!important;
line-height: 14px;
}

90
src/views/chat/index.vue
View File

@ -1,10 +1,12 @@
<template>
<div class="chat-page">
<div class="left-panel">
<WxUserCard @load="onLoadUserList" :cardlist="userList" height="calc(100vh - 120px)" @change="onSelectUser" />
<WxUserCard @load="onLoadUserList" :cardlist="userList" height="calc(100vh - 120px)"
@change="onSelectUser" />
</div>
<div class="right-panel">
<div :class="['chat-body', { 'chat-body--loading': isLoadingMessages }]" ref="chatBody" @scroll="handleScroll">
<div :class="['chat-body', { 'chat-body--loading': isLoadingMessages }]" ref="chatBody"
@scroll="handleScroll">
<!-- 加载更多提示 -->
<div v-if="loadingMore" class="loading-more">加载中...</div>
@ -13,7 +15,8 @@
<div class="chat-footer">
<div class="footer-left" style="">
<div class="upload-row" style="display:flex; align-items:center; gap:12px;margin-left: 6px;position: relative; top: 10px;">
<div class="upload-row"
style="display:flex; align-items:center; gap:12px;margin-left: 6px;position: relative; top: 10px;">
<el-icon style="font-size:24px;cursor:pointer" @click="triggerImageInput">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-tupian1"></use>
@ -28,21 +31,11 @@
</div>
<!-- 发送按钮 -->
<div class="send-button-container" style="margin-left: 12px;">
<el-button
type="primary"
@click="send"
:disabled="!draft.trim() || isSending || isUploading"
:loading="isSending"
style="height: 60px;"
>
<el-button type="primary" @click="send" :disabled="!draft.trim() || isSending || isUploading"
:loading="isSending" style="height: 60px;">
{{ isSending ? '发送中...' : '发送' }}
</el-button>
<el-button
type="primary"
@click="sendTemplateMessage"
:loading="isSending2"
style="height: 60px;"
>
<el-button type="primary" @click="sendTemplateMessage" :loading="isSending2" style="height: 60px;">
{{ isSending2 ? '发送中...' : '发送模板消息' }}
</el-button>
</div>
@ -58,10 +51,12 @@ import WxUserCard from '@/components/UserCard/index.vue'
import UserMessage from '@/components/UserMessage/index.vue'
import mihoutai from '@/assets/images/mihoutai.png'
import V3Emoji from "vue3-emoji";
import { getUserList, send_message, get_messages, send_template_message } from '@/api/chat'
import { getUserList, send_message, get_messages, send_template_message, checkMiniProgramStatus } from '@/api/chat'
import { useRoute } from 'vue-router'
import { uploadFile } from '@/api/upload'
import { ElMessage } from 'element-plus'
import appDetail from '@/store/modules/appDetail'
const appInfoStore = appDetail()
const route = useRoute()
@ -101,6 +96,8 @@ const messageTimer = ref(null) // 定时器实例
const isSending = ref(false) // 防止重复发送
const lastSendTime = ref(0) // 最后发送时间，用于防抖
const isUploading = ref(false) // 防止重复上传
// 小程序状态轮询定时器
const appStatusTimer = ref(null)
// 选择用户
const onSelectUser = async (id) => {
@ -855,22 +852,65 @@ const sendTemplateMessage = async (templateId) => {
"app_secret": route.query.app_secret,
"template_id": route.query.template_id,
"touser": activeUser.value.sender_id
})
}).then((res) => {
if (res.succes == true) {
ElMessage({ type: 'success', message: '模板消息发送成功' })
// 发送成功后，立即轮询获取最新消息以获取真实ID
setTimeout(() => {
getMessages(false, 1) // 轮询最新消息
}, 500)
} else {
ElMessage({ type: 'error', message: res.message || '模板消息发送失败' })
}
})
} catch (error) {
console.error('模板消息发送失败:', error)
ElMessage({ type: 'error', message: '模板消息发送失败' })
}
}
const getAppStaus = async () => {
try {
const res = await checkMiniProgramStatus({
app_id: route.query.app_id
})
// appInfoStore.appDetail 是一个 ref，使用 .value 同步
if (appInfoStore && appInfoStore.appDetail) {
appInfoStore.appDetail.check_status_text = res.check_status_text || ''
}
return res
} catch (error) {
if (appInfoStore && appInfoStore.appDetail) {
appInfoStore.appDetail.check_status_text = ''
}
console.error('获取应用状态失败:', error)
return null
}
}
const startAppStatusTimer = () => {
if (appStatusTimer.value) clearInterval(appStatusTimer.value)
// 立即触发一次，然后每60秒触发
getAppStaus()
appStatusTimer.value = setInterval(() => {
if (!route.query.app_id) return
getAppStaus()
}, 60 * 1000)
}
const stopAppStatusTimer = () => {
if (appStatusTimer.value) {
clearInterval(appStatusTimer.value)
appStatusTimer.value = null
}
}
// 组件挂载时
onMounted(() => {
getUsers()
getAppStaus()
// 启动用户列表轮询
startUserListTimer()
@ -984,24 +1024,30 @@ watch(messages, async (newVal, oldVal) => {
/* For WebKit-based browsers (Chrome, Safari, Edge Chromium) */
-webkit-overflow-scrolling: touch;
}
.chat-body::-webkit-scrollbar {
width: 0px;
height: 0px;
}
/* For Firefox */
.chat-body {
scrollbar-width: none; /* Firefox */
scrollbar-width: none;
/* Firefox */
}
/* For IE and older Edge */
.chat-body {
-ms-overflow-style: none; /* IE 10+ */
-ms-overflow-style: none;
/* IE 10+ */
}
/* When loading messages during user switch, hide visual content to avoid jump/flicker */
.chat-body--loading {
opacity: 0;
transition: opacity 180ms ease-in-out;
pointer-events: none; /* prevent interaction during transient loading */
pointer-events: none;
/* prevent interaction during transient loading */
}
// 加载更多样式