+ 128
- 0
pages/msgModule/wechat2 copy/wechat2.js
查看文件
| const $request = require('../../../utils/request.js'); | |||||
| const $util = require('../../../utils/util.js'); | |||||
| Page({ | |||||
| /** | |||||
| * 页面的初始数据 | |||||
| */ | |||||
| data: { | |||||
| newsList: [], | |||||
| input: null, | |||||
| openid: null | |||||
| }, | |||||
| /** | |||||
| * 生命周期函数--监听页面加载 | |||||
| */ | |||||
| onLoad: function (options) { | |||||
| var _this = this; | |||||
| wx.getStorage({ | |||||
| key: 'OPENID', | |||||
| success: function (res) { | |||||
| _this.setData({ | |||||
| openid: res.data | |||||
| }) | |||||
| }, | |||||
| }) | |||||
| var _this = this; | |||||
| //建立连接 | |||||
| wx.connectSocket({ | |||||
| url: `ws://192.168.18.156/webSocket/{"userno":"666678","messageModule":"007"}`, | |||||
| }) | |||||
| //连接成功 | |||||
| wx.onSocketOpen(function () { | |||||
| console.log('连接成功'); | |||||
| }) | |||||
| wx.onSocketMessage(function (res) { | |||||
| var list = []; | |||||
| list = _this.data.newsList; | |||||
| var _data = JSON.parse(res.data); | |||||
| list.push(_data); | |||||
| console.log(list,'输出的list') | |||||
| _this.setData({ | |||||
| newsList: list | |||||
| }) | |||||
| }) | |||||
| }, | |||||
| /** | |||||
| * 生命周期函数--监听页面初次渲染完成 | |||||
| */ | |||||
| onReady: function () { | |||||
| }, | |||||
| /** | |||||
| * 生命周期函数--监听页面显示 | |||||
| */ | |||||
| onShow: function () { | |||||
| }, | |||||
| /** | |||||
| * 生命周期函数--监听页面隐藏 | |||||
| */ | |||||
| onHide: function () { | |||||
| }, | |||||
| /** | |||||
| * 生命周期函数--监听页面卸载 | |||||
| */ | |||||
| onUnload: function () { | |||||
| }, | |||||
| /** | |||||
| * 页面相关事件处理函数--监听用户下拉动作 | |||||
| */ | |||||
| onPullDownRefresh: function () { | |||||
| }, | |||||
| /** | |||||
| * 页面上拉触底事件的处理函数 | |||||
| */ | |||||
| onReachBottom: function () { | |||||
| }, | |||||
| /** | |||||
| * 用户点击右上角分享 | |||||
| */ | |||||
| onShareAppMessage: function () { | |||||
| }, | |||||
| send: function () { | |||||
| var _this = this; | |||||
| if (_this.data.input) { | |||||
| wx.sendSocketMessage({ | |||||
| data: _this.data.input, | |||||
| }) | |||||
| var list = []; | |||||
| list = this.data.newsList; | |||||
| var temp = { 'message': _this.data.input, 'date': $util.formatTime(new Date()), type: 1 }; | |||||
| list.push(temp); | |||||
| console.log(list,'我发出的list') | |||||
| this.setData({ | |||||
| newsList: list, | |||||
| input: null | |||||
| }) | |||||
| } | |||||
| }, | |||||
| bindChange: function (res) { | |||||
| this.setData({ | |||||
| input: res.detail.value | |||||
| }) | |||||
| }, | |||||
| back: function () { | |||||
| wx.closeSocket(); | |||||
| console.log('连接断开'); | |||||
| } | |||||
| }) |
+ 3
- 0
pages/msgModule/wechat2 copy/wechat2.json
查看文件
| { | |||||
| "usingComponents": {} | |||||
| } |
+ 44
- 0
pages/msgModule/wechat2 copy/wechat2.wxml
查看文件
| <view class='top-content'> | |||||
| <!-- <image src='images/back.png' class='back-icon' bindtap='back'></image> --> | |||||
| <view class="weui-cells__title" style=' display: flex;flex-direction: row;justify-content: center;margin-left:210rpx'> | |||||
| 匿名聊天X | |||||
| </view> | |||||
| </view> | |||||
| <view class='news'> | |||||
| <view class="historycon"> | |||||
| <scroll-view scroll-y="true" class="history"> | |||||
| <block wx:for="{{newsList}}" wx:key> | |||||
| <!-- 此处为other --> | |||||
| <view wx:if="{{item.type==0}}"> | |||||
| <view> | |||||
| <text class='chat-time'>{{item.date}}</text> | |||||
| </view> | |||||
| <view class='other-record'> | |||||
| <!-- <image class='other-head-img' src='images/headimg.png'></image> --> | |||||
| <view class='other-record-content-triangle'></view> | |||||
| <view class='other-record-content'>{{item.message}}</view> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 此处为结尾 --> | |||||
| <!-- 此处为own --> | |||||
| <view wx:else> | |||||
| <view> | |||||
| <text class='chat-time'>{{item.date}}</text> | |||||
| </view> | |||||
| <view class='own-record'> | |||||
| <view class='own-record-content'>{{item.message}}</view> | |||||
| <view class='own-record-content-triangle'></view> | |||||
| <image class='own-head-img' src='images/headimg.png'></image> | |||||
| </view> | |||||
| </view> | |||||
| <!-- own结尾 --> | |||||
| </block> | |||||
| </scroll-view> | |||||
| </view> | |||||
| </view> | |||||
| <view class='hei' id="hei"></view> | |||||
| <view class="sendmessage"> | |||||
| <input class="chat-input" type="emoji" bindinput="bindChange" confirm-type="done" value='{{input}}' placeholder="" /> | |||||
| <button class="btn" type="primary" plain="true" bindtap='send'>发送</button> | |||||
| <input style='display:none' type="" bindinput="bindChange" confirm-type="done" placeholder="" /> | |||||
| </view> |
+ 228
- 0
pages/msgModule/wechat2 copy/wechat2.wxss
查看文件
| page { | |||||
| background-color: white; | |||||
| } | |||||
| .tab { | |||||
| padding: 20rpx 20rpx 40rpx 50rpx; | |||||
| height: 20%; | |||||
| background-color: white; | |||||
| } | |||||
| .tab .tent { | |||||
| font-size: 33rpx; | |||||
| margin-bottom: 30rpx; | |||||
| } | |||||
| .jia_img { | |||||
| height: 80rpx; | |||||
| width: 90rpx; | |||||
| } | |||||
| .new_imgtent { | |||||
| height: 180rpx; | |||||
| width: 190rpx; | |||||
| } | |||||
| .tab .fabu { | |||||
| font-size: 33rpx; | |||||
| margin-top: 30rpx; | |||||
| margin-bottom: 30rpx; | |||||
| } | |||||
| .xiahuaxia { | |||||
| width: 80%; | |||||
| text-align: center; | |||||
| margin: 0 auto; | |||||
| position: relative; | |||||
| top: 60rpx; | |||||
| } | |||||
| .chat-time { | |||||
| text-align: center; | |||||
| padding: 5rpx 20rpx 5rpx 20rpx; | |||||
| width: 200rpx; | |||||
| font-size: 26rpx; | |||||
| background-color: #e6e6e6; | |||||
| } | |||||
| .new_top_txt { | |||||
| width: 50%; | |||||
| position: relative; | |||||
| top: 38rpx; | |||||
| text-align: center; | |||||
| margin: 0 auto; | |||||
| font-size: 30rpx; | |||||
| color: #787878; | |||||
| background-color: #f7f7f7; | |||||
| } | |||||
| /* 聊天内容 */ | |||||
| .news { | |||||
| margin-top: 30rpx; | |||||
| text-align: center; | |||||
| margin-bottom: 150rpx; | |||||
| } | |||||
| .img_null { | |||||
| height: 60rpx; | |||||
| } | |||||
| .l { | |||||
| height: 5rpx; | |||||
| width: 20%; | |||||
| margin-top: 30rpx; | |||||
| color: #000; | |||||
| } | |||||
| /* 聊天 */ | |||||
| .my_right { | |||||
| float: right; | |||||
| position: relative; | |||||
| right: 40rpx; | |||||
| } | |||||
| .you_left { | |||||
| float: left; | |||||
| position: relative; | |||||
| left: 5rpx; | |||||
| } | |||||
| .new_img { | |||||
| width: 100rpx; | |||||
| height: 100rpx; | |||||
| border-radius: 50%; | |||||
| } | |||||
| .sanjiao { | |||||
| top: 20rpx; | |||||
| position: relative; | |||||
| width: 0px; | |||||
| height: 0px; | |||||
| border-width: 10px; | |||||
| border-style: solid; | |||||
| } | |||||
| .my { | |||||
| border-color: transparent transparent transparent #95d4ff; | |||||
| } | |||||
| .you { | |||||
| border-color: transparent #95d4ff transparent transparent; | |||||
| } | |||||
| .sendmessage { | |||||
| background-color: white; | |||||
| width: 100%; | |||||
| position: fixed; | |||||
| bottom: 0rpx; | |||||
| display: flex; | |||||
| flex-direction: row; | |||||
| } | |||||
| .sendmessage input { | |||||
| width: 80%; | |||||
| height: 80rpx; | |||||
| background-color: white; | |||||
| line-height: 80rpx; | |||||
| font-size: 28rpx; | |||||
| border: 2rpx solid #d0d0d0; | |||||
| padding-left: 20rpx; | |||||
| } | |||||
| .sendmessage button { | |||||
| border: 2rpx solid white; | |||||
| width: 18%; | |||||
| height: 80rpx; | |||||
| background: #fff; | |||||
| color: #000; | |||||
| line-height: 80rpx; | |||||
| font-size: 28rpx; | |||||
| } | |||||
| .historycon { | |||||
| height: 90%; | |||||
| width: 100%; | |||||
| flex-direction: column; | |||||
| display: flex; | |||||
| margin-top: 100rpx; | |||||
| border-top: 0px; | |||||
| } | |||||
| .hei { | |||||
| margin-top: 50px; | |||||
| height: 20rpx; | |||||
| } | |||||
| .history { | |||||
| height: 100%; | |||||
| margin-top: 30rpx; | |||||
| margin: 20rpx; | |||||
| font-size: 28rpx; | |||||
| line-height: 80rpx; | |||||
| word-break: break-all; | |||||
| } | |||||
| .btn { | |||||
| margin-left: 5rpx; | |||||
| margin-right: 4rpx; | |||||
| } | |||||
| .chat-input { | |||||
| margin-left: 5rpx; | |||||
| } | |||||
| .top-content { | |||||
| display: flex; | |||||
| } | |||||
| .back-icon { | |||||
| margin-top: 25rpx; | |||||
| margin-left: 25rpx; | |||||
| width: 40rpx; | |||||
| height: 40rpx; | |||||
| } | |||||
| .other-record-content { | |||||
| background-color: #ffefdb; | |||||
| width: 380rpx; | |||||
| border-radius: 7px; | |||||
| padding: 0rpx 30rpx 0rpx 30rpx; | |||||
| } | |||||
| .other-record { | |||||
| display: flex; | |||||
| justify-content: flex-start; | |||||
| } | |||||
| .other-head-img { | |||||
| width: 70rpx; | |||||
| height: 70rpx; | |||||
| margin: 10rpx 10rpx 10rpx 10rpx; | |||||
| } | |||||
| .other-record-content-triangle { | |||||
| width: 0; | |||||
| height: 0; | |||||
| border-top: 20rpx solid transparent; | |||||
| border-right: 40rpx solid #ffefdb; | |||||
| border-bottom: 15rpx solid transparent; | |||||
| margin-top: 20rpx; | |||||
| } | |||||
| .own-record { | |||||
| display: flex; | |||||
| justify-content: flex-end; | |||||
| } | |||||
| .own-record-content { | |||||
| background-color: #f0f0f0; | |||||
| width: 380rpx; | |||||
| border-radius: 7px; | |||||
| padding: 0rpx 30rpx 0rpx 30rpx; | |||||
| } | |||||
| .own-record-content-triangle { | |||||
| width: 0; | |||||
| height: 0; | |||||
| border-top: 20rpx solid transparent; | |||||
| border-left: 40rpx solid #f0f0f0; | |||||
| border-bottom: 20rpx solid transparent; | |||||
| margin-top: 20rpx; | |||||
| } | |||||
| .own-head-img { | |||||
| width: 70rpx; | |||||
| height: 70rpx; | |||||
| margin: 10rpx 10rpx 10rpx 10rpx; | |||||
| padding-right: 30rpx; | |||||
| } | |||||
| ::-webkit-scrollbar { | |||||
| width: 0; | |||||
| height: 0; | |||||
| color: transparent; | |||||
| } |
+ 336
- 46
pages/msgModule/wechat2/wechat2.js
查看文件
| // pages/msgModule/wechat2/wechat2.js | |||||
| var utils = require("../../../utils/util.js") | |||||
| const app = getApp() | |||||
| const api = require('../../../utils/request.js'); //相对路径 | |||||
| Page({ | Page({ | ||||
| /** | |||||
| * 页面的初始数据 | |||||
| */ | |||||
| data: { | |||||
| /** | |||||
| * 页面的初始数据 | |||||
| */ | |||||
| data: { | |||||
| receivebaseInfo: {}, | |||||
| sendAvatar: '', | |||||
| newsList: [ | |||||
| { | |||||
| date: "2020.10.19", | |||||
| message: '哈喽，好久不见', | |||||
| type: 0 | |||||
| }, | |||||
| { | |||||
| date: "2020.10.20", | |||||
| message: '是呀，好久不见', | |||||
| type: 1 | |||||
| }, | |||||
| { | |||||
| date: "2020.10.20", | |||||
| message: '是呀，好久不见', | |||||
| type: 1 | |||||
| }, | |||||
| ],//消息列表 | |||||
| historyList: [], | |||||
| input: null, | |||||
| openid: null, | |||||
| connectemoji: ["😘", "😡", "😔", "😄", "❤"], | |||||
| emoji_list: ['emoji1i1', 'emoji2i2', 'emoji3i3', 'emoji4i4', 'emoji5i5'], | |||||
| emotionVisible: false, | |||||
| inputShowed: false, | |||||
| scrollTop: 0, | |||||
| inputBottom: '0px', | |||||
| receiveMemberId: null, | |||||
| sendMemberId: null, | |||||
| scrollid: 'scrollid', | |||||
| scrollHeight: '300px', | |||||
| // 下拉刷新 | |||||
| triggered: true, | |||||
| // 历史记录当前页 | |||||
| pageNo: 1, | |||||
| }, | |||||
| }, | |||||
| /** | |||||
| * 生命周期函数--监听页面加载 | |||||
| */ | |||||
| onLoad: function (options) { | |||||
| var receiveMemberId = options.receiveMemberId | |||||
| var sendMemberId = app.globalData.open_id | |||||
| var sendAvatar = app.globalData.sendAvatar | |||||
| var _this = this; | |||||
| _this.setData({ | |||||
| receiveMemberId, | |||||
| sendMemberId, | |||||
| sendAvatar | |||||
| }) | |||||
| console.log(app.globalData.sendAvatar, 'hahha') | |||||
| // 获取内存中的数据 | |||||
| this.getStorageBaseInfo() | |||||
| // 设置滚动区域的高度 | |||||
| this.setScrollHeight() | |||||
| // 获取历史记录 | |||||
| this.getHistory() | |||||
| // 初始化websocket | |||||
| this.initWebSocket() | |||||
| // 页面进入滚动到底部 | |||||
| this.scrollBottom() | |||||
| }, | |||||
| /** | |||||
| * 生命周期函数--监听页面加载 | |||||
| */ | |||||
| onLoad: function (options) { | |||||
| /** | |||||
| * 生命周期函数--监听页面初次渲染完成 | |||||
| */ | |||||
| onReady: function () { | |||||
| }, | |||||
| }, | |||||
| /** | |||||
| * 生命周期函数--监听页面初次渲染完成 | |||||
| */ | |||||
| onReady: function () { | |||||
| // websocket初始化 | |||||
| initWebSocket: function () { | |||||
| var _this = this; | |||||
| var { receiveMemberId, sendMemberId } = this.data | |||||
| //建立连接 | |||||
| wx.connectSocket({ | |||||
| url: `ws://192.168.18.156/webSocket/{"userno":"666678","messageModule":"007"}`,//本地 | |||||
| success: function () { | |||||
| console.log('websocket连接成功~') | |||||
| }, | |||||
| fail: function () { | |||||
| console.log('websocket连接失败~') | |||||
| }, | |||||
| }) | |||||
| }, | |||||
| //连接成功 | |||||
| wx.onSocketOpen(function () { | |||||
| console.log('onSocketOpen', '连接成功,真正的成功'); | |||||
| }) | |||||
| /** | |||||
| * 生命周期函数--监听页面显示 | |||||
| */ | |||||
| onShow: function () { | |||||
| // 接收服务器的消息事件 | |||||
| wx.onSocketMessage(function (res) { | |||||
| }, | |||||
| // 接收到的消息{date,message,type} type类型为 1 是对方的消息 为 0 是自己的消息 | |||||
| /** | |||||
| * 生命周期函数--监听页面隐藏 | |||||
| */ | |||||
| onHide: function () { | |||||
| var list = []; | |||||
| list = _this.data.newsList; | |||||
| var _data = JSON.parse(res.data); | |||||
| }, | |||||
| list.push(_data); | |||||
| console.log(list) | |||||
| _this.setData({ | |||||
| newsList: list | |||||
| }) | |||||
| _this.scrollBottom() | |||||
| }, | |||||
| ) | |||||
| /** | |||||
| * 生命周期函数--监听页面卸载 | |||||
| */ | |||||
| onUnload: function () { | |||||
| // 监听连接关闭 | |||||
| wx.onSocketClose(function () { | |||||
| console.log('监听 WebSocket 连接关闭事件') | |||||
| }) | |||||
| }, | |||||
| }, | |||||
| /** | |||||
| * 页面相关事件处理函数--监听用户下拉动作 | |||||
| */ | |||||
| onPullDownRefresh: function () { | |||||
| // 获取历史记录 | |||||
| getHistory: function () { | |||||
| var { receiveMemberId, sendMemberId, pageNo } = this.data | |||||
| var params = { | |||||
| receiveMemberId, | |||||
| sendMemberId, | |||||
| pageNo, | |||||
| pageSize: 5, | |||||
| } | |||||
| api.get("/zxxt/chat/msg/list", params, (res) => { | |||||
| if (res.code == 'success') { | |||||
| // var historyList = res.data.data | |||||
| var historyList = [...res.data.data, ...this.data.historyList] | |||||
| if (historyList && historyList.length > 0) { | |||||
| historyList.forEach(item => { | |||||
| if (item.send_member_id == sendMemberId) { | |||||
| item.type = 0 | |||||
| } else { | |||||
| item.type = 1 | |||||
| } | |||||
| }); | |||||
| this.setData({ | |||||
| historyList | |||||
| }) | |||||
| console.log(this.data.historyList, '历史记录数据') | |||||
| } else { | |||||
| // 判断是否是第一次进入查看历史记录：是（不显示弹框，不是则显示弹框） | |||||
| if (this.data.pageNo > 1) { | |||||
| wx.showToast({ | |||||
| title: "没有更多历史记录了", | |||||
| icon: 'none', | |||||
| duration: 2000 | |||||
| }) | |||||
| } | |||||
| } | |||||
| } else { | |||||
| if (res.message) { | |||||
| wx.showToast({ | |||||
| title: res.message, | |||||
| icon: 'none', | |||||
| duration: 2000 | |||||
| }) | |||||
| } | |||||
| } | |||||
| }, (res) => { | |||||
| if (res.message) { | |||||
| wx.showToast({ | |||||
| title: res.message, | |||||
| icon: 'none', | |||||
| duration: 2000 | |||||
| }) | |||||
| } | |||||
| }) | |||||
| }, | |||||
| }, | |||||
| // 滚动到底部 | |||||
| scrollBottom: function () { | |||||
| var { newsList } = this.data | |||||
| var scrollid = `scrollid${newsList.length - 1}` | |||||
| this.setData({ | |||||
| scrollid | |||||
| }) | |||||
| }, | |||||
| /** | |||||
| * 页面上拉触底事件的处理函数 | |||||
| */ | |||||
| onReachBottom: function () { | |||||
| // 设置滚动区域的高度 | |||||
| setScrollHeight: function () { | |||||
| const client = wx.getSystemInfoSync().windowHeight // 获取当前窗口的高度 | |||||
| var scrollHeight = (client - 236) + 'px' | |||||
| this.setData({ | |||||
| scrollHeight | |||||
| }) | |||||
| }, | |||||
| }, | |||||
| // 获取内存中聊天列表的用户信息 | |||||
| getStorageBaseInfo: function () { | |||||
| //获取存储信息 | |||||
| wx.getStorage({ | |||||
| key: 'receivebaseInfo', | |||||
| success: (res) => { | |||||
| this.setData({ | |||||
| receivebaseInfo: res.data | |||||
| }) | |||||
| } | |||||
| }) | |||||
| }, | |||||
| /** | |||||
| * 用户点击右上角分享 | |||||
| */ | |||||
| onShareAppMessage: function () { | |||||
| // 自定义下拉刷新 | |||||
| refresh: function () { | |||||
| // 下拉的实际操作 | |||||
| var pageNo = this.data.pageNo + 1 | |||||
| this.setData({ | |||||
| pageNo | |||||
| }) | |||||
| if (this.timer) { | |||||
| clearTimeout(this.timer) | |||||
| } | |||||
| this.timer = setTimeout(() => { | |||||
| this.setData({ | |||||
| triggered: false | |||||
| }) | |||||
| this.getHistory() | |||||
| }, 2000) | |||||
| }, | |||||
| } | |||||
| /** | |||||
| * 生命周期函数--监听页面显示 | |||||
| */ | |||||
| onShow: function () { | |||||
| }, | |||||
| /** | |||||
| * 生命周期函数--监听页面隐藏 | |||||
| */ | |||||
| onHide: function () { | |||||
| }, | |||||
| /** | |||||
| * 生命周期函数--监听页面卸载 | |||||
| */ | |||||
| onUnload: function () { | |||||
| }, | |||||
| /** | |||||
| * 页面相关事件处理函数--监听用户下拉动作 | |||||
| */ | |||||
| onPullDownRefresh: function () { | |||||
| }, | |||||
| /** | |||||
| * 页面上拉触底事件的处理函数 | |||||
| */ | |||||
| onReachBottom: function () { | |||||
| }, | |||||
| /** | |||||
| * 用户点击右上角分享 | |||||
| */ | |||||
| onShareAppMessage: function () { | |||||
| }, | |||||
| send: function () { | |||||
| var _this = this; | |||||
| if (_this.data.input) { | |||||
| wx.sendSocketMessage({ | |||||
| data: _this.data.input, | |||||
| success: (res) => { | |||||
| console.log(res) | |||||
| }, | |||||
| fail: (err) => { | |||||
| console.log('sendSocketMessage', '失败') | |||||
| } | |||||
| }) | |||||
| var list = []; | |||||
| list = this.data.newsList; | |||||
| var temp = { 'message': _this.data.input, 'date': utils.formatTime(new Date()), type: 0 }; | |||||
| list.push(temp); | |||||
| this.setData({ | |||||
| newsList: list, | |||||
| input: null | |||||
| }) | |||||
| this.scrollBottom() | |||||
| // 表情选择隐藏 | |||||
| this.setData({ | |||||
| emotionVisible: false, | |||||
| }) | |||||
| } | |||||
| // this.bottom() | |||||
| const client = wx.getSystemInfoSync().windowHeight // 获取当前窗口的高度 | |||||
| console.log(client, 'shurugaodu') | |||||
| }, | |||||
| bindChange: function (res) { | |||||
| this.setData({ | |||||
| input: res.detail.value, | |||||
| }) | |||||
| }, | |||||
| back: function () { | |||||
| wx.closeSocket(); | |||||
| console.log('连接断开'); | |||||
| }, | |||||
| emotionChange: function () { | |||||
| this.setData({ | |||||
| emotionVisible: !this.data.emotionVisible | |||||
| }) | |||||
| }, | |||||
| addemotion: function (e) { | |||||
| console.log(e.currentTarget.dataset.index, "点了设默默") | |||||
| let { connectemoji, input } = this.data | |||||
| if (input) { | |||||
| input = input + connectemoji[e.currentTarget.dataset.index]; | |||||
| } else { | |||||
| input = connectemoji[e.currentTarget.dataset.index] | |||||
| } | |||||
| console.log(input, '输入框额值') | |||||
| this.setData({ | |||||
| input | |||||
| }) | |||||
| }, | |||||
| // 公共聚焦方法，方法比较笨，但是过度效果平滑流畅 | |||||
| bottom: function () { | |||||
| var that = this; | |||||
| // 获取元素的高度 | |||||
| let query = wx.createSelectorQuery(); | |||||
| query.select('.news').boundingClientRect(rect => { | |||||
| //获取到元素 | |||||
| let scrollTop = rect.height; | |||||
| this.setData({ | |||||
| scrollTop | |||||
| }) | |||||
| }).exec(); | |||||
| console.log(this.data.scrollTop, 'hahah') | |||||
| wx.pageScrollTo({ | |||||
| // scrollTop: this.data.scrollTop + 30, | |||||
| scrollTop: 10000, | |||||
| // duration: 0 | |||||
| }) | |||||
| }, | |||||
| }) | }) |
+ 88
- 2
pages/msgModule/wechat2/wechat2.wxml
查看文件
| <!--pages/msgModule/wechat2/wechat2.wxml--> | |||||
| <text>pages/msgModule/wechat2/wechat2.wxml</text> | |||||
| <!-- pages/wechat2/wechat2.wxml --> | |||||
| <view class="chat-header"> | |||||
| <view class="header-image-box"> | |||||
| <image class="header-image" src="{{receivebaseInfo.avatar}}"></image> | |||||
| </view> | |||||
| <view> | |||||
| <view class="chat-name">{{receivebaseInfo.nickname}}</view> | |||||
| <view class="chat-company"> | |||||
| {{receivebaseInfo.company_name}} - {{receivebaseInfo.department_name}} | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <view class='news'> | |||||
| <view class="historycon"> | |||||
| <scroll-view scroll-y="true" scroll-into-view="{{scrollid}}" scroll-with-animation="{{true}}" style="height:{{scrollHeight}}" class="history" refresher-enabled="true" bindrefresherrefresh="refresh" refresher-triggered="{{triggered}}"> | |||||
| <!-- 历史记录部分start --> | |||||
| <view wx:if="{{historyList.length > 0}}"> | |||||
| <view class="historyText">历史消息</view> | |||||
| <block wx:for="{{historyList}}" wx:key="index"> | |||||
| <!-- 此处为other --> | |||||
| <view wx:if="{{item.type==1}}" id="historyscrollid{{index}}"> | |||||
| <view> | |||||
| <text class='chat-time' style="display:none;">{{item.date}}</text> | |||||
| </view> | |||||
| <view class='other-record'> | |||||
| <image class='other-head-img' src='{{receivebaseInfo.avatar}}'></image> | |||||
| <view class='other-record-content-triangle'></view> | |||||
| <view class='other-record-content'>{{item.content_msg}}</view> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 此处为结尾 --> | |||||
| <!-- 此处为own --> | |||||
| <view id="historyscrollid{{index}}" wx:else> | |||||
| <view> | |||||
| <text class='chat-time' style="display:none;">{{item.date}}</text> | |||||
| </view> | |||||
| <view class='own-record'> | |||||
| <view class='own-record-content'>{{item.content_msg}}</view> | |||||
| <view class='own-record-content-triangle'></view> | |||||
| <image class='own-head-img' src='{{sendAvatar}}'></image> | |||||
| </view> | |||||
| </view> | |||||
| <!-- own结尾 --> | |||||
| </block> | |||||
| <view class="historyText">以上为历史消息</view> | |||||
| </view> | |||||
| <!-- 历史记录部分end --> | |||||
| <block wx:for="{{newsList}}" wx:key="index"> | |||||
| <!-- 此处为other --> | |||||
| <view wx:if="{{item.type==1}}" id="scrollid{{index}}"> | |||||
| <view> | |||||
| <text class='chat-time' style="display:none;">{{item.date}}</text> | |||||
| </view> | |||||
| <view class='other-record'> | |||||
| <image class='other-head-img' src='{{receivebaseInfo.avatar}}'></image> | |||||
| <view class='other-record-content-triangle'></view> | |||||
| <view class='other-record-content'>{{item.message}}</view> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 此处为结尾 --> | |||||
| <!-- 此处为own --> | |||||
| <view id="scrollid{{index}}" wx:else> | |||||
| <view> | |||||
| <text class='chat-time' style="display:none;">{{item.date}}</text> | |||||
| </view> | |||||
| <view class='own-record'> | |||||
| <view class='own-record-content'>{{item.message}}</view> | |||||
| <view class='own-record-content-triangle'></view> | |||||
| <image class='own-head-img' src='{{sendAvatar}}'></image> | |||||
| </view> | |||||
| </view> | |||||
| <!-- own结尾 --> | |||||
| </block> | |||||
| </scroll-view> | |||||
| </view> | |||||
| </view> | |||||
| <view class="sendmessage"> | |||||
| <view class="send-message"> | |||||
| <input class="chat-input" type="text" bindinput="bindChange" confirm-type="done" value='{{input}}' cursor-spacing="16px" hold-keyboard="{{true}}" placeholder="" /> | |||||
| <image class="chat-emotion" src="../../static/img/chat-emotion.svg" bindtap="emotionChange"></image> | |||||
| <button class="btn" bindtap='send'>发送</button> | |||||
| </view> | |||||
| <view class="emotions" wx:if="{{emotionVisible}}"> | |||||
| <view class="emotions-item" wx:for="{{connectemoji}}" wx:key="index" bindtap="addemotion" data-index="{{index}}"> | |||||
| {{item}} | |||||
| </view> | |||||
| </view> | |||||
| </view> |
+ 309
- 1
pages/msgModule/wechat2/wechat2.wxss
查看文件
| /* pages/msgModule/wechat2/wechat2.wxss */ | |||||
| /* pages/wechat2/wechat2.wxss */ | |||||
| page { | |||||
| background-color: #f3f3f4; | |||||
| } | |||||
| /* 新增样式 */ | |||||
| .chat-header { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: flex-start; | |||||
| height: 88px; | |||||
| padding: 0 12px; | |||||
| background-color: #fff; | |||||
| border-radius: 0px 0px 10px 10px; | |||||
| } | |||||
| .header-image-box { | |||||
| width: 64px; | |||||
| height: 64px; | |||||
| border-radius: 50%; | |||||
| margin-right: 12px; | |||||
| } | |||||
| .header-image { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| border-radius: 50%; | |||||
| } | |||||
| .chat-name { | |||||
| color: #333; | |||||
| font-size: 16px; | |||||
| font-weight: 700; | |||||
| } | |||||
| .chat-company { | |||||
| font-size: 14px; | |||||
| color: rgba(81, 81, 81, 100); | |||||
| } | |||||
| .tab { | |||||
| padding: 20rpx 20rpx 40rpx 50rpx; | |||||
| height: 20%; | |||||
| background-color: white; | |||||
| } | |||||
| .tab .tent { | |||||
| font-size: 33rpx; | |||||
| margin-bottom: 30rpx; | |||||
| } | |||||
| .jia_img { | |||||
| height: 80rpx; | |||||
| width: 90rpx; | |||||
| } | |||||
| .new_imgtent { | |||||
| height: 180rpx; | |||||
| width: 190rpx; | |||||
| } | |||||
| .tab .fabu { | |||||
| font-size: 33rpx; | |||||
| margin-top: 30rpx; | |||||
| margin-bottom: 30rpx; | |||||
| } | |||||
| .xiahuaxia { | |||||
| width: 80%; | |||||
| text-align: center; | |||||
| margin: 0 auto; | |||||
| position: relative; | |||||
| top: 60rpx; | |||||
| } | |||||
| .chat-time { | |||||
| text-align: center; | |||||
| padding: 5rpx 20rpx 5rpx 20rpx; | |||||
| width: 200rpx; | |||||
| font-size: 26rpx; | |||||
| background-color: #e6e6e6; | |||||
| } | |||||
| .new_top_txt { | |||||
| width: 50%; | |||||
| position: relative; | |||||
| top: 38rpx; | |||||
| text-align: center; | |||||
| margin: 0 auto; | |||||
| font-size: 30rpx; | |||||
| color: #787878; | |||||
| background-color: #f7f7f7; | |||||
| } | |||||
| /* 聊天内容 */ | |||||
| .news { | |||||
| margin-top: 30px; | |||||
| text-align: center; | |||||
| margin-bottom: 98px; | |||||
| } | |||||
| .img_null { | |||||
| height: 60rpx; | |||||
| } | |||||
| .l { | |||||
| height: 5rpx; | |||||
| width: 20%; | |||||
| margin-top: 30rpx; | |||||
| color: #000; | |||||
| } | |||||
| /* 聊天 */ | |||||
| .my_right { | |||||
| float: right; | |||||
| position: relative; | |||||
| right: 40rpx; | |||||
| } | |||||
| .you_left { | |||||
| float: left; | |||||
| position: relative; | |||||
| left: 5rpx; | |||||
| } | |||||
| .new_img { | |||||
| width: 100rpx; | |||||
| height: 100rpx; | |||||
| border-radius: 50%; | |||||
| } | |||||
| .sanjiao { | |||||
| top: 20rpx; | |||||
| position: relative; | |||||
| width: 0px; | |||||
| height: 0px; | |||||
| border-width: 10px; | |||||
| border-style: solid; | |||||
| } | |||||
| .my { | |||||
| border-color: transparent transparent transparent #95d4ff; | |||||
| } | |||||
| .you { | |||||
| border-color: transparent #95d4ff transparent transparent; | |||||
| } | |||||
| .sendmessage { | |||||
| /* display: flex; | |||||
| align-items: center; | |||||
| flex-direction: row; */ | |||||
| width: 100%; | |||||
| min-height: 60px; | |||||
| position: fixed; | |||||
| bottom: 0px; | |||||
| padding: 0 16px; | |||||
| background-color: rgba(242, 242, 242, 100); | |||||
| box-shadow: 0px -1px 5px 1px rgba(57, 57, 57, 0.1); | |||||
| } | |||||
| .send-message { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| padding: 16px; | |||||
| } | |||||
| .sendmessage input { | |||||
| height: 80rpx; | |||||
| background-color: white; | |||||
| line-height: 80rpx; | |||||
| font-size: 28rpx; | |||||
| padding-left: 20rpx; | |||||
| } | |||||
| .sendmessage button { | |||||
| width: 52px !important; | |||||
| height: 32px; | |||||
| line-height: 32px; | |||||
| background: #169171 !important; | |||||
| color: #fff !important; | |||||
| font-size: 14px !important; | |||||
| text-align: center; | |||||
| border: 0 !important; | |||||
| padding: 0 !important; | |||||
| margin: 0 !important; | |||||
| } | |||||
| .historycon { | |||||
| height: 90%; | |||||
| /* background-color: pink; */ | |||||
| width: 100%; | |||||
| flex-direction: column; | |||||
| display: flex; | |||||
| /* margin-top: 100rpx; */ | |||||
| border-top: 0px; | |||||
| } | |||||
| .hei { | |||||
| margin-top: 50px; | |||||
| height: 20rpx; | |||||
| } | |||||
| .history { | |||||
| /* height: 300px; */ | |||||
| margin-top: 30rpx; | |||||
| margin: 20rpx; | |||||
| font-size: 28rpx; | |||||
| line-height: 80rpx; | |||||
| word-break: break-all; | |||||
| } | |||||
| .chat-input { | |||||
| width: 60%; | |||||
| height: 40px; | |||||
| border: 0; | |||||
| border-radius: 8px; | |||||
| margin-left: 5rpx; | |||||
| } | |||||
| .back-icon { | |||||
| margin-top: 25rpx; | |||||
| margin-left: 25rpx; | |||||
| width: 40rpx; | |||||
| height: 40rpx; | |||||
| } | |||||
| .other-record-content { | |||||
| background-color: #fff; | |||||
| width: 180px; | |||||
| border-radius: 7px; | |||||
| padding: 0 20px; | |||||
| text-align: left; | |||||
| margin: 6px 0; | |||||
| } | |||||
| .other-record { | |||||
| display: flex; | |||||
| justify-content: flex-start; | |||||
| } | |||||
| .other-head-img { | |||||
| width: 70rpx; | |||||
| height: 70rpx; | |||||
| border-radius: 50%; | |||||
| margin: 10rpx 10rpx 10rpx 10rpx; | |||||
| } | |||||
| .other-record-content-triangle { | |||||
| width: 0; | |||||
| height: 0; | |||||
| border-top: 10rpx solid transparent; | |||||
| border-right: 15rpx solid #fff; | |||||
| border-bottom: 10rpx solid transparent; | |||||
| margin-top: 36rpx; | |||||
| } | |||||
| .own-record { | |||||
| display: flex; | |||||
| justify-content: flex-end; | |||||
| padding-right: 30rpx; | |||||
| } | |||||
| .own-record-content { | |||||
| background-color: #209072; | |||||
| width: 180px; | |||||
| border-radius: 8px; | |||||
| padding: 0 20px; | |||||
| color: #fff; | |||||
| text-align: left; | |||||
| margin: 6px 0; | |||||
| } | |||||
| .own-record-content-triangle { | |||||
| width: 0; | |||||
| height: 0; | |||||
| /* border-top: 20rpx solid transparent; | |||||
| border-left: 40rpx solid #F0F0F0; | |||||
| border-bottom: 20rpx solid transparent; */ | |||||
| border-top: 10rpx solid transparent; | |||||
| border-left: 15rpx solid #209072; | |||||
| border-bottom: 10rpx solid transparent; | |||||
| margin-top: 36rpx; | |||||
| } | |||||
| .own-head-img { | |||||
| width: 70rpx; | |||||
| height: 70rpx; | |||||
| border-radius: 50%; | |||||
| margin: 10rpx 10rpx 10rpx 10rpx; | |||||
| } | |||||
| ::-webkit-scrollbar { | |||||
| width: 0; | |||||
| height: 0; | |||||
| color: transparent; | |||||
| } | |||||
| .chat-emotion { | |||||
| width: 28px; | |||||
| height: 28px; | |||||
| margin: 0 12px; | |||||
| } | |||||
| .emotions { | |||||
| display: flex; | |||||
| align-items: flex-start; | |||||
| justify-content: flex-start; | |||||
| width: 200px; | |||||
| height: 36px; | |||||
| margin: 6px; | |||||
| } | |||||
| .emotions-item { | |||||
| width: 24px; | |||||
| height: 24px; | |||||
| margin: 0 8px; | |||||
| } | |||||
| .historyText { | |||||
| color: #ccc; | |||||
| } |
+ 2
- 1
pages/myModule/index.js
查看文件
| } | } | ||||
| // 前往联系客服 | // 前往联系客服 | ||||
| if (code == 'my-contact') { | if (code == 'my-contact') { | ||||
| url = "/pages/outLink/outLink"; | |||||
| // url = "/pages/outLink/outLink"; | |||||
| url = "/pages/msgModule/wechat2/wechat2" | |||||
| } | } | ||||
| wx.navigateTo({ | wx.navigateTo({ | ||||
| url, | url, |
+ 50
- 47
pages/outLink/outLink.js
查看文件
| // pages/outLink/outLink.js | // pages/outLink/outLink.js | ||||
| const app = getApp() | |||||
| Page({ | Page({ | ||||
| /** | |||||
| * 页面的初始数据 | |||||
| */ | |||||
| data: { | |||||
| /** | |||||
| * 页面的初始数据 | |||||
| */ | |||||
| data: { | |||||
| htmlUrl:"", | |||||
| }, | |||||
| }, | |||||
| /** | |||||
| * 生命周期函数--监听页面加载 | |||||
| */ | |||||
| onLoad: function (options) { | |||||
| this.setData({ | |||||
| htmlUrl: `${app.mangerUrl}/customerService/dist/mobileClient.html?entryType=0&miniUrl=` + options.url + `&customerId=` + app.globalData.customerId | |||||
| }) | |||||
| }, | |||||
| /** | |||||
| * 生命周期函数--监听页面加载 | |||||
| */ | |||||
| onLoad: function (options) { | |||||
| /** | |||||
| * 生命周期函数--监听页面初次渲染完成 | |||||
| */ | |||||
| onReady: function () { | |||||
| }, | |||||
| }, | |||||
| /** | |||||
| * 生命周期函数--监听页面初次渲染完成 | |||||
| */ | |||||
| onReady: function () { | |||||
| /** | |||||
| * 生命周期函数--监听页面显示 | |||||
| */ | |||||
| onShow: function () { | |||||
| }, | |||||
| }, | |||||
| /** | |||||
| * 生命周期函数--监听页面显示 | |||||
| */ | |||||
| onShow: function () { | |||||
| /** | |||||
| * 生命周期函数--监听页面隐藏 | |||||
| */ | |||||
| onHide: function () { | |||||
| }, | |||||
| }, | |||||
| /** | |||||
| * 生命周期函数--监听页面隐藏 | |||||
| */ | |||||
| onHide: function () { | |||||
| /** | |||||
| * 生命周期函数--监听页面卸载 | |||||
| */ | |||||
| onUnload: function () { | |||||
| }, | |||||
| }, | |||||
| /** | |||||
| * 生命周期函数--监听页面卸载 | |||||
| */ | |||||
| onUnload: function () { | |||||
| /** | |||||
| * 页面相关事件处理函数--监听用户下拉动作 | |||||
| */ | |||||
| onPullDownRefresh: function () { | |||||
| }, | |||||
| }, | |||||
| /** | |||||
| * 页面相关事件处理函数--监听用户下拉动作 | |||||
| */ | |||||
| onPullDownRefresh: function () { | |||||
| /** | |||||
| * 页面上拉触底事件的处理函数 | |||||
| */ | |||||
| onReachBottom: function () { | |||||
| }, | |||||
| }, | |||||
| /** | |||||
| * 页面上拉触底事件的处理函数 | |||||
| */ | |||||
| onReachBottom: function () { | |||||
| /** | |||||
| * 用户点击右上角分享 | |||||
| */ | |||||
| onShareAppMessage: function () { | |||||
| }, | |||||
| /** | |||||
| * 用户点击右上角分享 | |||||
| */ | |||||
| onShareAppMessage: function () { | |||||
| } | |||||
| } | |||||
| }) | }) |
+ 1
- 1
pages/outLink/outLink.wxml
查看文件
| <!--pages/outLink/outLink.wxml--> | <!--pages/outLink/outLink.wxml--> | ||||
| <web-view src="https://www.baidu.com/"> </web-view> | |||||
| <web-view src="{{htmlUrl}}"></web-view> |
Loading…