Browse Source

完成消息也websockt链接!

release/210823_需求对对碰
王饶冀 3 years ago
parent
commit
91d7a961db

+ 11
- 6
components/listItem/listItem.js View File

type: String, type: String,
value: "", value: "",
}, },
customerId:{
type:Number,
value:null,
customerId: {
type: Number,
value: null,
}, },
}, },


if (this.data.listClass == 'disabled-model-view') { if (this.data.listClass == 'disabled-model-view') {
return return
} }
let dataset = e.currentTarget.dataset;
this.triggerEvent('getItem', dataset.item);
let value = e.currentTarget.dataset.value;
this.triggerEvent('getItem', value);
}, },
// 进入个人主页 // 进入个人主页
goHomePage(e) { goHomePage(e) {
url: "/pages/msgModule/wechat2/wechat2", url: "/pages/msgModule/wechat2/wechat2",
success: function (res) { success: function (res) {
// 通过eventChannel向被打开页面传送数据 // 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('customerid', { customerid: item.customerId, businessCommunicationDemandId: item.businessCommunicationDemandId, chatHeads: item.chatHeads })
res.eventChannel.emit('customerid', {
customerid: item.customerId,
businessCommunicationDemandId: item.businessCommunicationDemandId,
chatHeads: item.chatHeads,
info: item.info
})
} }
}) })
}, },

+ 1
- 1
components/listItem/listItem.wxml View File

</view> </view>
<!-- 内容 --> <!-- 内容 -->
<view class="list-content"> <view class="list-content">
<view bindtap="goDetails" data-item="{{ item }}">
<view bindtap="goDetails" data-value="{{ item.businessCommunicationDemandId }}">
<!-- 详情 --> <!-- 详情 -->
<view> <view>
<text space class="list-details-text" user-select wx:if="{{ pageStatus == 'detatil' || pageStatus == 'myRelease' }}">{{ item.info }} <text space class="list-details-text" user-select wx:if="{{ pageStatus == 'detatil' || pageStatus == 'myRelease' }}">{{ item.info }}

+ 47
- 13
pages/index/components/listDetails/Details.js View File

*/ */
data: { data: {
// 页面Loading // 页面Loading
pageLoading: false,
pageLoading: true,
customerId: null, customerId: null,
// 路由接受的参数 // 路由接受的参数
currentData: {}, currentData: {},
currentIndex: 0, currentIndex: 0,
// 当前登录器用户登录ID // 当前登录器用户登录ID
userCustomerId: null, userCustomerId: null,
businessCommunicationDemandId: "",
}, },


/** /**
* 生命周期函数--监听页面加载 * 生命周期函数--监听页面加载
*/ */
onLoad(option) { onLoad(option) {
// console.log(option,`option触发--11`)
this.setData({
businessCommunicationDemandId: option.businessCommunicationDemandId
})
}, },
onShow() { onShow() {
this.setData({
pageLoading: true,
})
const businessCommunicationCustomer = wx.getStorageSync('businessCommunicationCustomer') || null; const businessCommunicationCustomer = wx.getStorageSync('businessCommunicationCustomer') || null;
if (businessCommunicationCustomer) { if (businessCommunicationCustomer) {
this.setData({ this.setData({
userCustomerId:businessCommunicationCustomer.customerId
userCustomerId: businessCommunicationCustomer.customerId
}) })
} }
const listDetail = wx.getStorageSync('listDetail') || null;
this.setData({
currentData: listDetail,
type: listDetail.type.join(),
pageLoading: true,
})
// const listDetail = wx.getStorageSync('listDetail') || null;
// this.setData({
// currentData: listDetail,
// type: listDetail.type.join(),
// pageLoading: true,
// })
// 获取当前数据
this.getCurrentData();
if (app.globalData.customerId) { if (app.globalData.customerId) {
this.setData({ this.setData({
customerId: app.globalData.customerId customerId: app.globalData.customerId
}) })
this.getIsCollect();
// this.getIsCollect();
} else { } else {
this.getListData(); this.getListData();
} }
// 热门详情点击 // 热门详情点击
goDetails(e) { goDetails(e) {
this.setData({ this.setData({
currentData: e.detail,
type: e.detail.type.join(),
currentData: null,
type: [],
pageLoading: true, pageLoading: true,
listData: [], listData: [],
page: 1, page: 1,
onRefresh: true, onRefresh: true,
isCollect: false, isCollect: false,
businessCommunicationDemandId:e.detail
}) })
this.getCurrentData();
wx.pageScrollTo({ wx.pageScrollTo({
scrollTop: 0, scrollTop: 0,
}); });
this.getIsCollect();
},
getCurrentData() {
let { businessCommunicationDemandId } = this.data;
$request.get('/businessCommunicationDemand/getDemandByDemandId.action',
{ demandId: businessCommunicationDemandId }
).then(res => {
if (res.status == 0) {
let listDetail = res.data;
listDetail.createdOn = $util.formatTime(new Date(listDetail.createdOn), true);
listDetail.createdOn = listDetail.createdOn.replaceAll('/', '-');
if (typeof listDetail.type == 'string') {
listDetail.type = listDetail.type.split(',');
}
this.setData({
currentData: listDetail,
type: listDetail.type,
})
this.getIsCollect();
}
}).catch(err => {
console.log(err, 'error appletLogin')
})
}, },
// 判断是否收藏 // 判断是否收藏
getIsCollect() { getIsCollect() {
).then(res => { ).then(res => {
if (res.status == 0) { if (res.status == 0) {
this.setData({ this.setData({
isCollect: res.data == 0 ? false : true
isCollect: res.data == 0 ? false : true,
pageLoading: true,
}) })
} }
this.getListData(); this.getListData();

+ 2
- 3
pages/index/index.js View File

}, },
// 进入详情 // 进入详情
goDetails(e) { goDetails(e) {
wx.setStorageSync('listDetail', e.detail)
wx.navigateTo({
url: '/pages/index/components/listDetails/Details',
wx.reLaunch({
url: '/pages/index/components/listDetails/Details?businessCommunicationDemandId=' + e.detail,
}) })
}, },
// 获取tab数据 // 获取tab数据

+ 47
- 6
pages/msgModule/index.js View File

* 生命周期函数--监听页面加载 * 生命周期函数--监听页面加载
*/ */
onLoad() { onLoad() {
const businessCommunicationCustomer = wx.getStorageSync('businessCommunicationCustomer') || null;
if (businessCommunicationCustomer) {
this.setData({
customerId: businessCommunicationCustomer.customerId
})
}
// 初始化websocket
this.initWebSocket();
}, },
onShow(){
// this.getMsgData();
onShow() {
// 初始化数据
this.initData(); this.initData();
}, },
// websocket初始化
initWebSocket: function () {
var _this = this;
let { customerId } = _this.data;
// console.log()
//建立连接
wx.connectSocket({
url: `ws://192.168.18.138/webSocket/{"userno":${customerId},"messageModule":"010"}`,//本地
success: function () {
console.log('消息页-websocket连接成功~')
},
fail: function () {
console.log('消息页-websocket连接失败~')
},
})

//连接成功
wx.onSocketOpen(function () {
console.log('消息页-连接成功,真正的成功', 'onSocketOpen');
})

// 接收服务器的消息事件
wx.onSocketMessage(function (res) {
// 接收到的消息{date,message,type} type类型为 1 是对方的消息 为 0 是自己的消息
console.log(res,'消息页----收到新消息')
_this.initData();
})

// 监听连接关闭
wx.onSocketClose(function () {
console.log('监听 WebSocket 连接关闭事件')
})

},
// 关闭顶部关注
closeTopShow() { closeTopShow() {
this.setData({ this.setData({
topShow: false topShow: false
} }
}) })
}, },
initData(){
initData() {
this.setData({ this.setData({
pageLoading: true,
page:1,
page: 1,
size: 10, size: 10,
msgData: [], msgData: [],
}) })

+ 61
- 43
pages/msgModule/wechat2/wechat2.js View File

historyList: [], historyList: [],
input: null, input: null,
openid: null, openid: null,
connectemoji: ["😘", "😡", "😔", "😄", "❤","😍","👼"],
connectemoji: ["😘", "😡", "😔", "😄", "❤", "😍", "👼", ""],
emoji_list: ['emoji1i1', 'emoji2i2', 'emoji3i3', 'emoji4i4', 'emoji5i5'], emoji_list: ['emoji1i1', 'emoji2i2', 'emoji3i3', 'emoji4i4', 'emoji5i5'],
emotionVisible: false, emotionVisible: false,
inputShowed: false, inputShowed: false,
pageNo: 1, pageNo: 1,
// 当前产品ID // 当前产品ID
businessCommunicationDemandId: null, businessCommunicationDemandId: null,
// 当前产品详情
productInfo: null,
}, },


/** /**
* 生命周期函数--监听页面加载 * 生命周期函数--监听页面加载
*/ */
onLoad: function (options) {
onLoad(options) {
const eventChannel = this.getOpenerEventChannel() const eventChannel = this.getOpenerEventChannel()
// 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据 // 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据


eventChannel.on('customerid', data => { eventChannel.on('customerid', data => {
let productInfo = data.info ? data.info : null;
let businessCommunicationDemandId = null;
if (data.businessCommunicationDemandId) {
businessCommunicationDemandId = data.businessCommunicationDemandId;
}
this.setData({ this.setData({
sendMemberId: data.customerid, sendMemberId: data.customerid,
businessCommunicationDemandId: data.businessCommunicationDemandId,
businessCommunicationDemandId,
receivebaseInfo: { receivebaseInfo: {
avatar: data.chatHeads
}
avatar: data.chatHeads,
},
productInfo
}) })


// 获取历史记录 // 获取历史记录
let customerId = app.globalData.customerId; let customerId = app.globalData.customerId;
let sendAvatar = app.globalData.businessCommunicationCustomer.chatHeads; let sendAvatar = app.globalData.businessCommunicationCustomer.chatHeads;
console.log(customerId, 'customerId'); console.log(customerId, 'customerId');
var _this = this;
_this.setData({
this.setData({
receiveMemberId: customerId, receiveMemberId: customerId,
sendAvatar sendAvatar
}) })
this.setScrollHeight() this.setScrollHeight()
// 初始化websocket // 初始化websocket
this.initWebSocket() this.initWebSocket()
// 页面进入滚动到底部
this.scrollBottom()
// setTimeout(() => {
// }, 100);
}, },

/** /**
* 生命周期函数--监听页面初次渲染完成 * 生命周期函数--监听页面初次渲染完成
*/ */
onReady: function () { onReady: function () {
}, },


// websocket初始化 // websocket初始化
initWebSocket: function () { initWebSocket: function () {
var _this = this; var _this = this;
let { receiveMemberId, sendMemberId } = this.data;
let { receiveMemberId, sendMemberId } = _this.data;
// console.log() // console.log()
//建立连接 //建立连接
wx.connectSocket({ wx.connectSocket({
// 如果产品ID存在 // 如果产品ID存在
console.log(businessCommunicationDemandId, '产品ID是否存在') console.log(businessCommunicationDemandId, '产品ID是否存在')
if (businessCommunicationDemandId) { if (businessCommunicationDemandId) {
// this.data.historyList
if(historyList.length > 0){
if (historyList.length > 0) {
for (let index = historyList.length - 1; index >= 0; index--) { for (let index = historyList.length - 1; index >= 0; index--) {
const element = historyList[index]; const element = historyList[index];
if (element.messageType == 1) { if (element.messageType == 1) {
} }
} }
} }
}else{
} else {
this.sendmsgApi("", 1); this.sendmsgApi("", 1);
} }
} }
} }
// 页面进入滚动到底部
this.scrollBottom()
}).catch(err => { }).catch(err => {
console.log(err) console.log(err)
}) })
// 滚动到底部 // 滚动到底部
scrollBottom: function () { scrollBottom: function () {
var { newsList } = this.data var { newsList } = this.data
var scrollid = `scrollid${newsList.length - 1}`
var scrollid = `scrollid${newsList.length - 1}`;
if (newsList.length == 0) {
scrollid = "scrollid0"
}
this.setData({ this.setData({
scrollid scrollid
}) })
scrollHeight scrollHeight
}) })
}, },

