小程序的聊天页面

发布于 2024-08-20  557 次阅读


在这里遇到的问题,一个是键盘遮挡输入框并顶起页面,一个回到底部,一个是数据下拉加载渲染不在原来浏览位置的问题,添加表情的时候获取焦点位置

键盘遮挡输入框并顶起页面

先给输入框设置键盘弹起方式:adjustPosition='false',然后使用@keyboardheightchangeAPI获取键盘的高度(这里安卓和ios有区别,与blur事件调用的顺序不一样),给输入框设置内边距为键盘的高度

回到顶部

因为我用的是scroll-view,所以我用的方法是使用csstransform: rotate(180deg)scroll-view翻转过来,则scroll-view的头部变成页面的底部,使用scroll-viewscroll-top的属性,设置为0,则回到底部,容器翻转则聊天记录也是倒过来的,需要使用csstransform: rotate(180deg);转为正向

数据下拉加载渲染不在原来浏览位置

因为上面我们把scroll-view翻转了,则调用scroll-view的触底加载事件@scrolltolower,因为聊天记录是正序,我刚开始的想法是把数据反转过来,再把数据合并到数组的前面,结果是不行,最后使用的是flex布局中的flex-direction: column-reverse;,这样就不会跳动了

添加表情的时候获取焦点位置

在输入框的blur的事件中使用event.target.cursor获取焦点的位置

完整代码

// 整体代码
<template>
    <view class="hotelChat">
        <view class="shop_change" @click="shopVisible=true">
            <view class="shop_box">
                <image class="shop_icon" src="http://htres.78plat.com/miniv3/static/exchange_shop_name.png" mode="">
                </image>
                <view class="shop_name">
                    {{currentShopName}}
                </view>
            </view>
            <view class="change_box">
                <!-- <view class="change_name">
                    切换门店
                </view> -->
                <image class="change_icon" src="../../static/change_hotel.png" mode=""></image>
            </view>
        </view>
        <!-- 聊天内容 -->
        <!-- :scroll-into-view="scrollToView" -->
        <view class="scroll_box">
            <scroll-view :scroll-anchoring="true" :scroll-top="currentTop" :lower-threshold="100" :upper-threshold="100"
                class="chat_scroll" scroll-y="true" :scroll-with-animation="false" @scrolltolower="upper"
                @scroll="handle_scroll">
                <view class="chat_main" :style="{paddingBottom:inputh+'px'}">
                    <view class="chat_info" v-for="(item,index) in unshiftmsg" :key="index" :id="'msg'+ index">
                        <view class="chat_time" v-if="item.time != ''">{{item.time}}</view>
                        <view class="msg_m msg_left" v-if="item.fromUid !=  fromUid">
                            <image class="user_img" :src="hotelUrl"></image>
                            <view class="message" v-if="item.content">
                                <!-- 文字 -->
                                <view class="msg_text">{{item.content}}</view>
                            </view>
                        </view>
                        <view class="msg_m msg_right" v-if="item.fromUid ==  fromUid">
                            <image class="user_img" :src="userUrl"></image>
                            <view class="message" v-if="item.content">
                                <!-- 文字 -->
                                <view class="msg_text">{{item.content}}</view>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>

        <view class="bottom_box">
            <view class="bottom_content" :style="{paddingBottom:keyboardHeight+'px'}">
                <view class="input_box">
                    <!-- 文本框 -->
                    <textarea :maxlength="-1" :class="{'text_box':!isIos}" :adjustPosition='false' :show-confirm-bar="false"
                        ref="inputMsg" confirm-type="send" :always-embed="true" :cursorSpacing="20" auto-height="true"
                        class="chat_send btn" :value="msgValue" @focus="focus" @confirm="inputConfirm"
                        @input="handleInput" @keyboardheightchange='keyboardheightchange' @blur="hideBorad"></textarea>
                </view>
                <view class="emoji_icon" @click="openEmoji">
                    <image src="https://htres.78plat.com/miniv3/static/zhuhao/emoji.png" mode=""></image>
                </view>

                <view class="confirm_box" @click="inputConfirm">
                    发送
                </view>
            </view>
            <div class="emoji_box" v-if="isEmoji">
                <div class="emoji_info" v-for="(item, index) in emojiList" :key="index" @click="emojiClick(item)">
                    {{item.icon}}
                </div>
            </div>

        </view>

        <u-picker v-if="shopVisible" :show="shopVisible" @cancel='shopSelectCancel' @confirm='shopSelectConfirm'
            :columns="[shopList]" keyName="shopName">
        </u-picker>
    </view>
</template>
<script>
    import {
        EMOJI_ARR
    } from "../../common/utils/emoji.js"
    import config from "../../common/config/index.js"
    // import webSocketClass from "../../common/utils/socket.js"
    // import io from "../../lib/weapp.socket.io.js"; // 引入 socket.io
    import socketIO from "../../common/utils/newSocket.js"
    export default {
        data() {
            return {
                shopVisible: false,
                selectShopId: '',
                currentShopName: '',
                currrentIndex: 0,
                shopList: [],
                shopId: '320',
                mobile: '18365211931',
                merchantId: "110060146",
                guestName: '李在明',
                emojiList: [],
                scrollToView: '',
                fromUid: '110060146_320_18365211931',
                userType: '',
                toUid: '',
                channel: '',
                url: '',
                msgValue: '',
                unshiftmsg: [],
                inputh: 60,
                safeAreaInsets: {
                    left: 0,
                    right: 0,
                    top: 0,
                    bottom: 0
                },
                pageSize: 15,
                pageNo: 1,
                total: 0,
                isEmoji: false,
                cursorIndex: 0,
                currentTop: 0,
                scrollHeight: 0,
                centerEmoji: false, // 控制表情先关闭再自动打开的变量
                userUrl: require("../../static/user_default.png"),
                hotelUrl: require("../../static/hotel_default.png"),

                data: null,
                isCreate: false, // WebSocket 是否创建成功
                isConnect: false, // 是否已经连接
                isInitiative: false, // 是否主动断开
                timeoutNumber: 1500, // 心跳检测间隔
                heartbeatTimer: null, // 心跳检测定时器
                reconnectTimer: null, // 断线重连定时器
                socketExamples: null, // websocket实例
                socketOpen: false,
                keyboardHeight: 0, // 键盘高度
                showKeyNum: 0, //键盘打开的次数
                isIos: false
            }
        },
        // 页面卸载时取消监听
        onUnload() {
            console.log("走了这个生命周期");
            // uni.off('message', this.getMessage)
            // this.socketObj.closeSocket()
            this.scoketClose()
            this.socketObj.traderDetailIndex = 100 // 初始化 tabIndex        },
        onLoad(options) {
            console.log(options, "消息的请求数据");
            let chatInfo = options.chatInfo ? JSON.parse(options.chatInfo) : {}
            this.shopId = chatInfo.shopId || ''
            this.merchantId = chatInfo.merchantId || ''
            this.mobile = chatInfo.mobile || ''
            this.guestName = chatInfo.guestName || ''
            this.userUrl = chatInfo.userUrl || require("../../static/user_default.png")
            this.roomNo = chatInfo.roomNo || ''
            this.inType = chatInfo.inType || 1 // 1 预订单   2在住单
            this.emojiList = EMOJI_ARR[1]['iconArr']
                .concat(EMOJI_ARR[2]['iconArr'])
                .concat(EMOJI_ARR[3]['iconArr'])
            const systemInfo = uni.getSystemInfoSync();
            this.isIos = systemInfo.platform == 'ios' ? true : false
            console.log(systemInfo, "===========");
            this.safeAreaInsets = systemInfo.safeAreaInsets || {
                left: 0,
                right: 0,
                top: 0,
                bottom: 0
            };
            // console.log(this.emojiList,"标枪===");
            // uni.on('message', this.getMessage)

        },
        onShow() {

            this.getAllShop()
        },
        mounted() {
            this.getElementHeight()
            // this.initInputMsg()
        },
        methods: {
            async getAllShop() {
                let params = {

                }
                const res = await this.Http.indexService.getAllShop(params)
                console.log(res, "这是酒店列表");
                this.shopList = res?.retdata?.shops || []
                console.log(this.shopList, "============");
                if (this.shopList.length>0) {
                    let centerIndex = this.shopList.findIndex((value, keys, arr) => {
                        return value.id = this.shopId;
                    })
                    if(centerIndex>=0) {
                        this.currrentIndex = centerIndex
                        this.selectShopId = this.shopList[centerIndex].shopId;
                        this.merchantId = this.shopList[centerIndex].code;
                        // this.integral = this.shopList[e.indexs[0]].integral;
                        this.currentShopName = this.shopList[centerIndex].shopName;
                        this.hotelUrl = this.shopList[centerIndex].shopImg || require("../../static/hotel_default.png");
                    }
                }
                this.getWebsocket()
            },
            shopSelectConfirm(e) {
                console.log(e)
                this.currrentIndex = e.indexs[0];
                this.selectShopId = this.shopList[e.indexs[0]].shopId;
                this.merchantId = this.shopList[e.indexs[0]].code;
                // this.integral = this.shopList[e.indexs[0]].integral;
                this.currentShopName = this.shopList[e.indexs[0]].shopName;
                this.shopVisible = false;
                if (this.shopId != this.selectShopId) {
                    this.shopId = this.selectShopId
                    this.scoketClose()
                    this.socketObj.traderDetailIndex = 100 // 初始化 tabIndex
                    this.unshiftmsg = []
                    this.pageNo = 1
                    this.getWebsocket()
                }

            },
            shopSelectCancel() {
                this.shopVisible = false;
            },
            handle_scroll(event) {
                console.log(event.detail.scrollTop, "滚动的距离", event);
                // this.throttle(event => {
                //  scrollTop = event[0].detail.scrollTop;

                // }, 100);
            },
            throttle(fnc, delay) {
                let timer;
                return function() {
                    let _this = this;
                    let args = arguments;
                    if (!timer) {
                        timer = setTimeout(() => {
                            fnc.call(_this, args);
                            timer = null;
                        }, delay);
                    }
                }
            },
            scoketClose() {
                this.socketObj.connectNum = 1
                // const data = {
                //     "value1": "demo1"
                //     "value2": "demo2"
                // }
                // this.socketObj.send(data) // 这是给后端发送特定数据 关闭推送
                this.socketObj.Close() // 主动 关闭连接 , 不会重连
            },
            upper(e) {
                console.log(e, "滚动到顶部", this.pageNonextTick(function() {
                                this.currentTop = 0
                                this.scrollToView = 'msg' + (this.unshiftmsg.length - 1)
                            })
                        }
                        // 当新数据渲染完成后
                        // this.nextTick(async () => {
                        //  const query = uni.createSelectorQuery().in(this)
                        //  query
                        //      .select('.chat_info')
                        //      .boundingClientRect(data => {
                        //          console.log(data,"没有高度==");
                        //          // data.height 为已经渲染的聊天列表内容高度
                        //          // this.scrollHeight 为上一次聊天列表内容高度, 如果当前为第一次, 那么this.scrollHeight应该为0
                        //          // 设置滚动条的高度
                        //          this.scrollTop = data?.height - this.scrollHeight
                        //          // (注意: 如果在模板中, upper-threshold设置的值不为0, 为50, 那么可以加上该值), 如:
                        //          // this.scrollTop = data.height - this.scrollHeight + 50
                        //          // 将本次列表渲染后的内容高度记录下来, 方便下次加载时使用
                        //          this.scrollHeight = data?.height
                        //      })
                        //      .exec()
                        // })
                    }
                });
            },
            // 连接准备接口
            getWebsocket() {
                let that = this
                uni.request({
                    url: config.chatUrl + 'kfs/client/mini', //仅为示例,并非真实接口地址。
                    data: {
                        shopId: this.shopId,
                        merchantId: this.merchantId,
                        mobile: this.mobile,
                        guestName: this.guestName,
                        roomNo: ""
                    },
                    method: 'POST',
                    header: {

                    },
                    success: (res) => {
                        console.log(res.data, '请求的数据');
                        if (res?.data?.retdata?.chatWsPath) {
                            // that.openConnection(res.data.retdata.chatWsPath)
                            let ret = res?.data?.retdata
                            that.fromUid = ret.fromUid // 发送方标识
                            that.toUid = ret.toUid // 接收方标识
                            that.userType = ret.userType // 发送方类型
                            that.channel = ret.channel // 消息通道标识
                            that.url = res.data.retdata.chatWsPath || ''

                            // that.socket()
                            // that.socketObj = new webSocketClass(res.data.retdata.chatWsPath, 1500)
                            // that.socketObj.initSocket()



                            that.socketObj = new socketIO({}, 1600, res.data.retdata.chatWsPath)
                            that.socketObj.connectSocketInit()
                            // 接收数据
                            uni.on("getPositonsOrder", (res) => {
                                console.log(res, "监听不到信息");
                                this.getMessage(res)
                            })
                            // 错误时做些什么
                            uni.on("connectError", (err) => {
                                console.log(err, "错误了");
                            })
                            that.getHistoryList()
                        }
                    }
                });
            },
            openEmoji() {
                this.isEmoji = !this.isEmoji
                this.nextTick(function() {
                    this.currentTop = 0
                    this.scrollToView = 'msg' + (this.unshiftmsg.length - 1)
                })
                // 判断表情框的高度给到键盘高度
                if (this.isEmoji) {
                    this.nextTick(function() {
                        const query = uni.createSelectorQuery().in(this);
                        query.select('.bottom_box').boundingClientRect(data => {
                            // this.emit('heights', data.height);
                            console.log(data, "表情的高度==");
                            this.inputh = data.height

                        }).exec();
                    })

                } else {
                    const query = uni.createSelectorQuery().in(this);
                    query.select('.bottom_content').boundingClientRect(data => {
                        // this.emit('heights', data.height);
                        console.log(data.height, "输入框部分的高度==111111");
                        this.inputh = data.height + this.safeAreaInsets.bottom + 10


                    }).exec();
                }


            },
            emojiClick(item) {
                console.log(this.msgValue.slice(0, this.cursorIndex), "截取的数据", this.msgValue.slice(this.cursorIndex));
                this.msgValue = this.msgValue.slice(0, this.cursorIndex) + item.icon + this.msgValue.slice(this
                    .cursorIndex);
                console.log(this.msgValue.length, "表情的长度");
                this.cursorIndex = this.cursorIndex + 2
            },
            inputConfirm(e) {
                // 完成
                console.log(e, this.msgValue, "=========");
                if (this.msgValue.length <= 0) {
                    uni.showToast({
                        title: "不能发送空白信息",
                        icon: "none",

                    })
                    return
                }
                //时间间隔处理
                let data = {
                    content: this.fixedEncodeURIComponent(this.msgValue),
                    messageType: 20,
                    userType: 4,
                    fromUid: this.fromUid,
                    toUid: this.toUid,
                    channel: this.channel,
                    mobile: this.mobile,
                    guestName: this.guestName,
                    roomNo: ''
                };
                // if (this.socketOpen) {
                //  console.log("发消息不行",JSON.stringify(data));
                //  uni.sendSocketMessage({
                //      data: JSON.stringify(data),
                //      success(res) {
                //          console.log(res, "发送成功==");
                //      },
                //      complete(other) {
                //          console.log(other, "消息毁掉==");
                //      }
                //  });
                // }
                // 发送给服务器消息
                // this.socketObj.sendMsg(JSON.stringify(data));
                this.socketObj.send(data);

                let centerData = {
                    content: this.msgValue,
                    messageType: 20,
                    userType: 4,
                    fromUid: this.fromUid,
                    toUid: this.toUid,
                    channel: this.channel,
                    mobile: this.mobile,
                    guestName: this.guestName,
                    roomNo: '',
                    time: this.formatCurrentTime()
                }
                // this.unshiftmsg.push(centerData);
                // 因为整个数据是反过来的,所以是加在数据最前面
                this.unshiftmsg.unshift(centerData);

                this.msgValue = ''
                this.isEmoji = false;
                this.getElementHeight()

                // 跳转到最后一条数据 与前面的:id进行对照
                this.nextTick(function() {
                    this.currentTop = 0
                    this.scrollToView = 'msg' + (this.unshiftmsg.length - 1)
                })
            },

            formatCurrentTime() {
              const now = new Date();

              const year = now.getFullYear();
              const month = String(now.getMonth() + 1).padStart(2, '0');
              const day = String(now.getDate()).padStart(2, '0');
              const hours = String(now.getHours()).padStart(2, '0');
              const minutes = String(now.getMinutes()).padStart(2, '0');
              const seconds = String(now.getSeconds()).padStart(2, '0');

              return `{year}-{month}-{day}{hours}:{minutes}:{seconds}`;
            },
            handlePaste(e) {
                console.log(e, "复制的走这里了吗");
                e.preventDefault(); // 阻止默认粘贴行为

                const clipboardData = e.clipboardData || window.clipboardData;
                const pastedText = clipboardData.getData('text');

                // 更新文本框的值
                this.msgValue += pastedText;
            },
            initInputMsg() {
                // 获取 textarea 元素
                const inputElement = this.refs.inputMsg;

                if (inputElement) {
                    inputElement.addEventListener("paste", (e) => {
                        e.stopPropagation(); // 阻止事件冒泡
                        e.preventDefault(); // 阻止默认的粘贴行为

                        let text = '';
                        const event = (e.originalEvent || e);

                        if (event.clipboardData && event.clipboardData.getData) {
                            // 现代浏览器中获取粘贴板内容
                            text = event.clipboardData.getData('text/plain');
                        } else if (window.clipboardData && window.clipboardData.getData) {
                            // 旧版 IE 浏览器中获取粘贴板内容
                            text = window.clipboardData.getData('Text');
                        }

                        // 将获取到的文本设置到输入框中
                        inputElement.value = text;
                    });
                }
            },
            handleInput(event) {
                // 获取输入框的内容
                let inputValue = event.target.value;

                // 过滤不在允许列表中的表情
                // inputValue = this.filterText(inputValue);
                console.log(inputValue, "去除表情===");
                // 更新输入框的内容
                this.msgValue = inputValue;

            },
            filterText(input) {
                // 用于匹配表情符号的正则表达式
                const emojiRegex =
                    /([\p{Emoji_Presentation}\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{1F700}-\u{1F77F}]|\S{1,4})/gu;

                // 将表情库转换为一个包含表情符号的数组
                const emojiListArray = this.emojiList.map(e => e.icon);
                // 提取所有匹配的表情符号
                let matches = input.match(emojiRegex);

                // 如果没有匹配,直接返回原内容
                if (!matches) {
                    return input;
                }

                // 过滤掉不在自定义表情库中的表情
                matches = matches.filter(emoji => emojiListArray.includes(emoji));

                // 将不符合的表情符号替换为一个空字符串
                let filteredText = input.replace(emojiRegex, match =>
                    emojiListArray.includes(match) ? match : ''
                );

                return filteredText;
            },
            filterEmojis(text) {
                // 使用正则表达式匹配表情
                const emojiRegex =
                    /[\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{1F700}-\u{1F77F}\u{1F780}-\u{1F7FF}\u{1F800}-\u{1F8FF}\u{1F900}-\u{1F9FF}\u{1FA00}-\u{1FA6F}\u{1FA70}-\u{1FAFF}]/gu;

                // 只保留允许的表情
                return text.split('').filter(char => {
                    return !emojiRegex.test(char) || this.emojiList.includes(char);
                }).join('');
            },
            // 发送消息
            sendMessage(data) {
                const param = {
                    value: '我是一个消息'
                }
                this.socketObj.sendMsg(data)
            },
            getMessage(msg) {
                console.log(msg, "接收到的消息");
                if (msg.data.fromUid != this.fromUid) {
                    msg.data.content = decodeURIComponent(msg.data.content)
                    this.unshiftmsg.push(msg.data);
                }
            },
            //获取高度方法
            getElementHeight() {

                const query = uni.createSelectorQuery().in(this);
                query.select('.bottom_content').boundingClientRect(data => {
                    // this.emit('heights', data.height);
                    console.log(data.height, "输入框部分的高度==2222");
                    this.inputh = data.height + this.safeAreaInsets.bottom + 10
                    this.scrollToView = '';

                    this.nextTick(() => {
                        this.currentTop = 0
                        this.scrollToView = 'msg' + (this.unshiftmsg.length - 1);
                    });

                }).exec();
            },
            keyboardheightchange(e) {
                if (this.isIos) {
                    if (e.detail.height == 0 && this.isEmoji) {
                        this.isEmoji = false
                        this.centerEmoji = true
                    } else {
                        this.isEmoji = false
                        this.centerEmoji = false
                    }
                }

                this.currentTop = 0
                this.scrollToView = 'msg' + (this.unshiftmsg.length - 1)
                console.log(e, "获取键盘的高度");
                this.keyboardHeight = e.detail.height - this.safeAreaInsets.bottom / 2;
                this.showKeyNum++;
                // if(this.isEmoji && this.keyboardHeight==0) {
                //  this.isEmoji = true;
                //  this.nextTick(function() {
                //      const query = uni.createSelectorQuery().in(this);
                //      query.select('.bottom_box').boundingClientRect(data => {
                //          // this.emit('heights', data.height);
                //          console.log(data, "表情的高度==");
                //          this.inputh = data.height

                //      }).exec();
                //      this.currentTop = 0
                //      this.scrollToView = 'msg' + (this.unshiftmsg.length - 1)
                //  })
                // } else {
                //  this.isEmoji = false;
                //  const query = uni.createSelectorQuery().in(this);
                //  query.select('.bottom_content').boundingClientRect(data => {
                //      // this.emit('heights', data.height);
                //      console.log(data.height, "输入框部分的高度==111111");
                //      this.inputh = data.height + this.safeAreaInsets.bottom + 10


                //  }).exec();
                // }
                // setTimeout(() => {
                //  uni.pageScrollTo({
                //      scrollTop: 2000
                //  });
                // }, 200)
            },
            hideBorad(event) {
                console.log(event.target.cursor, "光标的位置", event);
                this.cursorIndex = event.target.cursor
                this.showKeyNum = 2;
                this.keyboardHeight = 0;
                setTimeout(() => {
                    console.log(this.centerEmoji, 'this.isEmoji', this.isEmoji);
                    if (!this.isIos) {
                        this.centerEmoji = false
                        this.nextTick(function() {
                            const query = uni.createSelectorQuery().in(this);
                            query.select('.bottom_box').boundingClientRect(data => {
                                // this.emit('heights', data.height);
                                console.log(data, "表情的高度==");
                                this.inputh = data.height

                            }).exec();
                            this.currentTop = 0
                            this.scrollToView = 'msg' + (this.unshiftmsg.length - 1)
                        })
                    } else {
                        if (this.centerEmoji) {
                            this.isEmoji = true
                            this.centerEmoji = false
                            this.nextTick(function() {
                                const query = uni.createSelectorQuery().in(this);
                                query.select('.bottom_box').boundingClientRect(data => {
                                    // this.emit('heights', data.height);
                                    console.log(data, "表情的高度==");
                                    this.inputh = data.height

                                }).exec();
                                this.currentTop = 0
                                this.scrollToView = 'msg' + (this.unshiftmsg.length - 1)
                            })
                        } else {
                            // console.log("这是隐藏键盘的获取的高度");
                            this.getElementHeight()
                        }
                    }





                }, 10)


                this.$nextTick(() => {
                    this.currentTop = 0
                    this.scrollToView = 'msg' + (this.unshiftmsg.length - 1);
                });
            },
            // 输入框聚焦
            focus() {
                console.log("获取到焦点");
                //关闭其他项
                this.isEmoji = false;
                setTimeout(() => {
                    this.getElementHeight()

                }, 10)
            },
            fixedEncodeURIComponent(str) {
                return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
                    return '%' + c.charCodeAt(0).toString(16).toUpperCase();
                });
            },

            socket() {
                //创建webSocket
                uni.connectSocket({
                    url: this.url,
                    header: {
                        'content-type': 'application/json'
                    },
                    success(res) {
                        console.log('成功', res);
                    },
                })

                // 监听WebSocket连接打开事件
                uni.onSocketOpen((res) => {
                    this.socketOpen = true;
                    console.log(res, 'WebSocket连接已打开!');
                });

                // 接收websocket消息及处理
                uni.onSocketMessage((res) => {
                    console.log('收到服务器内容:', res);
                });

                uni.onSocketClose((res) => {
                    console.log('WebSocket 已关闭!', res);
                });


                uni.onSocketError((res) => {
                    console.log(res, 'WebSocket连接打开失败,请检查!');
                });
            }

        },
    }
</script>
<style lang="scss" scoped>
    ::v-deep .u-popup {
        position: fixed;
    }

    .hotelChat {
        height: 100vh;
        background-color: #F0F0F0;
        display: flex;
        flex-direction: column;

        .shop_change {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20rpx 30rpx;
            box-sizing: border-box;
            background: #EDEDED;
            border-bottom: 1px solid #D5D5D5;

            .shop_box {
                display: flex;
                align-items: center;
                flex: 1;
                margin-right: 20rpx;

                .shop_name {
                    font-size: 28rpx;
                    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                    font-weight: 400;
                    color: #555555;
                    margin-left: 12rpx;
                    flex: 1;
                }

                .shop_icon {
                    width: 38rpx;
                    height: 38rpx;
                }
            }

            .change_box {
                flex-shrink: 0;
                display: flex;
                align-items: center;

                .change_name {
                    font-size: 28rpx;
                    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                    font-weight: 400;
                    color: #3D9EFD;
                }

                .change_icon {
                    width: 42rpx;
                    height: 26rpx;
                    margin-left: 8rpx;
                }
            }

        }

        .scroll_box {
            flex: 1;
            overflow: hidden;
        }

        .chat_scroll {

            height: 100%;
            transform: rotate(180deg);

            .chat_main {
                transform: rotate(180deg);
                padding-left: 50rpx;
                padding-right: 20rpx;
                padding-top: 20rpx;
                // padding-bottom: 120rpx;  //获取动态高度
                // display: flex;
                // flex-direction: column;
                display: flex; 
                flex-direction: column-reverse;
                .chat_info {
                    // transform: rotate(180deg);
                }
                .chat_time {
                    font-size: 24rpx;
                    color: rgba(39, 40, 50, 0.3);
                    line-height: 34rpx;
                    padding: 10rpx 0rpx;
                    text-align: center;
                }

                .msg_m {
                    display: flex;
                    padding: 20rpx 0;

                    .user_img {
                        flex: none;
                        width: 73.41rpx;
                        height: 73.41rpx;
                        border-radius: 8rpx;

                    }

                    .message {
                        flex: none;
                        max-width: 480rpx;
                    }

                    .msg_text {
                        font-size: 32rpx;
                        color: rgba(39, 40, 50, 1);
                        line-height: 44rpx;
                        padding: 18rpx 24rpx;
                        box-sizing: border-box;
                        word-wrap: break-word;
                    }

                    .msg_img {
                        max-width: 400rpx;
                        border-radius: 20rpx;
                    }

                    .msg_map {
                        background: #fff;
                        width: 464rpx;
                        height: 284rpx;
                        overflow: hidden;

                        .map_name {
                            font-size: 32rpx;
                            color: rgba(39, 40, 50, 1);
                            line-height: 44rpx;
                            padding: 18rpx 24rpx 0 24rpx;
                            //下面四行是单行文字的样式
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 1;
                            overflow: hidden;
                        }

                        .map_address {
                            font-size: 24rpx;
                            color: rgba(39, 40, 50, 0.4);
                            padding: 0 24rpx;
                            //下面四行是单行文字的样式
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 1;
                            overflow: hidden;
                        }

                        .map {
                            padding-top: 8rpx;
                            width: 464rpx;
                            height: 190rpx;
                        }
                    }

                    .voice {
                        // width: 200rpx;
                        min-width: 100rpx;
                        max-width: 400rpx;
                    }

                    .voice_img {
                        width: 28rpx;
                        height: 36rpx;
                    }
                }

                .msg_left {
                    flex-direction: row;

                    .user_img {
                        margin-right: 20rpx;
                    }

                    .msg_text {
                        margin-left: 16rpx;
                        background-color: #fff;
                        // border-radius: 0rpx 20rpx 20rpx 20rpx;
                        border-radius: 8rpx;
                    }

                    .ms_img {
                        margin-left: 16rpx;
                    }

                    .msh_map {
                        margin-left: 16rpx;
                        border-radius: 0rpx 20rpx 20rpx 20rpx;
                    }

                    .voice {
                        text-align: right;

                    }

                    .voice_img {
                        float: left;
                        transform: rotate(180deg);
                        width: 28rpx;
                        height: 36rpx;
                        padding-bottom: 4rpx;
                    }
                }

                .msg_right {
                    flex-direction: row-reverse;

                    .user_img {
                        margin-left: 20rpx;
                    }

                    .msg_text {
                        margin-right: 16rpx;
                        // background-color: rgba(255, 228, 49, 0.8);
                        background-color: rgba(255, 214, 173, 1);
                        ;
                        // border-radius: 20rpx 0rpx 20rpx 20rpx;
                        border-radius: 8rpx;
                    }

                    .ms_img {
                        margin-right: 16rpx;
                    }

                    .msh_map {
                        margin-left: 16rpx;
                        border-radius: 20rpx 0rpx 20rpx 20rpx;
                    }

                    .voice {
                        text-align: left;

                    }

                    .voice_img {
                        float: right;
                        padding: 4rpx;
                        width: 28rpx;
                        height: 36rpx;
                    }
                }
            }
        }

        .bottom_box {
            position: fixed;
            width: 100%;
            bottom: 0;
            left: 0;
            box-sizing: border-box;
            background: rgba(244, 244, 244, 0.96);
            border-top: 1px solid rgba(39, 40, 50, 0.1);
            // padding-bottom: env(safe-area-inset-bottom,20rpx);
            /* 或者改变高度*/
            padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
            padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
            box-sizing: border-box;

            .emoji_box {
                height: 520rpx;
                width: 100%;
                overflow-y: auto;
                display: flex;
                flex-wrap: wrap;

                .emoji_info {
                    width: 50rpx;
                    height: 50rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                    margin: 20rpx;
                    font-size: 50rpx;
                }
            }


            .bottom_content {
                display: flex;
                align-items: flex-end;
                box-sizing: border-box;
                padding: 20rpx 30rpx;
                width: 100%;

            }

            .confirm_box {
                flex-shrink: 0;
                height: 60rpx;
                width: 110rpx;
                border-radius: 10rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #26bf4c; // 1AAD19
                margin-left: 30rpx;
                color: #fff;

            }

            .input_box {
                flex: 1;

                .text_box {
                    padding: 10rpx;
                    box-sizing: border-box;
                }

                textarea {

                    width: 100%;
                    // min-height: 73rpx;
                    // line-height: 40rpx;
                }
            }

            .emoji_icon {
                height: 60rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 50rpx;
                flex-shrink: 0;
                margin-left: 30rpx;

                image {
                    width: 50rpx;
                    height: 50rpx;

                    flex-shrink: 0;
                }
            }

            .btn {
                flex: 1;
                background-color: #fff;
                border-radius: 10rpx;
                // padding: 20rpx;
                max-height: 160rpx;
            }

            .chat_send {
                // line-height: 44rpx;
            }
        }
    }
</style>

// newSocket.js
class socketIO {
    constructor(data, time, url) {
        this.socketTask = null
        this.is_open_socket = false //避免重复连接
        this.url = url ? url : api.websocketUrl  //连接地址
        this.data = data ? data : null
        this.connectNum = 1 // 重连次数
        this.traderDetailIndex = 100 // traderDetailIndex ==2 重连
        this.accountStateIndex = 100 // accountStateIndex ==1 重连
        this.followFlake = false // followFlake == true 重连
        //心跳检测
        this.timeout = time ? time : 15000 //多少秒执行检测
        this.heartbeatInterval = null //检测服务器端是否还活着
        this.reconnectTimeOut = null //重连之后多久再次重连
    }

    // 进入这个页面的时候创建websocket连接【整个页面随时使用】
    connectSocketInit(data) {
        this.data = data
        this.socketTask = uni.connectSocket({
            url: this.url,
            success: () => {
                console.log("正准备建立websocket中...");
                // 返回实例
                return this.socketTask
            },
        });
        this.socketTask.onOpen((res) => {
            this.connectNum = 1
            console.log("WebSocket连接正常!");
            this.send(data)
            clearInterval(this.reconnectTimeOut)
            clearInterval(this.heartbeatInterval)
            this.is_open_socket = true;
            this.start();
            // 注:只有连接正常打开中 ,才能正常收到消息
            this.socketTask.onMessage((e) => {
                // 字符串转json
                let res = JSON.parse(e.data);
                console.log(e,"获取到消息res---------->", res) // 这里 查看 推送过来的消息
                if (res) {

                    uni.emit('getPositonsOrder', JSON.parse(res));                }
            });
        })
        // 监听连接失败,这里代码我注释掉的原因是因为如果服务器关闭后,和下面的onclose方法一起发起重连操作,这样会导致重复连接
        uni.onSocketError((res) => {
            console.log('WebSocket连接打开失败,请检查!');
            this.socketTask = null
            this.is_open_socket = false;
            clearInterval(this.heartbeatInterval)
            clearInterval(this.reconnectTimeOut)
            uni.off('getPositonsOrder')
            if (this.connectNum < 6) {
                uni.showToast({
                    title: `WebSocket连接失败,正尝试第{this.connectNum}次连接`,
                    icon: "none"
                })
                this.reconnect();
                this.connectNum += 1
            } else {
                uni.emit('connectError');
                this.connectNum = 1
            }

        });
        // 这里仅是事件监听【如果socket关闭了会执行】
        this.socketTask.onClose(() => {
            console.log("已经被关闭了-------")
            clearInterval(this.heartbeatInterval)
            clearInterval(this.reconnectTimeOut)
            this.is_open_socket = false;
            this.socketTask = null
            uni.off('getPositonsOrder')
            if (this.connectNum<6) {
                this.reconnect();
            } else {
                uni.emit('connectError');
                this.connectNum = 1
            }

        })
    }
    // 主动关闭socket连接
    Close() {
        if (!this.is_open_socket) {
            return
        }
        this.socketTask.close({
            success() {
                console.log("SocketTask 关闭成功");
                // uni.showToast({
                //  title: 'SocketTask 关闭成功',
                //  icon: "none"
                // });
            }
        });
    }
    //发送消息
    send(data) {
        // console.log("data---------->", data);
        // 注:只有连接正常打开中 ,才能正常成功发送消息
        if (this.socketTask) {
            this.socketTask.send({
                data: JSON.stringify(data),
                async success() {
                    console.log("消息发送成功");
                },
            });
        }
    }
    //开启心跳检测
    start() {
        this.heartbeatInterval = setInterval(() => {
            this.send({
                "traderid": 10260,
                "type": "Ping"
            });
        }, this.timeout)
    }
    //重新连接
    reconnect() {
        //停止发送心跳
        clearInterval(this.heartbeatInterval)
        //如果不是人为关闭的话,进行重连
        if (!this.is_open_socket && (this.traderDetailIndex == 2 || this.accountStateIndex == 0 || this
            .followFlake)) {
            this.reconnectTimeOut = setInterval(() => {
                this.connectSocketInit(this.data);
            }, 5000)
        }
    }
    /**
     * @description 将 scoket 数据进行过滤 
     * @param {array} array
     * @param {string} type 区分 弹窗 openposition 分为跟随和我的
     */
    arrayFilter(array, type = 'normal', signalId = 0) {
        let arr1 = []
        let arr2 = []
        let obj = {
            arr1: [],
            arr2: []
        }
        arr1 = array.filter(v => v.flwsig == true)
        arr2 = array.filter(v => v.flwsig == false)
        if (type == 'normal') {
            if (signalId) {
                arr1 = array.filter(v => v.flwsig == true && v.sigtraderid == signalId)
                return arr1
            } else {
                return arr1.concat(arr2)
            }
        } else {
            if (signalId > 0) {
                arr1 = array.filter(v => v.flwsig == true && v.sigtraderid == signalId)
                obj.arr1 = arr1
            } else {
                obj.arr1 = arr1
            }
            obj.arr2 = arr2

            return obj
        }
    }
}
module.exports = socketIO
// emoji.js
/** 独立的 emoji 库 */
export const EMOJI_ARR = [{
    name: '热门',
    iconArr: [{
        className: 'bg-1f4b0',
        icon: '💰'
    },
    {
        className: 'bg-1f604',
        icon: '😄'
    },
    {
        className: 'bg-1f60d',
        icon: '😍'
    },
    {
        className: 'bg-1f631',
        icon: '😱'
    },
    {
        className: 'bg-1f602',
        icon: '😂'
    },
    {
        className: 'bg-1f353',
        icon: '🍓'
    },
    {
        className: 'bg-1f37a',
        icon: '🍺'
    },
    {
        className: 'bg-f2615',
        icon: '☕'
    },
    {
        className: 'bg-1f340',
        icon: '🍀'
    },
    {
        className: 'bg-1f331',
        icon: '🌱'
    },
    {
        className: 'bg-f2728',
        icon: '✨'
    },
    {
        className: 'bg-f26a1',
        icon: '⚡'
    },
    {
        className: 'bg-1f4ab',
        icon: '💫'
    },
    {
        className: 'bg-1f4a5',
        icon: '💥'
    },
    {
        className: 'bg-1f3b5',
        icon: '🎵'
    },
    {
        className: 'bg-1f44f',
        icon: '👏'
    },
    {
        className: 'bg-1f4aa',
        icon: '💪'
    },
    {
        className: 'bg-1f44d',
        icon: '👍'
    },
    {
        className: 'bg-1f449',
        icon: '👉'
    },
    {
        className: 'bg-1f448',
        icon: '👈'
    },
    {
        className: 'bg-1f447',
        icon: '👇'
    },
    {
        className: 'bg-1f446',
        icon: '👆'
    },
    {
        className: 'bg-1f44a',
        icon: '👊'
    },
    {
        className: 'bg-1f48b',
        icon: '💋'
    },
    {
        className: 'bg-1f48d',
        icon: '💍'
    },
    {
        className: 'bg-1f451',
        icon: '👑'
    },
    {
        className: 'bg-1f4a5',
        icon: '💥'
    },
    {
        className: 'bg-1f495',
        icon: '💕'
    },
    {
        className: 'bg-1f496',
        icon: '💖'
    },
    {
        className: 'bg-1f389',
        icon: '🎉'
    },
    {
        className: 'bg-1f47b',
        icon: '👻'
    },
    {
        className: 'bg-f3299',
        icon: '㊙'
    },
    {
        className: 'bg-1f51e',
        icon: '🔞'
    },
    {
        className: 'bg-f2705',
        icon: '✅'
    },
    {
        className: 'bg-f2b07',
        icon: '⬇'
    },
    {
        className: 'bg-f27a1',
        icon: '➡'
    },
    {
        className: 'bg-1f4af',
        icon: '💯'
    },
    {
        className: 'bg-f2714',
        icon: '✔'
    },
    {
        className: 'bg-f2611',
        icon: '☑'
    },
    {
        className: 'bg-f2757',
        icon: '❗'
    },
    {
        className: 'bg-f2753',
        icon: '❓'
    },
    {
        className: 'bg-f2b55',
        icon: '⭕'
    },
    {
        className: 'bg-1f680',
        icon: '🚀'
    },
    {
        className: 'bg-f2708',
        icon: '✈'
    },
    {
        className: 'bg-1f697',
        icon: '🚗'
    },
    {
        className: 'bg-f26a0',
        icon: '⚠'
    },
    {
        className: 'bg-f2693',
        icon: '⚓'
    },
    {
        className: 'bg-1f4e2',
        icon: '📢'
    },
    {
        className: 'bg-1f514',
        icon: '🔔'
    },
    {
        className: 'bg-1f381',
        icon: '🎁'
    },
    {
        className: 'bg-1f384',
        icon: '🎄'
    },
    {
        className: 'bg-1f49b',
        icon: '💛'
    },
    {
        className: 'bg-1f525',
        icon: '🔥'
    },
    {
        className: 'bg-1f485',
        icon: '💅'
    },
    {
        className: 'bg-1f64b',
        icon: '🙋'
    },
    {
        className: 'bg-1f004',
        icon: '🀄'
    },
    {
        className: 'bg-1f33b',
        icon: '🌻'
    },
    {
        className: 'bg-1f37b',
        icon: '🍻'
    },
    {
        className: 'bg-1f648',
        icon: '🙈'
    },
    {
        className: 'bg-1f618',
        icon: '😘'
    },
    {
        className: 'bg-f3030',
        icon: '〰'
    }]
},
{
    name: '表情',
    iconArr: [{
        className: 'bg-1f604',
        icon: '😄'
    },
    {
        className: 'bg-1f603',
        icon: '😃'
    },
    {
        className: 'bg-1f600',
        icon: '😀'
    },
    {
        className: 'bg-1f60a',
        icon: '😊'
    },
    {
        className: 'bg-1f609',
        icon: '😉'
    },
    {
        className: 'bg-1f60d',
        icon: '😍'
    },
    {
        className: 'bg-1f618',
        icon: '😘'
    },
    {
        className: 'bg-1f61a',
        icon: '😚'
    },
    {
        className: 'bg-1f617',
        icon: '😗'
    },
    {
        className: 'bg-1f619',
        icon: '😙'
    },
    {
        className: 'bg-1f61c',
        icon: '😜'
    },
    {
        className: 'bg-1f61d',
        icon: '😝'
    },
    {
        className: 'bg-1f61b',
        icon: '😛'
    },
    {
        className: 'bg-1f633',
        icon: '😳'
    },
    {
        className: 'bg-1f601',
        icon: '😁'
    },
    {
        className: 'bg-1f614',
        icon: '😔'
    },
    {
        className: 'bg-1f60c',
        icon: '😌'
    },
    {
        className: 'bg-1f612',
        icon: '😒'
    },
    {
        className: 'bg-1f61e',
        icon: '😞'
    },
    {
        className: 'bg-1f623',
        icon: '😣'
    },
    {
        className: 'bg-1f622',
        icon: '😢'
    },
    {
        className: 'bg-1f602',
        icon: '😂'
    },
    {
        className: 'bg-1f62d',
        icon: '😭'
    },
    {
        className: 'bg-1f62a',
        icon: '😪'
    },
    {
        className: 'bg-1f625',
        icon: '😥'
    },
    {
        className: 'bg-1f630',
        icon: '😰'
    },
    {
        className: 'bg-1f605',
        icon: '😅'
    },
    {
        className: 'bg-1f613',
        icon: '😓'
    },
    {
        className: 'bg-1f629',
        icon: '😩'
    },
    {
        className: 'bg-1f62b',
        icon: '😫'
    },
    {
        className: 'bg-1f628',
        icon: '😨'
    },
    {
        className: 'bg-1f631',
        icon: '😱'
    },
    {
        className: 'bg-1f620',
        icon: '😠'
    },
    {
        className: 'bg-1f621',
        icon: '😡'
    },
    {
        className: 'bg-1f624',
        icon: '😤'
    },
    {
        className: 'bg-1f616',
        icon: '😖'
    },
    {
        className: 'bg-1f606',
        icon: '😆'
    },
    {
        className: 'bg-1f60b',
        icon: '😋'
    },
    {
        className: 'bg-1f637',
        icon: '😷'
    },
    {
        className: 'bg-1f60e',
        icon: '😎'
    },
    {
        className: 'bg-1f634',
        icon: '😴'
    },
    {
        className: 'bg-1f635',
        icon: '😵'
    },
    {
        className: 'bg-1f632',
        icon: '😲'
    },
    {
        className: 'bg-1f61f',
        icon: '😟'
    },
    {
        className: 'bg-1f626',
        icon: '😦'
    },
    {
        className: 'bg-1f627',
        icon: '😧'
    },
    {
        className: 'bg-1f608',
        icon: '😈'
    },
    {
        className: 'bg-1f47f',
        icon: '👿'
    },
    {
        className: 'bg-1f62e',
        icon: '😮'
    },
    {
        className: 'bg-1f62c',
        icon: '😬'
    },
    {
        className: 'bg-1f610',
        icon: '😐'
    },
    {
        className: 'bg-1f615',
        icon: '😕'
    },
    {
        className: 'bg-1f62f',
        icon: '😯'
    },
    {
        className: 'bg-1f636',
        icon: '😶'
    },
    {
        className: 'bg-1f607',
        icon: '😇'
    },
    {
        className: 'bg-1f60f',
        icon: '😏'
    },
    {
        className: 'bg-1f611',
        icon: '😑'
    },
    {
        className: 'bg-1f63a',
        icon: '😺'
    },
    {
        className: 'bg-1f638',
        icon: '😸'
    },
    {
        className: 'bg-1f63b',
        icon: '😻'
    },
    {
        className: 'bg-1f63d',
        icon: '😽'
    },
    {
        className: 'bg-1f63c',
        icon: '😼'
    },
    {
        className: 'bg-1f640',
        icon: '🙀'
    },
    {
        className: 'bg-1f63f',
        icon: '😿'
    },
    {
        className: 'bg-1f639',
        icon: '😹'
    },
    {
        className: 'bg-1f63e',
        icon: '😾'
    },
    {
        className: 'bg-1f479',
        icon: '👹'
    },
    {
        className: 'bg-1f47a',
        icon: '👺'
    }]
},
{
    name: '动物',
    iconArr: [{
        className: 'bg-1f436',
        icon: '🐶'
    },
    {
        className: 'bg-1f43a',
        icon: '🐺'
    },
    {
        className: 'bg-1f42d',
        icon: '🐱'
    },
    {
        className: 'bg-1f42d',
        icon: '🐭'
    },
    {
        className: 'bg-1f439',
        icon: '🐹'
    },
    {
        className: 'bg-1f430',
        icon: '🐰'
    },
    {
        className: 'bg-1f438',
        icon: '🐸'
    },
    {
        className: 'bg-1f42f',
        icon: '🐨'
    },
    {
        className: 'bg-1f43b',
        icon: '🐻'
    },
    {
        className: 'bg-1f437',
        icon: '🐷'
    },
    {
        className: 'bg-1f43d',
        icon: '🐽'
    },
    {
        className: 'bg-1f42e',
        icon: '🐮'
    },
    {
        className: 'bg-1f417',
        icon: '🐗'
    },
    {
        className: 'bg-1f435',
        icon: '🐵'
    },
    {
        className: 'bg-1f412',
        icon: '🐒'
    },
    {
        className: 'bg-1f434',
        icon: '🐴'
    },
    {
        className: 'bg-1f411',
        icon: '🐑'
    },
    {
        className: 'bg-1f418',
        icon: '🐘'
    },
    {
        className: 'bg-1f43c',
        icon: '🐼'
    },
    {
        className: 'bg-1f427',
        icon: '🐧'
    },
    {
        className: 'bg-1f426',
        icon: '🐦'
    },
    {
        className: 'bg-1f424',
        icon: '🐤'
    },
    {
        className: 'bg-1f425',
        icon: '🐥'
    },
    {
        className: 'bg-1f423',
        icon: '🐣'
    },
    {
        className: 'bg-1f414',
        icon: '🐔'
    },
    {
        className: 'bg-1f40d',
        icon: '🐍'
    },
    {
        className: 'bg-1f422',
        icon: '🐢'
    },
    {
        className: 'bg-1f41b',
        icon: '🐛'
    },
    {
        className: 'bg-1f41d',
        icon: '🐝'
    },
    {
        className: 'bg-1f41c',
        icon: '🐜'
    },
    {
        className: 'bg-1f41e',
        icon: '🐞'
    },
    {
        className: 'bg-1f40c',
        icon: '🐌'
    },
    {
        className: 'bg-1f419',
        icon: '🐙'
    },
    {
        className: 'bg-1f420',
        icon: '🐠'
    },
    {
        className: 'bg-1f41f',
        icon: '🐟'
    },
    {
        className: 'bg-1f42c',
        icon: '🐬'
    },
    {
        className: 'bg-1f433',
        icon: '🐳'
    },
    {
        className: 'bg-1f40b',
        icon: '🐋'
    },
    {
        className: 'bg-1f404',
        icon: '🐄'
    },
    {
        className: 'bg-1f40f',
        icon: '🐏'
    },
    {
        className: 'bg-1f400',
        icon: '🐀'
    },
    {
        className: 'bg-1f403',
        icon: '🐃'
    },
    {
        className: 'bg-1f405',
        icon: '🐅'
    },
    {
        className: 'bg-1f407',
        icon: '🐇'
    },
    {
        className: 'bg-1f409',
        icon: '🐉'
    },
    {
        className: 'bg-1f40e',
        icon: '🐎'
    },
    {
        className: 'bg-1f410',
        icon: '🐐'
    },
    {
        className: 'bg-1f413',
        icon: '🐓'
    },
    {
        className: 'bg-1f415',
        icon: '🐕'
    },
    {
        className: 'bg-1f416',
        icon: '🐖'
    },
    {
        className: 'bg-1f401',
        icon: '🐁'
    },
    {
        className: 'bg-1f402',
        icon: '🐂'
    },
    {
        className: 'bg-1f432',
        icon: '🐲'
    },
    {
        className: 'bg-1f421',
        icon: '🐡'
    },
    {
        className: 'bg-1f40a',
        icon: '🐊'
    },
    {
        className: 'bg-1f42b',
        icon: '🐫'
    },
    {
        className: 'bg-1f42a',
        icon: '🐪'
    },
    {
        className: 'bg-1f406',
        icon: '🐆'
    },
    {
        className: 'bg-1f408',
        icon: '🐈'
    },
    {
        className: 'bg-1f429',
        icon: '🐩'
    },
    {
        className: 'bg-1f43e',
        icon: '🐾'
    },
    {
        className: 'bg-1f648',
        icon: '🙈'
    },
    {
        className: 'bg-1f649',
        icon: '🙉'
    },
    {
        className: 'bg-1f480',
        icon: '💀'
    },
    {
        className: 'bg-1f47d',
        icon: '👽'
    },
    {
        className: 'bg-1f63a',
        icon: '😺'
    },
    {
        className: 'bg-1f638',
        icon: '😸'
    },
    {
        className: 'bg-1f63b',
        icon: '😻'
    },
    {
        className: 'bg-1f63d',
        icon: '😽'
    },
    {
        className: 'bg-1f63c',
        icon: '😼'
    },
    {
        className: 'bg-1f640',
        icon: '🙀'
    },
    {
        className: 'bg-1f63f',
        icon: '😿'
    },
    {
        className: 'bg-1f639',
        icon: '😹'
    },
    {
        className: 'bg-1f63e',
        icon: '😾'
    }]
},
{
    name: '食物',
    iconArr: [{
        className: 'bg-f2615',
        icon: '☕'
    },
    {
        className: 'bg-1f375',
        icon: '🍵'
    },
    {
        className: 'bg-1f376',
        icon: '🍶'
    },
    {
        className: 'bg-1f37c',
        icon: '🍼'
    },
    {
        className: 'bg-1f37a',
        icon: '🍺'
    },
    {
        className: 'bg-1f37b',
        icon: '🍻'
    },
    {
        className: 'bg-1f378',
        icon: '🍸'
    },
    {
        className: 'bg-1f379',
        icon: '🍹'
    },
    {
        className: 'bg-1f377',
        icon: '🍷'
    },
    {
        className: 'bg-1f374',
        icon: '🍴'
    },
    {
        className: 'bg-1f355',
        icon: '🍕'
    },
    {
        className: 'bg-1f354',
        icon: '🍔'
    },
    {
        className: 'bg-1f35f',
        icon: '🍟'
    },
    {
        className: 'bg-1f357',
        icon: '🍗'
    },
    {
        className: 'bg-1f356',
        icon: '🍖'
    },
    {
        className: 'bg-1f35d',
        icon: '🍝'
    },
    {
        className: 'bg-1f35b',
        icon: '🍛'
    },
    {
        className: 'bg-1f364',
        icon: '🍤'
    },
    {
        className: 'bg-1f363',
        icon: '🍣'
    },
    {
        className: 'bg-1f365',
        icon: '🍥'
    },
    {
        className: 'bg-1f359',
        icon: '🍙'
    },
    {
        className: 'bg-1f358',
        icon: '🍘'
    },
    {
        className: 'bg-1f35a',
        icon: '🍚'
    },
    {
        className: 'bg-1f35c',
        icon: '🍜'
    },
    {
        className: 'bg-1f372',
        icon: '🍲'
    },
    {
        className: 'bg-1f362',
        icon: '🍢'
    },
    {
        className: 'bg-1f361',
        icon: '🍡'
    },
    {
        className: 'bg-1f373',
        icon: '🍳'
    },
    {
        className: 'bg-1f35e',
        icon: '🍞'
    },
    {
        className: 'bg-1f369',
        icon: '🍩'
    },
    {
        className: 'bg-1f36e',
        icon: '🍮'
    },
    {
        className: 'bg-1f366',
        icon: '🍦'
    },
    {
        className: 'bg-1f368',
        icon: '🍨'
    },
    {
        className: 'bg-1f367',
        icon: '🍧'
    },
    {
        className: 'bg-1f382',
        icon: '🎂'
    },
    {
        className: 'bg-1f370',
        icon: '🍰'
    },
    {
        className: 'bg-1f36a',
        icon: '🍪'
    },
    {
        className: 'bg-1f36b',
        icon: '🍫'
    },
    {
        className: 'bg-1f36c',
        icon: '🍬'
    },
    {
        className: 'bg-1f36d',
        icon: '🍭'
    },
    {
        className: 'bg-1f36f',
        icon: '🍯'
    },
    {
        className: 'bg-1f34e',
        icon: '🍎'
    },
    {
        className: 'bg-1f34f',
        icon: '🍏'
    },
    {
        className: 'bg-1f34a',
        icon: '🍊'
    },
    {
        className: 'bg-1f34b',
        icon: '🍋'
    },
    {
        className: 'bg-1f352',
        icon: '🍒'
    },
    {
        className: 'bg-1f347',
        icon: '🍇'
    },
    {
        className: 'bg-1f349',
        icon: '🍉'
    },
    {
        className: 'bg-1f353',
        icon: '🍓'
    },
    {
        className: 'bg-1f351',
        icon: '🍑'
    },
    {
        className: 'bg-1f348',
        icon: '🍈'
    },
    {
        className: 'bg-1f34c',
        icon: '🍌'
    },
    {
        className: 'bg-1f350',
        icon: '🍐'
    },
    {
        className: 'bg-1f34d',
        icon: '🍍'
    },
    {
        className: 'bg-1f360',
        icon: '🍠'
    },
    {
        className: 'bg-1f346',
        icon: '🍆'
    },
    {
        className: 'bg-1f345',
        icon: '🍅'
    },
    {
        className: 'bg-1f33d',
        icon: '🌽'
    }]
},
{
    name: '自然',
    iconArr: [{
        className: 'bg-1f490',
        icon: '💐'
    },
    {
        className: 'bg-1f338',
        icon: '🌸'
    },
    {
        className: 'bg-1f337',
        icon: '🌷'
    },
    {
        className: 'bg-1f340',
        icon: '🍀'
    },
    {
        className: 'bg-1f339',
        icon: '🌹'
    },
    {
        className: 'bg-1f33b',
        icon: '🌻'
    },
    {
        className: 'bg-1f33a',
        icon: '🌺'
    },
    {
        className: 'bg-1f341',
        icon: '🍁'
    },
    {
        className: 'bg-1f343',
        icon: '🍃'
    },
    {
        className: 'bg-1f342',
        icon: '🍂'
    },
    {
        className: 'bg-1f33f',
        icon: '🌿'
    },
    {
        className: 'bg-1f33e',
        icon: '🌾'
    },
    {
        className: 'bg-1f344',
        icon: '🍄'
    },
    {
        className: 'bg-1f335',
        icon: '🌵'
    },
    {
        className: 'bg-1f334',
        icon: '🌴'
    },
    {
        className: 'bg-1f332',
        icon: '🌲'
    },
    {
        className: 'bg-1f333',
        icon: '🌳'
    },
    {
        className: 'bg-1f330',
        icon: '🌰'
    },
    {
        className: 'bg-1f331',
        icon: '🌱'
    },
    {
        className: 'bg-1f33c',
        icon: '🌼'
    },
    {
        className: 'bg-1f310',
        icon: '🌐'
    },
    {
        className: 'bg-1f31e',
        icon: '🌞'
    },
    {
        className: 'bg-1f31d',
        icon: '🌝'
    },
    {
        className: 'bg-1f31a',
        icon: '🌚'
    },
    {
        className: 'bg-1f311',
        icon: '🌑'
    },
    {
        className: 'bg-1f312',
        icon: '🌒'
    },
    {
        className: 'bg-1f313',
        icon: '🌓'
    },
    {
        className: 'bg-1f314',
        icon: '🌔'
    },
    {
        className: 'bg-1f315',
        icon: '🌕'
    },
    {
        className: 'bg-1f316',
        icon: '🌖'
    },
    {
        className: 'bg-1f317',
        icon: '🌗'
    },
    {
        className: 'bg-1f31c',
        icon: '🌜'
    },
    {
        className: 'bg-1f31b',
        icon: '🌛'
    },
    {
        className: 'bg-1f319',
        icon: '🌙'
    },
    {
        className: 'bg-1f30d',
        icon: '🌍'
    },
    {
        className: 'bg-1f30e',
        icon: '🌎'
    },
    {
        className: 'bg-1f30f',
        icon: '🌏'
    },
    {
        className: 'bg-1f30b',
        icon: '🌋'
    },
    {
        className: 'bg-1f30c',
        icon: '🌌'
    },
    {
        className: 'bg-1f320',
        icon: '🌠'
    },
    {
        className: 'bg-f2b50',
        icon: '⭐'
    },
    {
        className: 'bg-f2600',
        icon: '☀'
    },
    {
        className: 'bg-f26c5',
        icon: '⛅'
    },
    {
        className: 'bg-f2601',
        icon: '☁'
    },
    {
        className: 'bg-f26a1',
        icon: '⚡'
    },
    {
        className: 'bg-f2614',
        icon: '☔'
    },
    {
        className: 'bg-f2744',
        icon: '❄'
    },
    {
        className: 'bg-f26c4',
        icon: '⛄'
    },
    {
        className: 'bg-1f300',
        icon: '🌀'
    },
    {
        className: 'bg-1f301',
        icon: '🌁'
    },
    {
        className: 'bg-1f308',
        icon: '🌈'
    },
    {
        className: 'bg-1f30a',
        icon: '🌊'
    },
    {
        className: 'bg-1f525',
        icon: '🔥'
    },
    {
        className: 'bg-f2728',
        icon: '✨'
    },
    {
        className: 'bg-1f31f',
        icon: '🌟'
    },
    {
        className: 'bg-1f4ab',
        icon: '💫'
    },
    {
        className: 'bg-1f4a5',
        icon: '💥'
    },
    {
        className: 'bg-1f4a2',
        icon: '💢'
    },
    {
        className: 'bg-1f4a6',
        icon: '💦'
    },
    {
        className: 'bg-1f4a7',
        icon: '💧'
    },
    {
        className: 'bg-1f318',
        icon: '🌘'
    },
    {
        className: 'bg-1f4a4',
        icon: '💤'
    },
    {
        className: 'bg-1f4a8',
        icon: '💨'
    }]
},
{
    name: '生肖',
    iconArr: [{
        className: 'bg-1f401',
        icon: '🐁'
    },
    {
        className: 'bg-1f402',
        icon: '🐂'
    },
    {
        className: 'bg-1f405',
        icon: '🐅'
    },
    {
        className: 'bg-1f407',
        icon: '🐇'
    },
    {
        className: 'bg-1f409',
        icon: '🐉'
    },
    {
        className: 'bg-1f40d',
        icon: '🐍'
    },
    {
        className: 'bg-1f40e',
        icon: '🐎'
    },
    {
        className: 'bg-1f410',
        icon: '🐐'
    },
    {
        className: 'bg-1f412',
        icon: '🐒'
    },
    {
        className: 'bg-1f413',
        icon: '🐓'
    },
    {
        className: 'bg-1f415',
        icon: '🐕'
    },
    {
        className: 'bg-1f416',
        icon: '🐖'
    },
    {
        className: 'bg-f2648',
        icon: '♈'
    },
    {
        className: 'bg-f2649',
        icon: '♉'
    },
    {
        className: 'bg-f264a',
        icon: '♊'
    },
    {
        className: 'bg-f264b',
        icon: '♋'
    },
    {
        className: 'bg-f264c',
        icon: '♌'
    },
    {
        className: 'bg-f264d',
        icon: '♍'
    },
    {
        className: 'bg-f264e',
        icon: '♎'
    },
    {
        className: 'bg-f264f',
        icon: '♏'
    },
    {
        className: 'bg-f2650',
        icon: '♐'
    },
    {
        className: 'bg-f2651',
        icon: '♑'
    },
    {
        className: 'bg-f2652',
        icon: '♒'
    },
    {
        className: 'bg-f2653',
        icon: '♓'
    }]
},
{
    name: '运动',
    iconArr: [{
        className: 'bg-1f4f0',
        icon: '📰'
    },
    {
        className: 'bg-1f3a8',
        icon: '🎨'
    },
    {
        className: 'bg-1f3ac',
        icon: '🎬'
    },
    {
        className: 'bg-1f3a4',
        icon: '🎤'
    },
    {
        className: 'bg-1f3a7',
        icon: '🎧'
    },
    {
        className: 'bg-1f3bc',
        icon: '🎼'
    },
    {
        className: 'bg-1f3b5',
        icon: '🎵'
    },
    {
        className: 'bg-1f3b6',
        icon: '🎶'
    },
    {
        className: 'bg-1f3b9',
        icon: '🎹'
    },
    {
        className: 'bg-1f3bb',
        icon: '🎻'
    },
    {
        className: 'bg-1f3b7',
        icon: '🎷'
    },
    {
        className: 'bg-1f3b8',
        icon: '🎸'
    },
    {
        className: 'bg-1f47e',
        icon: '👾'
    },
    {
        className: 'bg-1f3ae',
        icon: '🎮'
    },
    {
        className: 'bg-1f0cf',
        icon: '🃏'
    },
    {
        className: 'bg-1f3b4',
        icon: '🎴'
    },
    {
        className: 'bg-1f004',
        icon: '🀄'
    },
    {
        className: 'bg-1f3b2',
        icon: '🎲'
    },
    {
        className: 'bg-1f3af',
        icon: '🎯'
    },
    {
        className: 'bg-1f3c8',
        icon: '🏈'
    },
    {
        className: 'bg-1f3c0',
        icon: '🏀'
    },
    {
        className: 'bg-f26bd',
        icon: '⚽'
    },
    {
        className: 'bg-f26be',
        icon: '⚾'
    },
    {
        className: 'bg-1f3be',
        icon: '🎾'
    },
    {
        className: 'bg-1f3b1',
        icon: '🎱'
    },
    {
        className: 'bg-1f3c9',
        icon: '🏉'
    },
    {
        className: 'bg-1f3b3',
        icon: '🎳'
    },
    {
        className: 'bg-f26f3',
        icon: '⛳'
    },
    {
        className: 'bg-1f6b5',
        icon: '🚵'
    },
    {
        className: 'bg-1f6b4',
        icon: '🚴'
    },
    {
        className: 'bg-1f3c1',
        icon: '🏁'
    },
    {
        className: 'bg-1f3c7',
        icon: '🏇'
    },
    {
        className: 'bg-1f3c6',
        icon: '🏆'
    },
    {
        className: 'bg-1f3bf',
        icon: '🎿'
    },
    {
        className: 'bg-1f3c2',
        icon: '🏂'
    },
    {
        className: 'bg-1f3ca',
        icon: '🏊'
    },
    {
        className: 'bg-1f3c4',
        icon: '🏄'
    },
    {
        className: 'bg-1f3a3',
        icon: '🎣'
    }]
},
{
    name: '人物',
    iconArr: [{
        className: 'bg-1f442',
        icon: '👂'
    },
    {
        className: 'bg-1f440',
        icon: '👀'
    },
    {
        className: 'bg-1f443',
        icon: '👃'
    },
    {
        className: 'bg-1f445',
        icon: '👅'
    },
    {
        className: 'bg-1f444',
        icon: '👄'
    },
    {
        className: 'bg-1f44d',
        icon: '👍'
    },
    {
        className: 'bg-1f44e',
        icon: '👎'
    },
    {
        className: 'bg-1f44c',
        icon: '👌'
    },
    {
        className: 'bg-1f44a',
        icon: '👊'
    },
    {
        className: 'bg-f270a',
        icon: '✊'
    },
    {
        className: 'bg-f270c',
        icon: '✌'
    },
    {
        className: 'bg-1f44b',
        icon: '👋'
    },
    {
        className: 'bg-f270b',
        icon: '✋'
    },
    {
        className: 'bg-1f450',
        icon: '👐'
    },
    {
        className: 'bg-1f446',
        icon: '👆'
    },
    {
        className: 'bg-1f447',
        icon: '👇'
    },
    {
        className: 'bg-1f449',
        icon: '👉'
    },
    {
        className: 'bg-1f448',
        icon: '👈'
    },
    {
        className: 'bg-1f64c',
        icon: '🙌'
    },
    {
        className: 'bg-1f64f',
        icon: '🙏'
    },
    {
        className: 'bg-f261d',
        icon: '☝'
    },
    {
        className: 'bg-1f44f',
        icon: '👏'
    },
    {
        className: 'bg-1f6b6',
        icon: '🚶'
    },
    {
        className: 'bg-1f4aa',
        icon: '💪'
    },
    {
        className: 'bg-1f3c3',
        icon: '🏃'
    },
    {
        className: 'bg-1f483',
        icon: '💃'
    },
    {
        className: 'bg-1f46b',
        icon: '👫'
    },
    {
        className: 'bg-1f46a',
        icon: '👪'
    },
    {
        className: 'bg-1f46c',
        icon: '👬'
    },
    {
        className: 'bg-1f46d',
        icon: '👭'
    },
    {
        className: 'bg-1f48f',
        icon: '💏'
    },
    {
        className: 'bg-1f491',
        icon: '💑'
    },
    {
        className: 'bg-1f46f',
        icon: '👯'
    },
    {
        className: 'bg-1f645',
        icon: '🙆'
    },
    {
        className: 'bg-1f646',
        icon: '🙅'
    },
    {
        className: 'bg-1f481',
        icon: '💁'
    },
    {
        className: 'bg-1f64b',
        icon: '🙋'
    },
    {
        className: 'bg-1f487',
        icon: '💇'
    },
    {
        className: 'bg-1f485',
        icon: '💅'
    },
    {
        className: 'bg-1f470',
        icon: '👰'
    },
    {
        className: 'bg-1f64e',
        icon: '🙎'
    },
    {
        className: 'bg-1f64d',
        icon: '🙍'
    },
    {
        className: 'bg-1f647',
        icon: '🙇'
    },
    {
        className: 'bg-1f3a9',
        icon: '🎩'
    },
    {
        className: 'bg-1f451',
        icon: '👑'
    },
    {
        className: 'bg-1f452',
        icon: '👒'
    },
    {
        className: 'bg-1f45f',
        icon: '👟'
    },
    {
        className: 'bg-1f45e',
        icon: '👞'
    },
    {
        className: 'bg-1f461',
        icon: '👡'
    },
    {
        className: 'bg-1f460',
        icon: '👠'
    },
    {
        className: 'bg-1f462',
        icon: '👢'
    },
    {
        className: 'bg-1f455',
        icon: '👕'
    },
    {
        className: 'bg-1f454',
        icon: '👔'
    },
    {
        className: 'bg-1f45a',
        icon: '👚'
    },
    {
        className: 'bg-1f457',
        icon: '👗'
    },
    {
        className: 'bg-1f3bd',
        icon: '🎽'
    },
    {
        className: 'bg-1f456',
        icon: '👖'
    },
    {
        className: 'bg-1f458',
        icon: '👘'
    },
    {
        className: 'bg-1f459',
        icon: '👙'
    },
    {
        className: 'bg-1f4bc',
        icon: '💼'
    },
    {
        className: 'bg-1f45c',
        icon: '👜'
    },
    {
        className: 'bg-1f45d',
        icon: '👝'
    },
    {
        className: 'bg-1f45b',
        icon: '👛'
    },
    {
        className: 'bg-1f453',
        icon: '👓'
    },
    {
        className: 'bg-1f380',
        icon: '🎀'
    },
    {
        className: 'bg-1f302',
        icon: '🌂'
    },
    {
        className: 'bg-1f484',
        icon: '💄'
    },
    {
        className: 'bg-1f48b',
        icon: '💋'
    },
    {
        className: 'bg-1f463',
        icon: '👣'
    },
    {
        className: 'bg-1f48e',
        icon: '💎'
    },
    {
        className: 'bg-1f48d',
        icon: '💍'
    }]
},
{
    name: '花样',
    iconArr: [{
        className: 'bg-1f451',
        icon: '👑'
    },
    {
        className: 'bg-1f525',
        icon: '🔥'
    },
    {
        className: 'bg-2728',
        icon: '✨'
    },
    {
        className: 'bg-1f31f',
        icon: '🌟'
    },
    {
        className: 'bg-1f4ab',
        icon: '💫'
    },
    {
        className: 'bg-1f4a5',
        icon: '💥'
    },
    {
        className: 'bg-1f380',
        icon: '🎀'
    },
    {
        className: 'bg-1f302',
        icon: '🌂'
    },
    {
        className: 'bg-1f484',
        icon: '💄'
    },
    {
        className: 'bg-1f49b',
        icon: '💛'
    },
    {
        className: 'bg-1f499',
        icon: '💙'
    },
    {
        className: 'bg-1f49c',
        icon: '💜'
    },
    {
        className: 'bg-1f49a',
        icon: '💚'
    },
    {
        className: 'bg-f2764',
        icon: '❤'
    },
    {
        className: 'bg-1f494',
        icon: '💔'
    },
    {
        className: 'bg-1f497',
        icon: '💗'
    },
    {
        className: 'bg-1f493',
        icon: '💓'
    },
    {
        className: 'bg-1f495',
        icon: '💕'
    },
    {
        className: 'bg-1f496',
        icon: '💖'
    },
    {
        className: 'bg-1f49e',
        icon: '💞'
    },
    {
        className: 'bg-1f498',
        icon: '💘'
    },
    {
        className: 'bg-1f48c',
        icon: '💌'
    },
    {
        className: 'bg-1f48b',
        icon: '💋'
    },
    {
        className: 'bg-1f38d',
        icon: '🎍'
    },
    {
        className: 'bg-1f49d',
        icon: '💝'
    },
    {
        className: 'bg-1f38e',
        icon: '🎎'
    },
    {
        className: 'bg-1f392',
        icon: '🎒'
    },
    {
        className: 'bg-1f393',
        icon: '🎓'
    },
    {
        className: 'bg-1f38f',
        icon: '🎏'
    },
    {
        className: 'bg-1f386',
        icon: '🎆'
    },
    {
        className: 'bg-1f387',
        icon: '🎇'
    },
    {
        className: 'bg-1f390',
        icon: '🎐'
    },
    {
        className: 'bg-1f391',
        icon: '🎑'
    },
    {
        className: 'bg-1f383',
        icon: '🎃'
    },
    {
        className: 'bg-1f47b',
        icon: '👻'
    },
    {
        className: 'bg-1f385',
        icon: '🎅'
    },
    {
        className: 'bg-1f384',
        icon: '🎄'
    },
    {
        className: 'bg-1f381',
        icon: '🎁'
    },
    {
        className: 'bg-1f38b',
        icon: '🎋'
    },
    {
        className: 'bg-1f389',
        icon: '🎉'
    },
    {
        className: 'bg-1f38a',
        icon: '🎊'
    },
    {
        className: 'bg-1f388',
        icon: '🎈'
    },
    {
        className: 'bg-1f38c',
        icon: '🎌'
    }]
},
{
    name: '文字',
    iconArr: [{
        className: 'bg-1f22f',
        icon: '🈯'
    },
    {
        className: 'bg-1f233',
        icon: '🈳'
    },
    {
        className: 'bg-1f235',
        icon: '🈵'
    },
    {
        className: 'bg-1f234',
        icon: '🈴'
    },
    {
        className: 'bg-1f232',
        icon: '🈲'
    },
    {
        className: 'bg-1f250',
        icon: '🉐'
    },
    {
        className: 'bg-1f239',
        icon: '🈹'
    },
    {
        className: 'bg-1f23a',
        icon: '🈺'
    },
    {
        className: 'bg-1f236',
        icon: '🈶'
    },
    {
        className: 'bg-1f21a',
        icon: '🈚'
    },
    {
        className: 'bg-1f6be',
        icon: '🚾'
    },
    {
        className: 'bg-1f17f',
        icon: '🅿'
    },
    {
        className: 'bg-1f237',
        icon: '🈷'
    },
    {
        className: 'bg-1f238',
        icon: '🈸'
    },
    {
        className: 'bg-1f202',
        icon: '🈂'
    },
    {
        className: 'bg-f24c2',
        icon: 'Ⓜ'
    },
    {
        className: 'bg-1f251',
        icon: '🉑'
    },
    {
        className: 'bg-f3299',
        icon: '㊙'
    },
    {
        className: 'bg-f3297',
        icon: '㊗'
    },
    {
        className: 'bg-1f191',
        icon: '🆑'
    },
    {
        className: 'bg-1f198',
        icon: '🆘'
    },
    {
        className: 'bg-1f194',
        icon: '🆔'
    },
    {
        className: 'bg-1f51e',
        icon: '🔞'
    },
    {
        className: 'bg-1f6ab',
        icon: '🚫'
    },
    {
        className: 'bg-1f19a',
        icon: '🆚'
    },
    {
        className: 'bg-1f171',
        icon: '🅱'
    },
    {
        className: 'bg-1f170',
        icon: '🅰'
    },
    {
        className: 'bg-1f18e',
        icon: '🆎'
    },
    {
        className: 'bg-1f17e',
        icon: '🅾'
    },
    {
        className: 'bg-f2747',
        icon: '❇'
    }]
},
{
    name: '物件',
    iconArr: [{
        className: 'bg-1f52e',
        icon: '🔮'
    },
    {
        className: 'bg-1f3a5',
        icon: '🎥'
    },
    {
        className: 'bg-1f4f7',
        icon: '📷'
    },
    {
        className: 'bg-1f4f9',
        icon: '📹'
    },
    {
        className: 'bg-1f4fc',
        icon: '📼'
    },
    {
        className: 'bg-1f4bf',
        icon: '💿'
    },
    {
        className: 'bg-1f4c0',
        icon: '📀'
    },
    {
        className: 'bg-1f4bd',
        icon: '💽'
    },
    {
        className: 'bg-1f4be',
        icon: '💾'
    },
    {
        className: 'bg-1f4bb',
        icon: '💻'
    },
    {
        className: 'bg-1f4f1',
        icon: '📱'
    },
    {
        className: 'bg-f260e',
        icon: '☎'
    },
    {
        className: 'bg-1f4de',
        icon: '📞'
    },
    {
        className: 'bg-1f4df',
        icon: '📟'
    },
    {
        className: 'bg-1f4e0',
        icon: '📠'
    },
    {
        className: 'bg-1f4e1',
        icon: '📡'
    },
    {
        className: 'bg-1f4fa',
        icon: '📺'
    },
    {
        className: 'bg-1f4fb',
        icon: '📻'
    },
    {
        className: 'bg-1f50a',
        icon: '🔊'
    },
    {
        className: 'bg-1f509',
        icon: '🔉'
    },
    {
        className: 'bg-1f508',
        icon: '🔈'
    },
    {
        className: 'bg-1f507',
        icon: '🔇'
    },
    {
        className: 'bg-1f514',
        icon: '🔔'
    },
    {
        className: 'bg-1f515',
        icon: '🔕'
    },
    {
        className: 'bg-1f4e2',
        icon: '📢'
    },
    {
        className: 'bg-1f4e3',
        icon: '📣'
    },
    {
        className: 'bg-f23f3',
        icon: '⏳'
    },
    {
        className: 'bg-f231b',
        icon: '⌛'
    },
    {
        className: 'bg-f23f0',
        icon: '⏰'
    },
    {
        className: 'bg-f231a',
        icon: '⌚'
    },
    {
        className: 'bg-1f513',
        icon: '🔓'
    },
    {
        className: 'bg-1f512',
        icon: '🔒'
    },
    {
        className: 'bg-1f510',
        icon: '🔐'
    },
    {
        className: 'bg-1f511',
        icon: '🔑'
    },
    {
        className: 'bg-1f50e',
        icon: '🔎'
    },
    {
        className: 'bg-1f4a1',
        icon: '💡'
    },
    {
        className: 'bg-1f526',
        icon: '🔦'
    },
    {
        className: 'bg-1f506',
        icon: '🔆'
    },
    {
        className: 'bg-1f505',
        icon: '🔅'
    },
    {
        className: 'bg-1f50c',
        icon: '🔌'
    },
    {
        className: 'bg-1f50b',
        icon: '🔋'
    },
    {
        className: 'bg-1f50d',
        icon: '🔍'
    },
    {
        className: 'bg-1f6c1',
        icon: '🛁'
    },
    {
        className: 'bg-1f6c0',
        icon: '🛀'
    },
    {
        className: 'bg-1f6bf',
        icon: '🚿'
    },
    {
        className: 'bg-1f6bd',
        icon: '🚽'
    },
    {
        className: 'bg-1f527',
        icon: '🔧'
    },
    {
        className: 'bg-1f529',
        icon: '🔩'
    },
    {
        className: 'bg-1f528',
        icon: '🔨'
    },
    {
        className: 'bg-1f6aa',
        icon: '🚪'
    },
    {
        className: 'bg-1f6ac',
        icon: '🚬'
    },
    {
        className: 'bg-1f4a3',
        icon: '💣'
    },
    {
        className: 'bg-1f52b',
        icon: '🔫'
    },
    {
        className: 'bg-1f52a',
        icon: '🔪'
    },
    {
        className: 'bg-1f48a',
        icon: '💊'
    },
    {
        className: 'bg-1f4b0',
        icon: '💰'
    },
    {
        className: 'bg-1f4b4',
        icon: '💴'
    },
    {
        className: 'bg-1f4b5',
        icon: '💵'
    },
    {
        className: 'bg-1f4b7',
        icon: '💷'
    },
    {
        className: 'bg-1f4b6',
        icon: '💶'
    },
    {
        className: 'bg-1f4b3',
        icon: '💳'
    },
    {
        className: 'bg-1f4b8',
        icon: '💸'
    },
    {
        className: 'bg-1f4f2',
        icon: '📲'
    },
    {
        className: 'bg-1f4e7',
        icon: '📧'
    },
    {
        className: 'bg-1f4e5',
        icon: '📥'
    },
    {
        className: 'bg-1f4e4',
        icon: '📤'
    },
    {
        className: 'bg-f2709',
        icon: '✉'
    },
    {
        className: 'bg-1f4e9',
        icon: '📩'
    },
    {
        className: 'bg-1f4e8',
        icon: '📨'
    },
    {
        className: 'bg-1f4ef',
        icon: '📯'
    },
    {
        className: 'bg-1f4eb',
        icon: '📫'
    },
    {
        className: 'bg-1f4ea',
        icon: '📪'
    },
    {
        className: 'bg-1f4ec',
        icon: '📬'
    },
    {
        className: 'bg-1f4ed',
        icon: '📭'
    },
    {
        className: 'bg-1f4ee',
        icon: '📮'
    },
    {
        className: 'bg-1f4e6',
        icon: '📦'
    },
    {
        className: 'bg-1f4dd',
        icon: '📝'
    },
    {
        className: 'bg-1f4c4',
        icon: '📄'
    },
    {
        className: 'bg-1f4c3',
        icon: '📃'
    },
    {
        className: 'bg-1f4d1',
        icon: '📑'
    },
    {
        className: 'bg-1f4ca',
        icon: '📊'
    },
    {
        className: 'bg-1f4c8',
        icon: '📈'
    },
    {
        className: 'bg-1f4c9',
        icon: '📉'
    },
    {
        className: 'bg-1f4dc',
        icon: '📜'
    },
    {
        className: 'bg-1f4cb',
        icon: '📋'
    },
    {
        className: 'bg-1f4c5',
        icon: '📅'
    },
    {
        className: 'bg-1f4c6',
        icon: '📆'
    },
    {
        className: 'bg-1f4c7',
        icon: '📇'
    },
    {
        className: 'bg-1f4c1',
        icon: '📁'
    },
    {
        className: 'bg-1f4c2',
        icon: '📂'
    },
    {
        className: 'bg-f2702',
        icon: '✂'
    },
    {
        className: 'bg-1f4cc',
        icon: '📌'
    },
    {
        className: 'bg-1f4ce',
        icon: '📎'
    },
    {
        className: 'bg-f2712',
        icon: '✒'
    },
    {
        className: 'bg-f270f',
        icon: '✏'
    },
    {
        className: 'bg-1f4cf',
        icon: '📏'
    },
    {
        className: 'bg-1f4d0',
        icon: '📐'
    },
    {
        className: 'bg-1f4d5',
        icon: '📕'
    },
    {
        className: 'bg-1f4d7',
        icon: '📗'
    },
    {
        className: 'bg-1f4d8',
        icon: '📘'
    },
    {
        className: 'bg-1f4d9',
        icon: '📙'
    },
    {
        className: 'bg-1f4d3',
        icon: '📓'
    },
    {
        className: 'bg-1f4d4',
        icon: '📔'
    },
    {
        className: 'bg-1f4d2',
        icon: '📒'
    },
    {
        className: 'bg-1f4da',
        icon: '📚'
    },
    {
        className: 'bg-1f4d6',
        icon: '📖'
    },
    {
        className: 'bg-1f516',
        icon: '🔖'
    },
    {
        className: 'bg-1f4db',
        icon: '📛'
    },
    {
        className: 'bg-1f52c',
        icon: '🔬'
    }]
},
{
    name: '标识',
    iconArr: [{
        className: 'bg-1f6bb',
        icon: '🚻'
    },
    {
        className: 'bg-1f6b9',
        icon: '🚹'
    },
    {
        className: 'bg-1f6ba',
        icon: '🚺'
    },
    {
        className: 'bg-1f6bc',
        icon: '🚼'
    },
    {
        className: 'bg-1f6b0',
        icon: '🚰'
    },
    {
        className: 'bg-1f6ae',
        icon: '🚮'
    },
    {
        className: 'bg-f267f',
        icon: '♿'
    },
    {
        className: 'bg-1f6ad',
        icon: '🚭'
    },
    {
        className: 'bg-1f6c2',
        icon: '🛂'
    },
    {
        className: 'bg-1f6c4',
        icon: '🛄'
    },
    {
        className: 'bg-1f6c5',
        icon: '🛅'
    },
    {
        className: 'bg-1f6c3',
        icon: '🛃'
    },
    {
        className: 'bg-1f6ab',
        icon: '🚫'
    },
    {
        className: 'bg-1f51e',
        icon: '🔞'
    },
    {
        className: 'bg-1f6af',
        icon: '🚯'
    },
    {
        className: 'bg-1f6b1',
        icon: '🚱'
    },
    {
        className: 'bg-1f6b3',
        icon: '🚳'
    },
    {
        className: 'bg-1f6b7',
        icon: '🚷'
    },
    {
        className: 'bg-1f6b8',
        icon: '🚸'
    },
    {
        className: 'bg-f26d4',
        icon: '⛔'
    },
    {
        className: 'bg-f2733',
        icon: '✳'
    },
    {
        className: 'bg-f2747',
        icon: '❇'
    },
    {
        className: 'bg-f274e',
        icon: '❎'
    },
    {
        className: 'bg-f2705',
        icon: '✅'
    },
    {
        className: 'bg-f2734',
        icon: '✴'
    },
    {
        className: 'bg-1f49f',
        icon: '💟'
    },
    {
        className: 'bg-1f4f3',
        icon: '📳'
    },
    {
        className: 'bg-1f4f4',
        icon: '📴'
    },
    {
        className: 'bg-1f4a0',
        icon: '💠'
    },
    {
        className: 'bg-f27bf',
        icon: '➿'
    },
    {
        className: 'bg-f267b',
        icon: '♻'
    },
    {
        className: 'bg-f26ce',
        icon: '⛎'
    },
    {
        className: 'bg-1f51f',
        icon: '🔟'
    },
    {
        className: 'bg-f2b06',
        icon: '⬆'
    },
    {
        className: 'bg-f2b07',
        icon: '⬇'
    },
    {
        className: 'bg-f2b05',
        icon: '⬅'
    },
    {
        className: 'bg-f27a1',
        icon: '➡'
    },
    {
        className: 'bg-1f523',
        icon: '🔣'
    },
    {
        className: 'bg-1f522',
        icon: '🔢'
    },
    {
        className: 'bg-1f520',
        icon: '🔠'
    },
    {
        className: 'bg-1f521',
        icon: '🔡'
    },
    {
        className: 'bg-1f524',
        icon: '🔤'
    },
    {
        className: 'bg-f2197',
        icon: '↗'
    },
    {
        className: 'bg-f2196',
        icon: '↖'
    },
    {
        className: 'bg-f2198',
        icon: '↘'
    },
    {
        className: 'bg-f2199',
        icon: '↙'
    },
    {
        className: 'bg-f2194',
        icon: '↔'
    },
    {
        className: 'bg-f2195',
        icon: '↕'
    },
    {
        className: 'bg-1f504',
        icon: '🔄'
    },
    {
        className: 'bg-f25c0',
        icon: '◀'
    },
    {
        className: 'bg-f25b6',
        icon: '▶'
    },
    {
        className: 'bg-1f53c',
        icon: '🔼'
    },
    {
        className: 'bg-1f53d',
        icon: '🔽'
    },
    {
        className: 'bg-f21a9',
        icon: '↩'
    },
    {
        className: 'bg-f21aa',
        icon: '↪'
    },
    {
        className: 'bg-f2139',
        icon: 'ℹ'
    },
    {
        className: 'bg-f23ea',
        icon: '⏪'
    },
    {
        className: 'bg-f23eb',
        icon: '⏫'
    },
    {
        className: 'bg-f23ec',
        icon: '⏬'
    },
    {
        className: 'bg-f2935',
        icon: '⤵'
    },
    {
        className: 'bg-f2934',
        icon: '⤴'
    },
    {
        className: 'bg-1f197',
        icon: '🆗'
    },
    {
        className: 'bg-1f500',
        icon: '🔀'
    },
    {
        className: 'bg-1f501',
        icon: '🔁'
    },
    {
        className: 'bg-1f502',
        icon: '🔂'
    },
    {
        className: 'bg-1f195',
        icon: '🆕'
    },
    {
        className: 'bg-1f199',
        icon: '🆙'
    },
    {
        className: 'bg-1f192',
        icon: '🆒'
    },
    {
        className: 'bg-1f193',
        icon: '🆓'
    },
    {
        className: 'bg-1f196',
        icon: '🆖'
    },
    {
        className: 'bg-1f4f6',
        icon: '📶'
    },
    {
        className: 'bg-1f3a6',
        icon: '🎦'
    },
    {
        className: 'bg-1f201',
        icon: '🈁'
    },
    {
        className: 'bg-1f52f',
        icon: '🔯'
    },
    {
        className: 'bg-1f3e7',
        icon: '🏧'
    },
    {
        className: 'bg-1f4b9',
        icon: '💹'
    },
    {
        className: 'bg-1f4b2',
        icon: '💲'
    },
    {
        className: 'bg-1f4b1',
        icon: '💱'
    },
    {
        className: 'bg-f274c',
        icon: '❌'
    },
    {
        className: 'bg-f2757',
        icon: '❗'
    },
    {
        className: 'bg-f2753',
        icon: '❓'
    },
    {
        className: 'bg-f2755',
        icon: '❕'
    },
    {
        className: 'bg-f2754',
        icon: '❔'
    },
    {
        className: 'bg-f2b55',
        icon: '⭕'
    },
    {
        className: 'bg-1f51d',
        icon: '🔝'
    },
    {
        className: 'bg-1f51a',
        icon: '🔚'
    },
    {
        className: 'bg-1f519',
        icon: '🔙'
    },
    {
        className: 'bg-1f51b',
        icon: '🔛'
    },
    {
        className: 'bg-1f51c',
        icon: '🔜'
    },
    {
        className: 'bg-1f503',
        icon: '🔃'
    },
    {
        className: 'bg-1f55b',
        icon: '🕛'
    },
    {
        className: 'bg-1f551',
        icon: '🕑'
    },
    {
        className: 'bg-1f552',
        icon: '🕒'
    },
    {
        className: 'bg-1f55e',
        icon: '🕞'
    },
    {
        className: 'bg-1f553',
        icon: '🕓'
    },
    {
        className: 'bg-f2795',
        icon: '➕'
    },
    {
        className: 'bg-f2796',
        icon: '➖'
    },
    {
        className: 'bg-f2797',
        icon: '➗'
    },
    {
        className: 'bg-f2660',
        icon: '♠'
    },
    {
        className: 'bg-f2665',
        icon: '♥'
    },
    {
        className: 'bg-f2663',
        icon: '♣'
    },
    {
        className: 'bg-f2666',
        icon: '♦'
    },
    {
        className: 'bg-1f4ae',
        icon: '💮'
    },
    {
        className: 'bg-1f4af',
        icon: '💯'
    },
    {
        className: 'bg-f2714',
        icon: '✔'
    },
    {
        className: 'bg-f2611',
        icon: '☑'
    },
    {
        className: 'bg-1f518',
        icon: '🔘'
    },
    {
        className: 'bg-1f517',
        icon: '🔗'
    },
    {
        className: 'bg-f27b0',
        icon: '➰'
    },
    {
        className: 'bg-f3030',
        icon: '〰'
    },
    {
        className: 'bg-f303d',
        icon: '〽'
    },
    {
        className: 'bg-1f531',
        icon: '🔱'
    },
    {
        className: 'bg-f25fc',
        icon: '◼'
    },
    {
        className: 'bg-f25fb',
        icon: '◻'
    },
    {
        className: 'bg-f25fe',
        icon: '◾'
    },
    {
        className: 'bg-f25fd',
        icon: '◽'
    },
    {
        className: 'bg-f25aa',
        icon: '▪'
    },
    {
        className: 'bg-f25ab',
        icon: '▫'
    },
    {
        className: 'bg-1f53a',
        icon: '🔺'
    },
    {
        className: 'bg-1f532',
        icon: '🔲'
    },
    {
        className: 'bg-1f533',
        icon: '🔳'
    },
    {
        className: 'bg-f26ab',
        icon: '⚫'
    },
    {
        className: 'bg-f26aa',
        icon: '⚪'
    },
    {
        className: 'bg-1f534',
        icon: '🔴'
    },
    {
        className: 'bg-1f535',
        icon: '🔵'
    },
    {
        className: 'bg-1f53b',
        icon: '🔻'
    },
    {
        className: 'bg-1f536',
        icon: '🔶'
    },
    {
        className: 'bg-1f537',
        icon: '🔷'
    },
    {
        className: 'bg-1f538',
        icon: '🔸'
    },
    {
        className: 'bg-1f539',
        icon: '🔹'
    },
    {
        className: 'bg-f2716',
        icon: '✖'
    }]
},
{
    name: '房车',
    iconArr: [{
        className: 'bg-1f3e0',
        icon: '🏠'
    },
    {
        className: 'bg-1f3e1',
        icon: '🏡'
    },
    {
        className: 'bg-1f3eb',
        icon: '🏫'
    },
    {
        className: 'bg-1f3e2',
        icon: '🏢'
    },
    {
        className: 'bg-1f3e3',
        icon: '🏣'
    },
    {
        className: 'bg-1f3e5',
        icon: '🏥'
    },
    {
        className: 'bg-1f3e6',
        icon: '🏦'
    },
    {
        className: 'bg-1f3ea',
        icon: '🏪'
    },
    {
        className: 'bg-1f3e9',
        icon: '🏩'
    },
    {
        className: 'bg-1f3e8',
        icon: '🏨'
    },
    {
        className: 'bg-1f492',
        icon: '💒'
    },
    {
        className: 'bg-f26ea',
        icon: '⛪'
    },
    {
        className: 'bg-1f3ec',
        icon: '🏬'
    },
    {
        className: 'bg-1f3e4',
        icon: '🏤'
    },
    {
        className: 'bg-1f307',
        icon: '🌇'
    },
    {
        className: 'bg-1f306',
        icon: '🌆'
    },
    {
        className: 'bg-1f3ef',
        icon: '🏯'
    },
    {
        className: 'bg-1f3f0',
        icon: '🏰'
    },
    {
        className: 'bg-f26fa',
        icon: '⛺'
    },
    {
        className: 'bg-1f3ed',
        icon: '🏭'
    },
    {
        className: 'bg-1f5fc',
        icon: '🗼'
    },
    {
        className: 'bg-1f5fe',
        icon: '🗾'
    },
    {
        className: 'bg-1f5fb',
        icon: '🗻'
    },
    {
        className: 'bg-1f304',
        icon: '🌄'
    },
    {
        className: 'bg-1f6a2',
        icon: '🚢'
    },
    {
        className: 'bg-f26f5',
        icon: '⛵'
    },
    {
        className: 'bg-1f6a4',
        icon: '🚤'
    },
    {
        className: 'bg-1f6a3',
        icon: '🚣'
    },
    {
        className: 'bg-f2693',
        icon: '⚓'
    },
    {
        className: 'bg-1f680',
        icon: '🚀'
    },
    {
        className: 'bg-f2708',
        icon: '✈'
    },
    {
        className: 'bg-1f4ba',
        icon: '💺'
    },
    {
        className: 'bg-1f681',
        icon: '🚁'
    },
    {
        className: 'bg-1f682',
        icon: '🚂'
    },
    {
        className: 'bg-1f68a',
        icon: '🚊'
    },
    {
        className: 'bg-1f689',
        icon: '🚉'
    },
    {
        className: 'bg-1f69e',
        icon: '🚞'
    },
    {
        className: 'bg-1f686',
        icon: '🚆'
    },
    {
        className: 'bg-1f684',
        icon: '🚄'
    },
    {
        className: 'bg-1f685',
        icon: '🚅'
    },
    {
        className: 'bg-1f688',
        icon: '🚈'
    },
    {
        className: 'bg-1f687',
        icon: '🚇'
    },
    {
        className: 'bg-1f69d',
        icon: '🚝'
    },
    {
        className: 'bg-1f68b',
        icon: '🚋'
    },
    {
        className: 'bg-1f683',
        icon: '🚃'
    },
    {
        className: 'bg-1f68e',
        icon: '🚎'
    },
    {
        className: 'bg-1f68c',
        icon: '🚌'
    },
    {
        className: 'bg-1f68d',
        icon: '🚍'
    },
    {
        className: 'bg-1f699',
        icon: '🚙'
    },
    {
        className: 'bg-1f698',
        icon: '🚘'
    },
    {
        className: 'bg-1f697',
        icon: '🚗'
    },
    {
        className: 'bg-1f695',
        icon: '🚕'
    },
    {
        className: 'bg-1f696',
        icon: '🚖'
    },
    {
        className: 'bg-1f69b',
        icon: '🚛'
    },
    {
        className: 'bg-1f69a',
        icon: '🚚'
    },
    {
        className: 'bg-1f6a8',
        icon: '🚨'
    },
    {
        className: 'bg-1f693',
        icon: '🚓'
    },
    {
        className: 'bg-1f694',
        icon: '🚔'
    },
    {
        className: 'bg-1f692',
        icon: '🚒'
    },
    {
        className: 'bg-1f691',
        icon: '🚑'
    },
    {
        className: 'bg-1f690',
        icon: '🚐'
    },
    {
        className: 'bg-1f6b2',
        icon: '🚲'
    },
    {
        className: 'bg-1f6a1',
        icon: '🚡'
    },
    {
        className: 'bg-1f69f',
        icon: '🚟'
    },
    {
        className: 'bg-1f6a0',
        icon: '🚠'
    },
    {
        className: 'bg-1f69c',
        icon: '🚜'
    },
    {
        className: 'bg-1f488',
        icon: '💈'
    },
    {
        className: 'bg-1f68f',
        icon: '🚏'
    },
    {
        className: 'bg-1f3ab',
        icon: '🎫'
    },
    {
        className: 'bg-1f6a6',
        icon: '🚦'
    },
    {
        className: 'bg-1f6a5',
        icon: '🚥'
    },
    {
        className: 'bg-f26a0',
        icon: '⚠'
    },
    {
        className: 'bg-1f6a7',
        icon: '🚧'
    },
    {
        className: 'bg-1f530',
        icon: '🔰'
    },
    {
        className: 'bg-f26fd',
        icon: '⛽'
    },
    {
        className: 'bg-1f3ee',
        icon: '🏮'
    },
    {
        className: 'bg-f2668',
        icon: '♨'
    },
    {
        className: 'bg-1f5ff',
        icon: '🗿'
    },
    {
        className: 'bg-1f3aa',
        icon: '🎪'
    },
    {
        className: 'bg-1f3ad',
        icon: '🎭'
    },
    {
        className: 'bg-1f4cd',
        icon: '📍'
    },
    {
        className: 'bg-1f6a9',
        icon: '🚩'
    }]
}]


只会写bug的bugming