17638755181/XiaoLingHou_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

初始化

Browse Source
This commit is contained in:
王明
2023-12-29 00:08:10 +08:00
commit 5ed0fc646f
512 changed files with 54378 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

282
pages/consult/consult.vue Normal file
View File

@@ -0,0 +1,282 @@
<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>