|
|
@@ -1,231 +0,0 @@
|
|
|
-<template>
|
|
|
- <div :class="{ chatGptChat: true, ortherP: !userData.UserId }" ref="chatEle">
|
|
|
- <div v-for="(item, index) in chat" :key="index">
|
|
|
- <div v-if="item.text && item.type === 'robot'" class="chat">
|
|
|
- <van-image width="35px" height="35px" fit="contain" :src="robot" />
|
|
|
- <div class="cahtText">
|
|
|
- <textShow :text="item.text" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div v-if="item.text && item.type === 'user'" class="chat chatRight">
|
|
|
- <van-image
|
|
|
- width="35px"
|
|
|
- height="35px"
|
|
|
- fit="contain"
|
|
|
- :src="userData.UserAvatar || user"
|
|
|
- />
|
|
|
- <div class="cahtText" v-text="item.text"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="loading" v-if="load">
|
|
|
- <div class="loadSun"></div>
|
|
|
- <div class="loadSun" style="animation-delay: 0.2s"></div>
|
|
|
- <div class="loadSun" style="animation-delay: 0.4s"></div>
|
|
|
- </div>
|
|
|
- <van-field
|
|
|
- v-model="inputText"
|
|
|
- rows="1"
|
|
|
- maxlength="200"
|
|
|
- autosize
|
|
|
- placeholder="请输入您的问题"
|
|
|
- type="textarea"
|
|
|
- @focus="focus"
|
|
|
- >
|
|
|
- <template #button>
|
|
|
- <van-button
|
|
|
- :loading="load"
|
|
|
- size="small"
|
|
|
- type="success"
|
|
|
- @click="saveText"
|
|
|
- >
|
|
|
- 发送
|
|
|
- </van-button>
|
|
|
- </template>
|
|
|
- </van-field>
|
|
|
- <shanshipin v-if="!userData.UserId" />
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-<script setup>
|
|
|
-import shanshipin from '../../components/shanshipin.vue';
|
|
|
-import robot from '../../assets/img/chat/robot_2.png';
|
|
|
-import user from '../../assets/img/chat/user.png';
|
|
|
-import { showToast } from 'vant';
|
|
|
-import { ref, nextTick } from 'vue';
|
|
|
-
|
|
|
-import textShow from './textShow.vue';
|
|
|
-
|
|
|
-import { ChartGpt } from '@/api/chatGpt';
|
|
|
-
|
|
|
-// import { onMounted, reactive } from "vue";
|
|
|
-import { isIpad, isIpod, isIphone } from '../../utils/isTerminal';
|
|
|
-/**
|
|
|
- * window.$originData.orginParames.title 页面标题
|
|
|
- * window.$originData.orginParames.parameters 固定参数值
|
|
|
- * window.$originData.urlParames url参数
|
|
|
- */
|
|
|
-console.log(window.$shanshipin);
|
|
|
-
|
|
|
-const userData = ref(window.$shanshipin || {});
|
|
|
-const chat = ref([]);
|
|
|
-const load = ref(false);
|
|
|
-const chatEle = ref(null);
|
|
|
-const inputText = ref('');
|
|
|
-
|
|
|
-if (!userData.value.UserId) {
|
|
|
- chat.value.push(
|
|
|
- ...[
|
|
|
- {
|
|
|
- text: '闪视频是什么？',
|
|
|
- type: 'user',
|
|
|
- },
|
|
|
- {
|
|
|
- text: '“闪视频”是全新打造的视听新媒体平台，专注于以视频形式传播陕西文化、讲好陕西故事，汇聚陕西省内党政机关、主流媒体、企事业单位内容资源，深度聚焦移动互联网时代的陕西省域文化建设，为全体关注陕西、热爱陕西的移动互联网用户提供了解陕西、展示自我的窗口和舞台，内容主要以视频内容为主。\n客服联系方式：\n联系电话：18502918086\n邮箱：service_ssp@163.com',
|
|
|
- type: 'robot',
|
|
|
- },
|
|
|
- ]
|
|
|
- );
|
|
|
-}
|
|
|
-
|
|
|
-function saveText() {
|
|
|
- if (!userData.value.UserId) return showToast('请下载闪视频进行完整体验');
|
|
|
- if (!inputText.value) return;
|
|
|
- load.value = true;
|
|
|
- nextTick(() => {
|
|
|
- // 滚动到最底层
|
|
|
- if (chatEle.value.scrollHeight > chatEle.value.clientHeight) {
|
|
|
- chatEle.value.scrollTop = chatEle.value.scrollHeight;
|
|
|
- }
|
|
|
- });
|
|
|
- let prompt = [];
|
|
|
- const startIndex = chat.value.length > 9 ? chat.value.length - 9 : 0;
|
|
|
- for (let i = startIndex; i < chat.value.length; i++) {
|
|
|
- prompt.push(chat.value[i]);
|
|
|
- }
|
|
|
- ChartGpt({
|
|
|
- prompt: [
|
|
|
- ...prompt,
|
|
|
- {
|
|
|
- text: inputText.value,
|
|
|
- type: 'user',
|
|
|
- },
|
|
|
- ],
|
|
|
- userId: userData.value.UserId || '',
|
|
|
- userName: userData.value.UserName || '',
|
|
|
- })
|
|
|
- .then(r => {
|
|
|
- load.value = false;
|
|
|
- chat.value.push({
|
|
|
- text: inputText.value,
|
|
|
- type: 'user',
|
|
|
- });
|
|
|
- inputText.value = '';
|
|
|
- chat.value.push({
|
|
|
- text: r.result || '',
|
|
|
- type: 'robot',
|
|
|
- });
|
|
|
- nextTick(() => {
|
|
|
- // 滚动到最底层
|
|
|
- if (chatEle.value.scrollHeight > chatEle.value.clientHeight) {
|
|
|
- chatEle.value.scrollTop = chatEle.value.scrollHeight;
|
|
|
- }
|
|
|
- });
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- load.value = false;
|
|
|
- });
|
|
|
-}
|
|
|
-function focus() {
|
|
|
- if (!isIpad && !isIpod && !isIphone) return;
|
|
|
- !inputText.value && (inputText.value = ' ');
|
|
|
-}
|
|
|
-</script>
|
|
|
-<style lang="scss">
|
|
|
-.chatGptChat {
|
|
|
- box-sizing: border-box;
|
|
|
- font-weight: 500;
|
|
|
- width: 100vw;
|
|
|
- height: 100vh;
|
|
|
- position: relative;
|
|
|
- padding-bottom: 55px;
|
|
|
- background: url('../../assets/img/chat/bg.png') no-repeat;
|
|
|
- background-size: 100% 10%;
|
|
|
- background-position: center center;
|
|
|
- overflow-y: auto;
|
|
|
- .van-field {
|
|
|
- background-color: #eee;
|
|
|
- position: fixed;
|
|
|
- padding-bottom: 1em;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- .van-field__control {
|
|
|
- background-color: #ffffff;
|
|
|
- padding: 0.4em;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .chat {
|
|
|
- padding: 1em 1.5em;
|
|
|
- width: 100%;
|
|
|
- background-color: #f4f4f680;
|
|
|
- .cahtText {
|
|
|
- text-align: left;
|
|
|
- line-height: 1.5em;
|
|
|
- border-radius: 5px;
|
|
|
- padding: 0.5em;
|
|
|
- display: inline-block;
|
|
|
- max-width: calc(100% - 40px);
|
|
|
- vertical-align: middle;
|
|
|
- }
|
|
|
- .van-image {
|
|
|
- vertical-align: top;
|
|
|
- }
|
|
|
-
|
|
|
- .cahtText:not(:last-child),
|
|
|
- .van-image:not(:last-child) {
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .chatRight {
|
|
|
- background: #ffffff80;
|
|
|
- }
|
|
|
-
|
|
|
- .loading {
|
|
|
- border-radius: 2em;
|
|
|
- background-color: #aaa;
|
|
|
- width: 3em;
|
|
|
- height: 1em;
|
|
|
- line-height: 1em;
|
|
|
- text-align: center;
|
|
|
- margin: 1em auto 0 auto;
|
|
|
-
|
|
|
- .loadSun {
|
|
|
- background-color: #ffffff;
|
|
|
- border-radius: 50%;
|
|
|
- width: 0.6em;
|
|
|
- height: 0.6em;
|
|
|
- display: inline-block;
|
|
|
- animation: 0.5s load infinite alternate;
|
|
|
- &:not(:last-child) {
|
|
|
- margin-right: 3px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.ortherP {
|
|
|
- padding-top: 70px;
|
|
|
- .shanshipin {
|
|
|
- top: 0;
|
|
|
- background-color: #eee;
|
|
|
- }
|
|
|
-}
|
|
|
-@keyframes load {
|
|
|
- from {
|
|
|
- background-color: #aaa;
|
|
|
- }
|
|
|
- to {
|
|
|
- background-color: #ffffff;
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
liyongli