fixbug
This commit is contained in:
scout
parent
7587ce69d0
commit
4dbbb57aa5
@ -1,27 +1,16 @@
|
|||||||
{
|
{
|
||||||
// launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
|
"version" : "1.0",
|
||||||
// launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
|
|
||||||
"version" : "0.0",
|
|
||||||
"configurations" : [
|
"configurations" : [
|
||||||
{
|
|
||||||
"app-plus" : {
|
|
||||||
"launchtype" : "local"
|
|
||||||
},
|
|
||||||
"default" : {
|
|
||||||
"launchtype" : "local"
|
|
||||||
},
|
|
||||||
"mp-weixin" : {
|
|
||||||
"launchtype" : "local"
|
|
||||||
},
|
|
||||||
"type" : "uniCloud"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"playground" : "custom",
|
|
||||||
"type" : "uni-app:app-android"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"playground" : "custom",
|
"playground" : "custom",
|
||||||
"type" : "uni-app:app-ios"
|
"type" : "uni-app:app-ios"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"app-plus" :
|
||||||
|
{
|
||||||
|
"launchtype" : "local"
|
||||||
|
},
|
||||||
|
"type" : "uniCloud"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,31 +1,44 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="content">
|
<view class="content">
|
||||||
|
<u-picker
|
||||||
|
:show="show"
|
||||||
|
:columns="gptModeColumns"
|
||||||
|
@confirm="confirm"
|
||||||
|
@cancel="show = false"
|
||||||
|
></u-picker>
|
||||||
<view class="top-bar">
|
<view class="top-bar">
|
||||||
<image
|
<image
|
||||||
@click="changeMode"
|
@click="changeMode"
|
||||||
class="version"
|
class="version"
|
||||||
:src="
|
:src="
|
||||||
isGPT3 ? '../../static/image/3.5.png' : '../../static/image/4.0.png'
|
gptMode == 'gpt-3.5-turbo'
|
||||||
" />
|
? '../../static/image/3.5.png'
|
||||||
|
: gptMode == 'gpt-4-1106-preview'
|
||||||
|
? '../../static/image/4.0.png'
|
||||||
|
: '../../static/image/V.png'
|
||||||
|
"
|
||||||
|
/>
|
||||||
<view class="title">FONCHAT</view>
|
<view class="title">FONCHAT</view>
|
||||||
<view></view>
|
<view @click="reLoad">
|
||||||
|
<u-icon
|
||||||
|
size="30"
|
||||||
|
style="margin-bottom: 25rpx; margin-right: 40rpx"
|
||||||
|
name="reload"
|
||||||
|
></u-icon>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="bottom">
|
<view class="bottom">
|
||||||
<div v-show="!acqStatus">
|
<div v-show="!acqStatus">
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
</div>
|
</div>
|
||||||
<view
|
<view class="chat-content" id="chat-content" ref="chatContent">
|
||||||
class="chat-content"
|
|
||||||
id="chat-content"
|
|
||||||
ref="chatContent">
|
|
||||||
<view
|
<view
|
||||||
class="chat-wrapper"
|
class="chat-wrapper"
|
||||||
v-for="(item, index) in chatList"
|
v-for="(item, index) in chatList"
|
||||||
:key="index">
|
:key="index"
|
||||||
<view
|
>
|
||||||
class="chat-friend"
|
<view class="chat-friend" v-if="item.uid !== 'admin'">
|
||||||
v-if="item.uid !== 'admin'">
|
|
||||||
<span style="color: #175abd"
|
<span style="color: #175abd"
|
||||||
>智能助手<span
|
>智能助手<span
|
||||||
style="font-size: 20rpx"
|
style="font-size: 20rpx"
|
||||||
@ -41,34 +54,23 @@
|
|||||||
left: -48px;
|
left: -48px;
|
||||||
top: 5px;
|
top: 5px;
|
||||||
"
|
"
|
||||||
src="../../static/image/avator.png" />
|
src="../../static/image/avator.png"
|
||||||
<view
|
/>
|
||||||
class="chat-text"
|
<view class="chat-text" v-if="item.chatType == 0">
|
||||||
v-if="item.chatType == 0">
|
<view v-if="item.msg" class="chat-word">{{ item.msg }}</view>
|
||||||
<view
|
|
||||||
v-if="item.msg"
|
|
||||||
class="chat-word"
|
|
||||||
>{{ item.msg }}</view
|
|
||||||
>
|
|
||||||
</view>
|
</view>
|
||||||
<view
|
<view class="chat-image" v-if="item.chatType == 1">
|
||||||
class="chat-image"
|
|
||||||
v-if="item.chatType == 1">
|
|
||||||
<image
|
<image
|
||||||
:src="item.msg"
|
:src="item.msg"
|
||||||
alt="表情"
|
alt="表情"
|
||||||
v-if="item.extend.imageType == 1"
|
v-if="item.extend.imageType == 1"
|
||||||
style="width: 100px; height: 100px" />
|
style="width: 100px; height: 100px"
|
||||||
<image
|
/>
|
||||||
style="border-radius: 10px"
|
<u-album style="border-radius: 10px" :urls="[item.msg]" v-else>
|
||||||
:src="item.msg"
|
</u-album>
|
||||||
v-else>
|
|
||||||
</image>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view
|
<view class="chat-me" v-else>
|
||||||
class="chat-me"
|
|
||||||
v-else>
|
|
||||||
<image
|
<image
|
||||||
:src="item.headimage"
|
:src="item.headimage"
|
||||||
alt=""
|
alt=""
|
||||||
@ -78,25 +80,35 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
right: -48px;
|
right: -48px;
|
||||||
top: 5px;
|
top: 5px;
|
||||||
" />
|
"
|
||||||
<view
|
/>
|
||||||
class="chat-text"
|
<view class="chat-text" v-if="item.chatType == 0">
|
||||||
v-if="item.chatType == 0">
|
<span style="font-size: 16px">
|
||||||
<span style="font-size: 16px">{{ item.msg }}</span>
|
<!-- <div v-for="url in item.fileList">
|
||||||
|
<image style="height: 100rpx; width: 100rpx" :src="url.url" />
|
||||||
|
</div> -->
|
||||||
|
<u-album
|
||||||
|
v-if="item.fileList.length > 0"
|
||||||
|
style="height: 100rpx; width: 100rpx"
|
||||||
|
:urls="[item.fileList[0].url]"
|
||||||
|
>
|
||||||
|
</u-album>
|
||||||
|
{{ item.msg }}</span
|
||||||
|
>
|
||||||
</view>
|
</view>
|
||||||
<view
|
<view class="chat-image" v-if="item.chatType == 1">
|
||||||
class="chat-image"
|
|
||||||
v-if="item.chatType == 1">
|
|
||||||
<image
|
<image
|
||||||
:src="item.msg"
|
:src="item.msg"
|
||||||
alt="表情"
|
alt="表情"
|
||||||
v-if="item.extend.imageType == 1"
|
v-if="item.extend.imageType == 1"
|
||||||
style="width: 100px; height: 100px" />
|
style="width: 100px; height: 100px"
|
||||||
<a-image
|
/>
|
||||||
|
<u-album
|
||||||
style="max-width: 300px; border-radius: 10px"
|
style="max-width: 300px; border-radius: 10px"
|
||||||
:src="item.msg"
|
:urls="[item.msg]"
|
||||||
v-else>
|
v-else
|
||||||
</a-image>
|
>
|
||||||
|
</u-album>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -104,11 +116,36 @@
|
|||||||
</view>
|
</view>
|
||||||
<!-- 下面是两个是占位元素 -->
|
<!-- 下面是两个是占位元素 -->
|
||||||
<view style="height: 12vh"></view>
|
<view style="height: 12vh"></view>
|
||||||
<view class="text-area"> </view>
|
<!-- <view class="text-area"> </view> -->
|
||||||
|
<view class="text-area" style="position: fixed">
|
||||||
|
<!-- <u-icon
|
||||||
|
v-show="isText"
|
||||||
|
@click="changeMic"
|
||||||
|
size="30"
|
||||||
|
style="margin-bottom: 30rpx; margin-right: 30rpx"
|
||||||
|
name="mic"
|
||||||
|
></u-icon>
|
||||||
|
<u-icon
|
||||||
|
v-show="!isText"
|
||||||
|
@click="changeMic"
|
||||||
|
size="30"
|
||||||
|
style="margin-bottom: 30rpx; margin-right: 30rpx"
|
||||||
|
name="chat-fill"
|
||||||
|
></u-icon>
|
||||||
|
<view class="toolBox" v-if="!isText">
|
||||||
<view
|
<view
|
||||||
class="text-area"
|
class="recorder"
|
||||||
style="position: fixed">
|
:class="{ active: isUseRecorder }"
|
||||||
|
@touchstart.prevent="startRecorder"
|
||||||
|
@touchend.prevent="endRecorder"
|
||||||
|
>
|
||||||
|
{{ isUseRecorder ? "松开 结束" : "按住 说话" }}
|
||||||
|
</view>
|
||||||
|
</view> -->
|
||||||
|
<!-- <view class="toolBg"></view> -->
|
||||||
|
|
||||||
<u--input
|
<u--input
|
||||||
|
v-if="isText"
|
||||||
style="
|
style="
|
||||||
width: 500rpx;
|
width: 500rpx;
|
||||||
height: 60rpx;
|
height: 60rpx;
|
||||||
@ -120,8 +157,10 @@
|
|||||||
@confirm="sendText"
|
@confirm="sendText"
|
||||||
v-model="inputMsg"
|
v-model="inputMsg"
|
||||||
border="none"
|
border="none"
|
||||||
placeholder="请输入内容"></u--input>
|
placeholder="请输入内容"
|
||||||
|
></u--input>
|
||||||
<u-button
|
<u-button
|
||||||
|
v-if="isText"
|
||||||
style="
|
style="
|
||||||
border-radius: 40rpx;
|
border-radius: 40rpx;
|
||||||
width: 140rpx;
|
width: 140rpx;
|
||||||
@ -130,19 +169,33 @@
|
|||||||
"
|
"
|
||||||
@click="sendText"
|
@click="sendText"
|
||||||
type="primary"
|
type="primary"
|
||||||
text="发送"></u-button>
|
text="发送"
|
||||||
|
></u-button>
|
||||||
<u-upload
|
<u-upload
|
||||||
|
v-show="gptMode === 'gpt-4-vision-preview'"
|
||||||
:fileList="fileList"
|
:fileList="fileList"
|
||||||
name="6"
|
name="6"
|
||||||
|
@delete="deleteFile"
|
||||||
accept="image"
|
accept="image"
|
||||||
|
multiple
|
||||||
|
@clickPreview="clickPreview"
|
||||||
@afterRead="upLoaded"
|
@afterRead="upLoaded"
|
||||||
:maxCount="1">
|
:maxCount="1"
|
||||||
|
>
|
||||||
<u-icon
|
<u-icon
|
||||||
size="30"
|
size="30"
|
||||||
style="margin-bottom: 30rpx; margin-left: 30rpx"
|
style="margin-bottom: 30rpx; margin-left: 30rpx"
|
||||||
name="plus-circle-fill"></u-icon>
|
name="plus-circle-fill"
|
||||||
|
></u-icon>
|
||||||
</u-upload>
|
</u-upload>
|
||||||
|
<view v-if="!isText" style="width: 50rpx"></view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<!-- <mumu-recorder
|
||||||
|
ref="recorderRef"
|
||||||
|
@success="handlerSuccess"
|
||||||
|
@error="handlerError"
|
||||||
|
></mumu-recorder> -->
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -158,19 +211,77 @@ import {
|
|||||||
TEMPERATURE,
|
TEMPERATURE,
|
||||||
TOP_P,
|
TOP_P,
|
||||||
} from "utils/openAiConfig";
|
} from "utils/openAiConfig";
|
||||||
|
import MumuRecorder from "@/uni_modules/mumu-recorder/components/mumu-recorder/mumu-recorder.vue";
|
||||||
export default {
|
export default {
|
||||||
|
components: { MumuRecorder },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
chatList: [],
|
chatList: [],
|
||||||
inputMsg: "",
|
inputMsg: "",
|
||||||
acqStatus: true,
|
acqStatus: true,
|
||||||
gptMode: "gpt-3.5-turbo",
|
gptMode: "gpt-3.5-turbo",
|
||||||
isGPT3: true,
|
|
||||||
fileList: [],
|
fileList: [],
|
||||||
|
show: false,
|
||||||
|
gptModeColumns: [["GPT-3", "GPT-4", "GPT-V"]],
|
||||||
|
audio: null,
|
||||||
|
|
||||||
|
isUseRecorder: false,
|
||||||
|
playItemIndex: -1,
|
||||||
|
isText: true,
|
||||||
|
currentAudio: "",
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
mounted() {
|
||||||
|
this.audio = document.createElement("audio");
|
||||||
|
this.audio.addEventListener("ended", () => {
|
||||||
|
this.playItemIndex = -1;
|
||||||
|
this.currentAudio = "";
|
||||||
|
});
|
||||||
|
},
|
||||||
onLoad(item) {},
|
onLoad(item) {},
|
||||||
methods: {
|
methods: {
|
||||||
|
// 开始录音
|
||||||
|
startRecorder() {
|
||||||
|
// this.$refs.recorderRef.start();
|
||||||
|
|
||||||
|
this.isUseRecorder = true;
|
||||||
|
},
|
||||||
|
// 结束录音
|
||||||
|
endRecorder() {
|
||||||
|
// this.$refs.recorderRef.stop();
|
||||||
|
this.isUseRecorder = false;
|
||||||
|
},
|
||||||
|
// 录音成功
|
||||||
|
handlerSuccess(res) {
|
||||||
|
if (res.duration < 1)
|
||||||
|
return uni.showToast({
|
||||||
|
title: "语言时间小于1秒",
|
||||||
|
icon: "error",
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log(res, 666);
|
||||||
|
},
|
||||||
|
// 播放报错
|
||||||
|
handlerError(code) {
|
||||||
|
switch (code) {
|
||||||
|
case "101":
|
||||||
|
uni.showModal({
|
||||||
|
content: "当前浏览器版本较低，请更换浏览器使用，推荐在微信中打开。",
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "201":
|
||||||
|
uni.showModal({
|
||||||
|
content: "麦克风权限被拒绝，请刷新页面后授权麦克风权限。",
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
uni.showModal({
|
||||||
|
content: "未知错误，请刷新页面重试",
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
//发送文字信息
|
//发送文字信息
|
||||||
sendText() {
|
sendText() {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
@ -223,23 +334,26 @@ export default {
|
|||||||
// 自动滚动到底部
|
// 自动滚动到底部
|
||||||
scrollToBottom() {
|
scrollToBottom() {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
uni
|
let chatBox = document.getElementById("chat-content");
|
||||||
.createSelectorQuery()
|
chatBox.scrollTop = chatBox.scrollHeight;
|
||||||
.select(".chat-content")
|
|
||||||
.boundingClientRect((data) => {
|
|
||||||
uni.pageScrollTo({
|
|
||||||
duration: 100, //过渡时间
|
|
||||||
scrollTop: 1600, //到达目标class的top值
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.exec();
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
// 切换模式
|
// 切换模式
|
||||||
changeMode(e) {
|
changeMode(e) {
|
||||||
|
this.show = true;
|
||||||
|
},
|
||||||
|
// 确认模式
|
||||||
|
confirm(e) {
|
||||||
|
console.log(e, 666);
|
||||||
|
this.show = false;
|
||||||
|
this.gptMode =
|
||||||
|
e.value[0] == "GPT-3"
|
||||||
|
? "gpt-3.5-turbo"
|
||||||
|
: e.value[0] == "GPT-4"
|
||||||
|
? "gpt-4-1106-preview"
|
||||||
|
: "gpt-4-vision-preview";
|
||||||
this.acqStatus = true;
|
this.acqStatus = true;
|
||||||
this.isGPT3 = !this.isGPT3;
|
this.fileList = [];
|
||||||
this.gptMode = this.isGPT3 ? "gpt-3.5-turbo" : "gpt-4-1106-preview";
|
|
||||||
// 清空对话
|
// 清空对话
|
||||||
this.chatList = [];
|
this.chatList = [];
|
||||||
},
|
},
|
||||||
@ -258,11 +372,10 @@ export default {
|
|||||||
const self = this;
|
const self = this;
|
||||||
const currentResLocation = this.chatList.length - 1;
|
const currentResLocation = this.chatList.length - 1;
|
||||||
// 获取当前环境地址
|
// 获取当前环境地址
|
||||||
const baseUrl = "http://114.218.158.24:9020/";
|
const baseUrl = "https://erpapi.fontree.cn/";
|
||||||
const token =
|
const token = "";
|
||||||
"46d71a72d8d845ad7ed23eba9bdde260e635407190c2ce1bf7fd22088e41682ea07773ec65cae8946d2003f264d55961f96e0fc5da10eb96d3a348c1664e9644e756eda7154e1af9e70d1c9d2f100823a26885ea6df3249fe619995cb79dc5dbd5ead32d43b955d6b3ce83129097bb21bb8169898f48692de4f966db140c71b85a2065acfc948561c465279fc05194a79a1115f3b00170944b6c4bd6c52ada909a075c55d18d76c2ed2175602421b34b27362a05c350733ed73382471df0a08950f7f1e812a610c17bdac82d82d54be38969f6b41201af79b8d36ef177c5b94b533b1600017241188832aaee0ff1844b2560f527e9f563e3c561bffc356ffe5777a3d2030a9579e443bb04a2b565d05f9d2d3d1efaefdb703ae0575f1542aeba992ba5ba7c2db5b5573509b172bc26aaf8c05b27bc981ec23f0873a801f42c51";
|
|
||||||
try {
|
try {
|
||||||
await fetch(baseUrl + "chat/completion", {
|
await fetch(baseUrl + "chat/app-completion", {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
timeout: 10000,
|
timeout: 10000,
|
||||||
body: JSON.stringify({
|
body: JSON.stringify({
|
||||||
@ -326,13 +439,13 @@ export default {
|
|||||||
let role = [];
|
let role = [];
|
||||||
if (chat.uid == "admin") {
|
if (chat.uid == "admin") {
|
||||||
let my;
|
let my;
|
||||||
if (this.gptMode === "gpt-4-1106-preview-vision-preview") {
|
if (this.gptMode === "gpt-4-vision-preview") {
|
||||||
if (chat.fileList.length > 0) {
|
if (chat.fileList.length > 0) {
|
||||||
chat.fileList.forEach((item) => {
|
chat.fileList.forEach((item) => {
|
||||||
if (item) {
|
if (item) {
|
||||||
role.push({
|
role.push({
|
||||||
type: "image_url",
|
type: "image_url",
|
||||||
image_url: item,
|
image_url: item.url,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@ -362,37 +475,62 @@ export default {
|
|||||||
scrollToUpper() {
|
scrollToUpper() {
|
||||||
console.log("滚动到顶部");
|
console.log("滚动到顶部");
|
||||||
},
|
},
|
||||||
|
// 上传接口
|
||||||
uploadFilePromise(url) {
|
uploadFilePromise(url) {
|
||||||
|
console.log(url, 123);
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
const Authorization = uni.getStorageSync('token');
|
const Authorization = "";
|
||||||
let a = uni.uploadFile({
|
let a = uni.uploadFile({
|
||||||
url: 'http://114.218.158.24:9020/upload/img',
|
url: "https://erpapi.fontree.cn/upload/img",
|
||||||
filePath: url,
|
filePath: url,
|
||||||
name: 'file',
|
name: "file",
|
||||||
formData: {
|
formData: {
|
||||||
source: 'gpt',
|
source: "artwork",
|
||||||
mask:''
|
type: "image",
|
||||||
},
|
},
|
||||||
header: {
|
header: {
|
||||||
Authorization
|
Authorization,
|
||||||
|
},
|
||||||
|
success: (res) => {
|
||||||
|
resolve(JSON.parse(res.data).data.ori_url);
|
||||||
},
|
},
|
||||||
success: res => {
|
|
||||||
resolve(res.data);
|
|
||||||
this.fileList.push(
|
|
||||||
JSON.parse(res.data).data.ori_url
|
|
||||||
);
|
|
||||||
console.log(this.fileList, 888);
|
|
||||||
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
// 上传图片
|
||||||
async upLoaded(file, lists, name) {
|
async upLoaded(file, lists, name) {
|
||||||
this.uploadFilePromise(file.file.url)
|
const item = file.file[0];
|
||||||
|
this.fileList.push({
|
||||||
|
...item,
|
||||||
|
//提示上传中
|
||||||
|
status: "uploading",
|
||||||
|
message: "上传中",
|
||||||
|
});
|
||||||
|
let result = await this.uploadFilePromise(file.file[0].url);
|
||||||
|
this.fileList.splice(
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
Object.assign(item, {
|
||||||
|
status: "success",
|
||||||
|
message: "上传成功",
|
||||||
|
url: result,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
},
|
||||||
|
// 删除图片
|
||||||
|
deleteFile(file, detail) {
|
||||||
|
this.fileList = [];
|
||||||
|
},
|
||||||
|
// 刷新
|
||||||
|
reLoad() {
|
||||||
|
location.reload();
|
||||||
|
},
|
||||||
|
// 切换语音和文字
|
||||||
|
changeMic() {
|
||||||
|
this.isText = !this.isText;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@ -415,6 +553,18 @@ page {
|
|||||||
/deep/ .u-upload {
|
/deep/ .u-upload {
|
||||||
flex: none !important;
|
flex: none !important;
|
||||||
}
|
}
|
||||||
|
/deep/ .u-upload__wrap__preview__image {
|
||||||
|
width: 90rpx !important;
|
||||||
|
height: 90rpx !important;
|
||||||
|
top: -8px;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
/deep/ .u-album {
|
||||||
|
uni-image {
|
||||||
|
width: 100rpx !important;
|
||||||
|
height: 100rpx !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
.text-area {
|
.text-area {
|
||||||
// position: fixed;
|
// position: fixed;
|
||||||
width: 95%;
|
width: 95%;
|
||||||
@ -455,12 +605,11 @@ page {
|
|||||||
font-size: 36rpx;
|
font-size: 36rpx;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-right: 120rpx;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.bottom {
|
.bottom {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 80vh;
|
height: 90vh;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
// background-color: rgb(50, 54, 68);
|
// background-color: rgb(50, 54, 68);
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
@ -471,8 +620,8 @@ page {
|
|||||||
.chat-content {
|
.chat-content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
// overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
// overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
@ -499,7 +648,7 @@ page {
|
|||||||
|
|
||||||
.chat-text {
|
.chat-text {
|
||||||
float: left;
|
float: left;
|
||||||
max-width: 90%;
|
max-width: 80%;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
color: #535353;
|
color: #535353;
|
||||||
border-radius: 20px 20px 20px 5px;
|
border-radius: 20px 20px 20px 5px;
|
||||||
@ -744,4 +893,154 @@ page {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.record {
|
||||||
|
padding: 20rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
padding: 10rpx;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
|
||||||
|
.content {
|
||||||
|
margin-right: 20rpx;
|
||||||
|
position: relative;
|
||||||
|
background-color: rgba(107, 197, 107, 0.85);
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
right: -8px;
|
||||||
|
top: 8px;
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border: 4px solid transparent;
|
||||||
|
border-left-color: rgba(107, 197, 107, 0.85);
|
||||||
|
}
|
||||||
|
|
||||||
|
image {
|
||||||
|
max-width: 400rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recorder {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.time {
|
||||||
|
margin-right: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 32rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
text {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
& text:nth-of-type(1) {
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
& text:nth-of-type(2) {
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
& text:nth-of-type(3) {
|
||||||
|
transform: scale(0.6);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
.recorder {
|
||||||
|
.icon {
|
||||||
|
animation: play 1.5s ease-in-out infinite backwards;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hander {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolBg {
|
||||||
|
height: 140rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolBox {
|
||||||
|
margin-right: 20rpx;
|
||||||
|
|
||||||
|
.recorder {
|
||||||
|
width: 380rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 17rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
box-shadow: 2rpx 3rpx 10rpx rgba(0, 0, 0, 0.2);
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background-color: #95a5a6;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%);
|
||||||
|
top: -3px;
|
||||||
|
content: "";
|
||||||
|
width: 0;
|
||||||
|
height: 3px;
|
||||||
|
background-color: #7bed9f;
|
||||||
|
animation: loading-data 1.25s ease-in-out infinite backwards;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes loading-data {
|
||||||
|
0% {
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes play {
|
||||||
|
0% {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
color: #c3c3c3;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
columns: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.camrea {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
BIN
static/image/V.png
Normal file
BIN
static/image/V.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
4
uni_modules/mumu-recorder/changelog.md
Normal file
4
uni_modules/mumu-recorder/changelog.md
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
## 1.0.1（2022-06-11）
|
||||||
|
修复苹果手机在微信中无法获取音频长度问题
|
||||||
|
## 1.0.0（2022-06-10）
|
||||||
|
版本上线
|
||||||
@ -0,0 +1,113 @@
|
|||||||
|
<template>
|
||||||
|
<view class="recorder">
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isUserMedia: false,
|
||||||
|
stream: null,
|
||||||
|
audio: null,
|
||||||
|
recorder: null,
|
||||||
|
chunks: [],
|
||||||
|
startTime: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
/**
|
||||||
|
* error 事件的返回状态
|
||||||
|
* 100: 请在HTTPS环境中使用
|
||||||
|
* 101: 浏览器不支持
|
||||||
|
* 201: 用户拒绝授权
|
||||||
|
* 500: 未知错误
|
||||||
|
* */
|
||||||
|
if (origin.indexOf('https') === -1) {
|
||||||
|
this.$emit('error', '100')
|
||||||
|
throw '请在 https 环境中使用本插件。'
|
||||||
|
}
|
||||||
|
if (!navigator.mediaDevices || !window.MediaRecorder) {
|
||||||
|
this.$emit('error', '101')
|
||||||
|
throw '当前浏览器不支持'
|
||||||
|
}
|
||||||
|
|
||||||
|
this.getRecorderManager()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getRecorderManager() {
|
||||||
|
this.audio = document.createElement('audio')
|
||||||
|
navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
|
||||||
|
this.isUserMedia = true
|
||||||
|
stream.getTracks().forEach((track) => {
|
||||||
|
track.stop()
|
||||||
|
})
|
||||||
|
}).catch(err => {
|
||||||
|
this.onErrorHandler(err)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
start() {
|
||||||
|
if (!this.isUserMedia) return console.log('设备不支持')
|
||||||
|
|
||||||
|
navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
|
||||||
|
this.startTime = new Date().getTime()
|
||||||
|
this.stream = stream
|
||||||
|
this.recorder = new MediaRecorder(stream)
|
||||||
|
this.recorder.ondataavailable = this.getRecordingData
|
||||||
|
this.recorder.onstop = this.saveRecordingData
|
||||||
|
this.recorder.start()
|
||||||
|
}).catch(err => {
|
||||||
|
this.onErrorHandler(err)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
stop() {
|
||||||
|
this.recorder.stop()
|
||||||
|
this.stream.getTracks().forEach((track) => {
|
||||||
|
track.stop()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getRecordingData(e) {
|
||||||
|
this.chunks.push(e.data)
|
||||||
|
},
|
||||||
|
saveRecordingData() {
|
||||||
|
const blob = new Blob(this.chunks, { 'type': 'audio/mpeg' }),
|
||||||
|
localUrl = URL.createObjectURL(blob)
|
||||||
|
|
||||||
|
const endTime = new Date().getTime()
|
||||||
|
|
||||||
|
let duration = (endTime - this.startTime).toString().split('')
|
||||||
|
duration.splice(duration.length - 2)
|
||||||
|
duration.splice(duration.length - 1, 0, '.')
|
||||||
|
duration = parseFloat(duration.join(''))
|
||||||
|
|
||||||
|
const recorder = {
|
||||||
|
data: blob,
|
||||||
|
duration: duration,
|
||||||
|
localUrl: localUrl
|
||||||
|
}
|
||||||
|
this.$emit('success', recorder)
|
||||||
|
},
|
||||||
|
onErrorHandler(err) {
|
||||||
|
console.log(err)
|
||||||
|
if (err.name === 'NotAllowedError') {
|
||||||
|
this.$emit('error', '201')
|
||||||
|
throw '用户拒绝了当前的浏览器实例的访问请求'
|
||||||
|
}
|
||||||
|
|
||||||
|
if (err.name === 'NotReadableError') {
|
||||||
|
this.$emit('error', '101')
|
||||||
|
throw '当前浏览器不支持'
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$emit('error', '500')
|
||||||
|
throw '调用失败，原因不详'
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
destroyed() {
|
||||||
|
this.stop()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
87
uni_modules/mumu-recorder/package.json
Normal file
87
uni_modules/mumu-recorder/package.json
Normal file
@ -0,0 +1,87 @@
|
|||||||
|
{
|
||||||
|
"id": "mumu-recorder",
|
||||||
|
"displayName": "h5录音组件，调用H5原生功能使用麦克风进行录音",
|
||||||
|
"version": "1.0.1",
|
||||||
|
"description": "演示案例中模仿了微信的长按发送语音，与普通录音demo。",
|
||||||
|
"keywords": [
|
||||||
|
"录音",
|
||||||
|
"麦克风",
|
||||||
|
"模仿微信"
|
||||||
|
],
|
||||||
|
"repository": "",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": "^3.1.0"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"category": [
|
||||||
|
"前端组件",
|
||||||
|
"通用组件"
|
||||||
|
],
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "麦克风"
|
||||||
|
},
|
||||||
|
"npmurl": ""
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
},
|
||||||
|
"App": {
|
||||||
|
"app-vue": "n",
|
||||||
|
"app-nvue": "n"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "n",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "u",
|
||||||
|
"阿里": "u",
|
||||||
|
"百度": "u",
|
||||||
|
"字节跳动": "u",
|
||||||
|
"QQ": "u",
|
||||||
|
"钉钉": "u",
|
||||||
|
"快手": "u",
|
||||||
|
"飞书": "u",
|
||||||
|
"京东": "u",
|
||||||
|
"小红书": "u"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
117
uni_modules/mumu-recorder/readme.md
Normal file
117
uni_modules/mumu-recorder/readme.md
Normal file
@ -0,0 +1,117 @@
|
|||||||
|
## 插件简绍
|
||||||
|
|
||||||
|
### 实现原理
|
||||||
|
|
||||||
|
> 通过 navigator.mediaDevices.getUserMedia(需要https环境) 这个api调用麦克风，获取到到音频流数据。
|
||||||
|
>
|
||||||
|
> 通过 MediaRecorder 这个构造函数对音频流进行接收，完成录制后会返回一个存储`Blob`内容的录制数据。
|
||||||
|
|
||||||
|
|
||||||
|
### 使用环境
|
||||||
|
|
||||||
|
需要https环境才能使用，本地测试可以在 manifest.json 中点击源码展示，找到h5 ，添加："devServer" : { "https" : true}
|
||||||
|
|
||||||
|
**请勿使用 UC浏览器 与 夸克等阿里旗下的浏览器，发现他们使用的内核都较低，无法正常获取音频流，并且都有对接音频流截取的插件，导致无法正常获取音频流的数据。在微信中可以正常使用，推荐在微信内打开演示案例 **
|
||||||
|
|
||||||
|
需要https环境才能使用！！！
|
||||||
|
|
||||||
|
需要https环境才能使用！！！
|
||||||
|
|
||||||
|
需要https环境才能使用！！！
|
||||||
|
|
||||||
|
### 插件使用
|
||||||
|
|
||||||
|
**插件已支持 uni_modules 支持组件easycom，以下代码演示的是普通使用**
|
||||||
|
|
||||||
|
``` html
|
||||||
|
<!-- HTML -->
|
||||||
|
<view>
|
||||||
|
<audio :src='recorder.localUrl' v-if='recorder' name='本地录音' controls="true"></audio>
|
||||||
|
<view @click='handlerOnCahnger'>
|
||||||
|
{{!status?'开始录音':'结束录音'}}
|
||||||
|
</view>
|
||||||
|
<mumu-recorder ref='recorder' @success='handlerSuccess' @error='handlerError'></mumu-recorder>
|
||||||
|
</view>
|
||||||
|
```
|
||||||
|
|
||||||
|
``` javascript
|
||||||
|
// js
|
||||||
|
import MumuRecorder from '@/uni_modules/mumu-recorder/components/mumu-recorder/mumu-recorder.vue'
|
||||||
|
export default {
|
||||||
|
components: { MumuRecorder },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
status: false,
|
||||||
|
recorder: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handlerSave() {
|
||||||
|
let tag = document.createElement('a')
|
||||||
|
tag.href = this.recorder.localUrl
|
||||||
|
tag.download = '录音'
|
||||||
|
tag.click()
|
||||||
|
},
|
||||||
|
handlerOnCahnger() {
|
||||||
|
if (this.status) {
|
||||||
|
this.$refs.recorder.stop()
|
||||||
|
} else {
|
||||||
|
this.$refs.recorder.start()
|
||||||
|
}
|
||||||
|
this.status = !this.status
|
||||||
|
},
|
||||||
|
handlerSuccess(res) {
|
||||||
|
console.log(res)
|
||||||
|
this.recorder = res
|
||||||
|
},
|
||||||
|
handlerError(code) {
|
||||||
|
switch (code) {
|
||||||
|
case '101':
|
||||||
|
uni.showModal({
|
||||||
|
content: '当前浏览器版本较低，请更换浏览器使用，推荐在微信中打开。'
|
||||||
|
})
|
||||||
|
break;
|
||||||
|
case '201':
|
||||||
|
uni.showModal({
|
||||||
|
content: '麦克风权限被拒绝，请刷新页面后授权麦克风权限。'
|
||||||
|
})
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
uni.showModal({
|
||||||
|
content: '未知错误，请刷新页面重试'
|
||||||
|
})
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 相关API
|
||||||
|
|
||||||
|
##### 组件内部方法（$refs 调用）
|
||||||
|
|
||||||
|
| 方法名 | 说明 | 参数 |
|
||||||
|
| ------ | -------- | ---- |
|
||||||
|
| start | 开始录音 | 无 |
|
||||||
|
| stop | 结束录音 | 无 |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
##### 事件（Events）
|
||||||
|
|
||||||
|
| 事件名 | 说明 | 回调参数 |
|
||||||
|
| ------- | -------------------- | ------------------------------------------------------------ |
|
||||||
|
| success | 停止录音后调用此事件 | 返回录音数据，是一个对象<br />{ data: 音频的 blob 数据，上传请使用这个 <br />duration: 当前音频长度<br/>localUrl: 当前音频的本地链接，可直接通过 audio 标签进行播放 } |
|
||||||
|
| error | 组件内部发生错误 | 错误码：<100 当前不是https环境> <101 浏览器不支持> <201 麦克风权限被拒绝> <500 未知错误> |
|
||||||
|
|
||||||
|
### 案例演示
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 支持作者
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user