// 进入详情
goDetails(e) {
let value = e.currentTarget.dataset.value;
wx.reLaunch({
url: '/pages/index/components/listDetails/Details?businessCommunicationDemandId=' + value,
})
},
// 获取内存中聊天列表的用户信息 // 获取内存中聊天列表的用户信息
getStorageBaseInfo: function () { getStorageBaseInfo: function () {
//获取存储信息 //获取存储信息


// 自定义下拉刷新 // 自定义下拉刷新
refresh: 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)
// // 下拉的实际操作
// 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 () { onShow: function () {

}, },


/** /**
* 生命周期函数--监听页面隐藏 * 生命周期函数--监听页面隐藏
*/ */
onHide: function () { onHide: function () {
}, },


/** /**
$request.post('/businessCommunicationDemand/addChatRecord.action', params).then(res => { $request.post('/businessCommunicationDemand/addChatRecord.action', params).then(res => {
console.log(`------------聊一聊保存记录-----------------`) console.log(`------------聊一聊保存记录-----------------`)
console.log(res); console.log(res);
// 是由需求点击的聊一聊 保存完信息后需要再发送一条
if (msgType == 1) {
this.sendmsgApi("你好,我对这个需求很有兴趣,可以聊聊吗?", 0);
}
console.log(`------------聊一聊保存记录-----------------`) console.log(`------------聊一聊保存记录-----------------`)
}).catch(err => { }).catch(err => {
console.log(err) console.log(err)
}) })
// wx.sendSocketMessage({
// data: _this.data.input,
// success: (res) => {

// },
// fail: (err) => {
// console.log('sendSocketMessage', '失败')
// }
// })
var list = []; var list = [];
list = this.data.newsList; list = this.data.newsList;
var temp = { 'message': this.data.input, 'date': utils.formatTime(new Date()), type: 0 };
var temp = { 'message': content, 'date': utils.formatTime(new Date()), type: 0 };
temp.date = temp.date.replaceAll('/', '-');
temp.messageType = msgType;
temp.transactionId = transactionId;
if (msgType == 1) {
temp.info = this.data.productInfo;
}
list.push(temp); list.push(temp);
this.setData({ this.setData({
newsList: list, newsList: list,
input: null input: null
}) })


console.log(this.data.newsList, 'this.data.newsList')
this.scrollBottom() this.scrollBottom()
// 表情选择隐藏 // 表情选择隐藏
this.setData({ this.setData({

+ 52
- 44
pages/msgModule/wechat2/wechat2.wxml View File

<!-- pages/wechat2/wechat2.wxml --> <!-- pages/wechat2/wechat2.wxml -->
<view class='news'> <view class='news'>
<view class="historycon"> <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">
<scroll-view scroll-y="{{ true }}" scroll-into-view="{{scrollid}}" scroll-with-animation="{{true}}" style="height:{{scrollHeight}}" class="history">
<!-- 历史记录部分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 && item.messageType != 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='{{item.senderHeadPortrait}}'></image>
<view class='other-record-content-triangle'></view>
<view class='other-record-content'>{{item.content}}</view>
</view>
</view>
<!-- 此处为结尾 -->
<!-- 此处为own -->
<view id="historyscrollid{{index}}" wx:elif="{{item.type==0 && item.messageType != 1}}">
<view>
<text class='chat-time' style="display:none;">{{item.date}}</text>
</view>
<view class='own-record'>
<view class='own-record-content'>{{item.content}}</view>
<view class='own-record-content-triangle'></view>
<image class='own-head-img' src='{{item.senderHeadPortrait}}'></image>
</view>
</view>
<view wx:else class="product-item-view" bindtap="goDetails" data-value="{{ item.transactionId }}">
<view class="content-view">
<view class="product-info-item">{{ item.object.info }}</view>
<view class="product-send-time">{{ item.date }} 由你发起沟通</view>
</view>
</view>
<!-- own结尾 -->
</block>
<view class="historyText" id="lastHistoryText">以上为历史消息</view>
</view>
<!-- 历史记录部分end -->
<view wx:if="{{ newsList.length == 0}}" id="scrollid0"></view>
<block wx:for="{{newsList}}" wx:key="index">
<!-- 此处为other --> <!-- 此处为other -->
<view wx:if="{{item.type==1 && item.messageType != 1}}" id="historyscrollid{{index}}">
<view wx:if="{{item.type==1 && item.messageType != 1}}" id="scrollid{{index}}">
<view> <view>
<text class='chat-time' style="display:none;">{{item.date}}</text> <text class='chat-time' style="display:none;">{{item.date}}</text>
</view> </view>
<view class='other-record'> <view class='other-record'>
<image class='other-head-img' src='{{item.senderHeadPortrait}}'></image>
<image class='other-head-img' src='{{receivebaseInfo.avatar}}'></image>
<view class='other-record-content-triangle'></view> <view class='other-record-content-triangle'></view>
<view class='other-record-content'>{{item.content}}</view>
<view class='other-record-content'>{{item.message}}</view>
</view> </view>
</view> </view>
<!-- 此处为结尾 --> <!-- 此处为结尾 -->
<!-- 此处为own --> <!-- 此处为own -->
<view id="historyscrollid{{index}}" wx:elif="{{item.type==0 && item.messageType != 1}}">
<view id="scrollid{{index}}" wx:elif="{{item.type==0 && item.messageType != 1}}">
<view> <view>
<text class='chat-time' style="display:none;">{{item.date}}</text> <text class='chat-time' style="display:none;">{{item.date}}</text>
</view> </view>
<view class='own-record'> <view class='own-record'>
<view class='own-record-content'>{{item.content}}</view>
<view class='own-record-content'>{{item.message}}</view>
<view class='own-record-content-triangle'></view> <view class='own-record-content-triangle'></view>
<image class='own-head-img' src='{{item.senderHeadPortrait}}'></image>
<image class='own-head-img' src='{{sendAvatar}}'></image>
</view> </view>
</view> </view>
<view wx:else class="product-item-view">
<!-- own结尾 -->
<view wx:else class="product-item-view" bindtap="goDetails" data-value="{{ item.transactionId }}">
<view class="content-view"> <view class="content-view">
{{ item.object.info }} \ {{ item.date }}
<view class="product-info-item">{{ item.info }}</view>
<view class="product-send-time">{{ item.date }} 由你发起沟通</view>
</view> </view>
</view> </view>
<!-- own结尾 -->
</block> </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> -->
</scroll-view>
</view> </view>
</view> </view>
<view class="sendmessage"> <view class="sendmessage">

+ 29
- 3
pages/msgModule/wechat2/wechat2.wxss View File

/* 聊天内容 */ /* 聊天内容 */


