@@ -55,6 +55,7 @@ App({ | |||||
* @returns userInfo | * @returns userInfo | ||||
*/ | */ | ||||
const checkUserInfo = () => { | const checkUserInfo = () => { | ||||
const that = this | |||||
request.get({ | request.get({ | ||||
url: '/api/user/userinfo' | url: '/api/user/userinfo' | ||||
}).then(res => { | }).then(res => { | ||||
@@ -11,7 +11,10 @@ Page({ | |||||
isResponing: false, | isResponing: false, | ||||
chatOver: false, | chatOver: false, | ||||
messageFlag: true, | messageFlag: true, | ||||
scrollTop: 0 | |||||
istouching: false, | |||||
isHolding: false, | |||||
scrollTop: 0, | |||||
timer: null | |||||
}, | }, | ||||
/** | /** | ||||
@@ -27,6 +30,7 @@ Page({ | |||||
}) | }) | ||||
}, | }, | ||||
// 向socket连接端发送数据 | |||||
send() { | send() { | ||||
if (!this.data.message) return | if (!this.data.message) return | ||||
@@ -125,7 +129,8 @@ Page({ | |||||
} | } | ||||
wx.onSocketClose(() => { | wx.onSocketClose(() => { | ||||
console.log('连接已丢失!'); | |||||
console.log('Socket连接已关闭'); | |||||
that.scrollToBottom('scrollSingel') | |||||
that.setData({ | that.setData({ | ||||
reLoadSocket: true | reLoadSocket: true | ||||
}) | }) | ||||
@@ -175,6 +180,7 @@ Page({ | |||||
}) | }) | ||||
}, | }, | ||||
/* 滚动到选定dom的底部 */ | |||||
scrollToBottom(id) { | scrollToBottom(id) { | ||||
const that = this | const that = this | ||||
wx.createSelectorQuery().select('#' + id).boundingClientRect(function (rect) { | wx.createSelectorQuery().select('#' + id).boundingClientRect(function (rect) { | ||||
@@ -188,6 +194,53 @@ Page({ | |||||
}).exec(); | }).exec(); | ||||
}, | }, | ||||
messageTouchStart(e) { | |||||
console.log(e, 'e'); | |||||
this.setData({ | |||||
istouching: true, | |||||
istouchingIndex: e.currentTarget.dataset.index, | |||||
timer: setTimeout(() => { | |||||
this.setData({ | |||||
isHolding: true | |||||
}) | |||||
setTimeout(() => { | |||||
this.setData({ | |||||
isHolding: false | |||||
}) | |||||
}, 4000); | |||||
}, 500) | |||||
}) | |||||
}, | |||||
messageTouchEnd(e) { | |||||
this.setData({ | |||||
istouching: false, | |||||
istouchingIndex: e.currentTarget.dataset.index | |||||
}) | |||||
const timer = this.data.timer | |||||
clearTimeout(timer) | |||||
}, | |||||
copyMessage(e) { | |||||
if (!this.data.isHolding) return | |||||
const message = e.currentTarget.dataset.message | |||||
this.setData({ | |||||
isHolding: false | |||||
}) | |||||
this.setClipboardData(message) | |||||
}, | |||||
/* 复制内容到剪贴板*/ | |||||
setClipboardData(data) { | |||||
wx.setClipboardData({ | |||||
data, | |||||
success(res) { | |||||
// console.log(res) | |||||
} | |||||
}) | |||||
}, | |||||
/** | /** | ||||
* 生命周期函数--监听页面初次渲染完成 | * 生命周期函数--监听页面初次渲染完成 | ||||
*/ | */ | ||||
@@ -15,7 +15,7 @@ page { | |||||
.content { | .content { | ||||
padding: 50rpx 50rpx; | padding: 50rpx 50rpx; | ||||
padding-bottom: 150rpx; | |||||
padding-bottom: 240rpx; | |||||
.chatItem { | .chatItem { | ||||
margin-bottom: 40rpx; | margin-bottom: 40rpx; | ||||
@@ -43,26 +43,131 @@ page { | |||||
} | } | ||||
} | } | ||||
.message { | |||||
position: relative; | |||||
display: inline-block; | |||||
max-width: 450rpx; | |||||
text-align: left; | |||||
.textShape { | |||||
transition: all 0.2s; | |||||
&.istouching { | |||||
opacity: 0.65; | |||||
} | |||||
.arrowWhite { | |||||
position: absolute; | |||||
left: 50rpx; | |||||
height: 80rpx; | |||||
z-index: 0; | |||||
} | |||||
&.left { | |||||
left: 80rpx; | |||||
color: #000000; | |||||
background-color: #ffffff; | |||||
padding: 20rpx; | |||||
border-radius: 20rpx; | |||||
.arrowGreen { | |||||
position: absolute; | |||||
transform: rotate(180deg); | |||||
top: -12rpx; | |||||
right: 53rpx; | |||||
height: 80rpx; | |||||
z-index: 0; | |||||
} | } | ||||
&.right { | |||||
right: 80rpx; | |||||
color: #ffffff; | |||||
background-color: #07c160; | |||||
padding: 20rpx; | |||||
border-radius: 20rpx; | |||||
.message { | |||||
position: relative; | |||||
display: inline-block; | |||||
max-width: 450rpx; | |||||
text-align: left; | |||||
z-index: 1; | |||||
&.left { | |||||
left: 80rpx; | |||||
color: #000000; | |||||
background-color: #ffffff; | |||||
padding: 20rpx; | |||||
border-radius: 20rpx; | |||||
} | |||||
&.right { | |||||
right: 80rpx; | |||||
color: #ffffff; | |||||
background-color: #07c160; | |||||
padding: 20rpx; | |||||
border-radius: 20rpx; | |||||
} | |||||
.copyBoxLeft { | |||||
position: absolute; | |||||
top: 10rpx; | |||||
right: 10rpx; | |||||
z-index: -1; | |||||
opacity: 0; | |||||
transition: all 0.3s; | |||||
&.active { | |||||
right: -120rpx; | |||||
opacity: 1; | |||||
z-index: 1; | |||||
} | |||||
.boxInside { | |||||
position: relative; | |||||
width: 80rpx; | |||||
height: 40rpx; | |||||
color: #ffffff; | |||||
background-color: #333333; | |||||
text-align: center; | |||||
padding: 8rpx; | |||||
border-radius: 15rpx; | |||||
z-index: 1; | |||||
.text { | |||||
z-index: 1; | |||||
} | |||||
.arrowBlack { | |||||
position: absolute; | |||||
top: -5rpx; | |||||
left: 25rpx; | |||||
height: 70rpx; | |||||
transform: translateX(-50%); | |||||
z-index: -1; | |||||
} | |||||
} | |||||
} | |||||
.copyBoxRight { | |||||
position: absolute; | |||||
top: 10rpx; | |||||
left: 10rpx; | |||||
z-index: -1; | |||||
opacity: 0; | |||||
transition: all 0.3s; | |||||
&.active { | |||||
left: -120rpx; | |||||
opacity: 1; | |||||
z-index: 1; | |||||
} | |||||
.boxInside { | |||||
position: relative; | |||||
width: 80rpx; | |||||
height: 40rpx; | |||||
color: #ffffff; | |||||
background-color: #333333; | |||||
text-align: center; | |||||
padding: 8rpx; | |||||
border-radius: 15rpx; | |||||
z-index: 1; | |||||
.text { | |||||
z-index: 1; | |||||
} | |||||
.arrowBlack { | |||||
position: absolute; | |||||
top: -15rpx; | |||||
right: -65rpx; | |||||
height: 70rpx; | |||||
transform: translateX(-50%) rotate(180deg); | |||||
z-index: -1; | |||||
} | |||||
} | |||||
} | |||||
} | } | ||||
} | } | ||||
@@ -90,11 +195,12 @@ page { | |||||
.chatBox { | .chatBox { | ||||
position: fixed; | position: fixed; | ||||
width: 100%; | width: 100%; | ||||
height: 120rpx; | |||||
height: 150rpx; | |||||
bottom: 0; | bottom: 0; | ||||
padding-left: 40rpx; | padding-left: 40rpx; | ||||
padding-top: 20rpx; | |||||
padding-top: 30rpx; | |||||
background-color: #f5f5f5; | background-color: #f5f5f5; | ||||
z-index: 10; | |||||
.boxOutside { | .boxOutside { | ||||
margin-bottom: 20rpx; | margin-bottom: 20rpx; | ||||
@@ -2,8 +2,34 @@ | |||||
<view class="content" id='scrollSingel'> | <view class="content" id='scrollSingel'> | ||||
<view class="chatItem" wx:for="{{chatList}}" wx:key="index"> | <view class="chatItem" wx:for="{{chatList}}" wx:key="index"> | ||||
<view class="{{item.id == 1 ? 'chatContent right' : 'chatContent left'}}"> | <view class="{{item.id == 1 ? 'chatContent right' : 'chatContent left'}}"> | ||||
<image class="{{isResponing ? 'chatGpt isResponing' : 'chatGpt'}}" wx:if="{{!item.id}}" src="../../asset/icon/tiny-Chat-rotate.png" mode="heightFix" /> | <image class="{{isResponing ? 'chatGpt isResponing' : 'chatGpt'}}" wx:if="{{!item.id}}" src="../../asset/icon/tiny-Chat-rotate.png" mode="heightFix" /> | ||||
<text class="{{item.id == 1 ? 'message right' : 'message left'}}">{{item.message}}</text> | |||||
<view class="{{istouching && istouchingIndex == index ? 'textShape istouching' : 'textShape'}}" bindtouchstart="messageTouchStart" bindtouchend="messageTouchEnd" data-index="{{index}}"> | |||||
<image wx:if="{{item.id != 1}}" class="arrowWhite" src="../../asset/icon/arrowWhite.png" mode="heightFix" /> | |||||
<view class="{{item.id == 1 ? 'message right' : 'message left'}}"> | |||||
<text>{{item.message}}</text> | |||||
<view wx:if="{{item.id == 1}}" id="copyBox" class="{{isHolding && istouchingIndex == index ? 'copyBoxRight active' : 'copyBoxRight'}}" bindtap="copyMessage" data-message="{{item.message}}"> | |||||
<view class="boxInside"> | |||||
<view class="text">复制</view> | |||||
<image class="arrowBlack" src="../../asset/icon/arrowBlack.png" mode="heightFix" /> | |||||
</view> | |||||
</view> | |||||
<view wx:if="{{item.id != 1}}" id="copyBox" class="{{isHolding && istouchingIndex == index ? 'copyBoxLeft active' : 'copyBoxLeft'}}" bindtap="copyMessage" data-message="{{item.message}}"> | |||||
<view class="boxInside"> | |||||
<view class="text">复制</view> | |||||
<image class="arrowBlack" src="../../asset/icon/arrowBlack.png" mode="heightFix" /> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<image wx:if="{{item.id == 1}}" class="arrowGreen" src="../../asset/icon/arrowGreen.png" mode="heightFix" /> | |||||
</view> | |||||
<image class="userAvatar" wx:if="{{item.id && item.id == 1}}" src="../../asset/icon/user.png" mode="heightFix" /> | <image class="userAvatar" wx:if="{{item.id && item.id == 1}}" src="../../asset/icon/user.png" mode="heightFix" /> | ||||
</view> | </view> | ||||
</view> | </view> | ||||
@@ -110,5 +110,33 @@ Page({ | |||||
}).catch(err => { | }).catch(err => { | ||||
console.log(err, 'err'); | console.log(err, 'err'); | ||||
}) | }) | ||||
}, | |||||
onShareAppMessage() { | |||||
const promise = new Promise(resolve => { | |||||
setTimeout(() => { | |||||
resolve({ | |||||
title: '小闲聊' | |||||
}) | |||||
}, 500) | |||||
}) | |||||
return { | |||||
title: '小闲聊', | |||||
path: '/page/index/index', | |||||
promise | |||||
} | |||||
}, | |||||
onShareTimeline() { | |||||
const promise = new Promise(resolve => { | |||||
setTimeout(() => { | |||||
resolve({ | |||||
title: '小闲聊' | |||||
}) | |||||
}, 500) | |||||
}) | |||||
return { | |||||
title: '小闲聊', | |||||
path: '/page/index/index', | |||||
promise | |||||
} | |||||
} | } | ||||
}) | }) |
@@ -1,4 +1,5 @@ | |||||
const url = 'https://gpttest.malls.iformall.com/C' | const url = 'https://gpttest.malls.iformall.com/C' | ||||
// const url = 'https://gpt.malls.iformall.com/C' | |||||
class request { | class request { | ||||
constructor(address) { | constructor(address) { | ||||