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,
        // 当前产品详情
        productInfo: null,
    },

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

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

            //  获取历史记录 
            this.getHistory();
        })
        let customerId = app.globalData.customerId;
        let sendAvatar = app.globalData.businessCommunicationCustomer.chatHeads;
        this.setData({
            receiveMemberId: customerId,
            sendAvatar
        })
        console.log(this.data.sendAvatar, 'hahha')
        //  获取内存中的数据
        this.getStorageBaseInfo()
        //  设置滚动区域的高度
        this.setScrollHeight()
        // 初始化websocket
        this.initWebSocket()
        // setTimeout(() => {
            
        // }, 100);
    },
    /**
    * 生命周期函数--监听页面初次渲染完成
    */
    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;
        $request.get('/businessCommunicationDemand/getChatRecordById/' + sendMemberId + '.action').then(res => {

            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));
                        item.date = item.date.replaceAll('/', '-');
                    });
                    this.setData({
                        historyList
                    })
                    console.log(this.data.historyList, '历史记录数据')
                }
                // 如果产品ID存在
                console.log(businessCommunicationDemandId, '产品ID是否存在')
                if (businessCommunicationDemandId) {
                    if (historyList.length > 0) {
                        for (let index = historyList.length - 1; index >= 0; index--) {
                            const element = historyList[index];
                            if (element.messageType == 1) {
                                if (element.transactionId == businessCommunicationDemandId) {
                                    break;
                                } else {
                                    this.sendmsgApi("", 1);
                                }
                            }
                        }
                    } else {
                        this.sendmsgApi("", 1);
                    }
                }
            }
            //  页面进入滚动到底部
            this.scrollBottom()
        }).catch(err => {
            console.log(err)
        })
    },

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

    // 设置滚动区域的高度
    setScrollHeight: function () {
        const client = wx.getSystemInfoSync().windowHeight    // 获取当前窗口的高度
        var scrollHeight = (client - 136) + 'px'
        this.setData({
            scrollHeight
        })
    },
    // 进入详情
    goDetails(e) {
        let value = e.currentTarget.dataset.value;
        wx.reLaunch({
            url: '/pages/index/components/listDetails/Details?businessCommunicationDemandId=' + value,
        })
    },
    // 获取内存中聊天列表的用户信息
    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 () {
        wx.closeSocket();
    },

    /**
    * 生命周期函数--监听页面卸载
    */
    onUnload: function () {
        wx.closeSocket();
    },

    /**
    * 页面相关事件处理函数--监听用户下拉动作
    */
    onPullDownRefresh: function () {

    },

    /**
    * 页面上拉触底事件的处理函数
    */
    onReachBottom: function () {

    },

    /**
    * 用户点击右上角分享
    */
    onShareAppMessage: function () {

    },
    send: function () {
        var _this = this;
        if (_this.data.input) {
            this.sendmsgApi(_this.data.input, 0);
        }
    },
    sendmsgApi(content, msgType) {
        let { sendMemberId, receiveMemberId, businessCommunicationDemandId } = this.data;
        let transactionId = businessCommunicationDemandId;
        if (!businessCommunicationDemandId) {
            transactionId = this.data.historyList[this.data.historyList.length - 1].transactionId;
        }
        let params = {
            sender: receiveMemberId, // 发件人Id
            addressee: sendMemberId, // 收件人Id
            transactionId, // 产品ID
            content,
            messageType: msgType,

        };
        $request.post('/businessCommunicationDemand/addChatRecord.action', params).then(res => {
            console.log(`------------聊一聊保存记录-----------------`)
            console.log(res);
            // 是由需求点击的聊一聊 保存完信息后需要再发送一条
            if (msgType == 1) {
                this.sendmsgApi("你好，我对这个需求很有兴趣，可以聊聊吗？", 0);
            }
            console.log(`------------聊一聊保存记录-----------------`)
        }).catch(err => {
            console.log(err)
        })
        var list = [];
        list = this.data.newsList;
        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);
        this.setData({
            newsList: list,
            input: null
        })

        console.log(this.data.newsList, 'this.data.newsList')
        this.scrollBottom()
        //  表情选择隐藏
        this.setData({
            emotionVisible: false,
        })
        const client = wx.getSystemInfoSync().windowHeight    // 获取当前窗口的高度
        console.log(client, '当前消息高度')
    },
    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
        })
    },
})