diff --git a/miniprogram/app.js b/miniprogram/app.js index 07b4a4b..ced3fa1 100644 --- a/miniprogram/app.js +++ b/miniprogram/app.js @@ -55,6 +55,7 @@ App({ * @returns userInfo */ const checkUserInfo = () => { + const that = this request.get({ url: '/api/user/userinfo' }).then(res => { diff --git a/miniprogram/asset/icon/arrowBlack.png b/miniprogram/asset/icon/arrowBlack.png new file mode 100644 index 0000000..23ef504 Binary files /dev/null and b/miniprogram/asset/icon/arrowBlack.png differ diff --git a/miniprogram/asset/icon/arrowGreen.png b/miniprogram/asset/icon/arrowGreen.png new file mode 100644 index 0000000..1fcaa2c Binary files /dev/null and b/miniprogram/asset/icon/arrowGreen.png differ diff --git a/miniprogram/asset/icon/arrowWhite.png b/miniprogram/asset/icon/arrowWhite.png new file mode 100644 index 0000000..199203c Binary files /dev/null and b/miniprogram/asset/icon/arrowWhite.png differ diff --git a/miniprogram/asset/image/share.png b/miniprogram/asset/image/share.png new file mode 100644 index 0000000..47910b6 Binary files /dev/null and b/miniprogram/asset/image/share.png differ diff --git a/miniprogram/pages/chat/chat.js b/miniprogram/pages/chat/chat.js index 334ed47..9a793fe 100644 --- a/miniprogram/pages/chat/chat.js +++ b/miniprogram/pages/chat/chat.js @@ -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) + } + }) + }, + + /** * 生命周期函数--监听页面初次渲染完成 */ diff --git a/miniprogram/pages/chat/chat.less b/miniprogram/pages/chat/chat.less index 12f9371..c6505bb 100644 --- a/miniprogram/pages/chat/chat.less +++ b/miniprogram/pages/chat/chat.less @@ -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; diff --git a/miniprogram/pages/chat/chat.wxml b/miniprogram/pages/chat/chat.wxml index ff0312e..ece87be 100644 --- a/miniprogram/pages/chat/chat.wxml +++ b/miniprogram/pages/chat/chat.wxml @@ -2,8 +2,34 @@ + - {{item.message}} + + + + + + + {{item.message}} + + + 复制 + + + + + + + 复制 + + + + + + + + + diff --git a/miniprogram/pages/index/index.js b/miniprogram/pages/index/index.js index cf1a28c..f654e46 100644 --- a/miniprogram/pages/index/index.js +++ b/miniprogram/pages/index/index.js @@ -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 + } } }) diff --git a/miniprogram/utils/request.js b/miniprogram/utils/request.js index 5c00436..aeb97aa 100644 --- a/miniprogram/utils/request.js +++ b/miniprogram/utils/request.js @@ -1,4 +1,5 @@ const url = 'https://gpttest.malls.iformall.com/C' +// const url = 'https://gpt.malls.iformall.com/C' class request { constructor(address) {