add openAi remove dataView

miniprogram/pages/future/future.js

@@ -16,8 +16,19 @@ Component({
     content: '子组件的content',
     btnType:'map',
     homeHeaderItem: '',
-    isLoading: true,
-    article: { 'key': 12 }
+    isLoading: false,
+    article: { 'key': 12 },
+    searchOpenAiText:'',
+    responseText:'',
+    // questions，answer，index
+    chatObjConfig:{
+      option:[{
+        question:'',
+        answer:'',
+        isEdit:true
+      }],
+      currentIndex:0
+    }
   },
   observers: {
 
@@ -25,10 +36,17 @@ Component({
   lifetimes: {
     // 生命周期函数，可以为函数，或一个在 methods 段中定义的方法名
     attached: function () {
-      this.initData()
+      if(wx.getStorageSync('openAiOptions')){
+        this.setData(
+          {
+            chatObjConfig:wx.getStorageSync('openAiOptions')
+          }
+        )
+      }
     },
     moved: function () { },
     detached: function () {
+      wx.setStorageSync('openAiOptions', this.data.chatObjConfig)
     },
   },
 
@@ -46,6 +64,101 @@ Component({
   },
 
   methods: {
+    bindKeyInput(e) {
+      const {columnIndex}=e.currentTarget.dataset
+      console.log('this.data.chatObjConfig',this.data.chatObjConfig)
+      const option=this.data.chatObjConfig.option
+      option.some((item,index)=>{
+        if(columnIndex===index){
+          item.question=e.detail.value
+          item.isEdit=true
+          return true
+        }
+        return false
+      })
+      this.setData({
+        searchOpenAiText:e.detail.value,
+        chatObjConfig:{
+          option:option,
+          currentIndex:columnIndex
+        }
+      })
+    },
+    search(e){
+      console.log(this.data.searchOpenAiText)
+      if(!this.data.searchOpenAiText){
+        wx.showModal({
+          cancelColor: 'cancelColor',
+          title:'请输入！'
+        })
+      }
+      wx.showLoading({
+        title: '加载中',
+      })
+      this.setData({
+        isLoading: true
+      })
+      console.log(e)
+      const path = '/common-api/searchOpenAiText/'
+      const headers = { 'Content-Type': 'application/json;charset=UTF-8' }
+      const params={
+        "text":this.data.searchOpenAiText
+      }
+      const thisBack=this
+      return new Promise((resolve, reject) => {
+        wx.request({
+          url: baseUrl + path,
+          headers: headers,
+          data:params,
+          method: 'GET',
+          success: (res) => {
+            console.log(res,'res')
+            const data=res.data.data
+            const option=thisBack.data.chatObjConfig.option
+            const currentIndex=thisBack.data.chatObjConfig.currentIndex
+            const choices=data.choices
+            console.log('choices',choices)
+            option.some((item,index)=>{
+              if(currentIndex===index){
+                item.answer=choices?choices.map(choicesItem=>{return choicesItem.text}).join('\n'):'。。。未知'
+                item.isEdit=false
+                return true
+              }
+              return false
+            })
+            const chatObjConfig={
+              option:option,
+              currentIndex:currentIndex+1
+            }
+            option.push({
+              question:'',
+              answer:'',
+              isEdit:true
+            })
+            thisBack.setData(
+              {
+                isLoading: false,
+                chatObjConfig:chatObjConfig
+              }
+            )
+            setTimeout(function () {
+              wx.hideLoading()
+            }, 2000)
+            resolve(res)
+          },
+          fail: error => {
+            thisBack.setData({
+              isLoading: false
+            })
+            setTimeout(function () {
+              wx.hideLoading()
+            }, 2000)
+            reject(error)
+          }
+        });
+      })
+    },
+
     clickHeadBtn(e){
       console.log(e)
       const {btnType}=e.currentTarget.dataset

miniprogram/pages/future/future.wxml

 <!--pages/future/future.wxml-->
-<!--pages/blog/blog.wxml-->
 <view class="container-future">
-<view class="header-container">
-  <view >
-<view class="flex-container">
+  <!-- <view class="header-container"> -->
+  <!-- <view > 
+   <view class="flex-container">
   <view class='title'>疫情</view>
   <view class="header-btn" class="{{btnType==='map'? 'actived':'btn-default'}}" bindtap="clickHeadBtn" data-btn-type='map'>地图</view>
   <view class="header-btn" class="{{btnType==='line'?  'actived':'btn-default'}}" bindtap="clickHeadBtn" data-btn-type='line'>折线图</view>
   <view class="header-btn" class="{{btnType==='blockInfo'?  'actived':'btn-default'}}" bindtap="clickHeadBtn" data-btn-type='blockInfo'>分类信息</view>
-</view>
-<view>
-</view>
+</view> -->
+  <view class="form-container-api">
+    <view>
+      <button style="width: 100%;" type="primary" formType="submit">openai调用</button>
+    </view>
+    <view class="chat-container">
+      <view wx:for="{{ chatObjConfig.option }}" wx:for-index="index" wx:for-item="item" wx:key="index">
+        <view class="form-request">
+          <view wx:if="{{item.isEdit}}">问：$ <input bindinput="bindKeyInput" placeholder="输入关键词" data-column-index="{{index}}" disabled="{{isLoading}}" /></view> 
+          <view wx:else class='questioned'>
+          <view>
+            问：$ {{item.question}}
+          </view>
+          </view>
+        </view>
+        <view class="form-response">
           
+          <view class='questioned'>openai回答：$ {{item.answer}}</view>
         </view>
-</view>
-<view class="loading" wx:if="{{isLoading}}">
-<view class="loader-child"/>
-<view class="loader-child"/>
-<view class="loader-child"/>
-</view>
-<view class="content-container" wx:if="{{!isLoading}}">
-  <geoMap wx:if="{{btnType==='map'}}" ></geoMap>
+      </view>
+    </view>
+    <view class="form-submit">
+      <button style="width: 100%;" type="primary" bindtap="search" loading="{{isLoading}}" disabled="{{isLoading}}">发送</button>
+    </view>
+  </view>
+  <view class="loading" wx:if="{{isLoading}}">
+    <view class="loader-child" />
+    <view class="loader-child" />
+    <view class="loader-child" />
+  </view>
+  <view class="content-container" wx:if="{{!isLoading}}">
+    <!-- <geoMap wx:if="{{btnType==='map'}}" ></geoMap>
   <lineChart wx:elif="{{btnType==='line'}}" bindtap="clickBottomBtn"></lineChart>
-  <blockInfo wx:else="{{btnType==='blockInfo'}}" bindtap="clickBottomBtn"></blockInfo>
-</view>
+  <blockInfo wx:else="{{btnType==='blockInfo'}}" bindtap="clickBottomBtn"></blockInfo> -->
+  </view>
 </view>
\ No newline at end of file
-

miniprogram/pages/future/future.wxss

@@ -3,13 +3,12 @@
   position: relative;
   width: 100vw;
   height:100vh;
-  background: linear-gradient(to right, #fff 1px, transparent 1px), linear-gradient(to bottom, #fff 1px, transparent 1px);
+  background: linear-gradient(to right, rgba(1, 41, 116, 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(1, 41, 116, 0.1) 1px, transparent 1px);
   background-repeat: repeat;
   background-size: 10px 10px;
   border: 1px solid #01c4ff;
   overflow: hidden;
   box-sizing: border-box;
-
 }
 
 .loading{
@@ -24,20 +23,20 @@
 }
 .container-box{
   position: relative;
-  width: 100vw;
+  width: 100%;
   height: 100vh;
   overflow: auto;
 }
 .header-container{
   position: absolute;
   height:30px;
-  width: 100vw;
+  width: 100%;
 }
 .content-container{
   margin-top:30px;
   position: absolute;
   height:100vh;
-  width: 100vw;
+  width: 100%;
   overflow: auto;
 }
 .flex-container{
@@ -80,3 +79,44 @@ button{
   text-align: center;
   background-color: rgb(8, 183, 252);
 }
+
+.form-container-api{
+  display: block;
+  height:auto;
+  width: 100%;
+}
+
+
+.form-request{
+  display: block;
+  width: 100%;
+  color:#07c160;
+  background-color: rgb(37, 0, 97);
+}
+.form-response{
+  position: relative;
+  width: 100%;
+  margin-top: 10px;
+  display: block;
+  margin-bottom: 10px;
+  color:#07c160;
+  background-color:  rgb(0, 72, 94);
+}
+.form-class-submit{
+  margin-top: 10px;
+  display: block;
+  width: 100%;
+  background-color: rgb(248, 70, 0);
+}
+
+.form-submit-btn{
+  width: 100%;
+  display: block;
+}
+
+.chat-container{
+  margin-top:20px;
+  width: 100%;
+  height: 336px;
+  overflow: auto;
+}
\ No newline at end of file