440 lines
17 KiB
Vue
440 lines
17 KiB
Vue
<template>
|
||
<view class="main">
|
||
<view class="mainTop" :style="{
|
||
height: loginType === 'min' ? menu.bottom + 6 + 'px' : menu.top + 50 + 'px',
|
||
paddingTop: loginType === 'min' ? menu.top - 6 + 'px' : menu.top + 'px',
|
||
backgroundSize: `100% 100vh`
|
||
}">
|
||
<view class="mainTopContent" :style="{ height: loginType === 'min' ? menu.height + 12 + 'px' : '' }">
|
||
<image class="backIcon" @click="handleBack"
|
||
src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg" />
|
||
<view class="robotBox">
|
||
<image class="robotImg" src="https://eshangtech.com/ShopICO/ahyd-BID/robot/robotIcon.png" />
|
||
<view class="robotDetail">
|
||
<span class="name">小驿</span>
|
||
<span class="desc">商业智能助理 </span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="dialogContentBox"
|
||
:style="{ paddingTop: loginType === 'min' ? menu.bottom + 12 + 'px' : menu.top + 60 + 'px' }">
|
||
<view :class="item.type === 1 ? 'item itemLeft' : 'item rightItem'" v-for="(item, index) in dialogueList"
|
||
:key="index" :style="{ marginTop: index !== 0 ? '30rpx' : '' }">
|
||
<view :id="'printBox' + index" :class="item.type === 1 ? `dialogItem white` : `dialogItem green`">
|
||
{{ item.text || "" }}
|
||
<!-- <view class="line" v-if="item.searchType === 'default'"></view> -->
|
||
<!-- <view class="defaultBox">
|
||
<view>你可能想问：</view>
|
||
</view> -->
|
||
<view class="defaultBox" v-if="item.searchType === 'default'">
|
||
<view class="defautItem" v-for="(item, index) in defaultQaList" :key="index"
|
||
@click="handleGetAnwers(item.value)">
|
||
{{ item.label || "" }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="loadingBox" v-if="isLoading"> 小驿分析中... </view>
|
||
</view>
|
||
|
||
<view class="inputBox" :style="{ minHeight: loginType === 'min' ? '180rpx' : '60px' }">
|
||
<!-- <image class="microphone" src="https://eshangtech.com/ShopICO/ahyd-BID/robot/microphone.png" /> -->
|
||
<div class="textBox">
|
||
<textarea class="searchText" auto-height :value="searchText" @input="handleInput" placeholder="有问题尽管问我～"
|
||
placeholder-class="placeholder-style" maxlength="-1" cursor-spacing="20" :adjust-position="true" />
|
||
</div>
|
||
|
||
<view class="searchBtn" @click="handleSubmit"> 发送 </view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
searchText: "",
|
||
dialogueList: [], // 对话list type 1 是居左 2 是居右 searchType default
|
||
printText: "",
|
||
isLoading: false, // 是否加载中
|
||
useInfo: {},
|
||
menu: {},
|
||
qaList: [
|
||
{
|
||
"request": "扫码充电功能",
|
||
"answers": "尊敬的客户您好！使用扫码充电功能时，请您先进入小程序端的扫码充电页面，系统会默认显示您附近服务区的充电桩信息。如需查询其他服务区，可以使用页面上方的搜索框。您也可以通过扫一扫功能扫描充电商二维码，直接跳转到对应小程序。目前APP端暂不支持小程序跳转功能，但可以查看充电桩信息。如有任何疑问，欢迎随时咨询。"
|
||
},
|
||
{
|
||
"request": "我要加油功能",
|
||
"answers": "亲爱的用户您好！感谢您使用我们的加油服务。在'我要加油'页面中，系统会自动定位并显示您附近服务区的最新油价信息。如果您需要查询其他服务区油价，只需在页面上方的搜索框输入相关信息即可。祝您旅途愉快！"
|
||
},
|
||
{
|
||
"request": "线上点餐功能",
|
||
"answers": "尊敬的顾客您好！欢迎使用我们的线上点餐服务。您可以在该页面浏览各服务区餐厅的美食，选择心仪的商品后进入对应门店下单。我们还特别提供预约点餐功能，让您提前安排好用餐时间。如有特殊需求，请随时联系我们的客服人员。"
|
||
},
|
||
{
|
||
"request": "出行导航功能",
|
||
"answers": "亲爱的用户您好！感谢您使用我们的出行导航服务。只需在页面输入您的目的地，系统就会为您智能规划最佳路线，并详细显示预计到达时间、路程距离和费用情况。同时还会标注沿途服务区位置，方便您做好行程规划。祝您一路顺风！"
|
||
},
|
||
{
|
||
"request": "道路救援功能",
|
||
"answers": "尊敬的客户您好！如在高速公路上遇到紧急情况，请您立即点击'道路救援'功能，我们的专业救援团队将第一时间响应。为了您的安全，请尽量将车辆移至应急车道，开启危险警示灯，并在车后方放置警示牌。我们的救援人员会以最快速度赶到现场。"
|
||
},
|
||
{
|
||
"request": "失物招领功能",
|
||
"answers": "亲爱的旅客您好！请您先点击进入'失物招领'功能页面。在该页面您可以：1.查询各服务区已登记的拾获物品信息；2.填写遗失物品登记表。我们的工作人员会在收到信息后第一时间协助查找，同时建议您同步联系当地服务区管理处(联系电话可在页面查询)。我们将全力帮您寻回失物！"
|
||
},
|
||
{
|
||
"request": "我要修车功能",
|
||
"answers": "尊敬的客户您好！请点击进入'我要修车'功能页面，您将看到：1.自动定位显示附近服务区维修点；2.详细门店信息(营业时间/联系电话/导航路线)；3.实时营业状态更新。遇到紧急情况时，页面还提供道路救援快捷入口。为保障您的行车安全，建议提前查询维修点信息哦！"
|
||
},
|
||
{
|
||
"request": "投诉建议功能",
|
||
"answers": "尊敬的客户您好！请您点击进入'投诉建议'页面，在这里您可以：1.选择问题类型(服务/设施/卫生等)；2.上传现场照片；3.填写详细情况描述。我们承诺在24小时内响应处理，重要问题将有专人跟进回访。您的意见对我们非常重要，感谢您的监督与支持！"
|
||
}
|
||
],
|
||
defaultQaList: [
|
||
{ label: "扫码充电功能说明", value: 0 },
|
||
{ label: "我要加油功能说明", value: 1 },
|
||
{ label: "线上点餐功能说明", value: 2 },
|
||
{ label: "出行导航功能说明", value: 3 },
|
||
{ label: "道路救援功能说明", value: 4 },
|
||
{ label: "失物招领功能说明", value: 5 },
|
||
{ label: "我要修车功能说明", value: 6 },
|
||
{ label: "投诉建议功能说明", value: 7 },
|
||
],
|
||
loginType: ""
|
||
};
|
||
},
|
||
onLoad() {
|
||
|
||
let systemInfo = uni.getSystemInfoSync();
|
||
let type = uni.getStorageSync("loginType");
|
||
this.loginType = type
|
||
if (this.loginType === 'min') {
|
||
this.menu = uni.getMenuButtonBoundingClientRect();
|
||
} else {
|
||
this.menu = systemInfo.safeArea;
|
||
}
|
||
console.log("menu", this.menu);
|
||
this.dialogueList.push({
|
||
text: `您好！欢迎咨询在线客服，请详细描述您的问题为您推荐一下常见问题，请点击选择：`,
|
||
type: 1,
|
||
searchType: "default",
|
||
});
|
||
// this.handlePrintText();
|
||
// this.printText = `您好！我是服务区商业智能助理小驿。<br>您想了解服务区哪些方面的信息？`
|
||
},
|
||
methods: {
|
||
handleGetAnwers(index) {
|
||
let list = this.dialogueList;
|
||
let text = this.qaList[index].request
|
||
list.push({ text: text, type: 2 });
|
||
this.searchText = "";
|
||
let _this = this
|
||
_this.isLoading = true
|
||
setTimeout(() => {
|
||
let data = this.qaList[index]
|
||
if (data) {
|
||
list.push({ text: data.answers, type: 1 });
|
||
_this.dialogueList = list;
|
||
} else {
|
||
list.push({ text: '小驿不太明白您的意思。', type: 1 });
|
||
_this.dialogueList = list;
|
||
}
|
||
_this.isLoading = false
|
||
_this.$forceUpdate();
|
||
}, 500)
|
||
},
|
||
handleBack() {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
});
|
||
},
|
||
handleInput(e) {
|
||
console.log('e', e);
|
||
this.searchText = e.detail.value
|
||
},
|
||
handleSubmit() {
|
||
console.log("this.searchText", this.searchText);
|
||
if (this.searchText) {
|
||
let list = this.dialogueList;
|
||
let text = this.searchText
|
||
list.push({ text: text, type: 2 });
|
||
this.searchText = "";
|
||
let _this = this
|
||
_this.isLoading = true
|
||
setTimeout(() => {
|
||
const data = _this.findClosestMatch(text)
|
||
if (data) {
|
||
list.push({ text: data.answers, type: 1 });
|
||
_this.dialogueList = list;
|
||
} else {
|
||
list.push({ text: '小驿不太明白您的意思。', type: 1 });
|
||
_this.dialogueList = list;
|
||
}
|
||
_this.isLoading = false
|
||
_this.$forceUpdate();
|
||
}, 500)
|
||
}
|
||
},
|
||
// 简单关键词匹配（评分方式）
|
||
findClosestMatch(input) {
|
||
if (!input) return null;
|
||
const keywords = input.split(/[\s，。？！、]/).filter(Boolean);
|
||
let maxScore = 0;
|
||
let bestMatch = null;
|
||
|
||
this.qaList.forEach(item => {
|
||
let score = 0;
|
||
keywords.forEach(kw => {
|
||
if (item.request.includes(kw)) {
|
||
score += 1;
|
||
}
|
||
});
|
||
if (score > maxScore) {
|
||
maxScore = score;
|
||
bestMatch = item;
|
||
}
|
||
});
|
||
console.log('bestMatch', bestMatch);
|
||
|
||
return bestMatch;
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.main {
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
// background: #f0f0f0;
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/robot/robotBackground.png");
|
||
background-repeat: no-repeat;
|
||
|
||
.mainTop {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/robot/robotBackground.png");
|
||
background-repeat: no-repeat;
|
||
|
||
.mainTopContent {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding-left: 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.backIcon {
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.robotBox {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.robotImg {
|
||
width: 68rpx;
|
||
height: 68rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.robotDetail {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.name {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #090c1a;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.desc {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #787879;
|
||
line-height: 36rpx;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.dialogContentBox {
|
||
width: 100%;
|
||
// height: calc(100vh - 90px);
|
||
min-height: calc(100vh - var(--nav-height) - 180rpx - env(safe-area-inset-bottom));
|
||
overflow-y: scroll;
|
||
box-sizing: border-box;
|
||
padding: 32rpx;
|
||
padding-bottom: calc(180rpx + env(safe-area-inset-bottom));
|
||
/* 增加底部内边距 */
|
||
/* 新增平滑滚动 */
|
||
scroll-behavior: smooth;
|
||
|
||
.item {
|
||
display: flex;
|
||
align-items: center;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #090c1a;
|
||
line-height: 44rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
|
||
.dialogItem {
|
||
max-width: calc(100vw - 64rpx);
|
||
display: block;
|
||
box-sizing: border-box;
|
||
// padding: 24rpx 32rpx;
|
||
padding: 16rpx 30rpx;
|
||
border-radius: 4px;
|
||
background: #ffffff;
|
||
border-radius: 0rpx 24rpx 24rpx 24rpx;
|
||
|
||
.line {
|
||
width: 100%;
|
||
height: 2rpx;
|
||
background: #f2f2f2;
|
||
border-radius: 16rpx;
|
||
margin: 24rpx 0;
|
||
}
|
||
|
||
.defaultBox {
|
||
.clickItem {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #2363ff;
|
||
line-height: 44rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.defautItem {
|
||
color: #009DFF;
|
||
padding: 8rpx 0;
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.white {
|
||
background: #fff;
|
||
color: #000;
|
||
border-radius: 20rpx 20rpx 20rpx 5rpx;
|
||
}
|
||
|
||
.green {
|
||
background: #009DFF;
|
||
color: #fff;
|
||
border-radius: 20rpx 20rpx 5rpx 20rpx;
|
||
}
|
||
}
|
||
|
||
.itemLeft {
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.rightItem {
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.loadingBox {
|
||
font-size: 12px;
|
||
color: #ccc;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
.inputBox {
|
||
width: 100%;
|
||
min-height: 180rpx;
|
||
background: #fff;
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 0;
|
||
box-sizing: border-box;
|
||
padding: 16rpx 32rpx;
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
display: flex;
|
||
align-items: flex-end;
|
||
/* 修改为底部对齐 */
|
||
border-top: 1rpx solid #f2f2f2;
|
||
|
||
.microphone {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.textBox {
|
||
width: calc(100% - 140rpx);
|
||
min-height: 88rpx;
|
||
max-height: 300rpx;
|
||
/* 设置最大高度 */
|
||
background: #f2f3f7;
|
||
border-radius: 44rpx;
|
||
padding: 16rpx 32rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.searchText {
|
||
width: 100%;
|
||
font-size: 28rpx;
|
||
line-height: 1.5;
|
||
max-height: 268rpx;
|
||
/* textBox高度减去padding */
|
||
overflow-y: auto;
|
||
/* 内容过多时可滚动 */
|
||
}
|
||
|
||
.placeholder-style {
|
||
color: #999;
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.searchBtn {
|
||
width: 128rpx;
|
||
height: 88rpx;
|
||
box-sizing: border-box;
|
||
color: #fff;
|
||
background: #009DFF;
|
||
border-radius: 44rpx;
|
||
margin-left: 16rpx;
|
||
font-family: "Microsoft YaHei";
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
}
|
||
</style>
|