.news { .news {
margin-top: 30px;
margin-top: 10px;
text-align: center; text-align: center;
margin-bottom: 98px; margin-bottom: 98px;
} }
background-color: #fff; background-color: #fff;
box-shadow: -2px 9px 21px 0px box-shadow: -2px 9px 21px 0px
rgba(0, 0, 0, 0.05); rgba(0, 0, 0, 0.05);
max-width: 180rpx;
max-width: 180px;
border-radius: 8px; border-radius: 8px;
padding: 15rpx 20rpx; padding: 15rpx 20rpx;
text-align: left; text-align: left;
background-color: #5e73e5; background-color: #5e73e5;
box-shadow: -2px 9px 21px 0px box-shadow: -2px 9px 21px 0px
rgba(0, 0, 0, 0.05); rgba(0, 0, 0, 0.05);
max-width: 180rpx;
max-width: 180px;
border-radius: 8px; border-radius: 8px;
padding: 15rpx 20rpx; padding: 15rpx 20rpx;
color: #fff; color: #fff;
.product-item-view { .product-item-view {
width: 100%; width: 100%;
margin-bottom: 15rpx; margin-bottom: 15rpx;
margin-top: 15rpx;
box-sizing: border-box; box-sizing: border-box;
padding: 0 20rpx; padding: 0 20rpx;
} }
border-radius: 20rpx; border-radius: 20rpx;
box-shadow: -1px 3px 12px 4px box-shadow: -1px 3px 12px 4px
rgba(186, 186, 186, 0.1); rgba(186, 186, 186, 0.1);
position: relative;
left: -20rpx;
box-sizing: border-box;
}
.product-item-view .product-info-item{
box-sizing: border-box;
padding: 30rpx;
border-bottom: 1px solid #eaedf4;
text-align: left;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 26rpx;
color: #666;
}
.product-item-view .product-send-time{
box-sizing: border-box;
padding: 20rpx 30rpx;
color: #b3bfcb;
font-size: 24rpx;
color: #b3bfcb;
text-align: left;
} }

