对接API

pages/index/index.vue

@@ -5,12 +5,15 @@
     <view class="placeholder"></view>
     <view class="box-1" id="list-box" ref="box">
       <view class="talk-list">
+        <scroll-view :scroll-y="true" style="height: 100%;overflow: hidden;" :scroll-top="scrollTop"
+				:scroll-with-animation="true" @scrolltoupper="bindScroll">
         <view v-for="(item,index) in talkList" :key="index" :id="`msg-${item.id}`">
           <view class="item flex_col" :class=" item.type == 1 ? 'push':'pull' ">
             <image :src="item.pic" mode="aspectFill" class="pic"></image>
             <view v-if="talkList.length-1==index" class="content multiline-text">
               <!-- <rich-text :nodes="item.content"></rich-text> -->
-              <bing-math :key="`math-${item.id}`" class="bing-math" :latex="c_content"></bing-math>
+              <bing-math v-if="c_content!=''" :key="`math-${item.id}`" class="bing-math" :latex="c_content"></bing-math>
+              <view v-else class="blinking-box">|</view>
             </view>
             <view v-else class="content multiline-text">
               <!-- <rich-text :nodes="item.content"></rich-text> -->
@@ -18,9 +21,9 @@
             </view>
           </view>
         </view>
+        </scroll-view>
       </view>
     </view>
-    <!-- <view v-show="showplc" :style="{'min-height': (keyboardHeight+200)+'px'}" class="placeholder">显示</view> -->
     <view class="box-2">
       <view class="flex_col">
         <view class="flex_grow">
@@ -30,6 +33,7 @@
         <button class="send" @tap="send">发送</button>
       </view>
     </view>
+    <!-- <view v-show="showplc" :style="{'min-height': (keyboardHeight+200)+'px'}" class="placeholder">显示</view> -->
   </view>
 </template>
 
@@ -61,13 +65,11 @@
         c_content: '',
         n_content: '',
         timer: '',
-        TEXT: '你好，我的名字叫大',
+        socketTask: {},
-        APPID: '2eda6c2e', // 控制台获取填写
+        TEXT: '',
-        APIKey: '12ec1f9d113932575fc4b114a2f60ffd',
-        APISecret: 'MDEyMzE5YTc5YmQ5NjMwOTU1MWY4N2Y2',
-        sparkResult: '',
         historyTextList: [], // 历史会话信息，由于最大token12000,可以结合实际使用，进行移出
         tempRes: '', // 临时答复保存
+        scrollTop: 0
       }
     },
     mounted() {
@@ -80,9 +82,14 @@
         if(e.height==0)h *= -1;
         else h = e.height;
         uni.createSelectorQuery().selectViewport().scrollOffset(function(res) {
-          const scrollTop = res.scrollTop; // 页面滚动距离
+          let scrollTop = res.scrollTop; // 页面滚动距离
+          // let os = uni.getSystemInfoSync();
+          // // 可视窗口高度 = 设备可使用高度 - 状态栏高度 - 导航栏高度
+          // const viewportHeight = os.windowHeight - os.statusBarHeight - (os.platform == "android" ? 50 : 45)-10;
+          // if(scrollTop<viewportHeight)scrollTop=viewportHeight;
+          scrollTop+=h;
           uni.pageScrollTo({
-            scrollTop: scrollTop + h, // 当前位置向下滚动
+            scrollTop: scrollTop, // 当前位置向下滚动
             duration: 0 // 滚动过渡时间为300ms，默认值为300ms
           });
         }).exec();
@@ -112,15 +119,6 @@
               uni.pageScrollTo({
                 scrollTop: 999999,
               })
-              
-              // uni.createSelectorQuery()
-              //           .in(this)
-              //           .select('.box-1')
-              //           .boundingClientRect((rect) => {
-              //             const height = rect?.height;
-              //             console.log(height, rect);
-              //           })
-              //           .exec();
             })
           } else {
             clearInterval(this.timer);
@@ -151,7 +149,6 @@
           return; //
         }
 
-        // 此处用到 ES7 的 async/await 知识，为使代码更加优美。不懂的请自行学习。
         let get = async () => {
           this.hideLoadTips();
           this.ajax.flag = false;
@@ -197,7 +194,7 @@
         }
         get();
       },
-      // 拼接历史记录消息，正式项目可替换为请求历史记录接口
+      // 拼接历史记录消息
       joinHistoryMsg() {
         let join = () => {
           let arr = [];
@@ -269,6 +266,23 @@
           })
           return;
         }
+        try{
+          clearInterval(this.timer);
+          this.talkList[this.talkList.length-1].content = this.c_content+'';
+          this.c_content = '';
+          this.n_content = '';
+          this.socketTask.close({
+            success:(res)=> {
+              console.log('关闭成功', res);
+              this.wsLiveFlag = false;
+            },
+            fail(err) {
+              console.log('关闭失败', err)
+            }
+          })
+        }catch(e){
+          //TODO handle the exception
+        }
         // 将当前发送信息 添加到消息列表。
         let data = {
           "id": new Date().getTime(),
@@ -286,6 +300,7 @@
           "type": 2,
           "pic": "/static/avatar.png"
         });
