|
|
@ -1,5 +1,9 @@ |
|
|
<template> |
|
|
<template> |
|
|
<view class="page1"> |
|
|
<view class="page1"> |
|
|
|
|
|
<view class="voice-model" v-if="recordState == true"> |
|
|
|
|
|
<img src="/static/images/maikefeng.png" alt=""> |
|
|
|
|
|
<view class="voice-text">语音识别中...</view> |
|
|
|
|
|
</view> |
|
|
<view class="top" ref="top"> |
|
|
<view class="top" ref="top"> |
|
|
<view @tap="backPage" style="width: 40px;height: 40px;position: absolute;top: 100rpx;left: 30rpx;"> |
|
|
<view @tap="backPage" style="width: 40px;height: 40px;position: absolute;top: 100rpx;left: 30rpx;"> |
|
|
<uni-icons type="left" color="#000" size="27"></uni-icons> |
|
|
<uni-icons type="left" color="#000" size="27"></uni-icons> |
|
|
@ -7,7 +11,35 @@ |
|
|
<view class="title">对话</view> |
|
|
<view class="title">对话</view> |
|
|
</view> |
|
|
</view> |
|
|
<view class="content" :style="{height:height - 165 +'px'}"> |
|
|
<view class="content" :style="{height:height - 165 +'px'}"> |
|
|
|
|
|
<view class="prompt"> |
|
|
|
|
|
<view class="prompt-title"> |
|
|
|
|
|
<view class="hello-right"></view> |
|
|
|
|
|
<view class="ai-bot"></view> |
|
|
|
|
|
<view class="hello-left"> |
|
|
|
|
|
<text style="font-size: 40rpx;font-weight: 800;line-height: 56rpx;color: #fff;">Hi</text> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="prompt-title-text"> |
|
|
|
|
|
<text>欢迎使用Ai助手,为了提高语音及文字识别准确率,建议您按照以下规则操作:</text> |
|
|
|
|
|
<text>1.每张图片建议您裁剪到20个规格或以下</text> |
|
|
|
|
|
<text>2.确保最后一款商品规格截取完整</text> |
|
|
|
|
|
<text>3.每张图片输入对应的规格数量</text> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="prompt" style="height: 80rpx;line-height: 80rpx;padding-left: 20rpx;"> |
|
|
|
|
|
<text>您当前选择的客户是:{{khName.name}}</text> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view style="width: 100%;height: 100rpx;text-align: center;font-size: 11px;color: #777;line-height: 100rpx;"> |
|
|
|
|
|
点击可编辑语音输入的内容~ |
|
|
|
|
|
</view> |
|
|
|
|
|
<view style="width: 70%;text-align: right;float: right;margin-right:20rpx;"> |
|
|
|
|
|
<view @tap="editTextBtn(item,index)" v-for="(item,index) in msgList" :key="index" style="display: inline-block;width: auto;height: auto;min-height: 80rpx;line-height: 80rpx;background: linear-gradient(127.96deg, #6585fa 0%, #6ad5fe 100%);color: #fff;padding:0 20rpx;border-radius: 10px;border-bottom-right-radius: 0;margin-bottom: 40rpx;"> |
|
|
|
|
|
{{item.text}} |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view @tap="addReg" style="width: 150rpx;position: absolute;bottom: 86px;z-index: 99;right: 10px;height: 60rpx;text-align: center;line-height: 60rpx;color: #fff;border-radius: 5px;background: linear-gradient(90deg, #FF9797, #FFC1E0);"> |
|
|
|
|
|
确认挂单 |
|
|
</view> |
|
|
</view> |
|
|
<view class="bottom"> |
|
|
<view class="bottom"> |
|
|
<view style="width:10%;height:90rpx;line-height:90rpx;margin-top:20rpx;text-align: center;"> |
|
|
<view style="width:10%;height:90rpx;line-height:90rpx;margin-top:20rpx;text-align: center;"> |
|
|
@ -15,36 +47,182 @@ |
|
|
<uni-icons v-if="!isVoice" @tap="switchChat(true)" type="mic" size="26"></uni-icons> |
|
|
<uni-icons v-if="!isVoice" @tap="switchChat(true)" type="mic" size="26"></uni-icons> |
|
|
</view> |
|
|
</view> |
|
|
<view style="width: 76%;height: 90rpx;line-height: 90rpx;text-align: center;background: #eee;margin-top: 10px;border-radius: 10px;font-size: 30rpx;color: #777;"> |
|
|
<view style="width: 76%;height: 90rpx;line-height: 90rpx;text-align: center;background: #eee;margin-top: 10px;border-radius: 10px;font-size: 30rpx;color: #777;"> |
|
|
<view v-if="isVoice"> |
|
|
<view v-if="isVoice" @touchstart="kaishi" @touchend="jieshu"> |
|
|
<text>按住 说话</text> |
|
|
<text>按住 说话</text> |
|
|
</view> |
|
|
</view> |
|
|
<view v-if="!isVoice" style="width: 100%;height: 90rpx;line-height: 90rpx;border-radius: 10px;text-align: left;padding-left: 20rpx;"> |
|
|
<view v-if="!isVoice" style="width: 100%;height: 90rpx;line-height: 90rpx;border-radius: 10px;text-align: left;padding-left: 20rpx;"> |
|
|
<input type="text" placeholder="请输入对话内容" style="height: 90rpx;"> |
|
|
<input type="text" v-model="editText" placeholder="请输入对话内容" style="height: 90rpx;"> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view v-if="!isVoice" @tap="inputSaveText" style="width:12%;background: linear-gradient(90deg, #60F3FF, #088FEB);height:70rpx;line-height:70rpx;text-align:center;margin:15px 0 0 1%;color:#fff;border-radius:5px;"> |
|
|
|
|
|
确定 |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
<!-- 弹出规格选择 --> |
|
|
|
|
|
<uni-popup ref="popup" background-color="#fff"> |
|
|
|
|
|
<view class="popup-content"> |
|
|
|
|
|
<view class="popup-title"> |
|
|
|
|
|
<text>修改当前内容</text> |
|
|
|
|
|
<uni-icons @tap='close' type="closeempty" color='red' size="16" |
|
|
|
|
|
style="height:40rpx;line-height: 40rpx;position: absolute !important;bottom:0;right: 30rpx;"></uni-icons> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="popup-container"> |
|
|
|
|
|
<textarea v-model="editText" style="padding: 20rpx;width:100%;border:1px solid #eee;"></textarea> |
|
|
|
|
|
<view class="popup-bottom"> |
|
|
|
|
|
<view @tap="saveText" style="width: 100%;height: 70rpx;line-height: 70rpx;text-align: center;border-radius: 0;background: linear-gradient(90deg, #60F3FF, #088FEB);color: #fff;"> |
|
|
|
|
|
确认无误 |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
<view v-if="!isVoice" style="width:12%;background: linear-gradient(90deg, #60F3FF, #088FEB);height:70rpx;line-height:70rpx;text-align:center;margin:15px 0 0 1%;color:#fff;border-radius:5px;">确定</view> |
|
|
</uni-popup> |
|
|
</view> |
|
|
|
|
|
</view> |
|
|
</view> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
|
|
|
var plugin = requirePlugin("WechatSI") |
|
|
|
|
|
let manager = plugin.getRecordRecognitionManager() |
|
|
export default { |
|
|
export default { |
|
|
components: {}, |
|
|
components: {}, |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
isVoice:true, |
|
|
isVoice:true, |
|
|
height:0 |
|
|
height:0, |
|
|
|
|
|
khName:{}, |
|
|
|
|
|
msgList:[], |
|
|
|
|
|
editText:'', |
|
|
|
|
|
index:'', |
|
|
|
|
|
recordState: false, |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
onShow() { |
|
|
onShow() { |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
onLoad() { |
|
|
onLoad(option) { |
|
|
this.height = wx.getSystemInfoSync().windowHeight |
|
|
this.height = wx.getSystemInfoSync().windowHeight |
|
|
|
|
|
|
|
|
|
|
|
this.khName = JSON.parse(option.khName) |
|
|
|
|
|
console.log(this.khName) |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
switchChat(type){ |
|
|
switchChat(type){ |
|
|
this.isVoice = type |
|
|
this.isVoice = type |
|
|
|
|
|
}, |
|
|
|
|
|
editTextBtn(item,index){ |
|
|
|
|
|
this.editText = item.text |
|
|
|
|
|
this.index = index |
|
|
|
|
|
this.$refs.popup.open() |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
|
saveText(){ |
|
|
|
|
|
this.msgList[this.index].text = this.editText |
|
|
|
|
|
this.$forceUpdate() |
|
|
|
|
|
this.editText = '' |
|
|
|
|
|
this.close() |
|
|
|
|
|
}, |
|
|
|
|
|
close(){ |
|
|
|
|
|
this.$refs.popup.close() |
|
|
|
|
|
}, |
|
|
|
|
|
inputSaveText(){ |
|
|
|
|
|
if(this.editText == ''){ |
|
|
|
|
|
return; |
|
|
|
|
|
} |
|
|
|
|
|
let data = { |
|
|
|
|
|
text:this.editText |
|
|
|
|
|
} |
|
|
|
|
|
this.msgList.push(data) |
|
|
|
|
|
this.editText = '' |
|
|
|
|
|
}, |
|
|
|
|
|
//按住语音识别,开始 |
|
|
|
|
|
kaishi() { |
|
|
|
|
|
this.recordState = true |
|
|
|
|
|
manager.start({ |
|
|
|
|
|
duration: 60000, |
|
|
|
|
|
lang: "zh_CN" |
|
|
|
|
|
}); |
|
|
|
|
|
}, |
|
|
|
|
|
//松开语音识别,结束 |
|
|
|
|
|
jieshu() { |
|
|
|
|
|
this.recordState = false |
|
|
|
|
|
manager.stop() |
|
|
|
|
|
}, |
|
|
|
|
|
//语音内容为空 |
|
|
|
|
|
showRecordEmptyTip() { |
|
|
|
|
|
uni.showToast({ |
|
|
|
|
|
title: "请重新说一遍", |
|
|
|
|
|
icon: 'error' |
|
|
|
|
|
}) |
|
|
|
|
|
}, |
|
|
|
|
|
//语音识别功能初始化 |
|
|
|
|
|
initRecord() { |
|
|
|
|
|
let that = this; |
|
|
|
|
|
manager.stop() |
|
|
|
|
|
// 识别结束事件 |
|
|
|
|
|
manager.onStop = (res) => { |
|
|
|
|
|
if (res.result == '') { |
|
|
|
|
|
that.showRecordEmptyTip() |
|
|
|
|
|
return |
|
|
|
|
|
} |
|
|
|
|
|
let data = { |
|
|
|
|
|
text:res.result |
|
|
|
|
|
} |
|
|
|
|
|
that.msgList.push(data) |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 识别错误事件 |
|
|
|
|
|
manager.onError = (res) => { |
|
|
|
|
|
if (res.retcode == '-40001') { |
|
|
|
|
|
uni.showToast({ |
|
|
|
|
|
title: '使用次数超限制,请联系管理员!', |
|
|
|
|
|
icon: 'none' |
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
addReg() { |
|
|
|
|
|
this.tui.request("/app/sale/saveOrder", "POST", { |
|
|
|
|
|
userId:this.khName.id, |
|
|
|
|
|
userName:this.khName.name, |
|
|
|
|
|
aiFlag:1, |
|
|
|
|
|
status: 7 |
|
|
|
|
|
}, false, false).then((res) => { |
|
|
|
|
|
if (res.code == 200) { |
|
|
|
|
|
this.goHangOrder(res.result.id) |
|
|
|
|
|
} else { |
|
|
|
|
|
this.tui.toast(res.message) |
|
|
|
|
|
} |
|
|
|
|
|
}).catch((res) => { |
|
|
|
|
|
this.tui.toast(res) |
|
|
|
|
|
}) |
|
|
|
|
|
}, |
|
|
|
|
|
goHangOrder(saleId){ |
|
|
|
|
|
let text = ' ' |
|
|
|
|
|
for(let i=0;i<this.msgList.length;i++){ |
|
|
|
|
|
this.msgList[i].text |
|
|
|
|
|
text += this.msgList[i].text + '\n' |
|
|
|
|
|
} |
|
|
|
|
|
console.log(text) |
|
|
|
|
|
this.tui.request("/app/sale/buyAiSync", "POST", { |
|
|
|
|
|
aiMsg:text, |
|
|
|
|
|
saleId:saleId, |
|
|
|
|
|
}, false, true).then((res) => { |
|
|
|
|
|
if(res.code == 200){ |
|
|
|
|
|
uni.navigateBack({ |
|
|
|
|
|
delta: 1 |
|
|
|
|
|
}) |
|
|
|
|
|
// uni.navigateTo({ |
|
|
|
|
|
// url: '/package1/AI/addHangOrder' |
|
|
|
|
|
// }) |
|
|
|
|
|
} |
|
|
|
|
|
}).catch((res) => { |
|
|
|
|
|
this.tui.toast(res) |
|
|
|
|
|
}) |
|
|
|
|
|
}, |
|
|
|
|
|
backPage(){ |
|
|
|
|
|
uni.navigateBack({ |
|
|
|
|
|
delta: 1 |
|
|
|
|
|
}) |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
@ -82,5 +260,110 @@ |
|
|
height: 150rpx; |
|
|
height: 150rpx; |
|
|
display: flex; |
|
|
display: flex; |
|
|
background: #fff; |
|
|
background: #fff; |
|
|
|
|
|
} |
|
|
|
|
|
.prompt { |
|
|
|
|
|
background: #fff; |
|
|
|
|
|
width: 70%; |
|
|
|
|
|
height: auto; |
|
|
|
|
|
border-radius: 10px; |
|
|
|
|
|
display: block; |
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
border-bottom-left-radius: 0; |
|
|
|
|
|
margin: 20rpx 0 0 20rpx; |
|
|
|
|
|
padding-bottom: 20rpx; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.prompt-title { |
|
|
|
|
|
position: relative; |
|
|
|
|
|
width: 300rpx; |
|
|
|
|
|
margin: 40rpx 40rpx 20rpx 40rpx; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.prompt-title-text { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: column; |
|
|
|
|
|
color: #777; |
|
|
|
|
|
font-size: 26rpx; |
|
|
|
|
|
width: 90%; |
|
|
|
|
|
margin: 0 auto; |
|
|
|
|
|
line-height: 40rpx; |
|
|
|
|
|
} |
|
|
|
|
|
.ai-bot { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
top: -8rpx; |
|
|
|
|
|
left: 10rpx; |
|
|
|
|
|
width: 70rpx; |
|
|
|
|
|
height: 60rpx; |
|
|
|
|
|
background-size: 100% !important; |
|
|
|
|
|
background: url(https://jewel-shop.oss-cn-beijing.aliyuncs.com/66dc640d9e8f4749a234d9ef2af1b257.png) no-repeat; |
|
|
|
|
|
} |
|
|
|
|
|
.hello-right { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
left: 5px; |
|
|
|
|
|
bottom: 0rpx; |
|
|
|
|
|
width: 120rpx; |
|
|
|
|
|
height: 2px; |
|
|
|
|
|
opacity: 1; |
|
|
|
|
|
background: linear-gradient(180deg, #6585fa 0%, #6ad5fe 100%); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.hello-left { |
|
|
|
|
|
width: 102rpx; |
|
|
|
|
|
height: 56rpx; |
|
|
|
|
|
opacity: 1; |
|
|
|
|
|
margin-left: 100rpx; |
|
|
|
|
|
background: linear-gradient(127.96deg, #6585fa 0%, #6ad5fe 100%); |
|
|
|
|
|
border-radius: 3px; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
-webkit-transform: skewX(8deg); |
|
|
|
|
|
transform: skewX(-6deg); |
|
|
|
|
|
} |
|
|
|
|
|
.popup-content { |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
padding: 15px; |
|
|
|
|
|
width: 500rpx; |
|
|
|
|
|
height: 550rpx; |
|
|
|
|
|
background-color: #fff; |
|
|
|
|
|
} |
|
|
|
|
|
.voice-model { |
|
|
|
|
|
width: 300rpx; |
|
|
|
|
|
height: 300rpx; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
flex-flow: column; |
|
|
|
|
|
position: fixed; |
|
|
|
|
|
left: 50%; |
|
|
|
|
|
top: 45%; |
|
|
|
|
|
background: rgba(0, 0, 0, 0.5); |
|
|
|
|
|
border-radius: 20rpx; |
|
|
|
|
|
color: #fff; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
margin-left: -150rpx; |
|
|
|
|
|
z-index: 99; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.voice-model img { |
|
|
|
|
|
width: 200rpx; |
|
|
|
|
|
height: 200rpx; |
|
|
|
|
|
margin: 0 auto; |
|
|
|
|
|
} |
|
|
|
|
|
.popup-title { |
|
|
|
|
|
font-size: 36rpx; |
|
|
|
|
|
font-weight: bold; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
position: relative; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.popup-container { |
|
|
|
|
|
margin-top: 20rpx; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.popup-bottom { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
height: 80rpx; |
|
|
|
|
|
color: #fff; |
|
|
|
|
|
line-height: 80rpx; |
|
|
|
|
|
margin-top: 50rpx; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |