| @@ -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) { | |||