550 lines
12 KiB
Vue
550 lines
12 KiB
Vue
|
<template>
|
|||
|
|
<view class="container" :style="pageHeight">
|
|||
|
|
<view class="box-1">
|
|||
|
|
<scroll-view
|
|||
|
|
scroll-y
|
|||
|
|
refresher-background="transparent"
|
|||
|
|
style="height: 100%;"
|
|||
|
|
@scrolltoupper="refresherrefresh"
|
|||
|
|
|
|||
|
|
:refresher-enabled="false"
|
|||
|
|
:scroll-with-animation="false"
|
|||
|
|
:refresher-triggered="scrollView.refresherTriggered"
|
|||
|
|
:scroll-into-view="scrollView.intoView"
|
|||
|
|
>
|
|||
|
|
<!-- <view id="topId"></view> -->
|
|||
|
|
<view class="talk-list" >
|
|||
|
|
<view class=""
|
|||
|
|
v-for="(item,index) in messagesList"
|
|||
|
|
:key="item.id"
|
|||
|
|
>
|
|||
|
|
<view class="item flex-col push" v-if="item.query" >
|
|||
|
|
<image :src="imagesUrl+userAvatar" mode="aspectFill" class="pic"></image>
|
|||
|
|
<view class="content">
|
|||
|
|
<template v-if="item.contentType === 'image'">
|
|||
|
|
<image :src="item.content" mode="widthFix" style="width: 400rpx;"></image>
|
|||
|
|
</template>
|
|||
|
|
<template v-else>
|
|||
|
|
{{item.query}}
|
|||
|
|
</template>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="item flex-col pull " id="po_" v-if="item.answer" >
|
|||
|
|
<view class="po_z"></view>
|
|||
|
|
<image :src="info.icon" mode="aspectFill" class="pic"></image>
|
|||
|
|
<view class="content" >
|
|||
|
|
<template v-if="item.contentType === 'image'">
|
|||
|
|
<image :src="item.content" mode="widthFix" style="width: 400rpx;"></image>
|
|||
|
|
</template>
|
|||
|
|
<template v-else>
|
|||
|
|
|
|||
|
|
<text class="" >
|
|||
|
|
{{item.answer}}
|
|||
|
|
</text>
|
|||
|
|
|
|||
|
|
</template>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view id="bottomId"></view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="box-2">
|
|||
|
|
<view class="flex-col">
|
|||
|
|
|
|||
|
|
<view class="flex-grow">
|
|||
|
|
<input type="text" class="content" v-model="content" placeholder="Please enter what you want to know" placeholder-style="color:#DDD;" :cursor-spacing="6">
|
|||
|
|
</view>
|
|||
|
|
<!-- <view style="margin-right: 20rpx;">
|
|||
|
|
<uni-icons type="image" size="24" color="#32714F" @tap="handleImageClick"></uni-icons>
|
|||
|
|
|
|||
|
|
</view> -->
|
|||
|
|
<button class="send" @tap="handleSendClick">send</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!--
|
|||
|
|
text标签随意，不影响页面展示即可
|
|||
|
|
prop：prop随便取名，options是变量
|
|||
|
|
:change:[name]：name和prop保持一致就行
|
|||
|
|
renderScript：和新加的script标签的module名字一样
|
|||
|
|
onChange：renderScript标签中的方法，
|
|||
|
|
思路是，通过修改options，触发onChange方法
|
|||
|
|
-->
|
|||
|
|
<!-- <text :prop="options" :change:prop="renderScript.onChange"></text> -->
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// @ts-nocheck - Multiple exports allowed for Vue component and renderjs
|
|||
|
|
import { getHistoryMsg } from "@/request/template-talk/history-msg.js";
|
|||
|
|
import requestChat from '../../utils/requestChat'
|
|||
|
|
import config from '@/config'
|
|||
|
|
import {startMsgSocket,msgSocketConnect,sendMsg,closeMsgSocket} from './msgSocket'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
//是否长按事件
|
|||
|
|
islongPress:false,
|
|||
|
|
timer:null,//长按计时器
|
|||
|
|
options: {},
|
|||
|
|
imagesUrl:config.imagesUrl,
|
|||
|
|
info:{},
|
|||
|
|
title:'',
|
|||
|
|
// 聊天列表数据
|
|||
|
|
messagesList:[],
|
|||
|
|
// 滚动容器
|
|||
|
|
scrollView:{
|
|||
|
|
refresherTriggered:false,
|
|||
|
|
intoView:"",
|
|||
|
|
safeAreaHeight:0
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 请求参数
|
|||
|
|
ajax:{
|
|||
|
|
rows:20, //每页数量
|
|||
|
|
page:1, //页码
|
|||
|
|
flag:true, // 请求开关
|
|||
|
|
sendFlag:false
|
|||
|
|
},
|
|||
|
|
// 发送内容
|
|||
|
|
content:'',
|
|||
|
|
userId:null,
|
|||
|
|
userAvatar:null,
|
|||
|
|
taskChat:null,
|
|||
|
|
firstId:null,
|
|||
|
|
limit:100,
|
|||
|
|
scrollId:'bottomId',
|
|||
|
|
tempList :[],
|
|||
|
|
requestTask: null,
|
|||
|
|
tempBuffer: '',
|
|||
|
|
msgSocket:null,
|
|||
|
|
msgTimer:null
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed:{
|
|||
|
|
// 页面高度
|
|||
|
|
pageHeight(){
|
|||
|
|
const safeAreaHeight = this.scrollView.safeAreaHeight;
|
|||
|
|
if(safeAreaHeight > 0){
|
|||
|
|
return `height: calc(${safeAreaHeight}px - var(--window-top));`
|
|||
|
|
}
|
|||
|
|
return "";
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onLoad(option) {
|
|||
|
|
if(option){
|
|||
|
|
let infoData = JSON.parse(option.data)
|
|||
|
|
|
|||
|
|
let tempInfo={
|
|||
|
|
icon:infoData.icon,
|
|||
|
|
token:infoData.token,
|
|||
|
|
conversation:infoData.conversation,
|
|||
|
|
userId:infoData.userId,
|
|||
|
|
userAvatar:infoData.userAvatar
|
|||
|
|
}
|
|||
|
|
uni.setStorageSync('userId',infoData.userId)
|
|||
|
|
this.info = tempInfo
|
|||
|
|
this.userId = infoData.userId
|
|||
|
|
this.userAvatar = infoData.userAvatar
|
|||
|
|
this.getMessage()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onShow() {
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
longpress(){
|
|||
|
|
this.islongPress = true;
|
|||
|
|
console.log("长按事件");
|
|||
|
|
},
|
|||
|
|
//点击事件
|
|||
|
|
clickSprink(){
|
|||
|
|
// 非长按
|
|||
|
|
if(this.islongPress == false){
|
|||
|
|
console.log("点击事件");
|
|||
|
|
}else if(this.islongPress == true){
|
|||
|
|
console.log("长按事件");
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//手指触摸动作开始
|
|||
|
|
touchstart(){
|
|||
|
|
this.timer = setTimeout(()=>{
|
|||
|
|
this.longpress();
|
|||
|
|
},2000)
|
|||
|
|
},
|
|||
|
|
//手指触摸动作结束
|
|||
|
|
touchend(){
|
|||
|
|
//延时执行为了防止 click() 还未判断 islongPress 的值就被置为 fasle
|
|||
|
|
clearTimeout(this.timer);
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.islongPress = false
|
|||
|
|
}, 200)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
startSocket(){
|
|||
|
|
this.msgSocket = startMsgSocket(this.userId)
|
|||
|
|
this.msgInfo()
|
|||
|
|
//追加心跳机制
|
|||
|
|
},
|
|||
|
|
msgInfo() {
|
|||
|
|
if (this.msgSocket) {
|
|||
|
|
this.msgSocket.onMessage(res => {
|
|||
|
|
console.log('触发首页的消息回调',res);
|
|||
|
|
if(res.data.indexOf("conversation_id")>-1){
|
|||
|
|
uni.setStorageSync(this.info.conversation, JSON.parse(res.data).conversation_id);
|
|||
|
|
}else{
|
|||
|
|
this.messagesList[0].answer = this.messagesList[0].answer+res.data
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async sendMessage(query) {
|
|||
|
|
if(this.msgSocket){
|
|||
|
|
closeMsgSocket(this.msgSocket);
|
|||
|
|
this.msgSocket= null
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.startSocket()
|
|||
|
|
this.content = '';
|
|||
|
|
this.ajax.sendFlag = true;
|
|||
|
|
|
|||
|
|
const msgItem = {
|
|||
|
|
query: query,
|
|||
|
|
answer: "",
|
|||
|
|
contentType: 'text'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const requestData = {
|
|||
|
|
"inputs": { "type": "text" },
|
|||
|
|
"query": query,
|
|||
|
|
"response_mode": "streaming",
|
|||
|
|
"conversation_id": uni.getStorageSync(this.info.conversation) || null,
|
|||
|
|
"user": this.userId,
|
|||
|
|
'token': this.info.token,
|
|||
|
|
'answer':''
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
this.messagesList.unshift(msgItem);
|
|||
|
|
let that = this;
|
|||
|
|
setTimeout(()=>{
|
|||
|
|
sendMsg(that.msgSocket,JSON.stringify(requestData))
|
|||
|
|
},500)
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 在renderScript中触发的方法
|
|||
|
|
acceptData(data) {
|
|||
|
|
|
|||
|
|
let that = this
|
|||
|
|
let msgItem = this.messagesList[0]
|
|||
|
|
if(data.line){
|
|||
|
|
if(data.sendStatus&&data.sendStatus == 'ok'){
|
|||
|
|
const lastIndex = data.line.lastIndexOf('}');
|
|||
|
|
const validJsonString = data.line.slice(0, lastIndex + 1);
|
|||
|
|
let item = JSON.parse(validJsonString.replace('data: ',''))
|
|||
|
|
uni.setStorageSync(that.info.conversation,item.conversation_id)
|
|||
|
|
that.ajax.sendFlag = false
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if(data.line.indexOf('answer')>-1&&data.line.indexOf('{')>-1&&data.line.indexOf('}')>-1){
|
|||
|
|
try{
|
|||
|
|
// 查找最后一个出现的'}'字符的索引
|
|||
|
|
const lastIndex = data.line.lastIndexOf('}');
|
|||
|
|
|
|||
|
|
// 截取从开头到这个'}'字符（包括它）的所有内容
|
|||
|
|
const validJsonString = data.line.slice(0, lastIndex + 1);
|
|||
|
|
let item = JSON.parse(validJsonString.replace('data: ',''))
|
|||
|
|
if(item.answer&&!this.tempList.includes(item.answer+'')){
|
|||
|
|
this.tempList.push(item.answer+'')
|
|||
|
|
msgItem.answer = msgItem.answer+(item.answer)
|
|||
|
|
}
|
|||
|
|
that.$set(that.messagesList,0,msgItem)
|
|||
|
|
that.scrollView.intoView = 'bottomId';
|
|||
|
|
}catch (error) {
|
|||
|
|
console.log(177,data.line,177);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
goBack(){
|
|||
|
|
uni.navigateBack()
|
|||
|
|
},
|
|||
|
|
// 下拉刷新
|
|||
|
|
refresherrefresh(e){
|
|||
|
|
this.getMessage();
|
|||
|
|
this.scrollView.refresherTriggered = true;
|
|||
|
|
},
|
|||
|
|
// 获取历史消息
|
|||
|
|
getMessage(){
|
|||
|
|
|
|||
|
|
if(!this.ajax.flag||!uni.getStorageSync(this.info.conversation)){
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
let url = 'v1/messages?user='+this.userId+'&conversation_id='+uni.getStorageSync(this.info.conversation)+'&limit='+this.limit
|
|||
|
|
if(this.firstId){
|
|||
|
|
url = url+"&first_id="+this.firstId
|
|||
|
|
}
|
|||
|
|
let that = this
|
|||
|
|
let get = async ()=>{
|
|||
|
|
that.ajax.flag = false;
|
|||
|
|
let res = await requestChat({
|
|||
|
|
url: url ,
|
|||
|
|
method: 'get',
|
|||
|
|
token:that.info.token
|
|||
|
|
})
|
|||
|
|
let data = res.data
|
|||
|
|
that.scrollView.refresherTriggered = false;
|
|||
|
|
|
|||
|
|
// 获取待滚动元素选择器，解决插入数据后，滚动条定位时使用。取当前消息数据的第一条信息元素
|
|||
|
|
|
|||
|
|
for (var i = 0; i < data.length; i++) {
|
|||
|
|
if(i==0){
|
|||
|
|
that.firstId = data[i].id
|
|||
|
|
}
|
|||
|
|
that.messagesList.unshift(data[i])
|
|||
|
|
}
|
|||
|
|
that.$set(that.messagesList,0,that.messagesList[0])
|
|||
|
|
// 数据挂载后执行，不懂的请自行阅读 Vue.js 文档对 Vue.nextTick 函数说明。
|
|||
|
|
that.$nextTick(()=>{
|
|||
|
|
that.$forceUpdate()
|
|||
|
|
// 设置当前滚动的位置
|
|||
|
|
that.scrollView.intoView = this.scrollId;
|
|||
|
|
})
|
|||
|
|
that.ajax.flag = true;
|
|||
|
|
}
|
|||
|
|
get();
|
|||
|
|
},
|
|||
|
|
// 发送信息
|
|||
|
|
handleSendClick() {
|
|||
|
|
console.log('Send button clicked'); // 调试日志
|
|||
|
|
if(!this.content) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: 'Please enter valid content',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.sendMessage(this.content);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
@import "../../lib/global.scss";
|
|||
|
|
|
|||
|
|
.AirWall{
|
|||
|
|
width: 20px;
|
|||
|
|
height: 20px;
|
|||
|
|
}
|
|||
|
|
.top_{
|
|||
|
|
width: 100%;
|
|||
|
|
position: fixed;
|
|||
|
|
left: 0px;
|
|||
|
|
top: 0px;
|
|||
|
|
height: 180rpx;
|
|||
|
|
background: #32714F;
|
|||
|
|
z-index: 99999;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
|
|||
|
|
padding: 15px;
|
|||
|
|
padding-top: 100rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
color: #fff;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
page{
|
|||
|
|
background-color: #F3F3F3;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
.container{
|
|||
|
|
height: calc(100vh - var(--window-top));
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
flex-wrap: nowrap;
|
|||
|
|
align-content: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: stretch;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 加载数据提示 */
|
|||
|
|
.tips{
|
|||
|
|
position: fixed;
|
|||
|
|
left: 0;
|
|||
|
|
top:var(--window-top);
|
|||
|
|
width: 100%;
|
|||
|
|
z-index: 9;
|
|||
|
|
background-color: rgba(0,0,0,0.15);
|
|||
|
|
height: 72rpx;
|
|||
|
|
line-height: 72rpx;
|
|||
|
|
transform:translateY(-80rpx);
|
|||
|
|
transition: transform 0.3s ease-in-out 0s;
|
|||
|
|
|
|||
|
|
&.show{
|
|||
|
|
transform:translateY(0);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.box-1{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 0;
|
|||
|
|
flex: 1 0 auto;
|
|||
|
|
box-sizing: content-box;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.box-2{
|
|||
|
|
height: auto;
|
|||
|
|
z-index: 2;
|
|||
|
|
border-top: #e5e5e5 solid 1px;
|
|||
|
|
box-sizing: content-box;
|
|||
|
|
background-color: #F3F3F3;
|
|||
|
|
|
|||
|
|
/* 兼容iPhoneX */
|
|||
|
|
padding-bottom: 0;
|
|||
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|||
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|||
|
|
|
|||
|
|
>view{
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
height: 100rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content{
|
|||
|
|
background-color: #fff;
|
|||
|
|
height: 64rpx;
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
border-radius: 32rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.send{
|
|||
|
|
background-color: #32714F;
|
|||
|
|
color: #fff;
|
|||
|
|
height: 64rpx;
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
border-radius: 32rpx;
|
|||
|
|
padding: 0;
|
|||
|
|
width: 120rpx;
|
|||
|
|
line-height: 62rpx;
|
|||
|
|
|
|||
|
|
&:active{
|
|||
|
|
background-color: #32714F;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.talk-list{
|
|||
|
|
padding-bottom: 20rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column-reverse;
|
|||
|
|
flex-wrap: nowrap;
|
|||
|
|
align-content: flex-start;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
align-items: stretch;
|
|||
|
|
|
|||
|
|
// 添加弹性容器，让内容自动在顶部
|
|||
|
|
&::before{
|
|||
|
|
content: '.';
|
|||
|
|
display: inline;
|
|||
|
|
visibility: hidden;
|
|||
|
|
line-height: 0;
|
|||
|
|
font-size: 0;
|
|||
|
|
flex: 1 0 auto;
|
|||
|
|
height: 1px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* 消息项，基础类 */
|
|||
|
|
.item{
|
|||
|
|
padding: 20rpx 20rpx 0 20rpx;
|
|||
|
|
align-items:flex-start;
|
|||
|
|
align-content:flex-start;
|
|||
|
|
color: #333;
|
|||
|
|
|
|||
|
|
.pic{
|
|||
|
|
width: 92rpx;
|
|||
|
|
height: 92rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
border: #fff solid 1px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content{
|
|||
|
|
padding: 20rpx;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
max-width: 500rpx;
|
|||
|
|
word-break: break-all;
|
|||
|
|
line-height: 52rpx;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 收到的消息 */
|
|||
|
|
&.pull{
|
|||
|
|
.content{
|
|||
|
|
margin-left: 32rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
|
|||
|
|
&::after{
|
|||
|
|
content: '';
|
|||
|
|
display: block;
|
|||
|
|
width: 0;
|
|||
|
|
height: 0;
|
|||
|
|
border-top: 16rpx solid transparent;
|
|||
|
|
border-bottom: 16rpx solid transparent;
|
|||
|
|
border-right: 20rpx solid #fff;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 30rpx;
|
|||
|
|
left: -18rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* 发出的消息 */
|
|||
|
|
&.push{
|
|||
|
|
/* 主轴为水平方向，起点在右端。使不修改DOM结构，也能改变元素排列顺序 */
|
|||
|
|
flex-direction: row-reverse;
|
|||
|
|
|
|||
|
|
.content{
|
|||
|
|
margin-right: 32rpx;
|
|||
|
|
background-color: #32714F;
|
|||
|
|
color: #fff;
|
|||
|
|
|
|||
|
|
&::after{
|
|||
|
|
content: '';
|
|||
|
|
display: block;
|
|||
|
|
width: 0;
|
|||
|
|
height: 0;
|
|||
|
|
border-top: 16rpx solid transparent;
|
|||
|
|
border-bottom: 16rpx solid transparent;
|
|||
|
|
border-left: 20rpx solid #32714F;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 30rpx;
|
|||
|
|
right: -18rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|