+        // return ;
         this.$nextTick(() => {
           // 清空内容框中的内容
           this.content = '';
@@ -298,16 +313,15 @@
         
       },
       async sendToSpark() {
-        let myUrl = await this.getWebSocketUrl();
+        // let myUrl = await this.getWebSocketUrl();
         this.tempRes = "";
-        // this.sparkResult = "";
         let realThis = this;
         this.socketTask = uni.connectSocket({
           //url: encodeURI(encodeURI(myUrl).replace(/\+/g, '%2B')),
-          url: myUrl,
+          url: 'wss://chat.lihaink.cn/chat',
           method: 'GET',
           success: res => {
-            console.log(res, "ws成功连接...", myUrl)
+            console.log(res, "ws成功连接...")
             realThis.wsLiveFlag = true;
           }
         })
@@ -319,31 +333,27 @@
             "role": "user",
             "content": this.TEXT
           })
-          console.info("wss的onOpen成功执行...", res)
           // 第一帧..........................................
-          console.log('open成功...')
+          console.log('连接成功...')
-          let params = {
+          // let params = {
-            "header": {
+          //   "header": {
-              "app_id": this.APPID,
+          //     "app_id": this.APPID,
-              "uid": "aef9f963-7"
+          //     "uid": "aef9f963-7"
-            },
+          //   },
-            "parameter": {
+          //   "parameter": {
-              "chat": {
+          //     "chat": {
-                "domain": "generalv2",
+          //       "domain": "generalv2",
-                "temperature": 0.5,
+          //       "temperature": 0.5,
-                "max_tokens": 1024
+          //       "max_tokens": 1024
-              }
+          //     }
-            },
+          //   },
-            "payload": {
+          //   "payload": {
-              "message": {
+          //     "message": {
-                "text": this.historyTextList
+          //       "text": this.historyTextList
-              }
+          //     }
-            }
+          //   }
-          };
+          // };
-          console.log("请求的params：" + JSON.stringify(params))
+          let params = this.TEXT
-          this.sparkResult = this.sparkResult + "\r\n我：" + this.TEXT + "\r\n"
-          this.sparkResult = this.sparkResult + "大模型："
-          console.log("发送第一帧...", params)
           realThis.socketTask.send({ // 发送消息，，都用uni的官方版本
             data: JSON.stringify(params),
             success() {
@@ -359,12 +369,10 @@
           // console.log("我打印的"+obj.payload);
           let dataArray = obj.payload.choices.text;
           for (let i = 0; i < dataArray.length; i++) {
-            realThis.sparkResult = realThis.sparkResult + dataArray[i].content;
             this.talkList[this.talkList.length - 1].content += dataArray[i].content;
             this.n_content = this.talkList[this.talkList.length - 1].content;
             realThis.tempRes = realThis.tempRes + dataArray[i].content
           }
-          // realThis.sparkResult =realThis.sparkResult+ 
           let temp = JSON.parse(res.data)
           // console.log("0726",temp.header.code)
           if (temp.header.code !== 0) {
@@ -381,16 +389,10 @@
           }
           if (temp.header.code === 0) {
             if (res.data && temp.header.status === 2) {
-              realThis.sparkResult = realThis.sparkResult +
-                "\r\n**********************************************"
               this.historyTextList.push({
                 "role": "assistant",
                 "content": this.tempRes
               })
-              /* let dataArray= obj.payload.choices.text;
-              for(let i=0;i<dataArray.length;i++){
-              	realThis.sparkResult =realThis.sparkResult+ dataArray[i].content
-              } */
               setTimeout(() => {
                 realThis.socketTask.close({
                   success(res) {
@@ -428,6 +430,18 @@
           resolve(url);
         });
       },
+      // 滚动到头部
+      bindScroll() {
+      	if (this.userId == 0) {
+      		this.getHistory();
+      		this.getproductInfo();
+      		this.getOrderInfo();
+      		this.getRefundDetail();
+      		this.getStoreDetail();
+      	} else {
+      		this.getMerHistory();
+      	}
+      },
     }
   }
 </script>
@@ -439,6 +453,20 @@
     background-color: #f5f5f5;
     font-size: 28rpx;
   }
+  
+  @keyframes blink {
+    0% { opacity: 1; }
+    50% { opacity: 0; }
+    100% { opacity: 1; }
+  }
+  
+  .blinking-box {
+    background-color: #333;
+    color: #333;
+    animation: blink 1s infinite;
+    width: 2px;
+    overflow: hidden;
+  }
 
   .wrapper {
     height: auto !important;