@@ -55,6 +55,7 @@ App({ | |||
* @returns userInfo | |||
*/ | |||
const checkUserInfo = () => { | |||
const that = this | |||
request.get({ | |||
url: '/api/user/userinfo' | |||
}).then(res => { | |||
@@ -11,7 +11,10 @@ Page({ | |||
isResponing: false, | |||
chatOver: false, | |||
messageFlag: true, | |||
scrollTop: 0 | |||
istouching: false, | |||
isHolding: false, | |||
scrollTop: 0, | |||
timer: null | |||
}, | |||
/** | |||
@@ -27,6 +30,7 @@ Page({ | |||
}) | |||
}, | |||
// 向socket连接端发送数据 | |||
send() { | |||
if (!this.data.message) return | |||
@@ -125,7 +129,8 @@ Page({ | |||
} | |||
wx.onSocketClose(() => { | |||
console.log('连接已丢失!'); | |||
console.log('Socket连接已关闭'); | |||
that.scrollToBottom('scrollSingel') | |||
that.setData({ | |||
reLoadSocket: true | |||
}) | |||
@@ -175,6 +180,7 @@ Page({ | |||
}) | |||
}, | |||
/* 滚动到选定dom的底部 */ | |||
scrollToBottom(id) { | |||
const that = this | |||
wx.createSelectorQuery().select('#' + id).boundingClientRect(function (rect) { | |||
@@ -188,6 +194,53 @@ Page({ | |||
}).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 { | |||
padding: 50rpx 50rpx; | |||
padding-bottom: 150rpx; | |||
padding-bottom: 240rpx; | |||
.chatItem { | |||
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 { | |||
position: fixed; | |||
width: 100%; | |||
height: 120rpx; | |||
height: 150rpx; | |||
bottom: 0; | |||
padding-left: 40rpx; | |||
padding-top: 20rpx; | |||
padding-top: 30rpx; | |||
background-color: #f5f5f5; | |||
z-index: 10; | |||
.boxOutside { | |||
margin-bottom: 20rpx; | |||
@@ -2,8 +2,34 @@ | |||
<view class="content" id='scrollSingel'> | |||
<view class="chatItem" wx:for="{{chatList}}" wx:key="index"> | |||
<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" /> | |||
<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" /> | |||
</view> | |||
</view> | |||
@@ -110,5 +110,33 @@ Page({ | |||
}).catch(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://gpt.malls.iformall.com/C' | |||
class request { | |||
constructor(address) { | |||