|
|
<template>
|
|
|
<div class="g_page_ai">
|
|
|
<div class="main-obj" style="background-color: #ffffff;">
|
|
|
<div class="" style="overflow-y: auto;position: relative;">
|
|
|
<div style="padding: 24px 0;" class="g_flex_row_center g_position_rela">
|
|
|
<div class="g_w_64 g_h_64 g_flex_c" style="overflow: hidden;border-radius: 50%;">
|
|
|
<image :src="fadanBaseImg + 'v3/add1.png'" alt="" style="width: 100px;" mode="widthFix" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="conet"
|
|
|
style="width: calc(100vw - 40px);margin: 0px auto 12px;background-color: #f5f5f5;border-radius: 12px;padding: 8px;">
|
|
|
<div class="g_c_4 g_fs_16 g_c_0">
|
|
|
你好，我是伯才智能匹配AI<text class="g_fw_bold">大鹏</text>，可以帮老乡快速匹配工作（支持语音输入）。为了匹配更准确，需多提供老乡需求信息，例如:
|
|
|
</div>
|
|
|
<div class="g_pt_24 g_pb_24">
|
|
|
<div class="g_flex_row_start g_mb_4">
|
|
|
<div class="g_fs_16 g_fw_600 g_mr_4 g_flex_none g_c_0">1. 性别</div>
|
|
|
</div>
|
|
|
<div class="g_flex_row_start g_mb_4">
|
|
|
<div class="g_fs_16 g_fw_600 g_mr_4 g_flex_none g_c_0">2. 年龄</div>
|
|
|
</div>
|
|
|
<div class="g_flex_row_start g_mb_4">
|
|
|
<div class="g_fs_16 g_fw_600 g_mr_4 g_flex_none g_c_0">3. 意向城市</div>
|
|
|
</div>
|
|
|
<div class="g_flex_row_start g_mb_0">
|
|
|
<div class="g_fs_16 g_fw_600 g_mr_4 g_flex_none g_c_0">4. 工作要求(如吃住、班次等)</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<view class="g_pb_24" >
|
|
|
<div class="">
|
|
|
<text class="g_fs_16 g_flex_none g_c_0">示例：</text>
|
|
|
<text class="g_fs_16 g_fw_600 g_mr_4 g_flex_none g_c_0">有位32岁大姐，想去常州找个长白班的工作。</text>
|
|
|
</div>
|
|
|
</view>
|
|
|
<div class="g_c_4 g_fs_16 g_c_0">
|
|
|
快告诉我老乡需求，开始匹配吧!
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="g_flex_row_between"
|
|
|
style="margin-top: 4px;padding-left: 40rpx;padding-right: 40rpx;"
|
|
|
v-if="corpUserFlag && false"
|
|
|
>
|
|
|
<div v-for="(item,index) in customList" :key="index" @click="goChatDetail(item)">
|
|
|
<div>
|
|
|
<image class="" :src="item.image" style="width: 96rpx;height: 96rpx;border-radius: 8px;">
|
|
|
</image>
|
|
|
</div>
|
|
|
<div style="margin-top: 8px;color: rgba(0, 0, 0, 0.5);font-size: 12px;">
|
|
|
{{ item.title }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="height: 251px;background-color: #fff;"></div>
|
|
|
<div class="g_flex_none m-opera-obj-fixed g_flex_column_end"
|
|
|
style="position: fixed;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
bottom:44px;
|
|
|
bottom: calc(44px + constant(safe-area-inset-bottom));
|
|
|
bottom: calc(44px + env(safe-area-inset-bottom));
|
|
|
width: 100vw;
|
|
|
padding-top: 10px;
|
|
|
padding-bottom: 20px;
|
|
|
background-image: linear-gradient(to bottom,rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 1) 100%);"
|
|
|
>
|
|
|
<div class="g_flex_row_center voice-ban">
|
|
|
<view style="width: 120px;height: 40px;border-radius: 50px;border: 1px solid #eee;"
|
|
|
class="g_flex_c g_fs_16 view-btn g_bg_f" :style="btnStyle" hover-class="thover" @click="goHistory('view')">
|
|
|
查看会话
|
|
|
</view>
|
|
|
</div>
|
|
|
<div class="tip-ban g_flex_row_center g_h_26">
|
|
|
<view v-if="voiceStatus == 0"
|
|
|
class="voice-tip g_h_all g_mt_3"
|
|
|
style="color: #666666;
|
|
|
font-size: 12px;
|
|
|
"
|
|
|
:style="writeStylt"
|
|
|
>
|
|
|
松手发送，上移取消
|
|
|
</view>
|
|
|
<view v-if="voiceStatus == 1"
|
|
|
class="voice-tip g_h_all g_mt_3"
|
|
|
style="color: #fe0000;
|
|
|
font-size: 12px;
|
|
|
"
|
|
|
:style="writeStylt"
|
|
|
>
|
|
|
松手取消
|
|
|
</view>
|
|
|
</div>
|
|
|
<view class="p-com-chat g_w_all g_bg_f"
|
|
|
>
|
|
|
<view class="chat-operate g_flex_c" :style="writeStyle" :class="voiceStatus == 1 ? 'bg_5_op5' : 'g_bg_f'">
|
|
|
<view class="g_bg_f m-input g_flex_row_center g_position_rela"
|
|
|
:class="hasTopPadding && msgType == 'text' ? 'hasTopPadding' : ''"
|
|
|
:style="{
|
|
|
'overflow': 'auto',
|
|
|
'width':'calc(100vw - 40px)',
|
|
|
'box-shadow': 'rgb(0 0 0 / 10%) 0px 2px 12px 0px',
|
|
|
'border-radius':'50px',
|
|
|
'height': msgType == 'text' ? (tah < 46 ? '56px' : tah + px) :'56px',
|
|
|
'min-height': '56px',
|
|
|
}">
|
|
|
<!-- 左侧 -->
|
|
|
<view class="g_flex_none g_flex_column_end g_h_all g_w_56 g_posi_relative g_text_c" @click="handleUpdateMsgType()"
|
|
|
:class="voiceStatus == 0 && spec ? 'g_bg_main' : voiceStatus == 1 ? 'g_bg_f0a' : voiceStatus == -2 ? 'g_c_t g_bg_main' : ''"
|
|
|
style="border-radius: 50px 0px 0px 50px;position: relative;min-height: 56px;" v-if="gptType != 'ai-text'"
|
|
|
:style="{
|
|
|
'height': msgType == 'text' ? (tah < 46 ? '56px' : tah + 20 + 'px') :'56px',
|
|
|
}"
|
|
|
>
|
|
|
<i class="iconfont"
|
|
|
:class="msgType == 'text' ? 'icon-huatongyuyin g_fs_22' : 'icon-weixinjianpan2 g_fs_26'"
|
|
|
style="position: fixed;"
|
|
|
:style="{
|
|
|
'left':msgType == 'text' ? '39px' :'37px',
|
|
|
'bottom':msgType == 'text' ? '35px' :'33px',
|
|
|
}"
|
|
|
v-if="voiceStatus == -1"></i>
|
|
|
</view>
|
|
|
<!-- 中部 -->
|
|
|
<view class="g_flex_1 g_flex_column_center"
|
|
|
>
|
|
|
<view v-if="msgType == 'text'" class="m-input-point g_w_all g_flex_column_center">
|
|
|
<div class="container g_flex_column_center">
|
|
|
|
|
|
<textarea :auto-height="false"
|
|
|
cursor-spacing="50"
|
|
|
class="g_fs_17 g_c_0"
|
|
|
:class="hasTopPadding ? 'g_mt_0' : ''"
|
|
|
id="textarea"
|
|
|
placeholder="请输入内容"
|
|
|
v-model="sendMsg"
|
|
|
@linechange="linechange"
|
|
|
@input="onInput"
|
|
|
style="height: 22px;padding: 10px 0;line-height: 27px;"
|
|
|
:style="{ height: tah + 'px' }"
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
</view>
|
|
|
<view v-else>
|
|
|
<view class="g_w_all g_h_56 m-voice-point g_flex_c g_fw_700 g_fs_17"
|
|
|
@touchstart="onTouchStart" @touchend="onTouchEnd" @touchmove="onTouchMove"
|
|
|
:class="voiceStatus == 1 ? 'g_c_f g_bg_f0a' : voiceStatus == 0 ? 'g_bg_main' : voiceStatus == -2 ? 'g_bg_main' : ''">
|
|
|
{{ voiceStatus == 1 ? "" : voiceStatus == -1 ? "按住 说话" : "" }}
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 发送 -->
|
|
|
<view class="g_flex_none g_flex_column_end g_h_all g_w_56 g_position_rela g_text_c" @click="handleSendMsg"
|
|
|
:class="voiceStatus == 0 && spec ? 'g_bg_main' : voiceStatus == 1 ? 'g_bg_f0a' : voiceStatus == -2 ? 'g_c_t g_bg_main' : ''"
|
|
|
style="border-radius: 0 50px 50px 0;position: relative;min-height: 56px;"
|
|
|
:style="{
|
|
|
'height': msgType == 'text' ? (tah < 46 ? '56px' : tah + 20 + 'px') :'56px',
|
|
|
}"
|
|
|
>
|
|
|
<!-- 清屏 -->
|
|
|
<i class="iconfont icon-close-circle g_fs_26 g_c_9"
|
|
|
style="position: fixed;right: 36px;bottom: 80px;"
|
|
|
v-if="tah > 80 && msgType == 'text'" @click.stop="clearMsg"
|
|
|
></i>
|
|
|
<i class="iconfont icon-fasong g_fs_32"
|
|
|
:class="sendIconStatus ? 'g_c_main' : voiceStatus == -2 ? 'g_c_t g_bg_main' : 'g_c_b'"
|
|
|
style="position: fixed;right: 33px;bottom: 31px;"
|
|
|
v-if="voiceStatus == -1"></i>
|
|
|
</view>
|
|
|
|
|
|
<!-- 录音交互动画 -->
|
|
|
<view class="longpress-top-mask g_flex_c"
|
|
|
@touchend="onTouchEnd"
|
|
|
style="
|
|
|
bottom:38px;
|
|
|
"
|
|
|
v-if="voiceStatus == 0 || voiceStatus == 1 || voiceStatus == -2">
|
|
|
<div class="column-voice g_flex_row_center">
|
|
|
<div v-for="(item, index) in 20" :key="index" class="g_flex_column_center">
|
|
|
<div class="column-item " :style="{
|
|
|
animation: 'voi_animate 1.5s infinite ' + 0.1 * index + 's',
|
|
|
'-webkit-animation': 'voi_animate 1.5s infinite ' + 0.1 * index + 's',
|
|
|
}"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</div>
|
|
|
</div>
|
|
|
<g-tabbar class="tabbar"></g-tabbar>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<!-- #ifdef APP -->
|
|
|
<script module="yourModuleName" lang="renderjs">
|
|
|
//此模块内部只能用选项式API风格，vue2、vue3均可用，请照抄这段代码；不可改成setup组合式API风格，否则可能不能import vue导致编译失败
|
|
|
/**需要编译成App时，你需要添加一个renderjs模块，然后一模一样的import上面那些js（微信的js除外）
|
|
|
，因为App中默认是在renderjs（WebView）中进行录音和音频编码
|
|
|
。如果配置了 RecordApp.UniWithoutAppRenderjs=true 且未调用依赖renderjs的功能时（如nvue、可视化、仅H5中可用的插件）
|
|
|
，可不提供此renderjs模块，同时逻辑层中需要将相关import的条件编译去掉**/
|
|
|
import 'recorder-core'
|
|
|
import RecordApp from 'recorder-core/src/app-support/app'
|
|
|
import '../../uni_modules/Recorder-UniCore/app-uni-support.js' //renderjs中似乎不支持"@/"打头的路径，如果编译路径错误请改正路径即可
|
|
|
|
|
|
//按需引入你需要的录音格式支持文件，和插件
|
|
|
import 'recorder-core/src/engine/mp3'
|
|
|
import 'recorder-core/src/engine/mp3-engine'
|
|
|
//按需引入你需要的录音格式支持文件，如果需要多个格式支持，把这些格式的编码引擎js文件统统引入进来即可
|
|
|
import "recorder-core/src/engine/wav";
|
|
|
import 'recorder-core/src/extensions/waveview'
|
|
|
|
|
|
export default {
|
|
|
mounted() {
|
|
|
//App的renderjs必须调用的函数，传入当前模块this
|
|
|
RecordApp.UniRenderjsRegister(this);
|
|
|
},
|
|
|
methods: {
|
|
|
//这里定义的方法，在逻辑层中可通过 RecordApp.UniWebViewVueCall(this,'this.xxxFunc()') 直接调用
|
|
|
//调用逻辑层的方法，请直接用 this.$ownerInstance.callMethod("xxxFunc",{args}) 调用，二进制数据需转成base64来传递
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<!-- #endif -->
|
|
|
<script>
|
|
|
//必须引入的Recorder核心（文件路径是 /src/recorder-core.js 下同），使用import、require都行
|
|
|
import Recorder from "recorder-core"; //注意如果未引用Recorder变量，可能编译时会被优化删除（如vue3 tree-shaking），请改成 import 'recorder-core'，或随便调用一下 Recorder.a=1 保证强引用
|
|
|
|
|
|
//必须引入的RecordApp核心文件（文件路径是 /src/app-support/app.js）
|
|
|
import RecordApp from "recorder-core/src/app-support/app";
|
|
|
|
|
|
//所有平台必须引入的uni-app支持文件（如果编译出现路径错误，请把@换成 ../../ 这种）
|
|
|
import "../../root/components/Recorder-UniCore/app-uni-support.js";
|
|
|
|
|
|
/** 需要编译成微信小程序时，引入微信小程序支持文件 **/
|
|
|
// #ifdef MP-WEIXIN
|
|
|
import "recorder-core/src/app-support/app-miniProgram-wx-support.js";
|
|
|
// #endif
|
|
|
|
|
|
/** H5、小程序环境中：引入需要的格式编码器、可视化插件，App环境中在renderjs中引入 **/
|
|
|
// 注意：如果App中需要在逻辑层中调用Recorder的编码/转码功能，需要去掉此条件编译，否则会报未加载编码器的错误
|
|
|
// #ifdef H5 || MP-WEIXIN
|
|
|
//按需引入你需要的录音格式支持文件，如果需要多个格式支持，把这些格式的编码引擎js文件统统引入进来即可
|
|
|
import "recorder-core/src/engine/wav";
|
|
|
|
|
|
//可选的插件支持项，把需要的插件按需引入进来即可
|
|
|
import "recorder-core/src/extensions/waveview";
|
|
|
// #endif
|
|
|
var _wsTimer = null;
|
|
|
export default {
|
|
|
onShareAppMessage() {
|
|
|
return this.G.shareFun();
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
corpUserFlag: false,
|
|
|
isFocus:false,
|
|
|
tah:36,
|
|
|
writeStyle: 'bottom:108px',
|
|
|
writeStyls:'bottom:136px',
|
|
|
writeStylt:'bottom:166px',
|
|
|
btnStyle:'bottom:186px',
|
|
|
topViewBottom:"bottom:0px",
|
|
|
isIosWxapp: false,
|
|
|
scrollIntoView: '',
|
|
|
wh: uni.getSystemInfoSync().screenHeight + 'px',
|
|
|
isFinish: 1,
|
|
|
isFluency: false,
|
|
|
isAside: {
|
|
|
isShow: false,
|
|
|
},
|
|
|
content: "",
|
|
|
textareaHeight: 30,
|
|
|
initialHeight: 0,
|
|
|
showLoad: false,
|
|
|
localBaseImg: this.G.store().localBaseImg,
|
|
|
fadanBaseImg:this.G.store().fadanBaseImg,
|
|
|
scrollTop: 0,
|
|
|
|
|
|
dzj: "",
|
|
|
msgType: "voice",
|
|
|
sendMsg: "",
|
|
|
sendIconStatus: false,
|
|
|
voiceMsg: "按住 说话",
|
|
|
voiceStatus: -1, // -1 录音前 & 录音结束 0 录音时且在指定范围 1录音时但不在指定范围 -2点击
|
|
|
longPressDelay: 230, // 设定长按所需时间，单位毫秒
|
|
|
spec: true,
|
|
|
isAuth: false,
|
|
|
content: "", // 内容
|
|
|
hasTopPadding: false,
|
|
|
allJob: [],
|
|
|
talkId: 0,
|
|
|
gptType: "",
|
|
|
bottomHeight: 100,
|
|
|
longPressTimer: null,
|
|
|
isStartRecord: false,
|
|
|
sendMsgGroup: [],
|
|
|
socketTask: null,
|
|
|
sequenceCounter: 1,
|
|
|
cid: -1,
|
|
|
hisPage: 1,
|
|
|
ws_send_ready: false,
|
|
|
reconnectCount: 0,
|
|
|
isSending: false,
|
|
|
customList: [],
|
|
|
};
|
|
|
},
|
|
|
onLoad(options) {
|
|
|
let that = this;
|
|
|
//页面onShow时【必须调用】的函数，传入当前组件this
|
|
|
RecordApp.UniPageOnShow(this);
|
|
|
},
|
|
|
onShow() {
|
|
|
let that = this;
|
|
|
console.log('==============',this.G.store())
|
|
|
if (uni.getStorageSync("apply-token")) {
|
|
|
that.checkRecordingPermission();
|
|
|
|
|
|
that.G.Get(that.api.ai_config, {}, (res) => {
|
|
|
// uni.setStorageSync("robot_config", JSON.stringify(res));
|
|
|
that.customList = res.map(item => {
|
|
|
return {
|
|
|
title: item.name,
|
|
|
image: item.iconUrl,
|
|
|
page: '/root/chat/index',
|
|
|
description:item.description,
|
|
|
robotId:item.robotId
|
|
|
}
|
|
|
})
|
|
|
});
|
|
|
}
|
|
|
this.corpUserFlag = uni.getStorageSync("apply-userinfo").corpUserFlag;
|
|
|
const isWxApp = uni.getSystemInfoSync().uniPlatform == 'mp-weixin'
|
|
|
const isIosWxapp = uni.getSystemInfoSync().platform == 'ios' && isWxApp
|
|
|
that.isIosWxapp = isIosWxapp;
|
|
|
|
|
|
that.isFinish = 1;
|
|
|
that.voiceStatus = -1;
|
|
|
that.isStartRecord = false;
|
|
|
// 创建查询对象
|
|
|
const query = wx.createSelectorQuery();
|
|
|
// 选择指定的 DOM 元素
|
|
|
query.select(".chat-operate").boundingClientRect();
|
|
|
// 执行查询
|
|
|
query.exec((res) => {
|
|
|
if (res && res[0]) {
|
|
|
const height = res[0].height;
|
|
|
that.bottomHeight = height;
|
|
|
that.wh = `calc(${uni.getSystemInfoSync().windowHeight}px - ${that.bottomHeight}px)`;
|
|
|
} else {
|
|
|
console.error("未找到元素");
|
|
|
}
|
|
|
});
|
|
|
if (this.isMounted) RecordApp.UniPageOnShow(this);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
watch: {
|
|
|
sendMsg(val) {
|
|
|
if (val) {
|
|
|
this.sendIconStatus = true;
|
|
|
} else {
|
|
|
this.sendIconStatus = false;
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
methods: {
|
|
|
//请求录音权限
|
|
|
recReq() {
|
|
|
var that = this;
|
|
|
//编译成App时提供的授权许可（编译成H5、小程序为免费授权可不填写）；如果未填写授权许可，将会在App打开后第一次调用请求录音权限时，弹出“未获得商用授权时，App上仅供测试”提示框
|
|
|
//RecordApp.UniAppUseLicense='我已获得UniAppID=*****的商用授权';
|
|
|
|
|
|
RecordApp.RequestPermission_H5OpenSet = {
|
|
|
audioTrackSet: {
|
|
|
noiseSuppression: true,
|
|
|
echoCancellation: true,
|
|
|
autoGainControl: true
|
|
|
}
|
|
|
}; //这个是Start中的audioTrackSet配置，在h5（H5、App+renderjs）中必须提前配置，因为h5中RequestPermission会直接打开录音
|
|
|
|
|
|
RecordApp.UniWebViewActivate(this); //App环境下必须先切换成当前页面WebView
|
|
|
RecordApp.RequestPermission(
|
|
|
() => {
|
|
|
console.log("已获得录音权限，可以开始录音了");
|
|
|
that.msgType = "voice";
|
|
|
that.isAuth = true;
|
|
|
},
|
|
|
(msg, isUserNotAllow) => {
|
|
|
if (isUserNotAllow) {
|
|
|
//用户拒绝了录音权限
|
|
|
//这里你应当编写代码进行引导用户给录音权限，不同平台分别进行编写
|
|
|
uni.showModal({
|
|
|
title: '提示',
|
|
|
content: '需要录音权限才能使用语音功能，请前往设置开启权限',
|
|
|
success: function (res) {
|
|
|
if (res.confirm) {
|
|
|
uni.openSetting({
|
|
|
success: (settingData) => {
|
|
|
if (settingData.authSetting['scope.record']) {
|
|
|
uni.showToast({ title: '授权成功' });
|
|
|
that.msgType = "voice";
|
|
|
that.isAuth = true;
|
|
|
that.checkRecordingPermission(); // 重新尝试请求权限
|
|
|
} else {
|
|
|
uni.showToast({ icon: 'none', title: '授权失败' });
|
|
|
}
|
|
|
},
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
});
|
|
|
}
|
|
|
that.msgType = "text";
|
|
|
console.error("请求录音权限失败：" + msg);
|
|
|
}
|
|
|
);
|
|
|
},
|
|
|
|
|
|
//开始录音
|
|
|
recStart() {
|
|
|
//Android App如果要后台录音，需要启用后台录音保活服务（iOS不需要），需使用配套原生插件、或使用第三方保活插件
|
|
|
//录音配置信息
|
|
|
var set = {
|
|
|
type: "wav",
|
|
|
sampleRate: 16000,
|
|
|
bitRate: 16, //mp3格式，指定采样率hz、比特率kbps，其他参数使用默认配置；注意：是数字的参数必须提供数字，不要用字符串；需要使用的type类型，需提前把格式支持文件加载进来，比如使用wav格式需要提前加载wav.js编码引擎
|
|
|
/*,audioTrackSet:{ //可选，如果需要同时播放声音（比如语音通话），需要打开回声消除（并不一定会生效；打开后声音可能会从听筒播放，部分环境下（如小程序、App原生插件）可调用接口切换成扬声器外放）
|
|
|
//注意：H5、App+renderjs中需要在请求录音权限前进行相同配置RecordApp.RequestPermission_H5OpenSet后此配置才会生效
|
|
|
echoCancellation:true,noiseSuppression:true,autoGainControl:true} */
|
|
|
onProcess: (buffers, powerLevel, duration, sampleRate, newBufferIdx, asyncEnd) => {
|
|
|
//全平台通用：可实时上传（发送）数据，配合Recorder.SampleData方法，将buffers中的新数据连续的转换成pcm上传，或使用mock方法将新数据连续的转码成其他格式上传，可以参考Recorder文档里面的：Demo片段列表 -> 实时转码并上传-通用版；基于本功能可以做到：实时转发数据、实时保存数据、实时语音识别（ASR）等
|
|
|
|
|
|
//注意：App里面是在renderjs中进行实际的音频格式编码操作，此处的buffers数据是renderjs实时转发过来的，修改此处的buffers数据不会改变renderjs中buffers，所以不会改变生成的音频文件，可在onProcess_renderjs中进行修改操作就没有此问题了；如需清理buffers内存，此处和onProcess_renderjs中均需要进行清理，H5、小程序中无此限制
|
|
|
//注意：如果你要用只支持在浏览器中使用的Recorder扩展插件，App里面请在renderjs中引入此扩展插件，然后在onProcess_renderjs中调用这个插件；H5可直接在这里进行调用，小程序不支持这类插件；如果调用插件的逻辑比较复杂，建议封装成js文件，这样逻辑层、renderjs中直接import，不需要重复编写
|
|
|
|
|
|
//H5、小程序等可视化图形绘制，直接运行在逻辑层；App里面需要在onProcess_renderjs中进行这些操作
|
|
|
// #ifdef H5 || MP-WEIXIN
|
|
|
if (this.waveView) this.waveView.input(buffers[buffers.length - 1], powerLevel,
|
|
|
sampleRate);
|
|
|
// #endif
|
|
|
|
|
|
/*实时释放清理内存，用于支持长时间录音；在指定了有效的type时，编码器内部可能还会有其他缓冲，必须同时提供takeoffEncodeChunk才能清理内存，否则type需要提供unknown格式来阻止编码器内部缓冲，App的onProcess_renderjs中需要进行相同操作
|
|
|
if(this.clearBufferIdx>newBufferIdx){ this.clearBufferIdx=0 } //重新录音了就重置
|
|
|
for(var i=this.clearBufferIdx||0;i<newBufferIdx;i++) buffers[i]=null;
|
|
|
this.clearBufferIdx=newBufferIdx; */
|
|
|
},
|
|
|
onProcess_renderjs: `function(buffers,powerLevel,duration,sampleRate,newBufferIdx,asyncEnd){
|
|
|
//App中在这里修改buffers会改变生成的音频文件，但注意：buffers会先转发到逻辑层onProcess后才会调用本方法，因此在逻辑层的onProcess中需要重新修改一遍
|
|
|
//本方法可以返回true，renderjs中的onProcess将开启异步模式，处理完后调用asyncEnd结束异步，注意：这里异步修改的buffers一样的不会在逻辑层的onProcess中生效
|
|
|
//App中是在renderjs中进行的可视化图形绘制，因此需要写在这里，this是renderjs模块的this（也可以用This变量）；如果代码比较复杂，请直接在renderjs的methods里面放个方法xxxFunc，这里直接使用this.xxxFunc(args)进行调用
|
|
|
if(this.waveView) this.waveView.input(buffers[buffers.length-1],powerLevel,sampleRate);
|
|
|
|
|
|
/*和onProcess中一样进行释放清理内存，用于支持长时间录音
|
|
|
if(this.clearBufferIdx>newBufferIdx){ this.clearBufferIdx=0 } //重新录音了就重置
|
|
|
for(var i=this.clearBufferIdx||0;i<newBufferIdx;i++) buffers[i]=null;
|
|
|
this.clearBufferIdx=newBufferIdx; */
|
|
|
}`,
|
|
|
onProcessBefore_renderjs: `function(buffers,powerLevel,duration,sampleRate,newBufferIdx){
|
|
|
//App中本方法会在逻辑层onProcess之前调用，因此修改的buffers会转发给逻辑层onProcess，本方法没有asyncEnd参数不支持异步处理
|
|
|
//一般无需提供本方法只用onProcess_renderjs就行，renderjs的onProcess内部调用过程：onProcessBefore_renderjs -> 转发给逻辑层onProcess -> onProcess_renderjs
|
|
|
}`,
|
|
|
|
|
|
takeoffEncodeChunk: true ?
|
|
|
null :
|
|
|
(chunkBytes) => {
|
|
|
//全平台通用：实时接收到编码器编码出来的音频片段数据，chunkBytes是Uint8Array二进制数据，可以实时上传（发送）出去
|
|
|
//App中如果未配置RecordApp.UniWithoutAppRenderjs时，建议提供此回调，因为录音结束后会将整个录音文件从renderjs传回逻辑层，由于uni-app的逻辑层和renderjs层数据交互性能实在太拉跨了，大点的文件传输会比较慢，提供此回调后可避免Stop时产生超大数据回传
|
|
|
//App中使用原生插件时，可方便的将数据实时保存到同一文件，第一帧时append:false新建文件，后面的append:true追加到文件
|
|
|
//RecordApp.UniNativeUtsPluginCallAsync("writeFile",{path:"xxx.mp3",append:回调次数!=1, dataBase64:RecordApp.UniBtoa(chunkBytes.buffer)}).then(...).catch(...)
|
|
|
},
|
|
|
takeoffEncodeChunk_renderjs: true ?
|
|
|
null :
|
|
|
`function(chunkBytes){
|
|
|
//App中这里可以做一些仅在renderjs中才生效的事情，不提供也行，this是renderjs模块的this（也可以用This变量）
|
|
|
}`,
|
|
|
|
|
|
start_renderjs: `function(){
|
|
|
//App中可以放一个函数，在Start成功时renderjs中会先调用这里的代码，this是renderjs模块的this（也可以用This变量）
|
|
|
//放一些仅在renderjs中才生效的事情，比如初始化，不提供也行
|
|
|
}`,
|
|
|
stop_renderjs: `function(arrayBuffer,duration,mime){
|
|
|
//App中可以放一个函数，在Stop成功时renderjs中会先调用这里的代码，this是renderjs模块的this（也可以用This变量）
|
|
|
//放一些仅在renderjs中才生效的事情，不提供也行
|
|
|
}`,
|
|
|
};
|
|
|
|
|
|
RecordApp.UniWebViewActivate(this); //App环境下必须先切换成当前页面WebView
|
|
|
RecordApp.Start(
|
|
|
set,
|
|
|
() => {
|
|
|
console.log("已开始录音");
|
|
|
//【稳如老狗WDT】可选的，监控是否在正常录音有onProcess回调，如果长时间没有回调就代表录音不正常
|
|
|
//var wdt=this.watchDogTimer=setInterval ... 请参考示例Demo的main_recTest.vue中的watchDogTimer实现
|
|
|
|
|
|
//创建音频可视化图形绘制，App环境下是在renderjs中绘制，H5、小程序等是在逻辑层中绘制，因此需要提供两段相同的代码
|
|
|
//view里面放一个canvas，canvas需要指定宽高（下面style里指定了300*100）
|
|
|
//<canvas type="2d" class="recwave-WaveView" style="width:300px;height:100px"></canvas>
|
|
|
// RecordApp.UniFindCanvas(this,[".recwave-WaveView"],`
|
|
|
// this.waveView=Recorder.WaveView({compatibleCanvas:canvas1, width:300, height:100});
|
|
|
// `,(canvas1)=>{
|
|
|
// this.waveView=Recorder.WaveView({compatibleCanvas:canvas1, width:300, height:100});
|
|
|
// });
|
|
|
},
|
|
|
(msg) => {
|
|
|
console.error("开始录音失败：" + msg);
|
|
|
uni.hideLoading();
|
|
|
}
|
|
|
);
|
|
|
},
|
|
|
|
|
|
//暂停录音
|
|
|
recPause() {
|
|
|
if (RecordApp.GetCurrentRecOrNull()) {
|
|
|
RecordApp.Pause();
|
|
|
console.log("已暂停");
|
|
|
}
|
|
|
},
|
|
|
//继续录音
|
|
|
recResume() {
|
|
|
if (RecordApp.GetCurrentRecOrNull()) {
|
|
|
RecordApp.Resume();
|
|
|
console.log("继续录音中...");
|
|
|
}
|
|
|
},
|
|
|
|
|
|
//停止录音
|
|
|
recStop() {
|
|
|
//RecordApp.UniNativeUtsPluginCallAsync("androidNotifyService",{ close:true }) //关闭Android App后台录音保活服务
|
|
|
let that = this;
|
|
|
RecordApp.Stop(
|
|
|
(arrayBuffer, duration, mime) => {
|
|
|
if (that.spec) {
|
|
|
//全平台通用：arrayBuffer是音频文件二进制数据，可以保存成文件或者发送给服务器
|
|
|
//App中如果在Start参数中提供了stop_renderjs，renderjs中的函数会比这个函数先执行
|
|
|
|
|
|
//注意：当Start时提供了takeoffEncodeChunk后，你需要自行实时保存录音文件数据，因此Stop时返回的arrayBuffer的长度将为0字节
|
|
|
|
|
|
//如果是H5环境，也可以直接构造成Blob/File文件对象，和Recorder使用一致
|
|
|
// #ifdef H5
|
|
|
var blob = new Blob([arrayBuffer], {
|
|
|
type: mime
|
|
|
});
|
|
|
var file = new File([arrayBuffer], "recorder.wav");
|
|
|
//uni.uploadFile({file:file, ...}) //参考demo中的test_upload_saveFile.vue
|
|
|
// #endif
|
|
|
|
|
|
//如果是App、小程序环境，可以直接保存到本地文件，然后调用相关网络接口上传
|
|
|
// #ifdef APP || MP-WEIXIN
|
|
|
var audioChunks = new Int8Array(arrayBuffer);
|
|
|
|
|
|
uni.setStorageSync('test_file', audioChunks.join(','))
|
|
|
|
|
|
uni.setStorageSync('btn_form', 1)
|
|
|
uni.setStorageSync('robot_id', that.G.store().coziID)
|
|
|
uni.setStorageSync('isExecute',1)
|
|
|
uni.navigateTo({
|
|
|
url: '/root/chat/index?cid=&form=audiodata',
|
|
|
})
|
|
|
} else {}
|
|
|
// #endif
|
|
|
},
|
|
|
(msg) => {
|
|
|
console.error("结束录音失败：" + msg);
|
|
|
uni.hideLoading();
|
|
|
}
|
|
|
);
|
|
|
},
|
|
|
readAudioFileAsArrayBuffer(filePath) {
|
|
|
var that = this;
|
|
|
return new Promise((resolve, reject) => {
|
|
|
uni.getFileSystemManager().readFile({
|
|
|
filePath: filePath,
|
|
|
// encoding: 'binary',
|
|
|
responseType: "arraybuffer", // 指定响应类型为数组缓冲区
|
|
|
success: (res) => {
|
|
|
console.log("读取音频文件成功", res);
|
|
|
resolve(new Int8Array(res.data));
|
|
|
},
|
|
|
fail: (err) => {
|
|
|
console.error("读取文件失败", err);
|
|
|
reject(err);
|
|
|
},
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
|
|
|
keyboardheightchange(e) {
|
|
|
var that = this;
|
|
|
if (e.target.dataset.height == 0 && this.sendMsg == "") {
|
|
|
this.textareaHeight = 30;
|
|
|
}
|
|
|
if (this.isIosWxapp) {
|
|
|
if (e.detail.height == 0) {
|
|
|
this.writeStyle = `bottom:108px`
|
|
|
this.writeStyls = `bottom:136px`
|
|
|
this.writeStylt = `bottom:166px`
|
|
|
this.btnStyle = `bottom:186px`
|
|
|
this.topViewBottom = `bottom:0`
|
|
|
// this.wh = `calc(${uni.getSystemInfoSync().windowHeight}px - ${this.bottomHeight}px)`
|
|
|
// this.ghHeight = 'height:84px'
|
|
|
} else {
|
|
|
this.writeStyle = `bottom: calc(${e.detail.height}px - env(safe-area-inset-bottom) + 36px)`
|
|
|
this.writeStyls = `bottom: calc(${e.detail.height}px - env(safe-area-inset-bottom) + 64px)`
|
|
|
this.writeStylt = `bottom: calc(${e.detail.height}px - env(safe-area-inset-bottom) + 94px)`
|
|
|
this.btnStyle = `bottom: calc(${e.detail.height}px - env(safe-area-inset-bottom) + 114px)`
|
|
|
// this.ghHeight = `height:calc(84px + ${e.detail.height}px)`
|
|
|
this.topViewBottom = `bottom:300px`
|
|
|
}
|
|
|
that.scrollToBottom();
|
|
|
}
|
|
|
},
|
|
|
onInput(e) {
|
|
|
this.content = e.target.value;
|
|
|
},
|
|
|
onFocus() {
|
|
|
this.initialHeight = this.textareaHeight;
|
|
|
},
|
|
|
onBlur() {
|
|
|
this.updateTextareaHeight();
|
|
|
},
|
|
|
updateTextareaHeight() {},
|
|
|
linechange(e) {
|
|
|
console.log('获取行数变化：',e.detail)
|
|
|
let that = this;
|
|
|
that.isFocus = true;
|
|
|
setTimeout(()=>{
|
|
|
that.isFocus = true;
|
|
|
that.tah = e.detail.heightRpx / 2;
|
|
|
},100)
|
|
|
// if (e.detail.lineCount > 1) {
|
|
|
// this.hasTopPadding = true;
|
|
|
// } else {
|
|
|
// this.hasTopPadding = false;
|
|
|
// }
|
|
|
},
|
|
|
scrollToBottom() {
|
|
|
let that = this;
|
|
|
},
|
|
|
handleUpdateMsgType() {
|
|
|
let that = this;
|
|
|
this.sendMsg = '';
|
|
|
this.animate();
|
|
|
this.isFocus = false;
|
|
|
if (this.msgType == "text") {
|
|
|
this.msgType = "voice";
|
|
|
this.checkRecordingPermission();
|
|
|
} else {
|
|
|
this.msgType = "text";
|
|
|
}
|
|
|
that.writeStyle = `bottom:108px`
|
|
|
that.writeStyls = `bottom:136px`
|
|
|
that.writeStylt = `bottom:166px`
|
|
|
that.btnStyle = `bottom:186px`
|
|
|
that.topViewBottom = `bottom:0`
|
|
|
|
|
|
},
|
|
|
handleSendMsg() {
|
|
|
let that = this;
|
|
|
if (that.msgType == "voice") {
|
|
|
return false;
|
|
|
}
|
|
|
if (that.showLoad) {
|
|
|
uni.showToast({
|
|
|
icon: "none",
|
|
|
title: "正在匹配中，请稍候",
|
|
|
});
|
|
|
return false;
|
|
|
}
|
|
|
if (that.sendMsg == "") {
|
|
|
uni.showToast({
|
|
|
icon: "none",
|
|
|
title: "请输入内容",
|
|
|
});
|
|
|
return false;
|
|
|
}
|
|
|
that.animate();
|
|
|
that.sendAI();
|
|
|
that.writeStyle = `bottom:108px`
|
|
|
that.writeStyls = `bottom:136px`
|
|
|
that.writeStylt = `bottom:166px`
|
|
|
that.btnStyle = `bottom:186px`
|
|
|
that.topViewBottom = `bottom:0`
|
|
|
setTimeout(() => {
|
|
|
that.sendMsg = "";
|
|
|
that.updateTextareaHeight();
|
|
|
that.textareaHeight = 30;
|
|
|
}, 10);
|
|
|
setTimeout(() => {
|
|
|
that.textareaHeight = 30;
|
|
|
|
|
|
}, 80);
|
|
|
},
|
|
|
checkRecordingPermission() {
|
|
|
this.recReq();
|
|
|
},
|
|
|
onTouchMove(e) {
|
|
|
let that = this;
|
|
|
if (!that.isAuth) {
|
|
|
that.voiceStatus = -1;
|
|
|
return false;
|
|
|
}
|
|
|
const touch = e.touches[0];
|
|
|
let _x = touch.clientX,
|
|
|
_y = touch.clientY;
|
|
|
console.log('y 坐标：',_y,' 按妞：',that.writeStyle)
|
|
|
let _bool = that.writeStyle.split(':')[1].split('px')[0]
|
|
|
console.log('Y临界值：',uni.getSystemInfoSync().windowHeight - _bool - 72)
|
|
|
if (_y > uni.getSystemInfoSync().windowHeight - _bool - 72) {
|
|
|
that.voiceStatus = 0;
|
|
|
that.spec = true;
|
|
|
} else {
|
|
|
that.voiceStatus = 1;
|
|
|
that.spec = false;
|
|
|
}
|
|
|
},
|
|
|
onTouchStart() {
|
|
|
let that = this;
|
|
|
if (!that.isAuth) {
|
|
|
uni.showToast({
|
|
|
icon: "none",
|
|
|
title: "授权中，请稍候",
|
|
|
});
|
|
|
return false;
|
|
|
}
|
|
|
if (that.showLoad) {
|
|
|
uni.showToast({
|
|
|
icon: "none",
|
|
|
title: "正在匹配中，请稍候",
|
|
|
});
|
|
|
return false;
|
|
|
}
|
|
|
that.animate("heavy");
|
|
|
uni.removeStorageSync('asytip');
|
|
|
that.reconnectCount = 0;
|
|
|
that.voiceStatus = -2;
|
|
|
that.isStartRecord = false;
|
|
|
that.longPressTimer = setTimeout(() => {
|
|
|
that.isStartRecord = true;
|
|
|
that.spec = true;
|
|
|
that.startRecording();
|
|
|
}, that.longPressDelay);
|
|
|
},
|
|
|
onTouchEnd() {
|
|
|
let that = this;
|
|
|
if (!that.isAuth) {
|
|
|
that.voiceStatus = -1;
|
|
|
return false;
|
|
|
}
|
|
|
clearTimeout(that.longPressTimer);
|
|
|
if (that.isAuth) {
|
|
|
that.stopRecording();
|
|
|
} else {
|
|
|
uni.showToast({
|
|
|
icon: "none",
|
|
|
title: "授权中，请稍候",
|
|
|
});
|
|
|
return false;
|
|
|
}
|
|
|
},
|
|
|
startRecording() {
|
|
|
let that = this;
|
|
|
setTimeout(() => {
|
|
|
that.voiceStatus = 0; // 标记为正在录音
|
|
|
console.log("that.isFluency", that.isFluency);
|
|
|
if (!that.isFluency) {
|
|
|
that.isSending = false;
|
|
|
// 语音识别开始
|
|
|
that.recStart();
|
|
|
}
|
|
|
}, 100);
|
|
|
},
|
|
|
stopRecording() {
|
|
|
let that = this;
|
|
|
that.baseEnd();
|
|
|
setTimeout(
|
|
|
() => {
|
|
|
that.baseEnd();
|
|
|
},
|
|
|
that.isFluency ? 500 : 0
|
|
|
);
|
|
|
},
|
|
|
baseEnd() {
|
|
|
let that = this;
|
|
|
that.voiceStatus = -1;
|
|
|
if (that.isStartRecord) {
|
|
|
that.recStop();
|
|
|
} else {
|
|
|
uni.hideLoading();
|
|
|
}
|
|
|
that.isStartRecord = false;
|
|
|
that.$forceUpdate();
|
|
|
},
|
|
|
sendAudioAI($msg) {
|
|
|
let that = this;
|
|
|
if (that.isSending) {
|
|
|
console.log("正在发送消息，忽略重复发送请求");
|
|
|
return;
|
|
|
}
|
|
|
that.isSending = true;
|
|
|
setTimeout(() => {
|
|
|
that.voiceStatus = -1;
|
|
|
that.sendBaseData($msg, 'audio');
|
|
|
}, 10);
|
|
|
},
|
|
|
sendAI($form = "", $value = "") {
|
|
|
let that = this;
|
|
|
that.textareaHeight = 30;
|
|
|
that.sendBaseData(that.sendMsg, 'text');
|
|
|
},
|
|
|
sendBaseData($sendMessage = "", $type) {
|
|
|
let that = this;
|
|
|
if (!$sendMessage) {
|
|
|
console.log("防抖");
|
|
|
return false;
|
|
|
}
|
|
|
that.saveHistory(0, $sendMessage, () => {
|
|
|
uni.hideLoading();
|
|
|
uni.setStorageSync('ls-chat-text', $sendMessage)
|
|
|
$sendMessage = '';
|
|
|
uni.setStorageSync('robot_id', that.G.store().coziID)
|
|
|
uni.setStorageSync('isExecute',1)
|
|
|
uni.navigateTo({
|
|
|
url: '/root/chat/index?cid=&form=msgdata&stip=' + $type
|
|
|
})
|
|
|
});
|
|
|
},
|
|
|
saveHistory(robotTag = 0, $message = "", callabck = () => {}) {
|
|
|
let that = this,
|
|
|
_dou = $message;
|
|
|
if ($message) {
|
|
|
$message = '';
|
|
|
callabck();
|
|
|
}
|
|
|
},
|
|
|
animate($type = "heavy") {
|
|
|
uni.vibrateShort({
|
|
|
type: $type,
|
|
|
fail(err){
|
|
|
console.log('震动失败：',err)
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
clearMsg() {
|
|
|
this.sendMsg = "";
|
|
|
},
|
|
|
goHistory($form = '') {
|
|
|
let that = this;
|
|
|
uni.setStorageSync('robot_id', that.G.store().coziID)
|
|
|
uni.setStorageSync('isExecute',1)
|
|
|
uni.navigateTo({
|
|
|
url: "/root/chat/index?cid=&form=viwdata",
|
|
|
});
|
|
|
},
|
|
|
goChatDetail($item = '') {
|
|
|
let that = this;
|
|
|
uni.setStorageSync('robot_id', that.G.store().coziID)
|
|
|
let _title = $item.title;
|
|
|
if($item.title == '智能匹配'){
|
|
|
_title = '';
|
|
|
}
|
|
|
uni.setStorageSync('isExecute',1)
|
|
|
uni.navigateTo({
|
|
|
url: "/root/chat/index?cid=&form=viwdata&title=" + _title,
|
|
|
});
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
.routeItem {
|
|
|
margin-bottom: 12px;
|
|
|
|
|
|
.item {
|
|
|
border: 1px solid #eee;
|
|
|
padding: 4px 8px;
|
|
|
border-radius: 2px;
|
|
|
}
|
|
|
|
|
|
&:first-child {
|
|
|
margin-top: 12px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.g_page_ai {
|
|
|
.main-obj {
|
|
|
height: calc(calc(100vh - env(safe-area-inset-bottom)) - 50px);
|
|
|
height: calc(calc(100vh - constant(safe-area-inset-bottom)) - 50px);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.g_c_b {
|
|
|
color: #bbb;
|
|
|
}
|
|
|
|
|
|
|
|
|
.p-com-chat {
|
|
|
background-color: #fffff;
|
|
|
|
|
|
.g_bg_f0a {
|
|
|
background-color: #fe0000;
|
|
|
}
|
|
|
|
|
|
.chat-content {
|
|
|
width: calc(100% - 0px);
|
|
|
margin: 0 auto;
|
|
|
padding-bottom: 0px;
|
|
|
|
|
|
.chat-left {
|
|
|
padding: 0 10px;
|
|
|
|
|
|
.msg {
|
|
|
border-radius: 12px;
|
|
|
line-height: 1.5;
|
|
|
// letter-spacing: 1.5px;
|
|
|
word-break: break-all;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.chat-right {
|
|
|
padding: 0 10px;
|
|
|
|
|
|
.msg {
|
|
|
border-radius: 12px;
|
|
|
line-height: 1.5;
|
|
|
// letter-spacing: 1.5px;
|
|
|
word-break: break-all;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.chat-operate {
|
|
|
width: 100%;
|
|
|
|
|
|
.m-input {
|
|
|
width: calc(100% - 20px);
|
|
|
margin: 0 auto;
|
|
|
border-radius: 40px;
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.longpress-top-mask {
|
|
|
position: fixed;
|
|
|
left: 0;
|
|
|
width: 100vw;
|
|
|
z-index: 99;
|
|
|
}
|
|
|
|
|
|
@keyframes voi_animate {
|
|
|
0% {
|
|
|
height: 50%;
|
|
|
background-color: #ffffff;
|
|
|
}
|
|
|
|
|
|
20% {
|
|
|
height: 50%;
|
|
|
background-color: #ffffff;
|
|
|
}
|
|
|
|
|
|
50% {
|
|
|
height: 100%;
|
|
|
background-color: #ffffff;
|
|
|
}
|
|
|
|
|
|
80% {
|
|
|
height: 50%;
|
|
|
background-color: #ffffff;
|
|
|
}
|
|
|
|
|
|
100% {
|
|
|
height: 50%;
|
|
|
background-color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.column-voice {
|
|
|
width: 100%;
|
|
|
height: 22px;
|
|
|
overflow: hidden;
|
|
|
// max-width: calc(100% - 140px);
|
|
|
max-width: calc(100% - 140px);
|
|
|
margin: 0 auto;
|
|
|
|
|
|
.column-item {
|
|
|
width: 3px;
|
|
|
height: 100%;
|
|
|
margin-left: 6px;
|
|
|
border-radius: 10px;
|
|
|
background-color: #ffffff;
|
|
|
vertical-align: middle;
|
|
|
display: inline-block;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 容器样式 */
|
|
|
.loader {
|
|
|
display: flex;
|
|
|
// justify-content: center;
|
|
|
// align-items: center;
|
|
|
// height: 100vh; /* 使容器占据整个视口的高度 */
|
|
|
}
|
|
|
|
|
|
/* 单个点的样式 */
|
|
|
.dot {
|
|
|
width: 10px;
|
|
|
height: 10px;
|
|
|
margin: 0 2px;
|
|
|
border-radius: 50%;
|
|
|
background-color: #666;
|
|
|
animation: dotPulse 1s infinite ease-in-out;
|
|
|
}
|
|
|
|
|
|
/* 动画定义 */
|
|
|
@keyframes dotPulse {
|
|
|
|
|
|
0%,
|
|
|
80%,
|
|
|
100% {
|
|
|
transform: scale(0.9);
|
|
|
}
|
|
|
|
|
|
40% {
|
|
|
transform: scale(1.1);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* 第二个点的延时 */
|
|
|
.dot:nth-child(2) {
|
|
|
animation-delay: -0.33s;
|
|
|
}
|
|
|
|
|
|
/* 第三个点的延时 */
|
|
|
.dot:nth-child(3) {
|
|
|
animation-delay: -0.66s;
|
|
|
}
|
|
|
|
|
|
.container {
|
|
|
// position: relative;
|
|
|
// overflow-y: auto; /* 设置滚动条 */
|
|
|
// height: 100%; /* 设置容器高度 */
|
|
|
}
|
|
|
|
|
|
textarea {
|
|
|
resize: none;
|
|
|
/* 禁止手动调整大小 */
|
|
|
overflow: hidden;
|
|
|
/* 隐藏超出部分 */
|
|
|
width: 100%;
|
|
|
/* 设置宽度 */
|
|
|
}
|
|
|
|
|
|
.hasTopPadding {
|
|
|
padding-top: 8px !important;
|
|
|
box-sizing: content-box !important;
|
|
|
}
|
|
|
|
|
|
.biggerSize::after {
|
|
|
content: "";
|
|
|
/* display: inline-block; */
|
|
|
width: 60px;
|
|
|
height: 60px;
|
|
|
position: absolute;
|
|
|
left: 50%;
|
|
|
top: 50%;
|
|
|
z-index: 99;
|
|
|
transform: translate(-50%, -50%);
|
|
|
}
|
|
|
.bg_5_op5{
|
|
|
background-color: #ffffff;
|
|
|
}
|
|
|
.g_fs_32 {
|
|
|
font-size: 32px;
|
|
|
}
|
|
|
</style> |