提交

src/config/page.json

@@ -34,5 +34,8 @@
     },
     "chatGptChat":{
         "title": "chatgpt"
+    },
+    "chatGptChatNew":{
+        "title": "chatgpt"
     }
 }

src/view/chatGptChatNew/index.js

@@ -0,0 +1,30 @@
+import App from './index.vue';
+import '@/assets/js/common';
+import { createApp } from 'vue';
+import { getUser } from '@/utils/tool.js';
+import { getPageParameters, environment } from '../../config/pageConfig';
+// 判断环境
+environment();
+window.$originData = getPageParameters();
+document.title = window.$originData.orginParames.title || '';
+// 分享
+window.weixin_Share_Init(
+  window.$originData.orginParames.title,
+  '',
+  'https://cxzx.smcic.net/topic/qinshufa/assets/logp.png',
+  'https://cxzx.smcic.net/topic/activity/chatGptChat.html?' + Date.now()
+);
+window.appLoginSuccess = () => {
+  console.log('登录');
+  window.location.reload();
+};
+
+!window.$shanshipin || !window.$shanshipin.Phone
+  ? getUser(() => createApp(App).mount('#app'))
+  : createApp(App).mount('#app');
+
+window.setUserSession = () => {
+  console.log('登录');
+  getUser(() => createApp(App).mount('#app'));
+};
+

src/view/chatGptChatNew/index.vue

@@ -0,0 +1,236 @@
+<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>

src/view/chatGptChatNew/textShow.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="text" v-html="EleText"></div>
+</template>
+<script setup>
+import { defineProps, ref } from 'vue';
+
+const prop = defineProps({
+  text: String,
+});
+
+const li = prop.text.replace(/\n/g, '^').split('');
+let index = 0;
+const EleText = ref(li[0] || '');
+let t = window.setInterval(() => {
+  if (index++ >= li.length) return window.clearInterval(t);
+  if (li[index] === '^') EleText.value += '<br />';
+  else EleText.value += li[index] || '';
+}, 50);
+</script>
+<style lang="scss"></style>