activity/src/view/chatGptChat/index.vue

<template>
  <div class="chatGptChat" 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" v-html="item.text">
        </div>
      </div>
      <div v-if="item.text && item.type === 'user'" class="chat chatRight">
        <div class="cahtText" v-text="item.text"></div>
        <van-image width="35px" height="35px" fit="contain" :src="user" />
      </div>
    </div> -->
    <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"
    >
      <template #button>
        <van-button
          :loading="load"
          size="small"
          type="success"
          @click="saveText"
        >
          发送
        </van-button>
      </template>
    </van-field>
  </div>
</template>
<script setup>
import robot from '../../assets/img/chat/robot_2.png';
import user from '../../assets/img/chat/user.png';
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('');
function saveText() {
  if (!inputText.value) return;
  chat.value.push({
    text: inputText.value,
    type: 'user',
  });
  load.value = true;
  nextTick(() => {
    // 滚动到最底层
    if (chatEle.value.scrollHeight > chatEle.value.clientHeight) {
      chatEle.value.scrollTop = chatEle.value.scrollHeight;
    }
  });
  inputText.value = '';
  let prompt = [];
  const startIndex = chat.value.length > 10 ? chat.value.length - 10 : 0;
  for (let i = startIndex; i < chat.value.length; i++) {
    prompt.push(chat.value[i]);
  }
  ChartGpt({
    prompt,
    userId: userData.value.UserId || '',
    userName: userData.value.UserName || '',
  })
    .then(r => {
      console.log(r);
      load.value = false;
      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;
    });
}
</script>
<style lang="scss">
.chatGptChat {
  box-sizing: border-box;
  font-weight: 500;
  width: 100vw;
  height: 100vh;
  position: relative;
  padding-bottom: 55px;
  background-color: #ffffff;
  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: #f4f4f6;
    .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: #ffffff;
  }

  .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;
      }
    }
  }
}
@keyframes load {
  from {
    background-color: #aaa;
  }
  to {
    background-color: #ffffff;
  }
}
</style>