channel_business/components/tabbar/tabbar.js

// components/tabbar/tabbar.js
const app = getApp()
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        currentIndex: {
            type: String,
            value: '0',
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        customerId: null,
        list: [
            {
                text: "首页",
                pagePath: "/pages/index/index",
                iconPath: "/images/tabbar/home-bar.png",
                selectedIconPath: "/images/tabbar/home-bar.png",
            },
            {
                text: "发布需求",
                pagePath: "/pages/releaseModule/index",
                iconPath: "/images/tabbar/release-bar.png",
                selectedIconPath: "/images/tabbar/release-bar.png",
            },
            {
                text: "消息",
                pagePath: "/pages/msgModule/index",
                iconPath: "/images/tabbar/msg-bar.png",
                selectedIconPath: "/images/tabbar/msg-bar.png",
                dot: false,
            },
            {
                text: "我的",
                pagePath: "/pages/myModule/index",
                iconPath: "/images/tabbar/my-bar.png",
                selectedIconPath: "/images/tabbar/my-bar.png",
            },
        ]
    },
    /*
    * 
    *  小程序自定义组件挂载后执行
    * 
    */
    ready() {
        const businessCommunicationCustomer = wx.getStorageSync('businessCommunicationCustomer') || null;
        if (businessCommunicationCustomer) {
            this.setData({
                customerId: businessCommunicationCustomer.customerId
            })
        }
        // 获取当前路由，如果是消息页的话要把消息的红点取消
        this.getCurrentRouter();

        // 如果 websocket 没有连接，连接
        if (!app.globalData.isOnSocketOpen) {
            this.initWebSocket();
        }

    },
    /**
     * 组件的方法列表
     */
    methods: {
        // 获取当前路由
        getCurrentRouter() {
            let pages = getCurrentPages();
            let currentPage = null;
            if (pages.length) {
                currentPage = pages[pages.length - 1];
            }
            // 如果是消息页，置空红点
            if (currentPage.route == "pages/msgModule/index") {
                this.setListDot(false);
            }
        },
        // init websocket
        initWebSocket() {
            let _this = this;
            let customerId = this.data.customerId;
            //建立连接
            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('tabbar-连接成功,真正的成功', 'onSocketOpen');
                // 连接成功后，设置为 true 放置反复连接
                app.globalData.isOnSocketOpen = true;
            })

            //  接收服务器的消息事件
            wx.onSocketMessage(function (res) {
                // 收到消息让tabbar消息有红点
                _this.setListDot(true);
            })

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

        },
        // 设置tabbar消息红点显示与否
        setListDot(isShow) {
            let list = this.data.list;
            list.forEach(el => {
                if (el.text == '消息') {
                    el.dot = isShow;
                }
            })
            this.setData({
                list
            })
        },
        // tab切换
        tabChange(e) {
            console.log(e);
            if (e.detail.item.text == "发布需求" || e.detail.item.text == "消息") {
                if (!app.globalData.customerId) {
                    app.goLogin();
                    this.setData({
                        currentIndex: this.data.currentIndex
                    })
                    return
                }
            }

            const url = e.detail.item.pagePath;
            // wx.redirectTo({ url });
            wx.navigateTo({
                url,
                // success: function (res) {
                //     // 通过eventChannel向被打开页面传送数据
                //     res.eventChannel.emit('customerid', { customerid })
                // }
            })
        }
    }
})