activity/src/view/chatQh/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 { createSocket } from '@/utils/socket';
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 { isIpad, isIpod, isIphone } from '../../utils/isTerminal';

import textShow from './textShow.vue';

// 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('');
let chatlist = 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;
    }
  });

  chat.value.push({
    text: inputText.value,
    type: 'user',
  });
  chat.value.push({
    text: '',
    type: 'robot',
  });
  const idnex = chatlist.value.length === 0 ? 0 : chatlist.value.length - 1;
  const t = inputText.value;
  inputText.value = '';
  createSocket(
    ws => {
      const data = ws.data || {};
      let session_hash = Math.random().toString(36).substring(2);
      if (data.msg == 'send_hash')
        ws.ws.send(
          JSON.stringify({
            fn_index: idnex,
            session_hash,
          })
        );
      if (data.msg == 'send_data')
        ws.ws.send(
          JSON.stringify({
            fn_index: idnex,
            data: [t, chatlist.value, 2048, 0.7, 0.95, null],
            event_data: null,
            session_hash,
          })
        );
      if (data.msg == 'process_generating') {
        const li = data.output.data[0] || [];
        const olist = li[li.length - 1];
        chat.value[chat.value.length - 1].text = olist[1];
        nextTick(() => {
          // 滚动到最底层
          if (chatEle.value.scrollHeight > chatEle.value.clientHeight) {
            chatEle.value.scrollTop = chatEle.value.scrollHeight;
          }
        });
      }
      if (data.msg == 'process_completed') {
        chatlist.value = data.output.data[0] || [];
        load.value = false;
        nextTick(() => {
          // 滚动到最底层
          if (chatEle.value.scrollHeight > chatEle.value.clientHeight) {
            chatEle.value.scrollTop = chatEle.value.scrollHeight;
          }
        });
      }
    },
    () => {
      //   ERROR
      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;
  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>