123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172 |
- <template>
- <view id='app' :style="`bottom:${msgList.KeyBoardHeight}px;background-color:${styleData.color}`">
- <view class="placeholder" :style="`height: ${styleData.screenWidth}vh`"></view>
- <view class="head" :style="{backgroundColor:styleData.color}">
- <text :style="{color:styleData.fontColor}">睿宝AI</text>
- <view class="switch">
- <switch @change="styleChange(styleData)" />
- <switch class='second' @change="screenChange()" />
- </view>
- </view>
- <view class="pageView" :style="{backgroundColor:styleData.color}">
- <view class="sidebar-left"></view>
- <view class="body" :style="`height:${95-styleData.screenWidth}vh`">
- <view class="list-wrap">
- <scroll-view id="content-box" scroll-y="true" class="scrollview" :scroll-top="msgList.scrollTop">
- <!-- 聊天主体 -->
- <view id="content-overflow">
- <view class="scrollview-item" v-for="(item,index) in msgList.chatList" :key='index'>
- <!-- user方-聊天内容 -->
- <view class="item self" v-if="item.userContent != ''">
- <image class="avtar" src="../../static/user-avatar.png" mode="aspectFit"></image>
- <view class="content right" disabled
- :style="{backgroundColor:styleData.contentColor,color:styleData.fontColor}">
- {{ item.userContent }}
- </view>
- </view>
- <!-- ai方-聊天内容 -->
- <view class="item other">
- <view class="">
- <view class="loadingPoint" v-if='msgList.isloading[index]'>
- <loadingPointsVue></loadingPointsVue>
- </view>
- <view class="content left" v-if='!msgList.isloading[index]'
- :style="{backgroundColor:styleData.contentColor,color:styleData.fontColor}">
- {{ msgList.otherChatList[index] }}
- </view>
- </view>
- <image class="avtar" src="../../static/Ai-avatar.png" mode="aspectFit"></image>
- </view>
- </view>
- </view>
- </scroll-view>
- </view>
- <view class="chat-bottom">
- <view class="uni-label">
- <label v-for="(item,index) in labelList" :key="index" @click="shortcuts(msgList,item)"
- :style="{backgroundColor:styleData.labelColor,color:styleData.fontColor,borderColor:styleData.borderColor}">{{item}}</label>
- </view>
- <view class="send-msg">
- <view class="uni-textarea">
- <!-- bindkeyboardheightchange='getKeyBoardHeight' - 添加键盘弹起触发属性 -->
- <textarea id="input-textarea" type="text" v-model="msgList.chatMsg" placeholder="快来聊天吧"
- confirm-type="send" @confirm="handleSend(msgList)" maxlength="300"
- @keyboardheightchange="getKeyBoardHeight" :adjust-position="false"
- :style="`background-color:${styleData.labelColor};`" />
- </view>
- <view class="uni-button">
- <button class="send-btn" @click="handleSend(msgList)" type="primary"
- :disabled="msgList.isClick" :style="{backgroundColor:styleData.btnColor}">发送</button>
- </view>
- </view>
- </view>
- </view>
- <view class="sidebar-right" :style="`height:${95-styleData.screenWidth}vh`">
- <image v-if="msgList.demoVideo1" src="../../static/aLogo.png" mode="aspectFit" style="height: 400px;position: absolute;bottom: 0;" ></image>
- <video v-else class="video" :class="{active:styleData.value}" id="demoVideo" :controls="false" :loop='true' object-fit="cover"
- :enable-progress-gesture="false" :show-center-play-btn="false" :src="styleData.videoSrc" :autoplay='true' >
- </video>
- </view>
- </view>
- </view>
- </template>
- <script setup>
- import {
- nextTick,
- reactive,
- ref,
- watch
- } from 'vue';
- import {
- getDataList
- } from '../../api/ChatApp.js'
- import axios from 'axios';
- import loadingPointsVue from '../../components/loadingPoints.vue';
- import {
- styleChange,
- handleSend,
- scrollToBottom,
- shortcuts
- } from "../../until/fun.js"
- // const videlSrc = '../../static/video/whiteVideo.mp4'
- const msgList = reactive({
- // 输入框
- chatMsg: '',
- // 聊天数据列表
- chatList: [],
- // 滚动距离
- scrollTop: 0,
- //
- timer: '',
- textCount: '',
- otherContent: '',
- otherChatList: [],
- len: 0,
- isloading: [],
- isClick: false,
- // 键盘弹起高度
- KeyBoardHeight: 0,
- demoVideo: uni.createVideoContext('demoVideo'),
- demoVideo1:true
- })
- const styleData = reactive({
- value: false,
- color: '#fff',
- fontColor: "black",
- btnColor: "rgb(30,144,255)",
- contentColor: "#f5f5f5",
- labelColor: "#f5f5f5",
- borderColor: "rgb(30,144,255)",
- screenWidth: 40,
- isScreen: false,
-
- videoSrc : '../../static/video/whiteVideo.mp4'
- })
- const labelList = ref([
- "我要加油",
- "92号",
- "95号",
- "98号",
- "加油卡",
- "易捷加油"
- ])
- //滚动至聊天底部
- watch([msgList.otherChatList, msgList.chatList], (newVal) => {
- scrollToBottom(msgList)
- })
- // 屏幕 去除上屏
- const screenChange = () => {
- styleData.isScreen = !styleData.isScreen
- if (styleData.isScreen == true) {
- styleData.screenWidth = 0
- } else {
- styleData.screenWidth = 40
- }
- }
- // 键盘弹起事件
- const getKeyBoardHeight = ((event) => {
- // 获取键盘高度
- msgList.KeyBoardHeight = event.detail.height
- })
- </script>
- <style>
- @import url("../../theme/chat32.css");
- @import url("../../theme/public.css");
- .second {
- padding-left: 50rpx;
- }
- </style>
|