282 lines
6.5 KiB
Vue
282 lines
6.5 KiB
Vue
<template>
|
||
<view class="uni-page ai-chat">
|
||
<u-navbar :left-icon="null" placeholder :autoBack="true" bgColor="#fff0e7" title="寄信助手"></u-navbar>
|
||
<view class="ai-chat-hint">
|
||
<view class="message-item-chat message-item">
|
||
<view class="message-item-avatar">
|
||
<image src="/static/03头像@2x.png" alt="" style="width: 100%;height: 100%;">>
|
||
</view>
|
||
<view class="message-item-content">
|
||
<view class="message-hint-temp-title">
|
||
Hi,我是你的寄信助手小艾
|
||
</view>
|
||
<view class="message-hint-temp-explain">
|
||
有什么问题可以直接问我...
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<scroll-view class="chat-messageList" :scroll-into-view="scrollView" :scroll-y="true">
|
||
<template v-for="(mess,index) in messageList">
|
||
<view v-if="mess.type==='user'" :id="'message-'+(index+1)" :key="index"
|
||
class="message-item-user message-item">
|
||
<view class="message-item-content" style="margin:0 10rpx 0 100rpx;">
|
||
{{mess.message}}
|
||
</view>
|
||
<view class="message-item-avatar">
|
||
<image :src="userInfo.avatar" alt="" style="width: 100%;height: 100%;">>
|
||
</view>
|
||
</view>
|
||
<view v-if="mess.type==='rebot'" :id="'message-'+(index+1)" :key="index"
|
||
class="message-item-chat message-item">
|
||
<view class="message-item-avatar">
|
||
<image src="/static/03头像@2x.png" alt="" style="width: 100%;height: 100%;">>
|
||
</view>
|
||
<view class="message-item-content" style="margin:0 100rpx 0 10rpx ;">
|
||
{{mess.message}}
|
||
</view>
|
||
</view>
|
||
<view v-if="mess.type==='rebootremplate'" :id="'message-'+(index+1)" :key="index"
|
||
class="message-item-chat-template message-item">
|
||
<view class="message-item-avatar">
|
||
<image src="/static/03头像@2x.png" alt="" style="width: 100%;height: 100%;">
|
||
</view>
|
||
<view class="message-item-content" style="margin:0 100rpx 0 10rpx ;">
|
||
<view class="template-title">
|
||
{{mess.title}}
|
||
</view>
|
||
<view class="template-item" v-for="(item,index) in baseRobotMessage.data" :key="index"
|
||
@click="sendQuestion(item)">
|
||
{{item.title}}？
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</scroll-view>
|
||
|
||
<!-- <view class="chat-floor">
|
||
<view class="floor-toolbar">
|
||
<view class="floor-toolbar-item">
|
||
发送照片
|
||
</view>
|
||
<view class="floor-toolbar-item">
|
||
发送订单
|
||
</view>
|
||
</view>
|
||
<u-input class="u-input" placeholder="输入您的问题..." v-model="mesText">
|
||
<view slot="suffix">
|
||
<u-button color="null" class="self-button" :customStyle="{height:'66rpx',border:'unset'}"
|
||
@tap="sendMessage(mesText)" type="success" size="mini">
|
||
<img style="width: 110rpx;height: 65rpx;" src="/static/25发送@2x.png" alt="发送">
|
||
</u-button>
|
||
</view>
|
||
</u-input>
|
||
</view> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getQuestionApi
|
||
} from '@/request/wm.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
baseRobotMessage: {
|
||
type: 'rebootremplate',
|
||
title: '您是否要咨询以下问题？',
|
||
data: ['我要如何寄信？', '不知道地址怎么寄信？？', '我要如何寄信？？', '我要如何寄信？', '不知道地址怎么寄信？', '我要如何寄信？']
|
||
},
|
||
messageList: [],
|
||
hintMessage: ['我要给狱中的朋友寄一封信...', '帮我给好朋友写封信...', '帮我写封信...', '我想给狱中的朋友写封信，有什么注意事项...'],
|
||
mesText: '',
|
||
userInfo: {},
|
||
scrollView: null
|
||
}
|
||
},
|
||
async onLoad() {
|
||
this.userInfo = this.$store.userInfo
|
||
let {
|
||
data
|
||
} = await getQuestionApi()
|
||
this.baseRobotMessage = data
|
||
console.log(data.data);
|
||
this.messageList.push({
|
||
data: this.baseRobotMessage,
|
||
type: 'rebootremplate',
|
||
title: '您是否要咨询以下问题？',
|
||
})
|
||
console.log(this.userInfo);
|
||
},
|
||
methods: {
|
||
sendQuestion(item) {
|
||
this.messageList.push({
|
||
type: 'user',
|
||
message: item.title
|
||
})
|
||
this.messageList.push({
|
||
type: 'rebot',
|
||
message: item.answer
|
||
})
|
||
this.$nextTick(() => {
|
||
setTimeout(()=>{
|
||
this.scrollView = 'message-' + this.messageList.length
|
||
})
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.uni-page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: radial-gradient(circle, #ffe3d6, #ffe8dd, #fff3ee);
|
||
|
||
.chat-messageList {
|
||
width: 100%;
|
||
min-height: 300rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
.ai-chat-hint {
|
||
.message-item {
|
||
.message-item-content {
|
||
padding: 12rpx;
|
||
background-color: transparent;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.ai-chat {
|
||
.message-item {
|
||
padding: 20rpx 0;
|
||
display: flex;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
|
||
.message-item-content {
|
||
flex: 1;
|
||
font-size: 30rpx;
|
||
color: #222222;
|
||
}
|
||
|
||
}
|
||
|
||
.message-item-avatar {
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
// border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
.hint-message-box {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.hint-message-item {
|
||
color: #333333;
|
||
width: fit-content;
|
||
border-radius: 40rpx;
|
||
margin-right: 30rpx;
|
||
margin-top: 20rpx;
|
||
background-color: rgba(255, 255, 255, 0.5);
|
||
padding: 22rpx 35rpx;
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
|
||
.message-item-content {
|
||
padding: 35rpx;
|
||
background-color: rgba(255, 255, 255, 0.5);
|
||
;
|
||
border-radius: 40rpx;
|
||
|
||
.message-hint-temp-title {
|
||
font-size: 32rpx;
|
||
// width: 387rpx;
|
||
// height: 42rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.message-hint-temp-explain {
|
||
// width: 340rpx;
|
||
// height: 40rpx;
|
||
color: #E08745;
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
|
||
.message-item-chat-template {
|
||
|
||
.message-item-content {
|
||
background-color: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
.chat-floor {
|
||
padding-bottom: 20rpx;
|
||
|
||
.floor-toolbar {
|
||
display: flex;
|
||
font-size: 26rpx;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.floor-toolbar-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 123rpx;
|
||
height: 52rpx;
|
||
background: #FFE7D9;
|
||
color: #FE9161;
|
||
margin-right: 30rpx;
|
||
}
|
||
|
||
::v-deep .u-input {
|
||
height: 102rpx;
|
||
border-radius: 20rpx !important;
|
||
padding: 0 0rpx 0 20rpx !important;
|
||
border: 3rpx solid #FE9161 !important;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.template-title {
|
||
font-size: 30rpx;
|
||
margin-bottom: 23rpx;
|
||
}
|
||
|
||
.template-item {
|
||
font-size: 26rpx;
|
||
padding: 23rpx 0;
|
||
font-weight: 700;
|
||
border-bottom: 1rpx solid #E2E2E2;
|
||
}
|
||
|
||
.self-button {
|
||
background-color: unset;
|
||
border: unset;
|
||
width: 120rpx;
|
||
height: 76rpx;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
</style> |