Skip to content

Y
yma16_miniprogram

yma16 / yma16_miniprogram

通知 11
Star 1
Fork 0
Y
yma16_miniprogram
提交 c0d8491d 编写于 作者: yma16's avatar yma16
浏览文件
操作

feat:chagpt

上级 d87bfb13
隐藏空白更改
内联 并排
Showing with 207 addition and 89 deletion
miniprogram/pages/future/future.js
浏览文件 @ c0d8491d
...@@ -42,25 +42,30 @@ Component({ ...@@ -42,25 +42,30 @@ Component({
}, },
aiConfig: { aiConfig: {
avatarUrl: 'https://yongma16.xyz/staticFile/common/img/aiTop.jpg', avatarUrl: 'https://yongma16.xyz/staticFile/common/img/aiTop.jpg',
bgUrl: 'https://yongma16.xyz/staticFile/common/img/aiBg.jpg' bgUrl: 'https://yongma16.xyz/staticFile/common/img/aiBg.jpg',
nickName: 'openai',
}, },
searchOpenAiText: '', searchOpenAiText: '',
responseText: '', responseText: '',
reportText: '',
// questions，answer，index // questions，answer，index
chatObjConfig: { chatObjConfig: {
option: [{ option: [{
question: '', question: '',
answer: '', answer: '',
isEdit: true isEdit: true,
createTime: ''
}], }],
currentIndex: 0 currentIndex: 0
}, },
layoutConfig:{ layoutConfig: {
introduceText:'api介绍', introduceText: 'api介绍',
useText:'使用', useText: '使用',
returnText:'返回介绍', returnText: '返回介绍',
sendText:'发送', sendText: '发送',
searchText:'关键词查询' searchText: '关键词查询',
reportText: '复制数据',
copyText: '复制'
} }
}, },
observers: { observers: {
...@@ -73,12 +78,12 @@ Component({ ...@@ -73,12 +78,12 @@ Component({
// 在当前同步流程结束后，下一个时间片执行 // 在当前同步流程结束后，下一个时间片执行
wx.nextTick(() => { wx.nextTick(() => {
wx.hideLoading({ wx.hideLoading({
success: (res) => {}, success: (res) => { },
}) })
// 触发父组件事件 // 触发父组件事件
this.triggerEvent('updateBottomNavigation', newVal === 'introduce') this.triggerEvent('updateBottomNavigation', newVal === 'introduce')
}) })
} }
}, },
lifetimes: { lifetimes: {
...@@ -91,7 +96,7 @@ Component({ ...@@ -91,7 +96,7 @@ Component({
{ {
chatObjConfig: openAiOptions, chatObjConfig: openAiOptions,
mode: app.wxProgramConfig.apiPageConfig.mode, mode: app.wxProgramConfig.apiPageConfig.mode,
layoutConfig:app.wxProgramConfig.apiPageConfig.layoutConfig, layoutConfig: app.wxProgramConfig.apiPageConfig.layoutConfig,
} }
) )
} }
...@@ -142,11 +147,24 @@ Component({ ...@@ -142,11 +147,24 @@ Component({
}) })
}, },
scrollToBottom() { scrollToBottom() {
const index=this.data.chatObjConfig.option.length-1 const index = this.data.chatObjConfig.option.length - 1
this.setData({ this.setData({
toView:`chat-mode${index}` toView: `chat-mode${index}`
}) })
}, },
getCurrentTime() {
const now = new Date()
const year = now.getFullYear()
const month = now.getMonth()
const date = now.getDate()
const hour = now.getHours()
const minutes = now.getMinutes()
const second = now.getSeconds()
const formatNum = (n) => {
return n > 9 ? n.toString() : '0' + n
}
return `${year}-${formatNum(month + 1)}-${formatNum(date)} ${formatNum(hour)}:${formatNum(minutes)}:${formatNum(second)}`
},
getRemoteArticle: function (id) { getRemoteArticle: function (id) {
this.setData({ this.setData({
isLoading: true isLoading: true
...@@ -193,27 +211,35 @@ Component({ ...@@ -193,27 +211,35 @@ Component({
}) })
}, },
bindKeyInput(e) { 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({ this.setData({
searchOpenAiText: e.detail.value, searchOpenAiText: e.detail.value
chatObjConfig: {
option: option,
currentIndex: columnIndex
}
}) })
}, },
reportAnswerData() {
const data=this.data.chatObjConfig.option
wx.setClipboardData({
data: JSON.stringify(data)
})
console.log(wx.getClipboardData({
success: (option) => {
console.log(option)
},
}))
},
copyBtn(e) {
console.log('data', e)
const response = e.target.dataset.response
wx.setClipboardData({
data: response
})
console.log(wx.getClipboardData({
success: (option) => {
console.log(option)
},
}))
},
search(e) { search(e) {
console.log(this.data.searchOpenAiText)
this.scrollToBottom() this.scrollToBottom()
if (!this.data.searchOpenAiText) { if (!this.data.searchOpenAiText) {
wx.showModal({ wx.showModal({
...@@ -228,7 +254,6 @@ Component({ ...@@ -228,7 +254,6 @@ Component({
this.setData({ this.setData({
isLoading: true isLoading: true
}) })
console.log(e)
const path = '/common-api/searchOpenAiText/' const path = '/common-api/searchOpenAiText/'
const headers = { 'Content-Type': 'application/json;charset=UTF-8' } const headers = { 'Content-Type': 'application/json;charset=UTF-8' }
const params = { const params = {
...@@ -252,26 +277,26 @@ Component({ ...@@ -252,26 +277,26 @@ Component({
option.some((item, index) => { option.some((item, index) => {
if (currentIndex === index) { if (currentIndex === index) {
item.answer = answer item.answer = answer
item.question = params.text
item.createTime = this.getCurrentTime()
item.isEdit = false item.isEdit = false
return true return true
} }
return false return false
}) })
thisBack.createOpenRecord({ // // 只保留30 条 缓存
wx_name: thisBack.data.currentUserInfo.nickName, // if(option.length&&option.length>30){
wx_img: thisBack.data.currentUserInfo.avatarUrl, // option.shift()
search_text: params.text, // }
search_response: answer
})
const chatObjConfig = { const chatObjConfig = {
option: option, option: option,
currentIndex: currentIndex + 1 currentIndex: currentIndex + 1
} }
option.push({ // option.push({
question: '', // question: '',
answer: '', // answer: '',
isEdit: true // isEdit: true
}) // })
thisBack.setData( thisBack.setData(
{ {
isLoading: false, isLoading: false,
...@@ -282,6 +307,14 @@ Component({ ...@@ -282,6 +307,14 @@ Component({
wx.hideLoading() wx.hideLoading()
thisBack.scrollToBottom() thisBack.scrollToBottom()
resolve(res) resolve(res)
setTimeout(() => {
thisBack.createOpenRecord({
wx_name: thisBack.data.currentUserInfo.nickName,
wx_img: thisBack.data.currentUserInfo.avatarUrl,
search_text: params.text,
search_response: answer
})
}, 10)
}, },
fail: error => { fail: error => {
thisBack.setData({ thisBack.setData({
......
miniprogram/pages/future/future.wxml
浏览文件 @ c0d8491d
<!--pages/future/future.wxml--> <!--pages/future/future.wxml-->
<view class="container-future" style="background: {{currentUserInfo.bgUrl}};"> <view class="container-future">
<!-- <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 class="form-container-introduce" wx:if="{{mode==='introduce'}}"> <view class="form-container-introduce" wx:if="{{mode==='introduce'}}">
<view class="header-box" style="display: flex;"> <view class="header-box" style="display: flex;">
<view style="width: {{isShowOenAi? '50%':'100%'}}"> <view style="width: {{isShowOenAi? '50%':'100%'}}">
<button style="width: 100%;" type="primary" style="background: rgb(8, 183, 252);" loading="{{isLoading}}">{{layoutConfig.introduceText}}</button> <button style="width: 100%;" type="primary" style="background: rgb(8, 183, 252);" loading="{{isLoading}}">{{layoutConfig.introduceText}}
</button>
</view> </view>
<view style="width:50%" wx:if="{{isShowOenAi}}"> <view style="width:50%" wx:if="{{isShowOenAi}}">
<button style="width: 100%;" type="primary" style="background: rgb(0, 114, 221);" bindtap="changeMode" loading="{{isLoading}}" data-mode='openAiUse'>{{layoutConfig.useText}}</button> <button style="width: 100%;" type="primary" style="background: rgb(0, 114, 221);" bindtap="changeMode" loading="{{isLoading}}" data-mode='openAiUse'>{{layoutConfig.useText}}</button>
...@@ -27,45 +20,71 @@ ...@@ -27,45 +20,71 @@
</view> </view>
</view> </view>
<view class="form-container-api" wx:if="{{mode==='openAiUse'}}"> <view class="form-container-api" wx:if="{{mode==='openAiUse'}}">
<view> <view style="display: flex;justify-content: space-between;">
<button style="width: 100%;background-color: #0758c1;" type="primary" bindtap="changeMode" loading="{{isLoading}}" data-mode='introduce'>{{layoutConfig.returnText}}</button> <button style="width: 50%;background-color: #0758c1;" type="primary" bindtap="changeMode" loading="{{isLoading}}" data-mode='introduce'>{{layoutConfig.returnText}}</button>
<button style="width: 50%;" type="primary" style="background: rgb(0, 114, 221);" bindtap="reportAnswerData" loading="{{isLoading}}" data-mode='openAiUse'>{{layoutConfig.reportText}}</button>
</view> </view>
<view class="chat-container" id="chat-container-id" style="width: 100%;"> <view class="chat-container" id="chat-container-id" style="width: 100%;">
<view style="float: right;position: absolute;right:0;z-index: 10px">
</view>
<scroll-view scroll-y="true" class="scroll-answer" scroll-with-animation bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}"> <scroll-view scroll-y="true" class="scroll-answer" scroll-with-animation bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
<view wx:for="{{ chatObjConfig.option }}" wx:for-index="index" wx:for-item="item" wx:key="*this" id="chat-mode{{index}}"> <view wx:for="{{ chatObjConfig.option }}" wx:for-index="index" wx:for-item="item" wx:key="index" id="chat-mode{{index}}">
<view style="width: 100%;border-radius: 2px;text-align: center;color:rgb(255, 255, 255);background: rgb(0, 114, 221);width: fit-content;margin:5px auto">
{{item.createTime}}
</view>
<view class="form-request"> <view class="form-request">
<view wx:if="{{item.isEdit}}"> <view wx:if="{{!item.isEdit}}" class='questioned'>
<image class="user-image" src="{{currentUserInfo.avatarUrl}}"></image> <view style="display: flex;text-align: right;flex-direction:row-reverse;">
<view style="display: inline;">（{{currentUserInfo.nickName}}）：$ </view> <view class="questioned-box-container">
<input bindinput="bindKeyInput" style="display: inline;" placeholder="{{layoutConfig.searchText}}" data-column-index="{{index}}" disabled="{{isLoading}}" /> <view class='questioned-box' style="text-align: left;">
</view> {{item.question}}
<view wx:else class='questioned'> </view>
<view> <view class='questioned-box-poly'>
<image class="user-image" src="{{currentUserInfo.avatarUrl}}"></image> ({{currentUserInfo.nickName}})：$ {{item.question}} </view>
<view style="text-align: right;line-height: 50px;display: flex;max-height: 50px;">
<view class='form-request-user'>
<!-- {{currentUserInfo.nickName}} -->
<image class="user-image" src="{{currentUserInfo.avatarUrl}}"></image>
</view>
</view>
</view>
</view> </view>
</view> </view>
</view> </view>
<view class="form-response"> <view class="form-response" wx:if="{{!item.isEdit}}">
<view class='questioned'> <view style="display: flex;">
<image class="ai-image" src="{{aiConfig.avatarUrl}}"></image> <view style="line-height: 50px;">
（openai）：$ {{item.answer}} <view class='form-response-user'>
</view> <image class="ai-image" src="{{aiConfig.avatarUrl}}"></image>
</view> <!-- {{aiConfig.nickName}} -->
</view>
</view>
<view class="form-response-box-poly">
</view>
<view class='form-response-box'>
{{item.answer}}
</view>
</view>
<view style="display: flex;width: 100%;box-sizing: border-box;">
<view style="width: 70%;">
</view>
<view style="width: 30%;">
<button style="background-color: #0758c1;width:fit-content;border-radius: 10px;margin:5px 2px;" type="primary" bindtap="copyBtn" data-response=" {{item.answer}}">{{layoutConfig.copyText}}</button>
</view>
</view>
</view>
</view> </view>
<view class="form-submit" wx:if="{{mode==='openAiUse'}}" style="width: 100%;"> <view class="form-submit" wx:if="{{mode==='openAiUse'}}" style="width: 100%;">
</view> </view>
</scroll-view> </scroll-view>
<view>
<input class='send-btn' bindinput="bindKeyInput" placeholder="{{layoutConfig.searchText}}" bindconfirm="search" value="{{searchOpenAiText}}" disabled="{{isLoading}}" />
</view>
<button style="width: 100%;;background-color: #0758c1;" type="primary" bindtap="search" loading="{{isLoading}}">{{layoutConfig.sendText}}</button> <button style="width: 100%;;background-color: #0758c1;" type="primary" bindtap="search" loading="{{isLoading}}">{{layoutConfig.sendText}}</button>
</view> </view>
</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> </view>
</view> </view>
\ No newline at end of file
miniprogram/pages/future/future.wxss
浏览文件 @ c0d8491d
...@@ -3,13 +3,12 @@ ...@@ -3,13 +3,12 @@
position: relative; position: relative;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
/* 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: 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-repeat: repeat;
background-size: 10px 10px; background-size: 10px 10px;
border: 1px solid #01c4ff; */ /* background-image: url('https://yongma16.xyz/media/editor/wallhaven-we1xx7_20230331165330942057.jpg'); */
background-image: url('https://yongma16.xyz/staticFile/common/img/aiBg.jpg'); /* background-repeat: no-repeat;
background-repeat: no-repeat; background-size: cover; */
background-size: cover;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
} }
...@@ -78,6 +77,8 @@ button { ...@@ -78,6 +77,8 @@ button {
font-weight: normal; font-weight: normal;
} }
.btn-default { .btn-default {
color: #262626; color: #262626;
flex: 1; flex: 1;
...@@ -103,8 +104,8 @@ button { ...@@ -103,8 +104,8 @@ button {
.form-request { .form-request {
display: block; display: block;
width: 100%; width: 100%;
color: #07c160; color: #fff;
background-color: rgba(37, 0, 97,.9); background-color: rgba(37, 0, 97,0);
line-height: 50px; line-height: 50px;
} }
...@@ -114,12 +115,22 @@ button { ...@@ -114,12 +115,22 @@ button {
margin-top: 10px; margin-top: 10px;
display: block; display: block;
margin-bottom: 10px; margin-bottom: 10px;
color: #07c160; color: #fff;
background-color: rgba(0, 72, 94,.9); background-color: rgba(0, 72, 94,0);
box-sizing: border-box; box-sizing: border-box;
min-height: 60px; min-height: 60px;
} }
.form-response-user{
background-color: rgba(0, 72, 94,0);
color:#fff;
}
.form-request-user{
background-color: rgba(37, 0, 97,0);
color:#fff;
}
.form-class-submit { .form-class-submit {
margin-top: 10px; margin-top: 10px;
display: block; display: block;
...@@ -140,10 +151,9 @@ button { ...@@ -140,10 +151,9 @@ button {
overflow: auto; overflow: auto;
} }
.scroll-answer{ .scroll-answer{
height: calc(100vh - 90px); height: calc(100vh - 140px);
} }
.chat-container { .chat-container {
margin-top: 10px;
width: 100%; width: 100%;
height: calc(100vh - 40px); height: calc(100vh - 40px);
overflow-y: auto; overflow-y: auto;
...@@ -172,6 +182,62 @@ button { ...@@ -172,6 +182,62 @@ button {
border-radius: 50%; border-radius: 50%;
} }
.questioned-box-container{
display: flex;
}
.questioned-box{
position: relative;
max-width: calc(100vw - 90px);
height: auto;
overflow-x: auto;
background-color:rgb(0, 114, 221);
border-radius: 10px;
right: -5px;
padding:0 10px;
z-index: 999;
}
.questioned-box-poly{
position: relative;
top:15px;
width: 0;
height: 0;
border-radius: 5px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 12px solid rgb(0, 114, 221);
}
.send-btn{
height: 60px;background: rgba(255,255,255,.8);
color:rgb(0, 114, 221);
padding-left: 10px;
}
.form-response-box{
position: relative;
max-width: calc(100vw - 90px);
word-break:keep-all;
height: auto;
overflow-x: auto;
background-color: rgb(0, 114, 221);
border-radius: 10px;
left: -5px;
padding:0 10px;
box-sizing: content-box;
z-index: 999;
}
.form-response-box-poly{
position: relative;
top:15px;
width: 0;
height: 0;
border-radius: 5px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 12px solid rgb(0, 114, 221);
}
/* .loader-child:nth-of-type(1) { /* .loader-child:nth-of-type(1) {
border-bottom: 3px solid #ffffff; border-bottom: 3px solid #ffffff;
} }
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或