channel_business/pages/msgModule/wechat2/wechat2.js

var utils = require("../../../utils/util.js")
const app = getApp()
const $request = require('../../../utils/request.js');
Page({

    /**
    * 页面的初始数据
    */
    data: {
        receivebaseInfo: {
            avatar: "http://wx.qlogo.cn/mmopen/ajNVdqHZLLAIliaZvz5B1ibTzTehYzXdfBZ9hXTL7yuhuCUQGyzbuHeYS2yr8rO5PkbUBbHuWb5h9SibpRQkj3GTw/0",
        },
        sendAvatar: 'http://wx.qlogo.cn/mmopen/ajNVdqHZLLAIliaZvz5B1ibTzTehYzXdfBZ9hXTL7yuhuCUQGyzbuHeYS2yr8rO5PkbUBbHuWb5h9SibpRQkj3GTw/0',
        newsList: [
            // {
            //     date: "2020.10.19",
            //     message: '哈喽，好久不见',
            //     type: 0
            // },
            // {
            //     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',
        // 当前登录用户的ID
        receiveMemberId: null,
        // 对方的聊天ID
        sendMemberId: null,
        scrollid: 'scrollid',
        scrollHeight: '300px',
        //  下拉刷新
        triggered: true,
        //  历史记录当前页
        pageNo: 1,
        // 当前产品ID
        businessCommunicationDemandId:null,
    },

    /**
    * 生命周期函数--监听页面加载
    */
    onLoad: function (options) {
        const eventChannel = this.getOpenerEventChannel()
        // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
        
        eventChannel.on('customerid', data => {
            this.setData({
                sendMemberId: data.customerid,
                businessCommunicationDemandId:data.businessCommunicationDemandId,
                receivebaseInfo:{
                    avatar:data.chatHeads
                }
            })
            
            //  获取历史记录 
            this.getHistory()
        })
        let customerId = app.globalData.customerId;
        let sendAvatar = app.globalData.businessCommunicationCustomer.chatHeads;
        console.log(customerId, 'customerId');
        var _this = this;
        _this.setData({
            receiveMemberId: customerId,
            sendAvatar
        })
        console.log(this.data.sendAvatar, 'hahha')
        //  获取内存中的数据
        this.getStorageBaseInfo()
        //  设置滚动区域的高度
        this.setScrollHeight()
        // 初始化websocket
        this.initWebSocket()
        //  页面进入滚动到底部
        this.scrollBottom()
    },

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

    },

    //  websocket初始化
    initWebSocket: function () {
        var _this = this;
        let { receiveMemberId, sendMemberId } = this.data;
        // console.log()
        //建立连接
        wx.connectSocket({
            url: `ws://192.168.18.138/webSocket/{"userno":${receiveMemberId},"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 是自己的消息
            let list = [];
            list = _this.data.newsList;
            let _data = JSON.parse(res.data);
            _data.chatRecord = JSON.parse(_data.chatRecord);
            let msgData = {};
            if(_data.chatRecord.sender != _this.data.receiveMemberId){
                msgData.type = 1;
            }else{
                msgData.type = 0;
            }
            msgData.message = _data.chatRecord.content;
            list.push(msgData);
            _this.setData({
                newsList: list
            })
            _this.scrollBottom()
        },
        )

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

    },

    // 获取历史记录
    getHistory() {
        var { sendMemberId,businessCommunicationDemandId } = this.data;
        let url = "";
        if(businessCommunicationDemandId){
            url = '/businessCommunicationDemand/getChatRecordById/' + businessCommunicationDemandId + '/' + sendMemberId + '.action'
        }else{
            url = '/businessCommunicationDemand/getChatRecordById/' + sendMemberId + '.action'
        }
        $request.get(url).then(res => {
            console.log(`------------聊一聊获取历史记录-----------------`)
            console.log(res);
            console.log(`------------聊一聊获取历史记录-----------------`)
            if (res.status == 0) {
                var historyList = [...res.data.chatRecordList, ...this.data.historyList]
                if (historyList && historyList.length > 0) {
                    historyList.forEach(item => {
                        if (item.sender != sendMemberId) {
                            item.type = 0
                        } else {
                            item.type = 1
                        }
                        item.date = utils.formatTime(new Date(item.sendTime))
                    });
                    this.setData({
                        historyList
                    })
                    console.log(this.data.historyList, '历史记录数据')
                }
            }
        }).catch(err => {
            console.log(err)
        })
    },

    // 滚动到底部
    scrollBottom: function () {
        var { newsList } = this.data
        var scrollid = `scrollid${newsList.length - 1}`
        this.setData({
            scrollid
        })
    },

    // 设置滚动区域的高度
    setScrollHeight: function () {
        const client = wx.getSystemInfoSync().windowHeight    // 获取当前窗口的高度
        var scrollHeight = (client - 136) + 'px'
        this.setData({
            scrollHeight
        })
    },

    // 获取内存中聊天列表的用户信息
    getStorageBaseInfo: function () {
        //获取存储信息
        wx.getStorage({
            key: 'receivebaseInfo',
            success: (res) => {
                this.setData({
                    receivebaseInfo: res.data
                })
            }
        })
    },

    // 自定义下拉刷新
    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) {
            let { sendMemberId ,receiveMemberId ,businessCommunicationDemandId} = _this.data;
            let params = {
                sender: receiveMemberId, // 发件人Id
                addressee: sendMemberId, // 收件人Id
                transactionId: businessCommunicationDemandId, // 产品ID
                content: _this.data.input
            };
            $request.post('/businessCommunicationDemand/addChatRecord.action',params).then(res => {
                console.log(`------------聊一聊保存记录-----------------`)
                console.log(res);
                console.log(`------------聊一聊保存记录-----------------`)
            }).catch(err => {
                console.log(err)
            })
            // wx.sendSocketMessage({
            //     data: _this.data.input,
            //     success: (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() {
        console.log(`测试打开表情`)
        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
        })
    },
})