|
|
<template>
|
|
|
<view class="jqr_dig_warp">
|
|
|
<uni-nav-bar dark statusBar :fixed="true" background-color="transparent" :border="false" left-icon="left"
|
|
|
title="智能客服" @clickLeft="back" />
|
|
|
|
|
|
<!-- -->
|
|
|
<scroll-view id="scrollview" class="jqr_dig_scroll" scroll-y="true" :style="{height:style.contentViewHeight+'px'}"
|
|
|
:scroll-with-animation="true" :scroll-top="scrollTop">
|
|
|
<view id="msgview" class="user-box" :class="item.typestyle" v-for="(item,index) in messages" :key="index">
|
|
|
<view class="quanbao">
|
|
|
<image :src="item.headurl" class="jqr_dig_pic"></image>
|
|
|
<view class="j_dig_time" v-if="item.type == 'jiqiren'">
|
|
|
<span>泉宝</span>
|
|
|
<span>{{ item.time }}</span>
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
<view class="dig_column ">
|
|
|
<view :class="item.contentstyle" >
|
|
|
<view class="janw_link" v-for="(items,index) in item.content" :key="index">
|
|
|
{{items.text}}
|
|
|
</view>
|
|
|
<navigator @tap="getSelectMsg(item.search,item.bcode,item.page+1)"
|
|
|
v-if="item.type == 'jiqiren' && item.content.length >= 7" class="dig_more">
|
|
|
查看更多
|
|
|
</navigator>
|
|
|
</view>
|
|
|
<view class="j_dig_time" v-if="item.type == 'user'">{{item.time}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- <view :class="item.typestyle" v-for="(item,index) in messages" :key="index" v-if="item.type == 'user'">
|
|
|
<view class="dig_column ">
|
|
|
<view class="jqr_box">
|
|
|
<view class="qus_txt">{{item.content}}</view>
|
|
|
</view>
|
|
|
<view class="j_dig_time">{{item.time}}</view>
|
|
|
</view>
|
|
|
|
|
|
</view> -->
|
|
|
</scroll-view>
|
|
|
<!-- 机器人底部工具 -->
|
|
|
<view class="jqr_tol">
|
|
|
<!-- 三个按钮 -->
|
|
|
<view class="dly_flex_c jqr_tol_box" v-if="threebut == true">
|
|
|
<view class="w_33 half" @tap="showText()">
|
|
|
<image src="/subPageB/static/img/jqr_jpan.png" class="jqr_tol_pic"></image>
|
|
|
</view>
|
|
|
|
|
|
|
|
|
<view class="w_33 half" @tap="goToIndex()">
|
|
|
<image src="/subPageB/static/img/jqr_home.png" class="jqr_tol_pic"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 键盘输入模式 -->
|
|
|
<view class="lazy_sch_mode" v-if="textbut == true">
|
|
|
<scroll-view class="lazy_sech" scroll-x="true" @scroll="scroll_lazy" scroll-left="0">
|
|
|
|
|
|
<text @tap="getMsg(item.title,item.baseinfo,1)" v-for="(item,index) in allConList" :key="index"
|
|
|
:item-id="index" :data-year="index">
|
|
|
{{item.title}}
|
|
|
</text>
|
|
|
|
|
|
</scroll-view>
|
|
|
|
|
|
<view class="dly_flex jpan_mode">
|
|
|
|
|
|
<view class="b_tol_ipt">
|
|
|
<input v-model="inputValue" type="text" focus placeholder="请输入"
|
|
|
placeholder-style="color:#999; font-size:24rpx" class="ipt_jqr" />
|
|
|
</view>
|
|
|
<view @tap="getMsg('','',1)" class="b_tol_box">
|
|
|
发送
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 语音模式 -->
|
|
|
<!-- <view class="yuyin_mode">
|
|
|
<view class="dly_flex_c jqr_tol_box">
|
|
|
|
|
|
<image src="/subPageB/static/img/jqr_yuy.png" class="jqr_tol_pic_l"></image>
|
|
|
|
|
|
</view>
|
|
|
</view> -->
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import uniNavBar from '@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue'
|
|
|
const recorderManager = uni.getRecorderManager();
|
|
|
const innerAudioContext = uni.createInnerAudioContext();
|
|
|
|
|
|
innerAudioContext.autoplay = true;
|
|
|
export default {
|
|
|
components:{
|
|
|
uniNavBar
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
threebut:true,
|
|
|
textbut:false,
|
|
|
allConList:[],
|
|
|
style:{
|
|
|
pageHeight: 0,
|
|
|
contentViewHeight: 0,
|
|
|
footViewHeight: 90,
|
|
|
mitemHeight: 0
|
|
|
},
|
|
|
scrollTop:0,
|
|
|
messages: [{
|
|
|
type:"jiqiren",
|
|
|
typestyle:"dly_flex left_dig m-item",
|
|
|
time: this.$util.getCurrentTime3(),
|
|
|
headurl:"/subPageB/static/img/jqr_jxw.png",
|
|
|
content:[{text:"您好，我是您的智能小助手"}],
|
|
|
contentstyle:"jqr_box_txt dig_gd"
|
|
|
}],
|
|
|
inputValue:"",
|
|
|
luyinstart:true,
|
|
|
voicePath:"",
|
|
|
max: 5000, // 录音最大时长，单位毫秒
|
|
|
frame: 50, // 执行绘画的频率，单位毫秒
|
|
|
longTag: false, // 判定长按和点击的标识
|
|
|
maxTiming: false, // 最长录音时间的定时器
|
|
|
draw: undefined,
|
|
|
seconds: '00',
|
|
|
ms: '00',
|
|
|
yuyintype:true
|
|
|
}
|
|
|
},
|
|
|
created: function () {
|
|
|
const res = uni.getSystemInfoSync();
|
|
|
this.style.pageHeight = res.windowHeight;
|
|
|
this.style.contentViewHeight = res.windowHeight - uni.getSystemInfoSync().screenWidth / 350 * (100); //像素
|
|
|
},
|
|
|
onLoad:function(){
|
|
|
this.getAllConlumn();
|
|
|
},
|
|
|
methods: {
|
|
|
back(){
|
|
|
uni.navigateBack({
|
|
|
delta:1,
|
|
|
})
|
|
|
},
|
|
|
showText:function(){
|
|
|
this.threebut = false;
|
|
|
this.textbut = true;
|
|
|
},
|
|
|
showThreeBut:function(){
|
|
|
this.threebut = true;
|
|
|
this.textbut = false;
|
|
|
},
|
|
|
goToIndex:function(){
|
|
|
uni.reLaunch({
|
|
|
url: "/pages/index/index"
|
|
|
})
|
|
|
},
|
|
|
getAllConlumn:function(){
|
|
|
var data = {
|
|
|
"pageno": "1",
|
|
|
"pagesize": "10",
|
|
|
}
|
|
|
this.$Request.post(this.$config.getAllConlumn, data).then(res => {
|
|
|
this.allConList = res.data;
|
|
|
})
|
|
|
},
|
|
|
getMsg:function(title,baseinfo,page){
|
|
|
if(title == ""){
|
|
|
title = this.inputValue;
|
|
|
if(this.inputValue.replace(/^\s+|\s+$/g, '') == ""){
|
|
|
return;
|
|
|
}
|
|
|
}
|
|
|
this.getSelectMsg(title,baseinfo,page);
|
|
|
this.messages.push({
|
|
|
type:"user",
|
|
|
typestyle:"dly_flex_c2 right_dig m-item me",
|
|
|
time: this.$util.getCurrentTime3(),
|
|
|
headurl:"",
|
|
|
content:[{text:title}],
|
|
|
contentstyle:"jqr_box"
|
|
|
})
|
|
|
this.scrollToBottom();
|
|
|
this.inputValue = "";
|
|
|
},
|
|
|
getSelectMsg:function(search,baseinfo,page){
|
|
|
var data = {}
|
|
|
if(baseinfo != ""){
|
|
|
data = {
|
|
|
"pageno": page,
|
|
|
"pagesize": "7",
|
|
|
"bcode":baseinfo,
|
|
|
"userkey": this.$param.userkey,
|
|
|
}
|
|
|
}else if(search != ""){
|
|
|
data = {
|
|
|
"pageno": page,
|
|
|
"pagesize": "7",
|
|
|
"search":search,
|
|
|
"userkey": this.$param.userkey,
|
|
|
}
|
|
|
}
|
|
|
this.$Request.post(this.$config.getAllDataByBcode, data).then(res => {
|
|
|
var content = [];
|
|
|
var data = res.data.data
|
|
|
for (var i = 0; i < data.length; i++) {
|
|
|
var item = {
|
|
|
'text':data[i].title,
|
|
|
'dataid':data[i].dataid,
|
|
|
'bcode':data[i].bcode,
|
|
|
'region':data[i].region,
|
|
|
}
|
|
|
content.push(item);
|
|
|
}
|
|
|
this.messages.push({
|
|
|
type:"jiqiren",
|
|
|
typestyle:"dly_flex left_dig m-item",
|
|
|
time: this.$util.getCurrentTime3(),
|
|
|
headurl:"/subPageB/static/img/jqr_jxw.png",
|
|
|
content:content,
|
|
|
page:page,
|
|
|
search:search,
|
|
|
bcode:baseinfo,
|
|
|
contentstyle:"jqr_box dig_gd"
|
|
|
})
|
|
|
this.scrollToBottom();
|
|
|
})
|
|
|
},
|
|
|
goToMsgDetail:function(items){
|
|
|
if(items.type == "user"){
|
|
|
return;
|
|
|
}
|
|
|
if(items.bcode == "3301"){
|
|
|
uni.navigateTo({
|
|
|
url: `/subPageA/scenic/scenicdetial/scenicdetial?guid=`+items.dataid
|
|
|
});
|
|
|
}
|
|
|
if(items.bcode == "3302"){
|
|
|
uni.navigateTo({
|
|
|
url: "/subPageA/food/fooddetial/fooddetial?fid=" + items.dataid + "&fareacode=" + items.region
|
|
|
})
|
|
|
}
|
|
|
if(items.bcode == "3303"){
|
|
|
uni.navigateTo({
|
|
|
url: "/subPageA/method/methoddetail/methoddetail?guid="+items.dataid
|
|
|
})
|
|
|
}
|
|
|
if(items.bcode == "3304"){
|
|
|
uni.navigateTo({
|
|
|
url: "/pagesA/travelroute/travelroutedetail/travelroutedetail?id="+items.dataid
|
|
|
})
|
|
|
}
|
|
|
if(items.bcode == "3305"){
|
|
|
uni.navigateTo({
|
|
|
url: "/subPageB/hotel/hoteldetail/hoteldetail?id="+items.dataid
|
|
|
})
|
|
|
}
|
|
|
|
|
|
},
|
|
|
/* start: function() {
|
|
|
this.longTag = setTimeout(this.recording, 500); // 定义超过500ms即为长按，可自行修改
|
|
|
},
|
|
|
move: function() {
|
|
|
clearTimeout(this.longTag);
|
|
|
clearTimeout(this.maxTiming);
|
|
|
clearInterval(this.draw);
|
|
|
this.longTag = false;
|
|
|
},
|
|
|
end: function() {
|
|
|
clearTimeout(this.longTag);
|
|
|
clearTimeout(this.maxTiming);
|
|
|
clearInterval(this.draw);
|
|
|
if (this.longTag) { // timeout不是false证明没有触发recording或者touchmove事件
|
|
|
console.log('按住时间少于500ms会执行这里并return');
|
|
|
return
|
|
|
}
|
|
|
this.longTag = false;
|
|
|
this.draw = false;
|
|
|
if(this.yuyintype){
|
|
|
this.stopRecord();
|
|
|
}
|
|
|
this.yuyintype = true;
|
|
|
}, */
|
|
|
recording: function() {
|
|
|
if(this.luyinstart){
|
|
|
uni.showLoading({
|
|
|
title: '录音中,再次点击结束录音'
|
|
|
});
|
|
|
this.startRecord();
|
|
|
this.luyinstart = false;
|
|
|
}else{
|
|
|
uni.hideLoading();
|
|
|
uni.showToast({
|
|
|
title: '结束录音',
|
|
|
duration: 2000
|
|
|
});
|
|
|
this.stopRecord();
|
|
|
this.luyinstart = true;
|
|
|
}
|
|
|
/* // 开始录音
|
|
|
this.longTag = false;
|
|
|
|
|
|
this.startRecord();
|
|
|
|
|
|
// 最大录音时间10秒
|
|
|
this.maxTiming = setTimeout(function() {
|
|
|
//clearInterval(this.draw);
|
|
|
self.stopRecord();
|
|
|
self.yuyintype = false;
|
|
|
// 语音转换
|
|
|
// self.send();
|
|
|
}, self.max); */
|
|
|
|
|
|
// 录音过程圆圈动画
|
|
|
/*let angle = -0.5;
|
|
|
let context = uni.createCanvasContext('canvas');
|
|
|
this.draw = setInterval(function() {
|
|
|
context.beginPath();
|
|
|
context.setStrokeStyle("#11C966");
|
|
|
context.setLineWidth(3);
|
|
|
context.arc(61,40, 35, -0.5 * Math.PI, (angle += 2 / (self.max / self.frame)) * Math.PI, false);
|
|
|
context.stroke();
|
|
|
context.draw();
|
|
|
}, self.frame); */
|
|
|
},
|
|
|
//开始录音
|
|
|
startRecord:function() {
|
|
|
let that = this;
|
|
|
that.$wechat.startRecord(
|
|
|
function(res){
|
|
|
console.log("开始录音")
|
|
|
},function(res){
|
|
|
})
|
|
|
},
|
|
|
//停止录音并识别文字
|
|
|
stopRecord:function(){
|
|
|
let that = this;
|
|
|
that.$wechat.stopRecord(
|
|
|
function(res){
|
|
|
var str = res.translateResult.replace(/[\ |\~|\`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\-|\_|\+|\=|\||\\|\[|\]|\{|\}|\;|\:|\"|\'|\,|\，|\.|\<|\。|\>|\/|\?]/g,"");
|
|
|
that.getMsg(str,'',1)
|
|
|
},function(res){
|
|
|
|
|
|
}
|
|
|
)
|
|
|
},
|
|
|
/**
|
|
|
* @author gongliying
|
|
|
* @date 2019-07-26
|
|
|
* @information 跳转页面底部
|
|
|
*/
|
|
|
scrollToBottom: function () {
|
|
|
let that = this;
|
|
|
let query = uni.createSelectorQuery();
|
|
|
query.selectAll('.m-item').boundingClientRect();
|
|
|
query.select('#scrollview').boundingClientRect();
|
|
|
query.exec((res) => {
|
|
|
that.style.mitemHeight = 0;
|
|
|
res[0].forEach((rect) => that.style.mitemHeight = that.style.mitemHeight + rect.height + 200) //获取所有内部子元素的高度
|
|
|
// 因为vue的虚拟DOM 每次生成的新消息都是之前的，所以采用异步setTimeout 主要就是添加了这定时器
|
|
|
setTimeout(() => {
|
|
|
|
|
|
if (that.style.mitemHeight > (that.style.contentViewHeight - 100)) { //判断子元素高度是否大于显示高度
|
|
|
that.scrollTop = that.style.mitemHeight - that.style.contentViewHeight //用子元素的高度减去显示的高度就获益获得序言滚动的高度
|
|
|
}
|
|
|
}, 100)
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
@import url("/static/css/common.css");
|
|
|
@import url("/pages/index/index.css");
|
|
|
|
|
|
.half{
|
|
|
width: 50%;
|
|
|
}
|
|
|
|
|
|
.jqr_dig_warp{
|
|
|
background-image: url('https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/jiqirenbg.png');
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: 100% auto;
|
|
|
}
|
|
|
|
|
|
.user-box{
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
|
|
|
.quanbao {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: start;
|
|
|
|
|
|
.j_dig_time{
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
padding: 0;
|
|
|
margin-left: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.dig_column{
|
|
|
margin-left: 50rpx;
|
|
|
margin-top: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.me{
|
|
|
align-items: flex-end;
|
|
|
}
|
|
|
|
|
|
.b_tol_ipt{
|
|
|
margin-left: 50rpx;
|
|
|
background: #F8F9FD;
|
|
|
border-radius: 44rpx;
|
|
|
|
|
|
.ipt_jqr{
|
|
|
border: none;
|
|
|
padding-left: 20rpx
|
|
|
}
|
|
|
}
|
|
|
.lazy_sech{
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
.jqr_tol{
|
|
|
height: fit-content;
|
|
|
padding:20rpx 0 50rpx 0 ;
|
|
|
}
|
|
|
.jpan_mode{
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-around;
|
|
|
|
|
|
.b_tol_box{
|
|
|
font-family: Source Han Sans SC;
|
|
|
font-weight: 500;
|
|
|
font-size: 30rpx;
|
|
|
color: #0983FF;
|
|
|
width: fit-content;
|
|
|
height: fit-content;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.jqr_dig_scroll{
|
|
|
padding-bottom: 300rpx;
|
|
|
}
|
|
|
|
|
|
.jqr_tol_box{
|
|
|
height: fit-content;
|
|
|
}
|
|
|
|
|
|
.jqr_box{
|
|
|
max-height: unset;
|
|
|
}
|
|
|
|
|
|
.dig_more{
|
|
|
bottom: 0;
|
|
|
}
|
|
|
.noPadding{
|
|
|
padding-bottom: 20rpx!important;
|
|
|
}
|
|
|
</style>
|
|
|
|
