feat: update

src/apis/base.ts

@@ -1,3 +1,4 @@
 import { createGet } from "@/utils/api";
 
 export const textToImage = createGet("/txt_to_img");
+export const getChat = createGet("/chat");

src/pages.json

@@ -17,6 +17,16 @@
         "backgroundColor": "#e9fff9"
         // "enablePullDownRefresh": true
       }
+    },
+    {
+      "path": "pages/image/index",
+      "aliasPath": "/",
+      "style": {
+        "navigationBarTitleText": "生成图片",
+        // "navigationStyle": "custom",
+        "backgroundColor": "#e9fff9"
+        // "enablePullDownRefresh": true
+      }
     }
   ],
   "globalStyle": {
@@ -26,20 +36,26 @@
     "backgroundColor": "#FFFFFF"
   },
   // #ifdef MP-WEIXIN
-  // "tabBar": {
-  //   "color": "#999999",
-  //   "selectedColor": "#FF6600",
-  //   "backgroundColor": "#FFFFFF",
-  //   "borderStyle": "white",
-  //   "list": [
-  //     {
-  //       "pagePath": "pages/index/index",
-  //       "text": "首页",
-  //       "iconPath": "static/images/tabs/tab-home.png",
-  //       "selectedIconPath": "static/images/tabs/tab-home-selected.png"
-  //     }
-  //   ]
-  // },
+  "tabBar": {
+    "color": "#999999",
+    "selectedColor": "#FF6600",
+    "backgroundColor": "#FFFFFF",
+    "borderStyle": "white",
+    "list": [
+      {
+        "pagePath": "pages/index/index",
+        "text": "首页",
+        "iconPath": "static/images/tabs/tab-home.png",
+        "selectedIconPath": "static/images/tabs/tab-home-selected.png"
+      },
+      {
+        "pagePath": "pages/image/index",
+        "text": "图片",
+        "iconPath": "static/images/tabs/tab-home.png",
+        "selectedIconPath": "static/images/tabs/tab-home-selected.png"
+      }
+    ]
+  },
   // #endif
   "condition": {
     "list": [

src/pages/image/index.scss

@@ -0,0 +1,129 @@
+.pages_height {
+  width: 100%;
+  color: #191919;
+  background: #f0f0f0;
+  font-family: PingFangSC-Regular, PingFang SC;
+}
+
+.intelligent_main {
+  height: 100vh;
+}
+
+.intelligent_chat {
+  height: 90vh;
+  padding: 0 30rpx;
+  box-sizing: border-box;
+}
+
+/* 取消滚动条 */
+.intelligent_chat ::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  color: transparent;
+  display: none;
+}
+
+/* 最上边两句话 */
+.intelligent_chat_view0 {
+  padding-top: 30rpx;
+}
+
+.intelligent_chat > view {
+  width: 100%;
+  background-color: red;
+}
+
+.intelligent_chat > view > view {
+  width: 100%;
+}
+
+.robot_word {
+  color: #191919;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.patient_word {
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.patient_word > view,
+.robot_word > view {
+  max-width: 600rpx;
+  margin-bottom: 20rpx;
+  line-height: 42rpx;
+  font-size: 30rpx;
+  padding: 15rpx 20rpx;
+  box-sizing: border-box;
+  white-space: pre-wrap;
+}
+
+/* 患者问题 */
+.patient_word > view {
+  background: #f07828;
+  border-radius: 15rpx 0 15rpx 15rpx;
+}
+
+/* 机器人回答 */
+.robot_word > view {
+  background: #ffffff;
+  border-radius: 0 15rpx 15rpx 15rpx;
+}
+
+.keyHighlight {
+  font-size: 30rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  line-height: 42rpx;
+  margin-top: 10rpx;
+}
+
+/* 输入框 */
+.intelligent_input {
+  width: 100%;
+  height: 100rpx;
+  min-height: 98rpx;
+  background: #f7f7f7;
+  position: fixed;
+  bottom: 0px;
+  display: flex;
+  box-sizing: content-box;
+  // padding-bottom: constant(safe-area-inset-bottom);
+  // padding-bottom: env(safe-area-inset-bottom);
+}
+
+.intelligent_input > input {
+  width: 80%;
+  background: #fff;
+  margin: 15rpx 30rpx;
+  padding: 13rpx 20rpx;
+  box-sizing: border-box;
+  height: 70%;
+  min-height: 68rpx;
+  border-radius: 10rpx;
+}
+
+.intelligent_input > input::placeholder {
+  font-size: 30rpx;
+  color: #c8c8c8;
+}
+
+.input_send {
+  margin-right: 20rpx;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.input_send > image {
+  width: 42rpx;
+  height: 42rpx;
+  padding: 10rpx;
+}
+.img-msg {
+  max-width: 100%;
+}

src/pages/image/index.vue

@@ -0,0 +1,206 @@
+<template>
+  <view class="pages_height">
+    <view class="intelligent_main">
+      <scroll-view
+        :scroll-y="true"
+        :style="{ height: key_height }"
+        :scroll-into-view="controlId ? bottomId : 'msg' + controlId"
+        :scroll-with-animation="true"
+        class="intelligent_chat"
+        @click="other_click"
+        @dragging="other_click"
+        :show-scrollbar="false"
+      >
+        <view
+          v-for="(item, index) in msg_list"
+          :key="index"
+          :class="'intelligent_chat_view' + index"
+        >
+          <view :class="item.left ? 'robot_word' : 'patient_word'">
+            <view v-if="item.type === 'img' && item.data">
+              <view>
+                <image :src="item.data.url" class="img-msg" mode="widthFix" />
+              </view>
+            </view>
+            <view v-if="item.msg">
+              <view>
+                {{ item.msg }}
+              </view>
+            </view>
+          </view>
+        </view>
+        <view :id="'dade' + num" v-if="controlId"></view>
+        <view :id="'msg' + controlId" v-else></view>
+      </scroll-view>
+
+      <view class="intelligent_input" :style="{ bottom: bottom }">
+        <input
+          type="text"
+          placeholder-style="font-size: 30rpx;color: #C8C8C8;"
+          placeholder="请输入…"
+          :adjust-position="false"
+          v-model="value"
+          @confirm.prevent="input_send"
+          :focus="fouse"
+          :hold-keyboard="hold_keyboard"
+          :confirm-hold="hold_keyboard"
+          @focus="i_focus"
+          @blur="blur"
+          confirm-type="发送"
+        />
+        <view class="input_send" @touchend.prevent="input_send">
+          <image
+            src="https://yiben01.oss-cn-hangzhou.aliyuncs.com/img/921c55e21e95bf68a5d32f4aeab37bc64d2317d0_100.png"
+            mode=""
+          ></image>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+import { Component } from "vue-property-decorator";
+import AccountMixin from "@/mixins/account";
+import { textToImage } from "@/apis/base";
+
+@Component({})
+export default class HomeView extends AccountMixin {
+  value = "";
+  // 输入框距底部高度（键盘显示隐藏高度变化）
+  bottom = "0px";
+  // 对话框数组
+  msg_list: {
+    left: boolean;
+    msg: string;
+    type?: "text" | "img";
+    data?: { url: string };
+  }[] = [];
+  // 容器高度
+  key_height = "0px";
+  // 容器滚动底部定位id
+  bottomId = "";
+  // 数组长度，用到定位id
+  num = 2;
+  // 输入框聚焦
+  fouse = false;
+  // 键盘不收起
+  hold_keyboard = true;
+  // 防抖
+  boolen = true;
+  // 定位id
+  controlId = false;
+  inputHeight = 0;
+
+  onShow() {
+    this.keyboardHeightChange();
+    this.compute_input_height();
+    const res_s = uni.getSystemInfoSync();
+    this.key_height = `${res_s.windowHeight - this.inputHeight}px`;
+  }
+
+  onUnload() {
+    uni.offKeyboardHeightChange(); //取消监听键盘高度变化事件，避免内存消耗
+  }
+
+  compute_input_height() {
+    const query = uni.createSelectorQuery().in(this); //这样写就只会选择本页面组件的类名box的
+    query
+      .selectAll(".intelligent_input")
+      .boundingClientRect((data) => {
+        // eslint-disable-next-line no-undef
+        this.inputHeight = (data as UniApp.NodeInfo[])[0].height || 0;
+      })
+      .exec();
+  }
+  // 点击键盘以外的地方收起键盘
+  other_click() {
+    uni.hideKeyboard();
+  }
+  // 监听键盘高度事件
+  keyboardHeightChange() {
+    uni.onKeyboardHeightChange((res) => {
+      //监听键盘高度变化
+      const res_keyboard = uni.getSystemInfoSync();
+      const key_height =
+        res.height -
+        (res_keyboard.screenHeight -
+          res_keyboard.windowHeight +
+          (res_keyboard.safeAreaInsets?.bottom || 0));
+      this.bottom = `${res.height ? key_height : 0}px`;
+
+      this.compute_input_height();
+
+      if (res.height) {
+        this.key_height = `${
+          res_keyboard.windowHeight - this.inputHeight - key_height
+        }px`;
+      } else {
+        this.key_height = `${res_keyboard.windowHeight - this.inputHeight}px`;
+      }
+
+      this.num = this.msg_list.length;
+      this.bottomId = "dade" + this.num;
+    });
+  }
+  // 输入框聚焦事件
+  i_focus() {
+    this.fouse = true;
+    this.hold_keyboard = true;
+    // 换id
+    this.controlId = true;
+  }
+  blur() {
+    // 换id
+    this.controlId = false;
+  }
+  // input发送事件
+  async input_send() {
+    if (!this.value.toString()) {
+      return;
+    }
+    let timer;
+    if (timer) clearTimeout(timer);
+    if (this.boolen) {
+      try {
+        this.boolen = false;
+
+        const msg = this.value.trim();
+        // 增加回答，自己的话
+        this.msg_list = [
+          ...this.msg_list,
+          {
+            left: false,
+            msg,
+          },
+        ];
+        this.value = "";
+        const res = await textToImage({
+          q: msg,
+        });
+        if (res.errno === 10000) {
+          this.msg_list = [
+            ...this.msg_list,
+            ...res.data.imgs.map((data) => {
+              return {
+                left: true,
+                msg: "",
+                type: "img",
+                data,
+              } as (typeof this.msg_list)[number];
+            }),
+          ];
+        }
+        this.value = "";
+        this.boolen = true;
+      } catch (e) {
+        this.boolen = true;
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "./index.scss";
+</style>

src/pages/index/index.scss

@@ -91,8 +91,8 @@
   bottom: 0px;
   display: flex;
   box-sizing: content-box;
-  padding-bottom: constant(safe-area-inset-bottom);
-  padding-bottom: env(safe-area-inset-bottom);
+  // padding-bottom: constant(safe-area-inset-bottom);
+  // padding-bottom: env(safe-area-inset-bottom);
 }
 
 .intelligent_input > input {

src/pages/index/index.vue

@@ -62,7 +62,7 @@
 <script lang="ts">
 import { Component } from "vue-property-decorator";
 import AccountMixin from "@/mixins/account";
-import { textToImage } from "@/apis/base";
+import { getChat } from "@/apis/base";
 
 @Component({})
 export default class HomeView extends AccountMixin {
@@ -143,12 +143,6 @@ export default class HomeView extends AccountMixin {
       this.bottomId = "dade" + this.num;
     });
   }
-  // 点击回答的高亮，跳转页面
-  keyHighlight(/* data, data_index */) {
-    // uni.navigateTo({
-    // 	url: `./problems?data=${encodeURIComponent(JSON.stringify(data))}`
-    // })
-  }
   // 输入框聚焦事件
   i_focus() {
     this.fouse = true;
@@ -160,51 +154,42 @@ export default class HomeView extends AccountMixin {
     // 换id
     this.controlId = false;
   }
-  async getImg() {
-    const res = await textToImage({
-      q: this.value.toString().trim(),
-    });
-    console.log(res);
-  }
   // input发送事件
   async input_send() {
-    this.getImg();
     if (!this.value.toString()) {
       return;
     }
     let timer;
     if (timer) clearTimeout(timer);
     if (this.boolen) {
-      this.boolen = false;
-
-      // 增加回答，自己的话
-      this.msg_list = [
-        ...this.msg_list,
-        {
-          left: false,
-          msg: this.value,
-        },
-      ];
-      this.value = "";
+      try {
+        this.boolen = false;
 
-      const res = await textToImage({
-        q: this.value.trim(),
-      });
-      if (res.errno === 10000) {
+        const msg = this.value.trim();
+        // 增加回答，自己的话
+        this.msg_list = [
+          ...this.msg_list,
+          {
+            left: false,
+            msg,
+          },
+        ];
+        this.value = "";
+        const res = await getChat({
+          q: this.value.trim(),
+        });
         this.msg_list = [
           ...this.msg_list,
-          ...res.data.imgs.map((data) => {
-            return {
-              left: true,
-              msg: "",
-              type: "img",
-              data,
-            } as (typeof this.msg_list)[number];
-          }),
+          {
+            left: true,
+            msg: res,
+          } as unknown as (typeof this.msg_list)[number],
         ];
+        this.value = "";
+        this.boolen = true;
+      } catch (e) {
+        this.boolen = true;
       }
-      this.value = "";
-      this.boolen = true;
     }
   }
 }

types/apis/txt_to_img.d.ts

@@ -0,0 +1,14 @@
+declare interface ApiList {
+  "/chat": {
+    params: {
+      q?: string;
+    };
+    response: {
+      errno: number;
+      errmsg: string;
+      data: {
+        imgs: { url: string }[];
+      };
+    };
+  };
+}