+ 2
- 3
pages/myModule/components/myCollect/myCollect.js View File



// 进入详情 // 进入详情
goDetails(e) { goDetails(e) {
wx.setStorageSync('listDetail', e.detail)
wx.navigateTo({
url: '/pages/index/components/listDetails/Details',
wx.reLaunch({
url: '/pages/index/components/listDetails/Details?businessCommunicationDemandId=' + e.detail,
}) })
}, },
// 删除收藏 // 删除收藏

+ 1
- 7
pages/releaseModule/index.js View File

console.log('用户点击确定') console.log('用户点击确定')
} else if (res1.cancel) { } else if (res1.cancel) {
let listDetail = res.data; let listDetail = res.data;
if (typeof listDetail.type == 'string') {
listDetail.type = listDetail.type.split(',');
listDetail.createdOn = $util.formatTime(new Date(listDetail.createdOn), true);
listDetail.createdOn = listDetail.createdOn.replaceAll('/', '-');
}
that.clearData(); that.clearData();
wx.setStorageSync('listDetail', listDetail)
wx.reLaunch({ wx.reLaunch({
url: '/pages/index/components/listDetails/Details',
url: '/pages/index/components/listDetails/Details?businessCommunicationDemandId=' + listDetail.businessCommunicationDemandId,
}) })
} }
} }

Loading…
Cancel
Save