weipengfei
/
xunfeiAI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
xunfeiAI/pages/index/index.vue

1826 lines
42 KiB
Vue
Raw Normal View History

'提交代码'
2023-09-12 20:19:08 +08:00
<template>
代码上传
2023-10-14 21:22:07 +08:00
<view class="wrapper" @touchmove="touchmove">
<view class="conten-top">
<view class="" style="position: absolute;left: 30rpx;"><i class="iconfont icon-xiangzuo"
style="font-size: 40rpx;text-align: left;"></i></view>
<view class="" style="font-size: 30rpx;">
农业咨询
</view>
</view>
<view style="padding-top:var(--status-bar-height);padding-bottom: 30rpx; margin-bottom: 30rpx;"></view>
<view class="tips color_fff size_12 align_c" :class="{ 'show':ajax.loading }" @tap="getHistoryMsg">
{{ajax.loadText}}
</view>
<view class="placeholder"></view>
<view class="box-1" id="list-box" ref="box">
<view class="talk-list">
<view class="talk-list-con">
<view class="talk-list-con-title">
您好！
</view>
<view class="talk-list-con-title1">
语音
2023-10-18 18:40:58 +08:00
您可以和我说任何有关教育的问题。<br />
代码上传
2023-10-14 21:22:07 +08:00
例如下面的问题，赶快试试吧！
</view>
<view class="talk-list-con-title2">
<text style="margin-top: 15rpx;"> 下方输入：</text>
语音
2023-10-18 18:40:58 +08:00
<view class="" @click="sendDetail('怎么教育孩子')">
怎么教育孩子
代码上传
2023-10-14 21:22:07 +08:00
<image src="../../static/icon/airight.png" mode=""></image>
</view>
</view>
</view>
<view v-for="(item,index) in talkList" :key="index" :id="`msg-${item.id}`">
语音
2023-10-18 18:40:58 +08:00
<view class="item flex_col" :class="item.type == 1 ? 'push':'pull' ">
代码上传
2023-10-14 21:22:07 +08:00
<image :src="item.type==1?avatar:item.pic" mode="aspectFill" class="pic" v-if="item.pic">
</image>
<view class="content" v-if="item.id=='@'">
<!-- 加载中 -->
<view class="blinking-box">
<image src="@/static/icon/ioc.gif" mode="aspectFit"></image>
<view class="">正在快速生成答案</view>
</view>
</view>
<view class="" v-else>
<view v-if="talkList.length-1==index" class="multiline-text">
<view class="content">
<bing-math v-if="c_content!=''" :key="`math-${item.id}`" class="bing-math1"
:latex="c_content"></bing-math>
<view v-else class="blinking-box">
<image src="@/static/icon/ioc.gif" mode="aspectFit"></image>
<view class="">正在快速生成答案</view>
</view>
</view>
<view class="contenta" v-if="c_content!=''&&index==nums">
语音
2023-10-18 18:40:58 +08:00
<view class="contenta-img" v-if='palystatus' @click="palyaudio(item,index)">
代码上传
2023-10-14 21:22:07 +08:00
<image src="@/static/icon/ai7.png" mode="aspectFit"></image>
</view>
语音
2023-10-18 18:40:58 +08:00
<view class="contenta-img" v-else @click="palyaudio(item,index)">
代码上传
2023-10-14 21:22:07 +08:00
<image src="@/static/icon/ai8.png" mode="aspectFit"></image>
</view>
<view class="contenta-ai" v-show="palystatus==false">
<image src="@/static/icon/ai.gif" mode="aspectFit"></image>
</view>
<view class="contenta-imga" @tap="copyContent(c_content)"
:style="{'margin-left':palystatus==false?'377rpx' :'427rpx','margin-right': '20rpx'}">
<image src="@/static/icon/ai10.png" mode="aspectFit"></image>
</view>
<view class="contenta-imga" @click="Share">
<image src="@/static/icon/ai9.png" mode="aspectFit"></image>
</view>
</view>
</view>
<view v-else class="content multiline-text">
<!-- <rich-text :nodes="item.content"></rich-text> -->
<bing-math :key="`math-${item.id}`" class="bing-math" :latex="item.content"></bing-math>
</view>
</view>
</view>
</view>
<view id="bottom-box"></view>
</view>
</view>
<uni-transition custom-class="box-2" mode-class="slide-left" :show="showStop">
<view class="flex_col">
<view class="flex_grow content downsocket" @click="closeSocketTask">中断连接</view>
</view>
</uni-transition>
<uni-transition custom-class="box-2" mode-class="slide-right" :show="!showStop">
<view class="flex_c">
<view class="flex_c_img" v-if="isshow" @click="hidesend">
<image src="@/static/icon/hua.png" mode="aspectFit"></image>
</view>
<view class="flex_c_img" v-else @click="hidesend">
<image src="@/static/icon/den.png" mode="aspectFit"></image>
</view>
<view class="flex_c_txt" v-if="isshow">
<input type="text" class="content" v-model="content" placeholder="输入您要咨询的内容" @focus="focus"
@confirm="send" placeholder-style="color:#DDD;" :cursor-spacing="6">
</view>
<view class="flex_c_txt" v-else>
语音
2023-10-18 18:40:58 +08:00
<view class="con" @touchend="end" @touchmove="move" @touchstart="start">
代码上传
2023-10-14 21:22:07 +08:00
{{btnStatus==0? "按住说话":btnStatus==1? "说话中...": btnStatus==2? "松开手指发送录音": "上划取消"}}
</view>
<!-- <view :class=" btnStatus==0? 'footerBtn': btnStatus==1?'footerBtn_star':'footerBtn_move'">
<view class="footerBtn_chr" @touchend="end" @touchmove="move" @touchstart="start">
{{btnStatus==0? "按住说话":btnStatus==1? "说话中...": btnStatus==2? "松开手指发送录音": "上划取消"}}
</view>
</view> -->
</view>
<view class="flex_c_img" @tap="send" v-if='content.length>0'>
<image src="@/static/icon/fa1.png" mode="aspectFit"></image>
</view>
<view class="flex_c_img" @tap="send" v-else>
<image src="@/static/icon/fa.png" mode="aspectFit"></image>
</view>
<view class="flex_c_img" @click="addgn">
<image src="@/static/icon/jia.png" mode="aspectFit"></image>
</view>
<!-- <button class="send" @tap="send">发送</button> -->
</view>
<view class="flex_d" v-if="gnishow">
<view class="" @click="album">
<image src="../../static/icon/ai2.png" mode=""></image>
</view>
<view class="" @click="camera">
<image src="../../static/icon/ai3.png" mode=""></image>
</view>
</view>
</uni-transition>
<uni-popup ref="popup" :mask-click="false">
<view class="popup_box" @touchend="end" @touchmove="move" @touchstart="start">
<view class="move">
<view v-if="btnStatus!==0" :class="btnStatus==3? 'move_center_clear': 'move_center'">
<view class="move_center_top">
<view class="move_center_item" v-for="(item,index) in 15" :key="index"
:style="{'background':btnStatus==3?'rgba(250, 83, 83, .5)':'rgba(149, 234, 108, .5)'}">
</view>
</view>
<view class="move_center_footer">
{{btnStatus==3? '松开手指,取消发送':"正在录音..."}}
</view>
</view>
</view>
<view class="popup_box-con">
<view class="popup_box-cona">
<view :class="risshow?'bg1':''">
X
</view>
<!-- <view class="" @tap="$u.throttle(end, 1000)">
文
</view> -->
</view>
<view class="popup_box-conb">
<image src="@/static/icon/ai1.png" mode=""></image>
</view>
</view>
</view>
</uni-popup>
语音
2023-10-18 18:40:58 +08:00
<qiqbshare ref="child"></qiqbshare>
代码上传
2023-10-14 21:22:07 +08:00
</view>
'提交代码'
2023-09-12 20:19:08 +08:00
</template>
<script>
代码上传
2023-10-14 21:22:07 +08:00
import {
xuiat,
iatWss,
debounce,
throttle,
语音
2023-10-18 18:40:58 +08:00
fileToBase64,
dataURLtoBlob,
ttWss,
代码上传
2023-10-14 21:22:07 +08:00
} from "@/api/api.js"
import {
HTTP_REQUEST_URL
} from '@/config/app';
import {
pathToBase64,
base64ToPath
} from '@/js_sdk/mmmm-image-tools/index.js'
import * as base64 from "base-64"
import CryptoJS from '../../static/crypto-js/crypto-js.js'
import parser from '../../static/fast-xml-parser/src/parser'
import * as utf8 from "utf8"
import BingMath from "@/components/bing-math/bing-math.vue"
import qiqbshare from "@/components/qiqb-share/qiqb-share.vue"
语音
2023-10-18 18:40:58 +08:00
// 获取 module
const sr = uni.requireNativePlugin("YL-SpeechRecognition")
代码上传
2023-10-14 21:22:07 +08:00
const innerAudioContext = uni.createInnerAudioContext()
export default {
components: {
'bing-math': BingMath,
'qiqbshare': qiqbshare,
},
data() {
return {
语音
2023-10-18 18:40:58 +08:00
wssType: 'jiaoyu', // 网络连接类型
avatarType: "/static/icon/jy.png", // AI头像类型
代码上传
2023-10-14 21:22:07 +08:00
talkList: [],
ajax: {
rows: 15, //每页数量
page: 1, //页码
flag: false, // 请求开关
loading: false, // 加载中
loadText: '正在获取消息'
},
keyboardHeight: 0,
showplc: true,
content: '',
c_content: '',
n_content: '',
avatar: '/static/avatar.png', // 用户头像
params: [], // 发送的消息内容
timer: '',
timer1: '',
socketTask: {},
TEXT: '',
historyTextList: [], // 历史会话信息，由于最大token12000,可以结合实际使用，进行移出
tempRes: '', // 临时答复保存
socketing: false, // 是否正在接收
showStop: false, // 是否显示中断按钮
scrollTop: 0,
isshow: true,
shouldScrollToBottom: true,
nums: 0,
palystatus: true, //播放状态
recordFlg: true, //录音锁
btnStatus: 0, //按钮状态
audioDuration: "",
voicePath: "", //音频本地路径
timer: null, //定时器
num: 0, //录音时长
gnishow: false,
audioUrl: '',
audioTxt: '',
handlerInterval: null,
huashow: false,
Fstatus: false,
touchStartX: 0, //触摸时的原点
touchStartY: 0, //触摸时的原点
touchMoveX: 0, // x轴方向移动的距离
touchMoveY: 0, // y轴方向移动的距离
risshow: false,
islong: false,
// 是否开始绘制
isDraw: false,
imageSize: {
语音
2023-10-18 18:40:58 +08:00
},
audio_file: [],
currentIndex: 0,
wv: null
代码上传
2023-10-14 21:22:07 +08:00
}
},
mounted() {
this.$nextTick(() => {
this.getHistoryMsg();
});
uni.onKeyboardHeightChange(e => {
let h = this.keyboardHeight;
this.keyboardHeight = e.height;
this.$nextTick(() => {
setTimeout(() => {
uni.pageScrollTo({
scrollTop: 9999999, // 当前位置向下滚动
duration: 300 // 滚动过渡时间为300ms，默认值为300ms
});
}, 0)
})
})
语音
2023-10-18 18:40:58 +08:00
//初始化
sr.init("2eda6c2e");
//创建文字转语音对象
sr.createTts(code => {});
//创建语音转文字对象
sr.createIat(code => {
console.log(code, '1111111111')
});
代码上传
2023-10-14 21:22:07 +08:00
语音
2023-10-18 18:40:58 +08:00
sr.setVadBos(10 * 1000); //设置语音听写前端点超时时间ms（最大10s,一般按默认即可）
sr.setVadEos(10 * 1000); //设置语音听写后端点超时时间ms（最大10s,一般按默认即可）
},
beforeDestroy() {
sr.destroy();
代码上传
2023-10-14 21:22:07 +08:00
},
onLoad() {
let avatar = uni.getStorageSync('avatar');
avatar ? this.avatar = avatar : null;
uni.$on('MPinfo', (e) => {
this.avatar = e.avatar;
})
语音
2023-10-18 18:40:58 +08:00
代码上传
2023-10-14 21:22:07 +08:00
},
beforeDestroy() {
// #ifdef APP-PLUS
uni.offKeyboardHeightChange();
// #endif
},
onPageScroll(e) {
if (e.scrollTop < 5) {
this.getHistoryMsg();
}
},
watch: {
n_content(n, o) {
// this.c_content = n;
if (this.timer) clearInterval(this.timer);
let cl = this.c_content.length;
let nc = this.n_content.split('');
this.timer = setInterval(() => {
if (cl < nc.length) {
this.c_content += nc[cl];
cl++;
if (cl % 6 == 0) this.$nextTick(() => {
uni.pageScrollTo({
scrollTop: 999999,
})
})
} else {
// console.log(this.socketing==false, cl == nc.length);
if (this.socketing == false) this.showStop = false;
clearInterval(this.timer);
this.$nextTick(() => {
uni.pageScrollTo({
scrollTop: 9999999,
})
})
}
}, 60)
},
},
methods: {
语音
2023-10-18 18:40:58 +08:00
//海报计算
代码上传
2023-10-14 21:22:07 +08:00
cavshare(data) {
let arry = []
let arry1 = []
let a;
let b;
语音
2023-10-18 18:40:58 +08:00
if (data.length > 2) {
a = data.length - 2
b = data.length - 1
} else {
a = 0
b = 1
}
代码上传
2023-10-14 21:22:07 +08:00
for (let i in data[a].content) {
if (data[a].content.slice(i * 22, (i + 1) * 22)) {
arry.push(data[a].content.slice(i * 22, (i + 1) * 22))
}
}
for (let i in data[b].content) {
if (data[b].content.slice(i * 22, (i + 1) * 22)) {
arry1.push(data[b].content.slice(i * 22, (i + 1) * 22))
}
语音
2023-10-18 18:40:58 +08:00
代码上传
2023-10-14 21:22:07 +08:00
}
// console.log(arry1.length,arry.length)
语音
2023-10-18 18:40:58 +08:00
this.imageSize.height = (arry1.length * 20) + (arry.length * 20) + 100 + 150
this.$refs.child.refresh(this.talkList, this.imageSize.height, (arry.length * 20) + 100);
代码上传
2023-10-14 21:22:07 +08:00
},
//滑动到底部
TabItemTap(e) {
uni.pageScrollTo({
selector: ".box-1",
scrollTop: 0
})
},
//分享
Share() {
语音
2023-10-18 18:40:58 +08:00
代码上传
2023-10-14 21:22:07 +08:00
// this.isDraw = !this.isDraw;
this.cavshare(this.talkList)
this.$refs.child.init()
},
//打开相册
album() {
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album'], //这要注意，camera掉拍照，album是打开手机相册
success: (res) => {
// const tempFilePaths = res.tempFilePaths;
this.imgfile(res.tempFilePaths)
let data = {
"id": '@',
"content": '',
"type": 2,
"pic": this.avatarType
}
this.talkList.push(data);
}
});
},
//拍照
camera() {
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['camera'], //这要注意，camera掉拍照，album是打开手机相册
success: (res) => {
console.log(res);
// const tempFilePaths = res.tempFilePaths;
this.imgfile(res.tempFilePaths)
let data = {
"id": '@',
"content": '',
"type": 2,
"pic": this.avatarType
}
this.talkList.push(data);
}
});
},
//复制
copyContent(data) {
uni.setClipboardData({
data,
success: function() {
uni.getClipboardData({
success: function(res) {
uni.showToast({
title: "复制成功",
});
}
});
}
});
},
//图片转文字
imgfile(tempFilePath) {
let that = this
console.log(tempFilePath, '2')
uni.uploadFile({
url: HTTP_REQUEST_URL + '/api/xun_fei/ocr', // 上传地址
filePath: tempFilePath[0], // 要上传的文件路径
name: 'image', // 上传文件对应的 key 值
header: {
'content-type': 'multipart/form-data'
},
success: function(res) {
let data = JSON.parse(res.data)
console.log(data)
if (data.code == 1) {
uni.showToast({
title: '图片识别成功'
});
that.talkList = that.talkList.filter(item => item.id !== '@');
if (data.data.words.length > 0) {
that.content = ''
for (let i in data.data.words) {
that.content = that.content + data.data.words[i]
}
that.send1()
}
}
},
fail: function(error) {
// 上传失败处理逻辑
that.talkList = that.talkList.filter(item => item.id !== '@');
console.log(error, 11);
}
})
},
语音
2023-10-18 18:40:58 +08:00
代码上传
2023-10-14 21:22:07 +08:00
//功能展开
addgn() {
this.gnishow = !this.gnishow
},
// 点击关闭遮罩层
closePop() {
this.$refs.popup.close()
},
//振动
onFeedTap() {
let platform = uni.getSystemInfoSync().platform
// #ifdef APP-PLUS
if (platform == "ios") {
let UIImpactFeedbackGenerator = plus.ios.importClass('UIImpactFeedbackGenerator');
let impact = new UIImpactFeedbackGenerator();
impact.prepare();
impact.init(1);
impact.impactOccurred();
}
if (platform == "android") {
// uni.vibrateShort();
uni.vibrateShort({
success: () => {
console.log('success');
},
fail: () => {
console.log('失败');
},
});
}
// #endif
},
语音
2023-10-18 18:40:58 +08:00
代码上传
2023-10-14 21:22:07 +08:00
//文字转语音
txtspeech(val, i) {
语音
2023-10-18 18:40:58 +08:00
xuiat({
text: val
代码上传
2023-10-14 21:22:07 +08:00
}).then(res => {
语音
2023-10-18 18:40:58 +08:00
if (res.code == 1) {
this.talkList[i].audio_file = res.data.audio_file
代码上传
2023-10-14 21:22:07 +08:00
this.nums = this.talkList.length - 1
语音
2023-10-18 18:40:58 +08:00
// this.palyaudio(res.data)
代码上传
2023-10-14 21:22:07 +08:00
}
}).catch((err) => {
console.log(err)
})
语音
2023-10-18 18:40:58 +08:00
// 暂时不用
// let arry1;
// if (val.indexOf(',') == -1) {
// arry1 = val.split(',')
// } else if (val.indexOf('，') == -1) {
// arry1 = val.split('，')
// } else {
// arry1.push(val)
// }
// const temp = []
// for (let i = 0; i < arry1.length; i++) {
// temp.push(
// // 使用Promise用于异步计算
// new Promise((resolve, reject) => {
// ttWss({
// data: arry1[i]
// }).then(res => {
// return resolve(res.data.mp3)
// }).catch(err => {
// return reject(err)
// })
// })
// )
// }
// Promise.all(temp).then(res => {
// // console.log(res,'2222222')
// this.audio_file = res
// this.ScanAudio(res, this.currentIndex, 0)
// })
代码上传
2023-10-14 21:22:07 +08:00
},
语音
2023-10-18 18:40:58 +08:00
//语音分段 数组 条数 延时
ScanAudio(urls, currentIndex, delayInSeconds) {
if (currentIndex >= urls.length) {
this.palystatus = true;
return false;
代码上传
2023-10-14 21:22:07 +08:00
}
语音
2023-10-18 18:40:58 +08:00
const music = uni.createInnerAudioContext();
music.src = urls[currentIndex];
console.log(urls[currentIndex])
console.log('播放成功', this.palystatus)
if (this.palystatus) {
this.palystatus = false
music.play();
} else {
music.pause();
}
music.onEnded(() => {
music.destroy();
setTimeout(() => {
this.ScanAudio(urls, currentIndex + 1, delayInSeconds);
}, delayInSeconds * 1000);
代码上传
2023-10-14 21:22:07 +08:00
});
语音
2023-10-18 18:40:58 +08:00
},
//开始录音
voiceToText() {
let that = this;
sr.voiceToText(data => {
// console.log(JSON.stringify(data));
if (data.code == 1001) {
// that.toTextStatus = "倾听中，请说话..."
} else if (data.code == 1006) {
// this.toTextStatus = "倾听完毕"
//文件地址
// sr.getIatPath(path => {
// that.path = path;
// });
} else if (data.code == 1007) {
// this.toTextStatus = "停止倾听"
} else if (data.code == 1008) {
// this.volume = data.msg;
} else if (data.code == 1009) { //结果
//语音识别是分段的，你说一个词语或者一个句子识别一次，返回一次，再说再返回，不是一次性的，islast代表是否是最后一句话，可以理解为本次识别是否已结束
// this.transText = data.msg;
if (data.isLast) {
if (data.msg.length > 0 && this.risshow == false) {
this.content = data.msg
this.send()
} else {
this.content = ''
this.stopVoiceToText()
}
}
} else if (data.code == 1010) { //error信息
//如果data.msg不为空，则属于报错
if (data.msg) {
this.transText = data.msg;
}
}
})
},
//结束录音
stopVoiceToText() {
//你调这个方法后，安卓的回调会先1007，再1009 ios是 1007 1006 1009 1010
sr.stopListening();
代码上传
2023-10-14 21:22:07 +08:00
},
start(e) {
// console.log(e.touches[0].pageX)
this.touchStartX = e.touches[0].pageX; // 获取触摸时的原点
this.touchStartY = e.touches[0].pageY; // 获取触摸时的原点
语音
2023-10-18 18:40:58 +08:00
clearTimeout(this.timer); //再次清空定时器，防止重复注册定时器
let that=this
this.timer = setTimeout(function() {
//执行的代码块
// alert("执行了一次长按事件！！！")
that.onFeedTap()
that.islong = true
that.risshow = false
that.$refs.popup.open('center')
that.btnStatus = 1
that.voiceToText()
}.bind(this), 1500);
代码上传
2023-10-14 21:22:07 +08:00
},
end() {
语音
2023-10-18 18:40:58 +08:00
代码上传
2023-10-14 21:22:07 +08:00
if (this.islong) {
this.closePop()
this.islong = false
语音
2023-10-18 18:40:58 +08:00
clearInterval(this.timer) //清空定时器，防止重复注册定时器
this.btnStatus = 0;
this.stopVoiceToText()
this.num = 0
代码上传
2023-10-14 21:22:07 +08:00
}
},
语音
2023-10-18 18:40:58 +08:00
代码上传
2023-10-14 21:22:07 +08:00
//删除本地录音文件
deletespeech() {
this.btnStatus = 0
let that = this
this.closePop()
uni.getSavedFileList({
success: function(res) {
if (res.fileList.length > 0) {
uni.removeSavedFile({
filePath: res.fileList[0].filePath,
complete: function(res) {
console.log(res);
}
});
}
}
});
},
//发送示列
sendDetail(data) {
this.content = data
this.send()
},
//语音隐藏
hidesend() {
this.isshow = !this.isshow
},
//录音
Dialogue() {
// this.maskShow = !this.maskShow
this.$refs.popup.open('center')
},
footerCheck(e) {
console.log(e)
this.maskShow = false
this.isshow = true
},
//音频播放
语音
2023-10-18 18:40:58 +08:00
palyaudio1(item, i) {
this.palystatus = !this.palystatus
console.log(this.audio_file, '111')
if (!this.palystatus) {
this.ScanAudio(this.audio_file, this.currentIndex, 0)
} else {
this.ScanAudio(this.audio_file, this.currentIndex, 0)
// this.txtspeech(item.content, i)
}
// innerAudioContext.onError((res) => {
// console.log(res.errMsg);
// console.log(res.errCode);
// this.palystatus = true
// });
innerAudioContext.onEnded((res) => {
this.palystatus = true
});
},
//音频播放
palyaudio(item, i) {
代码上传
2023-10-14 21:22:07 +08:00
this.palystatus = !this.palystatus
if (!this.palystatus) {
innerAudioContext.src = item.audio_file;
innerAudioContext.play()
} else {
innerAudioContext.pause()
}
innerAudioContext.onError((res) => {
console.log(res.errMsg);
console.log(res.errCode);
this.palystatus = true
});
innerAudioContext.onEnded((res) => {
this.palystatus = true
});
},
copyText(str) {
uni.setClipboardData({
data: str,
success: function() {
uni.showToast({
icon: 'none',
title: '复制成功'
});
}
});
},
// 获取历史消息
getHistoryMsg() {
return;
if (this.ajax.flag) {
return; //
}
let get = async () => {
this.hideLoadTips();
this.ajax.flag = false;
let data = await this.joinHistoryMsg();
console.log('----- 模拟数据格式，供参考 -----');
// console.log(data); // 查看请求返回的数据结构
// 获取待滚动元素选择器，解决插入数据后，滚动条定位时使用
let selector = '';
if (this.ajax.page > 1) {
// 非第一页，则取历史消息数据的第一条信息元素
selector = `#msg-${this.talkList[0].id}`;
} else {
// 第一页，则取当前消息数据的最后一条信息元素
selector = `#msg-${data[data.length-1].id}`;
}
// 将获取到的消息数据合并到消息数组中
this.talkList = [...data, ...this.talkList];
// 数据挂载后执行，不懂的请自行阅读 Vue.js 文档对 Vue.nextTick 函数说明。
this.$nextTick(() => {
// 设置当前滚动的位置
this.setPageScrollTo(selector);
this.hideLoadTips(true);
if (data.length < this.ajax.rows) {
// 当前消息数据条数小于请求要求条数时，则无更多消息，不再允许请求。
// 可在此处编写无更多消息数据时的逻辑
} else {
this.ajax.page++;
// 延迟 200ms ，以保证设置窗口滚动已完成
setTimeout(() => {
this.ajax.flag = true;
}, 200)
}
})
}
get();
},
// 拼接历史记录消息
joinHistoryMsg() {
let join = () => {
let arr = [];
//通过当前页码及页数，模拟数据内容
let startIndex = (this.ajax.page - 1) * this.ajax.rows;
let endIndex = startIndex + this.ajax.rows;
for (let i = startIndex; i < endIndex; i++) {
arr.push({
"id": i, // 消息的ID
"content": `这是历史记录的第${i+1}条消息`, // 消息内容
"type": Math.random() > 0.5 ? 1 : 0, // 此为消息类别，设 1 为发出去的消息，0 为收到对方的消息,
"pic": "/static/avatar.png" // 头像
})
}
/*
颠倒数组中元素的顺序。将最新的数据排在本次接口返回数据的最后面。
后端接口按 消息的时间降序查找出当前页的数据后，再将本页数据按消息时间降序排序返回。
这是数据的重点，因为页面滚动条和上拉加载历史的问题。
*/
arr.reverse();
return arr;
}
// 此处用到 ES6 的 Promise 知识，不懂的请自行学习。
return new Promise((done, fail) => {
// 无数据请求接口，由 setTimeout 模拟，正式项目替换为 ajax 即可。
setTimeout(() => {
let data = join();
done(data);
}, 1500);
})
},
focus() {
// this.$nextTick(()=>{
// setTimeout(()=>{
// uni.pageScrollTo({
// scrollTop: 9999999, // 当前位置向下滚动
// duration: 300 // 滚动过渡时间为300ms，默认值为300ms
// });
// }, 0)
// })
},
// 设置页面滚动位置
setPageScrollTo(selector) {
let view = uni.createSelectorQuery().in(this).select(selector);
view.boundingClientRect((res) => {
uni.pageScrollTo({
scrollTop: res.top - 30, // -30 为多显示出大半个消息的高度，示意上面还有信息。
duration: 0
});
}).exec();
},
// 隐藏加载提示
hideLoadTips(flag) {
if (flag) {
this.ajax.loadText = '消息获取成功';
setTimeout(() => {
this.ajax.loading = false;
}, 300);
} else {
this.ajax.loading = true;
this.ajax.loadText = '正在获取消息';
}
},
// 关闭连接
closeSocketTask() {
try {
clearInterval(this.timer);
this.talkList[this.talkList.length - 1].content = this.c_content + '';
// console.log(this.talkList[this.talkList.length - 1].content);
// this.c_content = '';
// this.n_content = '';
this.socketTask.close({
code: 500, // APP端存在BUG,正常关闭的code为1000,无法正常关闭,需要将code换为其他值
complete: (res) => {
this.showStop = false;
console.log('主动断开', res);
this.wsLiveFlag = false;
}
})
} catch (e) {
//TODO handle the exception
}
},
move(e) {
let that = this;
let moveX = this.touchMoveX - e.touches[0].pageX;
let moveY = this.touchMoveY - e.touches[0].pageY;
语音
2023-10-18 18:40:58 +08:00
// console.log(-115 > moveX && -240 < moveX,moveY)
let platform = uni.getSystemInfoSync().platform;
if (platform === 'ios') {
if (-115 > moveX && -240 < moveX && moveY < -620 && moveY > -730) {
this.risshow = true
this.deletespeech()
代码上传
2023-10-14 21:22:07 +08:00
语音
2023-10-18 18:40:58 +08:00
} else {
this.risshow = false
代码上传
2023-10-14 21:22:07 +08:00
}
语音
2023-10-18 18:40:58 +08:00
} else {
代码上传
2023-10-14 21:22:07 +08:00
语音
2023-10-18 18:40:58 +08:00
if (-115 > moveX && -240 < moveX && moveY < -359 && moveY > -480) {
代码上传
2023-10-14 21:22:07 +08:00
语音
2023-10-18 18:40:58 +08:00
this.risshow = true
代码上传
2023-10-14 21:22:07 +08:00
语音
2023-10-18 18:40:58 +08:00
this.deletespeech()
} else {
this.risshow = false
代码上传
2023-10-14 21:22:07 +08:00
}
语音
2023-10-18 18:40:58 +08:00
}
代码上传
2023-10-14 21:22:07 +08:00
},
// 发送信息
send() {
if (!this.content) {
uni.showToast({
title: '请输入有效的内容',
icon: 'none'
})
return;
}
this.showStop = true;
// 将当前发送信息 添加到消息列表。
let data = {
"id": new Date().getTime(),
"content": this.content,
"type": 1,
语音
2023-10-18 18:40:58 +08:00
// "pic": this.avatar
"pic": this.avatarType
代码上传
2023-10-14 21:22:07 +08:00
}
// console.log(data);
this.TEXT = this.content;
this.talkList.push(data);
this.talkList.push({
"id": new Date().getTime(),
"content": '',
"type": 2,
// "pic": this.avatarType
});
this.n_content = '';
this.c_content = '';
this.socketing = true;
// return ;
this.$nextTick(() => {
// 清空内容框中的内容
this.content = '';
// uni.pageScrollTo({
// scrollTop: 999999, // 设置一个超大值，以保证滚动条滚动到底部
// duration: 0
// });
})
this.sendToSpark();
},
async sendToSpark() {
this.tempRes = "";
let realThis = this;
this.socketTask = uni.connectSocket({
//url: encodeURI(encodeURI(myUrl).replace(/\+/g, '%2B')),
url: `wss://chat.lihaink.cn/chat?type=${this.wssType}&timestamp=${Date.now()}`,
method: 'GET',
token: '',
success: res => {
console.log(res, "ws成功连接...")
realThis.wsLiveFlag = true;
}
})
realThis.socketTask.onError((res) => {
console.log("连接发生错误，请检查appid是否填写", res)
})
realThis.socketTask.onOpen((res) => {
this.historyTextList.push({
"role": "user",
"content": this.TEXT
})
// 第一帧..........................................
console.log('连接成功...')
// let params = {
// "header": {
// "app_id": this.APPID,
// "uid": "aef9f963-7"
// },
// "parameter": {
// "chat": {
// "domain": "generalv2",
// "temperature": 0.5,
// "max_tokens": 1024
// }
// },
// "payload": {
// "message": {
// "text": this.historyTextList
// }
// }
// };
if (this.historyTextList.length > 9) this.params = JSON.parse(JSON.stringify(this
.historyTextList
.splice(-9)));
else this.params = JSON.parse(JSON.stringify(this.historyTextList));
this.isSurpass();
realThis.socketTask.send({ // 发送消息，，都用uni的官方版本
data: JSON.stringify(this.params),
success() {
console.log('第一帧发送成功');
}
});
});
// 接受到消息时
realThis.socketTask.onMessage((res) => {
// console.log('收到API返回的内容：', res.data);
let obj = JSON.parse(res.data)
// console.log("我打印的"+obj.payload);
if (!realThis.wsLiveFlag) return;
let dataArray = obj.payload.choices.text;
for (let i = 0; i < dataArray.length; i++) {
this.talkList[this.talkList.length - 1].content += dataArray[i].content;
this.n_content = this.talkList[this.talkList.length - 1].content;
realThis.tempRes = realThis.tempRes + dataArray[i].content
}
this.cavshare(this.talkList)
let temp = JSON.parse(res.data)
// console.log("0726",temp.header.code)
if (temp.header.code !== 0) {
this.socketing = false;
console.log(`${temp.header.code}:${temp.message}`);
realThis.socketTask.close({
success(res) {
console.log('关闭成功', res)
realThis.wsLiveFlag = false;
},
fail(err) {
console.log('关闭失败', err)
}
})
}
if (temp.header.code === 0) {
if (res.data && temp.header.status === 2) {
this.socketing = false;
this.historyTextList.push({
"role": "assistant",
"content": this.tempRes
})
语音
2023-10-18 18:40:58 +08:00
this.nums = this.talkList.length - 1
this.txtspeech(this.n_content, this.talkList.length -
1)
代码上传
2023-10-14 21:22:07 +08:00
setTimeout(() => {
let that = this
realThis.socketTask.close({
success(res) {
console.log('关闭成功', res)
realThis.wsLiveFlag = false;
},
fail(err) {
// console.log('关闭失败', err)
}
})
}, 1000)
}
}
})
},
// 判断文字是否超过五千字
isSurpass() {
let sum = this.params.reduce((accumulator, currentValue) => {
return accumulator + currentValue.content;
}, '');
if (sum.length > 5000) {
this.params.shift();
return this.isSurpass();
} else {
console.log(`本次发送${sum.length}字`);
return sum;
}
},
// 鉴权
getWebSocketUrl() {
return new Promise((resolve, reject) => {
// https://spark-api.xf-yun.com/v1.1/chat V1.5 domain general
// https://spark-api.xf-yun.com/v2.1/chat V2.0 domain generalv2
var url = "wss://spark-api.xf-yun.com/v2.1/chat";
var host = "spark-api.xf-yun.com";
var apiKeyName = "api_key";
var date = new Date().toGMTString();
var algorithm = "hmac-sha256";
var headers = "host date request-line";
var signatureOrigin = `host: ${host}\ndate: ${date}\nGET /v2.1/chat HTTP/1.1`;
var signatureSha = CryptoJS.HmacSHA256(signatureOrigin, this.APISecret);
var signature = CryptoJS.enc.Base64.stringify(signatureSha);
var authorizationOrigin =
`${apiKeyName}="${this.APIKey}", algorithm="${algorithm}", headers="${headers}", signature="${signature}"`;
var authorization = base64.encode(authorizationOrigin);
url = `${url}?authorization=${authorization}&date=${encodeURI(date)}&host=${host}`;
// console.log(url)
resolve(url);
});
},
// 滚动到头部
bindScroll() {
if (this.userId == 0) {
this.getHistory();
this.getproductInfo();
this.getOrderInfo();
this.getRefundDetail();
this.getStoreDetail();
} else {
this.getMerHistory();
}
},
// 当滑动页面时,收起键盘,与微信聊天效果保持一致
touchmove(e) {
uni.hideKeyboard()
}
}
}
'提交代码'
2023-09-12 20:19:08 +08:00
</script>
优化
2023-09-14 16:23:08 +08:00
<style lang="scss">
代码上传
2023-10-14 21:22:07 +08:00
@import "../../lib/global.scss";
page {
// background-color: #f5f5f5;
height: 100vh;
语音
2023-10-18 18:40:58 +08:00
// background: url('@/static/icon/bg1.png') no-repeat;
代码上传
2023-10-14 21:22:07 +08:00
background-size: 100% 100%;
background-attachment: fixed;
background-repeat: no-repeat;
font-size: 28rpx;
}
@keyframes load {
0% {
height: 10%;
}
50% {
height: 100%;
}
100% {
height: 10%;
}
}
// 取消发送
.move_center_footer {
margin-top: 20rpx;
font-size: 24rpx;
color: #666;
}
.bg1 {
background-color: #fff !important;
color: #000 !important;
}
.move_center_top {
height: 40rpx;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
.move_center_item {
display: block;
// background: #333333;
width: 6rpx;
height: 10%;
margin: 0 6rpx;
float: left;
}
.move_center_item:nth-child(1) {
animation: load 2.5s 1.4s infinite linear;
}
.move_center_item:nth-child(2) {
animation: load 2.5s 1.2s infinite linear;
}
.move_center_item:nth-child(3) {
animation: load 2.5s 1s infinite linear;
}
.move_center_item:nth-child(4) {
animation: load 2.5s 0.8s infinite linear;
}
.move_center_item:nth-child(5) {
animation: load 2.5s 0.6s infinite linear;
}
.move_center_item:nth-child(6) {
animation: load 2.5s 0.4s infinite linear;
}
.move_center_item:nth-child(7) {
animation: load 2.5s 0.2s infinite linear;
}
.move_center_item:nth-child(8) {
animation: load 2.5s 0s infinite linear;
}
.move_center_item:nth-child(9) {
animation: load 2.5s 0.2s infinite linear;
}
.move_center_item:nth-child(10) {
animation: load 2.5s 0.4s infinite linear;
}
.move_center_item:nth-child(11) {
animation: load 2.5s 0.6s infinite linear;
}
.move_center_item:nth-child(12) {
animation: load 2.5s 0.8s infinite linear;
}
.move_center_item:nth-child(13) {
animation: load 2.5s 1s infinite linear;
}
.move_center_item:nth-child(14) {
animation: load 2.5s 1.2s infinite linear;
}
.move_center_item:nth-child(15) {
animation: load 2.5s 1.4s infinite linear;
}
}
.conten-top {
width: 100%;
padding-top: var(--status-bar-height);
padding-bottom: 30rpx;
语音
2023-10-18 18:40:58 +08:00
// background: url('@/static/icon/bg1.png');
代码上传
2023-10-14 21:22:07 +08:00
background-size: cover;
text-align: center;
background-color: transparent;
position: absolute;
top: 0;
position: fixed;
z-index: 10;
}
.popup_box {
height: 100vh;
width: 100vw;
position: relative;
// 取消录音区域
.move {
width: 100%;
position: absolute;
left: 0;
bottom: 550rpx;
display: flex;
justify-content: center;
align-items: center;
.move_center_clear {
width: 40%;
height: 200rpx;
border-radius: 50rpx;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
// background: rgba(250, 83, 83, .5);
background: url('@/static/icon/ai6.png') no-repeat;
background-size: 100% 100%;
}
.move_center {
width: 40%;
height: 200rpx;
// background: rgba(149, 234, 108, .5);
background: url('@/static/icon/ai6.png') no-repeat;
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
}
.popup_box-con {
.popup_box-cona {
width: 100%;
position: absolute;
bottom: 288rpx;
display: flex;
justify-content: space-between;
padding: 0 40rpx;
view {
width: 140rpx;
height: 140rpx;
line-height: 140rpx;
border-radius: 50%;
text-align: center;
font-size: 37rpx;
color: #fff;
background: rgb(57, 57, 57);
margin: 0 auto;
}
view:hover {
background: #fff !important;
color: #333;
}
}
.popup_box-conb {
width: 100%;
height: 244rpx;
position: absolute;
bottom: 0;
image {
width: 100%;
height: 100%;
}
}
}
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.flex_c {
display: flex;
justify-content: space-between;
.flex_c_img {
width: 62rpx;
height: 62rpx;
margin-top: 20rpx;
image {
width: 100%;
height: 100%;
}
}
.flex_c_txt {
width: 450rpx;
margin-top: 15rpx;
.con {
width: 450rpx;
height: 70rpx;
line-height: 70rpx;
text-align: center;
background: #F5F5F5;
border-radius: 10rpx;
}
}
}
.flex_d {
height: 300rpx;
padding: 49rpx 50rpx;
display: flex;
view {
width: 136rpx;
height: 177rpx;
margin-right: 60rpx;
image {
width: 100%;
height: 100%;
}
}
}
.blinking-box {
display: flex;
font-size: 30rpx;
font-family: Microsoft YaHei;
font-weight: 400;
color: #182534;
image {
width: 40rpx;
height: 40rpx;
margin: auto 0;
margin-right: 30rpx;
}
}
.wrapper {
height: auto !important;
}
.contenta {
width: 710rpx;
height: 70rpx;
background-color: #fff;
display: flex;
margin-top: 10rpx;
padding-top: 12rpx;
.contenta-img {
width: 46rpx;
height: 46rpx;
image {
width: 100%;
height: 100%;
}
margin-left:34rpx;
}
.contenta-imga {
width: 37rpx;
height: 39rpx;
margin-top: 5rpx;
image {
width: 100%;
height: 100%;
}
margin-left:34rpx;
}
.contenta-ai {
width: 48rpx;
height: 48rpx;
image {
width: 100%;
height: 100%;
}
}
}
/* 加载数据提示 */
.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: 100%;
// min-height: calc(100vh - 100rpx);
padding-bottom: 200rpx;
box-sizing: content-box;
display: flex;
flex-direction: column;
justify-content: flex-end;
// /* 兼容iPhoneX */
// margin-bottom: 0;
// margin-bottom: constant(safe-area-inset-bottom);
// margin-bottom: env(safe-area-inset-bottom);
}
.multiline-text {
white-space: pre-line;
/* 或 white-space: pre-wrap; */
}
.box-2 {
position: fixed;
left: 0;
width: 100%;
bottom: 0;
height: auto;
z-index: 2;
border-top: #e5e5e5 solid 1px;
box-sizing: content-box;
background-color: #fff;
transform: translateY(0);
/* 初始化 transform 属性 */
transition: transform 0.3s ease;
/* 添加过渡效果 */
/* 兼容iPhoneX */
padding-bottom: 0;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
>view {
padding: 20rpx 20rpx;
}
.content {
background: #F5F5F5;
height: 70rpx;
padding: 0 20rpx;
border-radius: 6rpx;
font-size: 28rpx;
}
.send {
background-color: #2573fb;
color: #fff;
height: 64rpx;
margin-left: 20rpx;
border-radius: 6rpx;
padding: 0;
width: 120rpx;
line-height: 62rpx;
&:active {
background-color: #1573fb;
}
}
}
.talk-list {
padding-bottom: 20rpx;
.talk-list-con {
width: 714rpx;
height: 320rpx;
background: #FFFFFF;
box-shadow: 5rpx 6rpx 0px 0px rgba(0, 0, 0, 0.02);
border-radius: 8rpx;
margin: 0 auto;
margin-top: 50rpx;
padding: 36rpx 32rpx;
.talk-list-con-title {
font-size: 32rpx;
font-family: Microsoft YaHei;
font-weight: 400;
color: #006CFF;
margin-bottom: 33rpx;
}
.talk-list-con-title1 {
font-size: 28rpx;
font-family: Microsoft YaHei;
font-weight: 400;
color: #182534;
line-height: 48rpx;
margin-bottom: 20rpx;
}
.talk-list-con-title2 {
display: flex;
font-size: 30rpx;
font-family: Microsoft YaHei;
font-weight: 400;
color: #182534;
view {
display: flex;
justify-content: space-between;
padding: 0 20rpx;
width: 468rpx;
height: 70rpx;
line-height: 70rpx;
text-align: center;
background: #E2EDF9;
border-radius: 12rpx;
image {
width: 55rpx;
height: 55rpx;
margin-top: 10rpx;
}
}
}
}
/* 消息项，基础类 */
.item {
padding: 20rpx 20rpx 0 20rpx;
align-items: flex-start;
align-content: flex-start;
color: #333;
.pic {
width: 92rpx;
height: 92rpx;
border-radius: 50%;
}
.content {
padding: 20rpx;
border-radius: 4px;
max-width: 580rpx;
word-break: break-all;
line-height: 52rpx;
position: relative;
}
/* 收到的消息 */
&.pull {
.content {
min-width: 20rpx;
min-height: 52rpx;
margin-left: 32rpx;
background-color: #fff;
&::after {
content: '';
display: none;
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 {
min-width: 20rpx;
min-height: 52rpx;
margin-left: 32rpx;
background-color: #2573fb;
color: #fff;
&::after {
content: '';
display: block;
width: 0;
height: 0;
border-top: 16rpx solid transparent;
border-bottom: 16rpx solid transparent;
border-left: 20rpx solid #2573fb;
position: absolute;
top: 30rpx;
left: -20rpx;
transform: rotate(180deg);
}
}
}
}
}
.bing-math {
margin: 0 !important;
padding: 0 !important;
}
.talk-list .item.pull .content {
max-width: 590px;
margin-left: 0px;
}
.placeholder {
width: 100vw;
background-color: #1573fb;
// background-color: transparent;
// transform: translateY(0); /* 初始化 transform 属性 */
// transition: transform 0.3s ease; /* 添加过渡效果 */
}
.downsocket {
display: flex;
justify-content: center;
align-items: center;
background-color: #2573fb !important;
color: #fff !important;
}
'提交代码'
2023-09-12 20:19:08 +08:00
</style>