在这里遇到的问题,一个是键盘遮挡输入框并顶起页面,一个回到底部,一个是数据下拉加载渲染不在原来浏览位置的问题,添加表情的时候获取焦点位置
键盘遮挡输入框并顶起页面
先给输入框设置键盘弹起方式:adjustPosition='false'
,然后使用@keyboardheightchange
API获取键盘的高度(这里安卓和ios有区别,与blur事件调用的顺序不一样),给输入框设置内边距为键盘的高度
回到顶部
因为我用的是scroll-view
,所以我用的方法是使用csstransform: rotate(180deg)
把scroll-view
翻转过来,则scroll-view
的头部变成页面的底部,使用scroll-view
的scroll-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: '🚩'
}]
}]
Comments | NOTHING