activity/src/view/chatGptChatNew/index.vue

<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() {
  let t = window.setTimeout(() => {
    window.clearTimeout(t);
    if (chatEle.value.scrollHeight > chatEle.value.clientHeight) {
      chatEle.value.scrollTop = chatEle.value.scrollHeight;
    }
    document.getElementById("van-field-6-input") && document.getElementById("van-field-6-input").scrollIntoView();
    alert("---");
  }, 500);
}
</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>