Merge branch 'dev' of https://gitea.wangzhiwen.top/0214/ALOps_sys1 into dev
commit
07efe8e04b
@ -0,0 +1,248 @@ |
||||
<template> |
||||
|
||||
<div id="app"> |
||||
<el-card class="customer-service"> |
||||
<!-- 客服头部 --> |
||||
<div class="service-header"> |
||||
<h2>AI智能助手</h2> |
||||
<p>您好，我是智能助手，很高兴为您服务</p> |
||||
</div> |
||||
|
||||
<div class="service-container"> |
||||
<!-- 右侧聊天区域 --> |
||||
<div class="chat-section"> |
||||
<div class="chat-messages" ref="messagesContainer"> |
||||
<div |
||||
v-for="(message, index) in messages" |
||||
:key="index" |
||||
:class="['message', message.sender]" |
||||
> |
||||
<div class="message-content"> |
||||
<div>{{ message.text }}</div> |
||||
<div class="timestamp">{{ message.time }}</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="chat-input"> |
||||
<el-input |
||||
v-model="newMessage" |
||||
placeholder="请输入您的问题..." |
||||
@keyup.enter.native="sendMessage" |
||||
></el-input> |
||||
<el-button |
||||
type="primary" |
||||
@click="sendMessage" |
||||
:disabled="!newMessage.trim()" |
||||
>发送</el-button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus, deptTreeSelect } from "@/api/inMonitoring/assessment" |
||||
import { getToken } from "@/utils/auth" |
||||
import Treeselect from "@riophae/vue-treeselect" |
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css" |
||||
import { Splitpanes, Pane } from "splitpanes" |
||||
import "splitpanes/dist/splitpanes.css" |
||||
|
||||
export default { |
||||
name: "User", |
||||
dicts: ['sys_normal_disable', 'sys_user_sex'], |
||||
components: { Treeselect, Splitpanes, Pane }, |
||||
data() { |
||||
return { |
||||
newMessage: '', |
||||
messages: [ |
||||
{ |
||||
text: '您好！我是AI智能助手，请问有什么可以帮您？', |
||||
sender: 'service', |
||||
time: this.formatTime(new Date()) |
||||
} |
||||
], |
||||
faqs: [ |
||||
{ question: '如何查询订单状态？', answer: '您可以在"我的订单"页面查看订单的当前状态和物流信息。' }, |
||||
{ question: '如何办理退货？', answer: '请在订单详情页点击"申请退货"，填写相关信息后提交申请。' }, |
||||
{ question: '支付方式有哪些？', answer: '我们支持支付宝、微信支付、银联等多种支付方式。' }, |
||||
{ question: '会员有哪些优惠？', answer: '会员可享受购物折扣、专属优惠券、生日特权等多重优惠。' }, |
||||
{ question: '商品何时发货？', answer: '一般情况下，我们会在订单支付成功后24小时内安排发货。' } |
||||
] |
||||
}; |
||||
},mounted() { |
||||
// 初始化时滚动到底部 |
||||
this.scrollToBottom(); |
||||
}, |
||||
methods: { |
||||
sendMessage() { |
||||
if (!this.newMessage.trim()) return; |
||||
|
||||
// 添加用户消息 |
||||
this.messages.push({ |
||||
text: this.newMessage, |
||||
sender: 'customer', |
||||
time: this.formatTime(new Date()) |
||||
}); |
||||
|
||||
// 模拟自动回复 |
||||
setTimeout(() => { |
||||
this.autoReply(this.newMessage); |
||||
}, 1000); |
||||
|
||||
this.newMessage = ''; |
||||
}, |
||||
autoReply(userMessage) { |
||||
let replyText = ''; |
||||
|
||||
// 简单关键词匹配回复 |
||||
if (userMessage.includes('订单') || userMessage.includes('物流')) { |
||||
replyText = '您可以在"我的订单"页面查看订单详情和物流信息。'; |
||||
} else if (userMessage.includes('支付') || userMessage.includes('付款')) { |
||||
replyText = '我们支持支付宝、微信支付、银联等多种支付方式。'; |
||||
} else if (userMessage.includes('退货') || userMessage.includes('退款')) { |
||||
replyText = '如需退货退款，请在订单详情页提交申请，客服会尽快处理。'; |
||||
} else if (userMessage.includes('会员') || userMessage.includes('优惠')) { |
||||
replyText = '会员可享受专属折扣和优惠券，详情请查看会员中心。'; |
||||
} else if (userMessage.includes('发票')) { |
||||
replyText = '您可以在下单时选择开具发票，我们提供电子发票和纸质发票两种方式。'; |
||||
} else { |
||||
replyText = '抱歉，我没有完全理解您的问题。您可以尝试联系人工客服获得更详细的帮助。'; |
||||
} |
||||
|
||||
// 添加客服回复 |
||||
this.messages.push({ |
||||
text: replyText, |
||||
sender: 'service', |
||||
time: this.formatTime(new Date()) |
||||
}); |
||||
|
||||
// 滚动到底部 |
||||
this.scrollToBottom(); |
||||
}, |
||||
selectFaq(faq) { |
||||
// 添加用户选择的常见问题 |
||||
this.messages.push({ |
||||
text: faq.question, |
||||
sender: 'customer', |
||||
time: this.formatTime(new Date()) |
||||
}); |
||||
|
||||
// 添加对应的回答 |
||||
setTimeout(() => { |
||||
this.messages.push({ |
||||
text: faq.answer, |
||||
sender: 'service', |
||||
time: this.formatTime(new Date()) |
||||
}); |
||||
this.scrollToBottom(); |
||||
}, 1000); |
||||
}, |
||||
scrollToBottom() { |
||||
this.$nextTick(() => { |
||||
const container = this.$refs.messagesContainer; |
||||
container.scrollTop = container.scrollHeight; |
||||
}); |
||||
}, |
||||
formatTime(date) { |
||||
const hours = date.getHours().toString().padStart(2, '0'); |
||||
const minutes = date.getMinutes().toString().padStart(2, '0'); |
||||
return `${hours}:${minutes}`; |
||||
} |
||||
}, |
||||
watch: { |
||||
messages: { |
||||
handler() { |
||||
this.scrollToBottom(); |
||||
}, |
||||
deep: true |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
<style scoped> |
||||
|
||||
#app { |
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; |
||||
margin: 20px; |
||||
} |
||||
.customer-service { |
||||
/* max-width: 1000px; */ |
||||
margin: 0 auto; |
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
||||
border-radius: 4px; |
||||
} |
||||
.service-header { |
||||
background-color: #409EFF; |
||||
color: white; |
||||
padding: 15px 20px; |
||||
border-top-left-radius: 4px; |
||||
border-top-right-radius: 4px; |
||||
} |
||||
.service-container { |
||||
display: flex; |
||||
min-height: 400px; |
||||
} |
||||
.faq-section { |
||||
width: 30%; |
||||
border-right: 1px solid #e6e6e6; |
||||
overflow-y: auto; |
||||
padding: 15px; |
||||
} |
||||
.chat-section { |
||||
width: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
.chat-messages { |
||||
flex: 1; |
||||
overflow-y: auto; |
||||
padding: 15px; |
||||
} |
||||
.message { |
||||
margin-bottom: 15px; |
||||
display: flex; |
||||
} |
||||
.message.customer { |
||||
justify-content: flex-end; |
||||
} |
||||
.message-content { |
||||
max-width: 70%; |
||||
padding: 10px 15px; |
||||
border-radius: 4px; |
||||
} |
||||
.message.customer .message-content { |
||||
background-color: #ecf5ff; |
||||
border: 1px solid #d9ecff; |
||||
} |
||||
.message.service .message-content { |
||||
background-color: #f4f4f5; |
||||
border: 1px solid #e9e9eb; |
||||
} |
||||
.chat-input { |
||||
padding: 15px; |
||||
border-top: 1px solid #e6e6e6; |
||||
display: flex; |
||||
} |
||||
.chat-input .el-input { |
||||
margin-right: 10px; |
||||
} |
||||
.faq-item { |
||||
padding: 10px; |
||||
margin-bottom: 10px; |
||||
border-radius: 4px; |
||||
cursor: pointer; |
||||
border: 1px solid #ebeef5; |
||||
} |
||||
.faq-item:hover { |
||||
background-color: #f5f7fa; |
||||
} |
||||
.timestamp { |
||||
font-size: 12px; |
||||
color: #909399; |
||||
margin-top: 5px; |
||||
text-align: right; |
||||
} |
||||
</style> |
||||
@ -1,272 +0,0 @@ |
||||
<template> |
||||
<div class="chat-container"> |
||||
<!-- 消息列表区域 --> |
||||
<el-scrollbar |
||||
ref="messageScroll" |
||||
class="message-area" |
||||
@scroll.native="handleScroll"> |
||||
<div |
||||
v-for="(msg, index) in messages" |
||||
:key="index" |
||||
:class="['message', msg.sender === 'user' ? 'user-msg' : 'customer-msg']"> |
||||
<el-avatar :size="40" :src="msg.avatar"></el-avatar> |
||||
<div class="message-content"> |
||||
<div class="sender">{{ msg.sender === 'user' ? '我' : '客服' }}</div> |
||||
<div class="content">{{ msg.content }}</div> |
||||
<div class="time">{{ formatTime(msg.timestamp) }}</div> |
||||
</div> |
||||
</div> |
||||
<!-- 加载中提示 --> |
||||
<div |
||||
v-if="loading" |
||||
class="loading-indicator"> |
||||
<i class="el-icon-loading"></i> 加载中... |
||||
</div> |
||||
</el-scrollbar> |
||||
|
||||
<!-- 输入区域 --> |
||||
<div class="input-area"> |
||||
<el-input |
||||
v-model="inputMessage" |
||||
type="textarea" |
||||
placeholder="请输入消息..." |
||||
@keyup.enter.native="sendMessage" |
||||
:disabled="!connected"> |
||||
</el-input> |
||||
<div class="action-buttons"> |
||||
<el-button |
||||
type="primary" |
||||
@click="sendMessage" |
||||
:disabled="!connected || !inputMessage.trim()" |
||||
:loading="sending"> |
||||
发送 |
||||
</el-button> |
||||
<el-button @click="toggleConnection"> |
||||
{{ connected ? '断开' : '连接' }} |
||||
</el-button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { Loading } from 'element-ui'; |
||||
|
||||
export default { |
||||
data() { |
||||
return { |
||||
messages: [], |
||||
inputMessage: '', |
||||
connected: false, |
||||
loading: false, |
||||
sending: false, |
||||
page: 1, |
||||
pageSize: 20 |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.connect(); |
||||
this.scrollToBottom(); |
||||
}, |
||||
methods: { |
||||
// 连接客服系统 |
||||
connect() { |
||||
this.connected = true; |
||||
this.loadMessages(); |
||||
}, |
||||
|
||||
// 断开连接 |
||||
toggleConnection() { |
||||
this.connected = !this.connected; |
||||
if (this.connected) { |
||||
this.loadMessages(); |
||||
} |
||||
}, |
||||
|
||||
// 加载历史消息 |
||||
async loadMessages() { |
||||
this.loading = true; |
||||
try { |
||||
// 模拟API请求 |
||||
const response = await this.mockApiCall(); |
||||
this.messages = response.data; |
||||
this.page++; |
||||
} catch (error) { |
||||
console.error('加载消息失败:', error); |
||||
} finally { |
||||
this.loading = false; |
||||
this.$nextTick(this.scrollToBottom); |
||||
} |
||||
}, |
||||
|
||||
// 发送消息 |
||||
sendMessage() { |
||||
if (!this.inputMessage.trim()) return; |
||||
|
||||
this.sending = true; |
||||
|
||||
// 模拟发送延时 |
||||
setTimeout(() => { |
||||
this.messages.push({ |
||||
sender: 'user', |
||||
content: this.inputMessage, |
||||
timestamp: Date.now(), |
||||
avatar: 'https://via.placeholder.com/40?text=U' |
||||
}); |
||||
|
||||
this.inputMessage = ''; |
||||
this.sending = false; |
||||
this.scrollToBottom(); |
||||
|
||||
// 模拟客服回复 |
||||
this.simulateCustomerReply(); |
||||
}, 500); |
||||
}, |
||||
|
||||
// 模拟客服自动回复 |
||||
simulateCustomerReply() { |
||||
setTimeout(() => { |
||||
this.messages.push({ |
||||
sender: 'customer', |
||||
content: '您好，已收到您的消息，我们会尽快处理', |
||||
timestamp: Date.now(), |
||||
avatar: 'https://via.placeholder.com/40?text=C' |
||||
}); |
||||
this.scrollToBottom(); |
||||
}, 1000); |
||||
}, |
||||
|
||||
// 滚动到底部 |
||||
scrollToBottom() { |
||||
const scrollContainer = this.$refs.messageScroll.$el.querySelector('.el-scrollbar__wrap'); |
||||
if (scrollContainer) { |
||||
scrollContainer.scrollTop = scrollContainer.scrollHeight; |
||||
} |
||||
}, |
||||
|
||||
// 处理滚动事件 |
||||
handleScroll(e) { |
||||
const { scrollTop, scrollHeight, clientHeight } = e.target; |
||||
const scrollBottom = scrollHeight - scrollTop - clientHeight; |
||||
|
||||
// 滚动到底部加载更多 |
||||
if (scrollBottom < 50 && !this.loading) { |
||||
this.loadMoreMessages(); |
||||
} |
||||
}, |
||||
|
||||
// 加载更多消息 |
||||
async loadMoreMessages() { |
||||
this.loading = true; |
||||
try { |
||||
// 模拟API请求更多消息 |
||||
const response = await this.mockApiCall(this.page); |
||||
this.messages = [...response.data, ...this.messages]; |
||||
this.page++; |
||||
} catch (error) { |
||||
console.error('加载更多消息失败:', error); |
||||
} finally { |
||||
this.loading = false; |
||||
} |
||||
}, |
||||
|
||||
// 格式化时间 |
||||
formatTime(timestamp) { |
||||
return new Date(timestamp).toLocaleTimeString(); |
||||
}, |
||||
|
||||
// 模拟API请求 |
||||
mockApiCall(page = 1) { |
||||
return new Promise((resolve) => { |
||||
setTimeout(() => { |
||||
resolve({ |
||||
data: Array(this.pageSize).fill().map((_, i) => ({ |
||||
sender: Math.random() > 0.5 ? 'user' : 'customer', |
||||
content: `消息 ${(page-1)*this.pageSize + i + 1}`, |
||||
timestamp: Date.now() - i * 1000, |
||||
avatar: Math.random() > 0.5 |
||||
? 'https://via.placeholder.com/40?text=U' |
||||
: 'https://via.placeholder.com/40?text=C' |
||||
})) |
||||
}); |
||||
}, 800); |
||||
}); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style> |
||||
.chat-container { |
||||
display: flex; |
||||
flex-direction: column; |
||||
height: 100vh; |
||||
border: 1px solid #ebeef5; |
||||
border-radius: 4px; |
||||
} |
||||
|
||||
.message-area { |
||||
flex: 1; |
||||
padding: 20px; |
||||
overflow-y: auto; |
||||
} |
||||
|
||||
.message { |
||||
display: flex; |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
.user-msg { |
||||
flex-direction: row-reverse; |
||||
} |
||||
|
||||
.customer-msg { |
||||
flex-direction: row; |
||||
} |
||||
|
||||
.message-content { |
||||
margin-left: 15px; |
||||
background: #f0f0f0; |
||||
padding: 12px; |
||||
border-radius: 8px; |
||||
max-width: 80%; |
||||
} |
||||
|
||||
.user-msg .message-content { |
||||
background: #e1f0ff; |
||||
} |
||||
|
||||
.sender { |
||||
font-weight: bold; |
||||
margin-bottom: 5px; |
||||
} |
||||
|
||||
.content { |
||||
white-space: pre-wrap; |
||||
} |
||||
|
||||
.time { |
||||
font-size: 0.8em; |
||||
color: #999; |
||||
text-align: right; |
||||
margin-top: 5px; |
||||
} |
||||
|
||||
.input-area { |
||||
padding: 15px; |
||||
border-top: 1px solid #ebeef5; |
||||
background: #fff; |
||||
} |
||||
|
||||
.action-buttons { |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
margin-top: 10px; |
||||
} |
||||
|
||||
.loading-indicator { |
||||
text-align: center; |
||||
padding: 15px; |
||||
color: #999; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue