Browse Source

复制功能与动效

master
HolyKnightIX 2 years ago
parent
commit
94d95eb1f8
10 changed files with 238 additions and 23 deletions
  1. +1
    -0
      miniprogram/app.js
  2. BIN
      miniprogram/asset/icon/arrowBlack.png
  3. BIN
      miniprogram/asset/icon/arrowGreen.png
  4. BIN
      miniprogram/asset/icon/arrowWhite.png
  5. BIN
      miniprogram/asset/image/share.png
  6. +55
    -2
      miniprogram/pages/chat/chat.js
  7. +126
    -20
      miniprogram/pages/chat/chat.less
  8. +27
    -1
      miniprogram/pages/chat/chat.wxml
  9. +28
    -0
      miniprogram/pages/index/index.js
  10. +1
    -0
      miniprogram/utils/request.js

+ 1
- 0
miniprogram/app.js View File

@@ -55,6 +55,7 @@ App({
* @returns userInfo
*/
const checkUserInfo = () => {
const that = this
request.get({
url: '/api/user/userinfo'
}).then(res => {


BIN
miniprogram/asset/icon/arrowBlack.png View File

Before After
Width: 1890  |  Height: 1417  |  Size: 37 KiB

BIN
miniprogram/asset/icon/arrowGreen.png View File

Before After
Width: 1890  |  Height: 1417  |  Size: 40 KiB

BIN
miniprogram/asset/icon/arrowWhite.png View File

Before After
Width: 1890  |  Height: 1417  |  Size: 29 KiB

BIN
miniprogram/asset/image/share.png View File

Before After
Width: 326  |  Height: 79  |  Size: 9.6 KiB

+ 55
- 2
miniprogram/pages/chat/chat.js View File

@@ -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)
}
})
},


/**
* 生命周期函数--监听页面初次渲染完成
*/


+ 126
- 20
miniprogram/pages/chat/chat.less View File

@@ -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;


+ 27
- 1
miniprogram/pages/chat/chat.wxml View File

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


+ 28
- 0
miniprogram/pages/index/index.js View File

@@ -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
- 0
miniprogram/utils/request.js View File

@@ -1,4 +1,5 @@
const url = 'https://gpttest.malls.iformall.com/C'
// const url = 'https://gpt.malls.iformall.com/C'

class request {
constructor(address) {


Loading…
Cancel
Save