first commit
This commit is contained in:
494
src/subPages/messageChild/msgChat/msgChat.ts
Normal file
494
src/subPages/messageChild/msgChat/msgChat.ts
Normal file
@@ -0,0 +1,494 @@
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app'
|
||||
import { nextTick, onBeforeUnmount, ref, watch } from 'vue'
|
||||
import { store } from "@/store"
|
||||
import message from "@/api/https/message"
|
||||
import toast from '@/utils/toast'
|
||||
import { Decrypt, Encrypt, jxParse } from '@/utils/tools'
|
||||
// import { msgInfo } from '@/api/mockData/index'
|
||||
import useGlobalFunc from '@/composables/useGlobalFunc'
|
||||
import merchant from '@/api/https/merchant'
|
||||
import { qiniuyun } from '@/utils/qiniuUploader'
|
||||
import { getStorage } from "@/utils/storage";
|
||||
const { analyEmoji } = useGlobalFunc()
|
||||
const qiniuyunUploadImg = qiniuyun() // 七牛云sdk
|
||||
/*************************************************
|
||||
* 聊天详情
|
||||
*/
|
||||
const msgChatFn = function () {
|
||||
/*************************************************
|
||||
* 数据
|
||||
*/
|
||||
const chatData = ref<Array<AnyObject>>([])
|
||||
|
||||
const scrollToView = ref<any>()
|
||||
|
||||
const platformID = ref<string>('')
|
||||
|
||||
const isShowEmoji = ref<boolean>(false) // 是否显示emoji
|
||||
|
||||
const editorCtx = ref<any>() // editor编辑器初始化
|
||||
|
||||
const readOnly = ref<boolean>(false)
|
||||
|
||||
/*************************************************
|
||||
* 接收数据
|
||||
*/
|
||||
let useData: AnyObject = {}
|
||||
let ebStore: AnyObject = {}
|
||||
onLoad((potion: any) => {
|
||||
let res:any = getStorage('vendorUserInfo')
|
||||
if(JSON.stringify(potion) === '{}') {
|
||||
useData = {
|
||||
userID:res.userID,
|
||||
NewMessageNum:0,
|
||||
orderDesc:` #${res.orderSeq}`,
|
||||
vendorID:res.vendorID,
|
||||
orderID:res.venderOrderID
|
||||
}
|
||||
}else{
|
||||
let useInfo: AnyObject = JSON.parse(potion.data)
|
||||
useData = useInfo
|
||||
}
|
||||
if (store.state.storeInfo.allStoreInfo.StoreMaps && store.state.storeInfo.allStoreInfo.StoreMaps.length > 0) ebStore = store.state.storeInfo.allStoreInfo.StoreMaps.find((item: { vendorID: number }) => item.vendorID === 3) // 饿百
|
||||
|
||||
// 修改标题
|
||||
uni.setNavigationBarTitle({
|
||||
title:
|
||||
useData.vendorID == 1
|
||||
? `【美团${useData.orderDesc}】${useData.userID === '0' ? '群发消息' : useData.userID}`
|
||||
: `【饿了么】${useData.userID}`,
|
||||
})
|
||||
|
||||
// 获取聊天数据
|
||||
getChatDetail()
|
||||
})
|
||||
onShow(async () => {
|
||||
if (useData.NewMessageNum == 0) return
|
||||
await SetMsgRead()
|
||||
})
|
||||
|
||||
|
||||
/*************************************************
|
||||
* 设置消息为已读
|
||||
*/
|
||||
async function SetMsgRead() {
|
||||
let venderIDInfo = store.state.storeInfo.vendorStoreIDS
|
||||
let data = {
|
||||
appID: useData.vendorID === 1 ? venderIDInfo.appID : ebStore.vendorOrgCode,
|
||||
vendorStoreID: useData.vendorID === 1 ? venderIDInfo.MT : ebStore.vendorStoreID,
|
||||
vendorID: "" + useData.vendorID,
|
||||
orderID: "" + useData.orderID ? useData.orderID : '0',
|
||||
userID: useData.userID
|
||||
}
|
||||
await message.set_IM_msg_read(data)
|
||||
}
|
||||
|
||||
|
||||
/*************************************************
|
||||
* 获取聊天详情
|
||||
*/
|
||||
const isItem = ref<boolean>(false)
|
||||
async function getChatDetail() {
|
||||
let venderIDInfo = store.state.storeInfo.vendorStoreIDS
|
||||
let data = {
|
||||
payLoad: JSON.stringify([{
|
||||
vendorStoreID: useData.vendorID === 1 ? venderIDInfo.MT : ebStore.vendorStoreID,
|
||||
vendorID: "" + useData.vendorID,
|
||||
appID: useData.vendorID === 1 ? venderIDInfo.appID : ebStore.vendorOrgCode,
|
||||
userID: useData.userID
|
||||
}])
|
||||
}
|
||||
let res = await message.get_IM_chat_detail(data)
|
||||
// res = msgInfo.chatDetail // 模拟数据
|
||||
|
||||
if (res.code == 0) {
|
||||
let newArr: any = []
|
||||
if (useData.vendorID === 1) {
|
||||
platformID.value = venderIDInfo.appID // 获取平台数据
|
||||
let newMsg = res.data[`${venderIDInfo.appID}:${venderIDInfo.MT}:${useData.vendorID}:${useData.userID}`] || []
|
||||
newMsg.forEach((element: any) => {
|
||||
let resData = jxParse(element)
|
||||
let msg_content = resData.msgContent.msg_type == 1 ? analyEmoji(Decrypt(resData.msgContent.msg_content, platformID.value)) : Decrypt(resData.msgContent.msg_content, platformID.value)
|
||||
if (resData.msgContent.msg_type == 4) msg_content = resData.msgContent.app_spu_codes // 商品skuid
|
||||
if (resData.msgContent != undefined) {
|
||||
let msgList = {
|
||||
sendType: resData.sendType,
|
||||
...resData.msgContent,
|
||||
msg_content,
|
||||
// msg_type: resData.msgContent.msg_type == 1 ? (!isCloudEmoji(Decrypt(resData.msgContent.msg_content, platformID.value)) ? resData.msgContent.msg_type : 'emoji') : resData.msgContent.msg_type
|
||||
}
|
||||
// msg_type 1：文字，2：图片，3：语音，注意b2c不支持语音，4：商品卡片，发送商品卡片类型则不关注msg_content，5：订单卡片类型商家只能接收消息，不支持给用户发送消息，只支持单聊 11：群文字，12：群图片，13：群语音，注意b2c不支持语音，14：群商品卡片 https://tscc.meituan.com/home/docDetail/10090
|
||||
newArr.push(msgList)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
// 饿百
|
||||
let newMsg = res.data[`${ebStore.vendorOrgCode}:${ebStore.vendorStoreID}:${useData.vendorID}:${useData.userID}`] || []
|
||||
newMsg.map((element: any, index: number) => {
|
||||
let resData = jxParse(element)
|
||||
if (resData.msgContent != undefined) {
|
||||
if (resData.msgContent.payload) resData.msgContent.payLoad = resData.msgContent.payload
|
||||
let msg = JSON.parse(resData.msgContent.payLoad.content)
|
||||
|
||||
if (msg.text) {
|
||||
msg.text = msg.text.replace(/^["']|["']$/g, '') //正则 去掉字符串中的首尾双引号
|
||||
resData.msgContent.payLoad.contentType = 1
|
||||
}
|
||||
let content = ''
|
||||
if (resData.msgContent.payLoad.contentType == 1) {
|
||||
content = msg.text
|
||||
} else if (resData.msgContent.payLoad.contentType == 2 || resData.msgContent.payLoad.contentType == 3 || resData.msgContent.payLoad.contentType == 4) {
|
||||
// contentType为2图片、3语音、4视频时
|
||||
analyUrl({
|
||||
mediaID: msg.mediaId,
|
||||
platformShopID: '' + ebStore.vendorStoreID
|
||||
}, index)
|
||||
content = ''
|
||||
} else {
|
||||
if (msg.elements && msg.elements.length) {
|
||||
// contentType 为'8'
|
||||
let findItem = msg.elements.filter((item: { elementType: number }) => item.elementType === 1)
|
||||
content = findItem && findItem.length > 0 ? JSON.parse(findItem[0].elementContent).text.replace('@商家', '') : ''
|
||||
}
|
||||
}
|
||||
let msgList = {
|
||||
sendType: resData.sendType,
|
||||
...resData.msgContent,
|
||||
msg_content: resData.msgContent.payLoad.contentType === 1 || resData.msgContent.payLoad.contentType === '8' ? analyEmoji(content) : content,
|
||||
// msg_source: 2,
|
||||
msg_source: resData.sendType === 'jx' ? 1 : 2,
|
||||
msg_type: resData.msgContent.payLoad.contentType === '8' ? 1 : resData.msgContent.payLoad.contentType
|
||||
}
|
||||
newArr.push(msgList)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
chatData.value = newArr
|
||||
isItem.value = true
|
||||
scrollToView.value = 'msg' + (chatData.value.length - 1)
|
||||
} else {
|
||||
toast('获取聊天信息异常')
|
||||
}
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* 获取url by mediaId
|
||||
*/
|
||||
async function analyUrl(params: AnyObject, index: number) {
|
||||
let res = await message.get_url_by_mediaID(params)
|
||||
if (chatData.value[index].msg_content.length === 0) chatData.value[index].msg_content = res.code === '0' ? res.data : ''
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* 选择图片
|
||||
*/
|
||||
function selectImg() {
|
||||
if (useData.vendorID === 3) return toast('暂不支持该功能')
|
||||
uni.chooseImage({
|
||||
success: (res: any) => {
|
||||
res.tempFiles.forEach((item: AnyObject) => {
|
||||
uploadImg(item.path)
|
||||
})
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* 图片上传
|
||||
* @param {Object} 图片内容
|
||||
*/
|
||||
async function uploadImg(img: string) {
|
||||
let suffix = img.indexOf('.png') === -1 ? '.jpg' : '.png'
|
||||
let params = {
|
||||
suffix,
|
||||
}
|
||||
let res = await merchant.get_qiniu_upload_token(params)
|
||||
if (res.code == 0) {
|
||||
let filePath = img
|
||||
qiniuyunUploadImg.upload(
|
||||
filePath,
|
||||
(res: any) => {
|
||||
// 得到图片网址
|
||||
let url = 'https://image.jxc4.com/'
|
||||
let imgUrl = url + res.key
|
||||
sendClick({ msg: imgUrl, type: 2 })
|
||||
},
|
||||
(err: AnyObject) => {
|
||||
toast('上传失败，请重试', 2)
|
||||
},
|
||||
{
|
||||
uploadURL: 'https://up-z2.qiniup.com/',
|
||||
key: res.data.fileName,
|
||||
uptoken: res.data.token,
|
||||
}
|
||||
)
|
||||
} else {
|
||||
toast('上传失败', 2)
|
||||
}
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* 编辑器初始化完成时触发
|
||||
*/
|
||||
function onEditorReady() {
|
||||
uni.createSelectorQuery().select('#editor').context((res: any) => {
|
||||
editorCtx.value = res.context
|
||||
}).exec()
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* 编辑器的内容(实时)
|
||||
*/
|
||||
function onInput(params: any) {
|
||||
// console.log('params', params)
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* 失去焦点
|
||||
*/
|
||||
function onBlur(e: any) {
|
||||
console.log('失去焦点', e.detail.delta.ops)
|
||||
// isShowEmoji.value = false
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* 编辑器聚焦时
|
||||
*/
|
||||
function onFocus(e: any) {
|
||||
console.log('查看编辑器是否聚焦', e)
|
||||
isShowEmoji.value = false
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* 打开emoji
|
||||
*/
|
||||
function openEmoji() {
|
||||
// uni.hideKeyboard()
|
||||
readOnly.value = true
|
||||
isShowEmoji.value = true
|
||||
// hideKeyBoard()
|
||||
}
|
||||
function closeEmoji() {
|
||||
isShowEmoji.value = false
|
||||
closeReadOnly()
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* 选择emoji
|
||||
*/
|
||||
function selectEmoji(emoji: AnyObject) {
|
||||
// readOnly.value = true
|
||||
editorCtx.value.insertImage({
|
||||
src: `https://www.jxc4.com/emoji/${emoji.symbol}.png`,
|
||||
alt: emoji.text,
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
nowrap: true
|
||||
})
|
||||
|
||||
// let timer = setTimeout(() => {
|
||||
// readOnly.value = false
|
||||
// clearTimeout(timer)
|
||||
// }, 1000);
|
||||
const timer = setTimeout(() => {
|
||||
closeReadOnly()
|
||||
clearTimeout(timer)
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
// uni.onKeyboardHeightChange(res => {
|
||||
// console.log(res, '监听键盘高度的变化', res.height)
|
||||
// if (res.height) {
|
||||
// isShowEmoji.value = false
|
||||
// }
|
||||
// })
|
||||
// function hideKeyBoard() {
|
||||
// // 只是解决软键盘的闪现
|
||||
// var interval = setInterval(function () {
|
||||
// uni.hideKeyboard();//隐藏软键盘
|
||||
// console.log('刷新')
|
||||
// }, 200);
|
||||
// setTimeout(() => {
|
||||
// clearInterval(interval);
|
||||
// readOnly.value = false
|
||||
// console.log('停止刷新')
|
||||
// }, 2000);
|
||||
// }
|
||||
|
||||
/*************************************************
|
||||
* 发送消息
|
||||
*/
|
||||
function sendMessage() {
|
||||
editorCtx.value.getContents({
|
||||
complete(res: any) {
|
||||
|
||||
if (res.errMsg === 'getContents:ok') {
|
||||
let str = ''
|
||||
res.delta.ops.forEach((item: any) => {
|
||||
let type = typeof item.insert
|
||||
if (type === 'string') {
|
||||
str = str + item.insert
|
||||
} else {
|
||||
str = str + item.attributes.alt
|
||||
}
|
||||
})
|
||||
str = str.replace(/\n/g, '') // 除去回车符
|
||||
if (str.length > 0) {
|
||||
// console.log('str', str)
|
||||
sendClick({ msg: str, type: 1 })
|
||||
editorCtx.value.clear()
|
||||
closeReadOnly()
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// sendClick({ msg: initValue.value, type: 1 })
|
||||
// initValue.value = ''
|
||||
// editorCtx.value.clear()
|
||||
}
|
||||
|
||||
|
||||
/*************************************************
|
||||
* 发送数据
|
||||
*/
|
||||
async function sendClick(msgData: AnyObject) {
|
||||
let venderIDInfo = useData.vendorID === 1 ? store.state.storeInfo.vendorStoreIDS : ebStore.vendorOrgCode
|
||||
let data = {
|
||||
sendType: useData.vendorID === 1 ? "mt" : "elm",
|
||||
app_id: useData.vendorID === 1 ? venderIDInfo.appID : ebStore.vendorOrgCode,
|
||||
app_poi_code: useData.vendorID === 1 ? venderIDInfo.MT : ebStore.vendorStoreID,
|
||||
cts: Math.round(new Date().getTime() / 1000).toString(),
|
||||
msg_content: msgData.type === 1 ? analyEmoji(msgData.msg) : msgData.msg,
|
||||
msg_id: Math.round(new Date().getTime()).toString(),
|
||||
msg_source: 1,
|
||||
msg_type: msgData.type,
|
||||
open_user_id: useData.userID,
|
||||
order_id: 0,
|
||||
app_spu_codes: ""
|
||||
}
|
||||
|
||||
chatData.value.push(data)
|
||||
|
||||
nextTick(() => {
|
||||
// 滚动信息到底部
|
||||
scrollToView.value = 'msg' + (chatData.value.length - 1)
|
||||
})
|
||||
let sendMsg = {}
|
||||
|
||||
if (useData.vendorID === 1) {
|
||||
sendMsg = {
|
||||
vendorOrgCode: platformID.value,
|
||||
sendData: JSON.stringify({
|
||||
vendorID: 1,
|
||||
data: {
|
||||
msg_content: Encrypt(msgData.msg, platformID.value),
|
||||
msg_type: +msgData.type,
|
||||
app_poi_code: "" + venderIDInfo.MT,
|
||||
msg_id: +Math.round(new Date().getTime()).toString() + 184572,
|
||||
app_id: +venderIDInfo.appID,
|
||||
msg_source: 1,
|
||||
order_id: useData.orderID,
|
||||
cts: +Math.round(new Date().getTime() / 1000).toString(),
|
||||
open_user_id: +useData.userID,
|
||||
}
|
||||
})
|
||||
}
|
||||
} else {
|
||||
let chatDataItem = chatData.value.filter(item => item.msg_source === 2)
|
||||
sendMsg = {
|
||||
platformShopId: chatDataItem[0].platformShopId,
|
||||
subBizType: 'SEND_MESSAGE',
|
||||
bizType: 'IM',
|
||||
payload: {
|
||||
receiverIds: chatDataItem[0].payLoad.receiverIds,
|
||||
groupId: chatDataItem[0].payLoad.groupId,
|
||||
msgId: '' + Math.round(new Date().getTime()).toString() + 184572,
|
||||
contentType: '' + msgData.type, // 1-普通文本 2-图片 3-语音 4-视频 101-自定义
|
||||
content: msgData.type == 1 ?
|
||||
JSON.stringify({
|
||||
text: msgData.msg
|
||||
})
|
||||
:
|
||||
JSON.stringify({
|
||||
mediaId: msgData.msg,
|
||||
fileType: 0, // 必传 int类型 0-jpg图片, 2-png图片
|
||||
size: 1 // 必传 int类型 图片大小, 单位字节, 不超过3*1024*1024
|
||||
})
|
||||
}
|
||||
}
|
||||
sendMsg = {
|
||||
vendorOrgCode: ebStore.vendorOrgCode,
|
||||
sendData: JSON.stringify({
|
||||
vendorID: useData.vendorID,
|
||||
data: { ...sendMsg }
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
let res = await message.send_to_vendor(sendMsg)
|
||||
if (res.code == 0) {
|
||||
} else {
|
||||
uni.jxAlert({
|
||||
title: '提示',
|
||||
content: `发送失败：${res.desc || res.data}`,
|
||||
success: () => {
|
||||
chatData.value.pop()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
SetMsgRead()
|
||||
}
|
||||
|
||||
// ******************** 监听IM新信息 *****************************
|
||||
//#region
|
||||
watch(() => store.state.storeInfo.imMessage, (val) => {
|
||||
let resData = JSON.parse(val)
|
||||
if (resData.open_user_id != useData.userID) return false
|
||||
resData.sendType = 'mt'
|
||||
if (platformID.value) resData.msg_content = Decrypt(resData.msg_content, platformID.value)
|
||||
chatData.value.push(resData)
|
||||
nextTick(() => {
|
||||
scrollToView.value = 'msg' + (chatData.value.length - 1)
|
||||
})
|
||||
})
|
||||
//#endregion
|
||||
|
||||
/*************************************************
|
||||
* 关闭editor的只读属性
|
||||
*/
|
||||
function closeReadOnly() {
|
||||
readOnly.value = false
|
||||
}
|
||||
|
||||
/**
|
||||
* 收尾 工作
|
||||
*/
|
||||
onBeforeUnmount(async () => {
|
||||
if (useData.NewMessageNum == 0) return
|
||||
await SetMsgRead()
|
||||
})
|
||||
|
||||
return {
|
||||
scrollToView, // 滚动到底部
|
||||
chatData, // 聊天信息
|
||||
isItem, // 聊天界面的数据是否请求完毕
|
||||
isShowEmoji, // emoji是否发生偏移
|
||||
onEditorReady, // 编辑器初始化
|
||||
onInput, // 编辑器的内容(实时)
|
||||
onBlur, // 编辑器失去焦点
|
||||
onFocus, // 编辑器聚焦时
|
||||
selectImg, // 选择图片
|
||||
openEmoji, // 打开emoji
|
||||
closeEmoji, // 关闭emoji
|
||||
selectEmoji, // 选择emoji
|
||||
sendMessage, // 发送消息
|
||||
readOnly, // 是否为只读
|
||||
closeReadOnly // 关闭editor的只读属性
|
||||
}
|
||||
}
|
||||
|
||||
export default msgChatFn
|
||||
101
src/subPages/messageChild/msgChat/msgChat.vue
Normal file
101
src/subPages/messageChild/msgChat/msgChat.vue
Normal file
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<!-- 聊天内容 -->
|
||||
<scroll-view
|
||||
@tap="closeEmoji"
|
||||
scroll-y
|
||||
:style="{height: isShowEmoji ? 'calc(100vh - 510rpx)' : 'calc(100vh - 110rpx)'}"
|
||||
scroll-with-animation
|
||||
:scroll-into-view="scrollToView"
|
||||
>
|
||||
<chat-item
|
||||
v-if="isItem"
|
||||
:id="'msg' + index"
|
||||
v-for="(item, index) in chatData"
|
||||
:item="item"
|
||||
:key="index"
|
||||
/>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 输入框 -->
|
||||
<view class="chat-input-bar">
|
||||
<!-- 相册 -->
|
||||
<view class="xc-icon" @tap="selectImg">
|
||||
<jx-icon icon="xiangce" :size="55" color="#888888" />
|
||||
</view>
|
||||
|
||||
<!-- 输入框 style="width:410rpx" 可读-->
|
||||
<view class="chat-input-root" @tap="closeReadOnly">
|
||||
<editor id="editor"
|
||||
class="ql-container"
|
||||
:read-only="readOnly"
|
||||
:placeholder="'请输入内容...'"
|
||||
@ready="onEditorReady"
|
||||
@input="onInput"
|
||||
@blur="onBlur"
|
||||
@focus="onFocus">
|
||||
</editor>
|
||||
</view>
|
||||
|
||||
<!-- emoji -->
|
||||
<view class="chat-emoji-border" @touchend.prevent="openEmoji">
|
||||
<image class="chat-emoji" src="https://image.jxc4.com/image/0465edd3e027eab221c3d37ee7a063f9.png" alt=""></image>
|
||||
</view>
|
||||
|
||||
<!-- 发送 -->
|
||||
<view class="chat-input-send" @tap="sendMessage">
|
||||
<text class="chat-input-send-text">发送</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- emoji表情 -->
|
||||
<view class="emoji-select" :style="{
|
||||
height: isShowEmoji ? '400rpx' : '0rpx'
|
||||
}">
|
||||
<view v-for="(item, index) in emojiArr" :key="index" class="emoji-border" @touchend.prevent="selectEmoji(item)">
|
||||
<view :class="'emoji-' + item.symbol" class="emoji-display"> </view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup >
|
||||
import msgChatFn from './msgChat'
|
||||
import chatItem from './msgChatChild/chat-item.vue'
|
||||
import { emojiArr } from '@/utils/emoji'
|
||||
const {
|
||||
scrollToView, // 滚动到底部
|
||||
chatData, // 聊天信息
|
||||
isItem, // 聊天界面的数据是否请求完毕
|
||||
isShowEmoji, // emoji是否发生偏移
|
||||
onEditorReady, // 编辑器初始化
|
||||
onInput, // 编辑器的内容(实时)
|
||||
onBlur, // 编辑器失去焦点
|
||||
onFocus, // 编辑器聚焦时
|
||||
selectImg, // 选择图片
|
||||
openEmoji, // 打开emoji
|
||||
closeEmoji, // 关闭emoji
|
||||
selectEmoji, // 选择emoji,
|
||||
sendMessage, // 发送消息
|
||||
readOnly, // 是否为只读
|
||||
closeReadOnly // 关闭editor的只读属性
|
||||
} = msgChatFn()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './msgChatChild/index.scss';
|
||||
.ql-container{
|
||||
// width:416rpx;
|
||||
width:calc(100vw - 340rpx);
|
||||
height: 50rpx;
|
||||
min-height: 50rpx;
|
||||
caret-color:#05c160;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
</style>
|
||||
373
src/subPages/messageChild/msgChat/msgChatChild/chat-item.vue
Normal file
373
src/subPages/messageChild/msgChat/msgChatChild/chat-item.vue
Normal file
@@ -0,0 +1,373 @@
|
||||
<template>
|
||||
<view class="chat-item">
|
||||
<view
|
||||
:class="{
|
||||
'chat-container': true,
|
||||
'chat-location-me': item.msg_source == 1,
|
||||
}"
|
||||
>
|
||||
<!-- 头像 -->
|
||||
<view class="chat-icon-container">
|
||||
<image class="chat-icon" :src="avatar" mode="aspectFill" />
|
||||
</view>
|
||||
|
||||
<!-- 聊天内容 -->
|
||||
<view class="chat-content-container">
|
||||
<!-- 名字 -->
|
||||
<text
|
||||
:class="{
|
||||
'chat-user-name': true,
|
||||
'chat-location-me': item.msg_source == 1,
|
||||
}"
|
||||
@tap="jumpOrderDetail(item.order_id)"
|
||||
>
|
||||
{{
|
||||
item.msg_source == 2
|
||||
? (item.order_id ? item.sendType.toUpperCase() + '客户(' + item.order_id + ')':item.sendType.toUpperCase() + '客户')
|
||||
: getStorage('storeName')
|
||||
}}
|
||||
</text>
|
||||
|
||||
<!-- 内容 -->
|
||||
<view
|
||||
:style="{
|
||||
'display':'flex',
|
||||
'justify-content':item.msg_source === 1?'flex-end':'flex-start',
|
||||
'margin-right':item.msg_source === 1?'20rpx':'0rpx'
|
||||
}" >
|
||||
|
||||
<!-- emoji -->
|
||||
<view
|
||||
:class="{
|
||||
'chat-text-container': true,
|
||||
'chat-text-container-me': item.msg_source == 1
|
||||
}"
|
||||
v-if="item.msg_type === 1 || item.msg_type == 11"
|
||||
class="emoji-box"
|
||||
>
|
||||
<template v-for="(i, index) in item.msg_content" :key="index">
|
||||
<text
|
||||
v-if="i.type === 'text'"
|
||||
:class="{ 'char-text': true, 'char-text-me': item.msg_source == 1 }"
|
||||
user-select
|
||||
selectable
|
||||
>
|
||||
{{ i.text }}
|
||||
</text>
|
||||
<text
|
||||
v-else-if="i.type === 'emoji' && i.emoji.includes('unknown:')"
|
||||
:class="{ 'char-text': true, 'char-text-me': item.msg_source == 1 }"
|
||||
user-select
|
||||
selectable
|
||||
>
|
||||
{{ i.emoji.substring(8) }}
|
||||
</text>
|
||||
<image v-else :src="`https://www.jxc4.com/emoji/${i.emoji}.png`" alt="" style="width:20px;height:20px;"></image>
|
||||
</template>
|
||||
</view>
|
||||
|
||||
<!-- 图片 -->
|
||||
<view
|
||||
:class="{
|
||||
'chat-text-container-img': true,
|
||||
'chat-text-container-me-img': item.msg_source == 1,
|
||||
}"
|
||||
v-else-if="item.msg_type == 2 || item.msg_type == 12"
|
||||
>
|
||||
<image
|
||||
@tap="previewImage(item.msg_content)"
|
||||
:src="item.msg_content"
|
||||
mode="widthFix"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 语音 -->
|
||||
<view
|
||||
class="chat-text-container yuyin"
|
||||
:class="{ isVoice: isVoice }"
|
||||
v-else-if="item.msg_type == 3 || item.msg_type == 13"
|
||||
@tap="playVoice(item.msg_content)"
|
||||
>
|
||||
<jx-icon icon="yuyin" :size="42" />
|
||||
</view>
|
||||
|
||||
<!-- 商品卡片 -->
|
||||
<view class="chat-text-container" v-else-if="item.msg_type == 4 || item.msg_type == 14" @tap="copyInfo(item.msg_content)">
|
||||
<!--【暂不支持查看商品-请让客户发送图片】 -->
|
||||
skuid:{{ item.msg_content }} <text style="color:rgb(64, 158, 255);text-decoration: underline;" @tap.stop="viewSku(item.msg_content)">查看商品</text>
|
||||
</view>
|
||||
|
||||
<!-- 订单卡片 -->
|
||||
<view
|
||||
class="chat-text-container order-car"
|
||||
v-else-if="item.msg_type == 5 && item.msg_content"
|
||||
@tap="orderDetail(JSON.parse(item.msg_content).order_view_id, '1')"
|
||||
>
|
||||
<view class="top">{{ JSON.parse(item.msg_content).food_desc }}</view>
|
||||
<view class="bottom">
|
||||
<view class="status">{{
|
||||
JSON.parse(item.msg_content).status_desc
|
||||
}}</view>
|
||||
<view>订单详情<jx-icon icon="gengduo" color="#6e6e6e" /></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 兜底 -->
|
||||
<view class="chat-text-container" v-else> 【未知信息】 </view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品弹框 -->
|
||||
<uni-popup ref="popup" type="center">
|
||||
<view class="jx-popup-update">
|
||||
<view class="text">查看商品信息</view>
|
||||
<view>
|
||||
<image :src="goodCard.img" />
|
||||
</view>
|
||||
<view class="goodCard_name">{{ goodCard.name }}</view>
|
||||
<jx-price v-if="goodCard.unitPrice" :price="goodCard.skus[0].mtwmPrice" color="#ef5757" />
|
||||
|
||||
<view class="btn-root">
|
||||
<view class="btn-ok" @tap="popup.close()">关闭</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup >
|
||||
import useGlobalFunc from '@/composables/useGlobalFunc'
|
||||
import useOrderInfo from '@/composables/useOrderInfo'
|
||||
import { getStorage } from '@/utils/storage'
|
||||
import toast from '@/utils/toast'
|
||||
import { computed, ref } from 'vue'
|
||||
import order from '@/api/https/order'
|
||||
import merchant from '@/api/https/merchant'
|
||||
const { previewImage } = useGlobalFunc()
|
||||
const { orderDetail } = useOrderInfo()
|
||||
|
||||
/*************************************************
|
||||
* 接收数据
|
||||
*/
|
||||
interface PropsType {
|
||||
item: any
|
||||
}
|
||||
const props = defineProps<PropsType>()
|
||||
const avatar = computed(() => {
|
||||
if (props.item.msg_source == 1) {
|
||||
return 'https://image.jxc4.com/image/70143fcf48aefe74537533f35a0a8153.jpg'
|
||||
} else {
|
||||
if (props.item.sendType == 'mt') {
|
||||
return 'https://image.jxc4.com/image/75654ab606494a0efdb0cf7d7ad060d9.png'
|
||||
} else {
|
||||
return 'https://image.jxc4.com/image/6c2f1dfd95890df8ef5e27bde15c4e7f.png'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const popup = ref<any>(null) // 弹窗实例
|
||||
const goodCard = ref({ // 商品卡片
|
||||
img:'https://image.jxc4.com/image/5c506c8db41719fe4c433979498eb1e7.png',
|
||||
name:'三方平台创建商品',
|
||||
unit: '',
|
||||
unitPrice: '',
|
||||
skus: [
|
||||
{
|
||||
id:'',
|
||||
mtwmPrice:''
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
/*************************************************
|
||||
* 播放语音
|
||||
*/
|
||||
const isVoice = ref<boolean>(false)
|
||||
const voice = uni.createInnerAudioContext()
|
||||
function playVoice(playUrl: string) {
|
||||
if (uni.getSystemInfoSync().platform != 'android')
|
||||
return toast('ios系统不支持')
|
||||
toast('正在播放音频')
|
||||
isVoice.value = true
|
||||
voice.src = playUrl
|
||||
voice.stop()
|
||||
voice.play()
|
||||
voice.onEnded(() => {
|
||||
isVoice.value = false
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 跳转到订单详情页
|
||||
*/
|
||||
async function jumpOrderDetail(orderId: string) {
|
||||
if(!orderId) return
|
||||
let res = await order.get_orders({ vendorOrderID: orderId })
|
||||
if (res.code === '0') orderDetail(res.data.data[0].vendorOrderID, res.data.data[0].vendorID)
|
||||
}
|
||||
|
||||
|
||||
/*************************************************
|
||||
* 查看商品
|
||||
*/
|
||||
async function viewSku(skuid: string) {
|
||||
console.log(skuid,'skuid',goodCard.value)
|
||||
if(skuid == goodCard.value.skus[0].id) return popup.value.open()
|
||||
|
||||
let data = {
|
||||
storeIDs: JSON.stringify([getStorage('storeID')]),
|
||||
isFocus: true,
|
||||
skuIDs: JSON.stringify([+skuid])
|
||||
}
|
||||
let res = await merchant.get_stores_skus(data)
|
||||
console.log('走到下面了吗',res)
|
||||
if(res.code === '0' && res.data.totalCount === 1) goodCard.value = res.data.skuNames[0]
|
||||
popup.value.open()
|
||||
}
|
||||
|
||||
/*************************************************
|
||||
* 复制商品shuid
|
||||
*/
|
||||
function copyInfo(data:string) {
|
||||
uni.setClipboardData({
|
||||
data: data,
|
||||
success() {
|
||||
toast('复制成功', 1)
|
||||
},
|
||||
fail() {
|
||||
toast('复制失败')
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
.chat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.chat-time {
|
||||
padding: 4rpx 0rpx;
|
||||
text-align: center;
|
||||
font-size: 22rpx;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
.chat-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.chat-location-me {
|
||||
flex-direction: row-reverse;
|
||||
text-align: right;
|
||||
}
|
||||
.chat-icon-container {
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
.chat-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
.chat-content-container {
|
||||
margin: 0rpx 15rpx;
|
||||
}
|
||||
.chat-user-name {
|
||||
font-size: 28rpx;
|
||||
color: #888888;
|
||||
}
|
||||
.chat-text-container {
|
||||
background-color: #ffffff;
|
||||
border-radius: 8rpx;
|
||||
padding: 10rpx 15rpx;
|
||||
margin-top: 10rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
max-width: 500rpx;
|
||||
/* #endif */
|
||||
width: fit-content;
|
||||
}
|
||||
.chat-text-container-img {
|
||||
border-radius: 8rpx;
|
||||
margin-top: 10rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
max-width: 280rpx;
|
||||
/* #endif */
|
||||
|
||||
image {
|
||||
width: 280rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.yuyin {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// 订单卡片
|
||||
.order-car {
|
||||
font-size: 28rpx;
|
||||
|
||||
.top {
|
||||
width: 400rpx;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
text-decoration: underline;
|
||||
color: #0867e3;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-top: 1rpx solid #e6e6e6;
|
||||
padding-top: 8rpx;
|
||||
color: #6e6e6e;
|
||||
|
||||
.status {
|
||||
color: #6e6e6e;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-text-container-me {
|
||||
background-color: #95eb6c;
|
||||
text-align: left;
|
||||
}
|
||||
.chat-text-container-me-img {
|
||||
text-align: left;
|
||||
}
|
||||
.char-text {
|
||||
font-size: 32rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
word-break: break-all;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
max-width: 500rpx;
|
||||
/* #endif */
|
||||
}
|
||||
.char-text-me {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.isVoice {
|
||||
animation: Gradient 2s linear infinite;
|
||||
}
|
||||
@keyframes Gradient {
|
||||
0% {
|
||||
background: linear-gradient(0deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
|
||||
}
|
||||
100% {
|
||||
background: linear-gradient(180deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
594
src/subPages/messageChild/msgChat/msgChatChild/index.scss
Normal file
594
src/subPages/messageChild/msgChat/msgChatChild/index.scss
Normal file
@@ -0,0 +1,594 @@
|
||||
.chat-input-bar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
background-color: #f8f8f8;
|
||||
padding: 0 15rpx;
|
||||
height: 110rpx;
|
||||
border-top: 2rpx solid rgb(221, 221, 221);
|
||||
box-sizing: border-box;
|
||||
|
||||
justify-content: space-between;
|
||||
width: 750rpx;
|
||||
}
|
||||
|
||||
.xc-icon {
|
||||
width: 70rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.chat-input-root {
|
||||
padding: 10rpx;
|
||||
background-color: rgb(255, 255, 255);
|
||||
box-sizing: border-box;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.chat-input {
|
||||
width: 416rpx;
|
||||
// max-height: 300rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.chat-emoji-border,
|
||||
.chat-input-send {
|
||||
margin: 10rpx 10rpx 10rpx 20rpx;
|
||||
border-radius: 10rpx;
|
||||
padding: 10rpx 0rpx;
|
||||
width: 60rpx;
|
||||
}
|
||||
.chat-emoji-border {
|
||||
display: flex;
|
||||
}
|
||||
.chat-input-send {
|
||||
background-color: #05c160;
|
||||
padding: 10rpx 30rpx;
|
||||
width: 100rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.chat-emoji {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
.chat-input-send-text {
|
||||
color: white;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.jx-popup-update {
|
||||
box-sizing: border-box;
|
||||
padding: 20rpx;
|
||||
background-color: #fff;
|
||||
border-radius:15rpx;
|
||||
width: 94vw;
|
||||
|
||||
.text {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: 25rpx;
|
||||
padding-bottom: 10rpx;
|
||||
border-bottom: 2rpx solid rgb(209, 209, 209);
|
||||
}
|
||||
|
||||
.goodCard_name{
|
||||
margin:20rpx 0
|
||||
}
|
||||
|
||||
.btn-root {
|
||||
text-align: center;
|
||||
margin: 40rpx 0 0rpx 0;
|
||||
.btn-ok {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
padding: 15rpx 0;
|
||||
border-radius: 10rpx;
|
||||
border: 2rpx solid $jx-primary;
|
||||
color: $jx-primary;
|
||||
}
|
||||
|
||||
.btn-ok {
|
||||
background-color: $jx-primary;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*************************************************
|
||||
* emoji表情配置
|
||||
*/
|
||||
.emoji-select,.emoji-box{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.emoji-select{
|
||||
justify-content: space-around;
|
||||
overflow: hidden;
|
||||
height:400rpx;
|
||||
overflow-y: auto;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.emoji-select::after{
|
||||
content: '';
|
||||
width: 100rpx;
|
||||
border:2rpx solid transparent;
|
||||
}
|
||||
|
||||
.emoji-border{
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// .emoji-display{
|
||||
// width:50px;
|
||||
// height:50px;
|
||||
// background-size: 490px 730px; //设置背景图片的大小，相当于图片实际宽高等比例饿缩放的
|
||||
// }
|
||||
.emoji-display,.emoji-img{
|
||||
width:30px;
|
||||
height:30px;
|
||||
background-size: 245px 365px; //设置背景图片的大小，相当于图片实际宽高等比例饿缩放的
|
||||
}
|
||||
|
||||
.emoji-display,.emoji-img{
|
||||
// background-image: url(https://image.jxc4.com/image/2321c0f65268145cef711cf3b8195b9b.jpg);
|
||||
background-image: url(https://image.jxc4.com/image/2aa6a9355bbb5c9fd60418d7b53e4227.tem.png);
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 微笑
|
||||
.emoji-smile{
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
|
||||
// 撇嘴
|
||||
.emoji-pieMouth{
|
||||
background-position: -30px 0px;
|
||||
}
|
||||
|
||||
// 色
|
||||
.emoji-tity{
|
||||
background-position: -60px 0px;
|
||||
}
|
||||
|
||||
// 发呆
|
||||
.emoji-asleep{
|
||||
background-position: -90px 0px;
|
||||
}
|
||||
|
||||
// 得意
|
||||
.emoji-complacent{
|
||||
background-position: -120px 0px;
|
||||
}
|
||||
|
||||
// 流泪
|
||||
.emoji-shedTears{
|
||||
background-position: -150px 0px;
|
||||
}
|
||||
|
||||
// 害羞
|
||||
.emoji-shy{
|
||||
background-position: -180px 0px;
|
||||
}
|
||||
|
||||
// 闭嘴
|
||||
.emoji-shutUp{
|
||||
background-position: -210px 0px;
|
||||
}
|
||||
|
||||
// 睡
|
||||
.emoji-sleep{
|
||||
background-position: 0px -30px;
|
||||
}
|
||||
|
||||
// 大哭
|
||||
.emoji-bigCry{
|
||||
background-position: -30px -30px;
|
||||
}
|
||||
|
||||
// 尴尬
|
||||
.emoji-awkward{
|
||||
background-position: -60px -30px;
|
||||
}
|
||||
|
||||
// 发怒
|
||||
.emoji-flareUp{
|
||||
background-position: -90px -30px;
|
||||
}
|
||||
|
||||
// 调皮
|
||||
.emoji-naughty{
|
||||
background-position: -120px -30px;
|
||||
}
|
||||
|
||||
// 呲牙
|
||||
.emoji-bareTeeth{
|
||||
background-position: -150px -30px;
|
||||
}
|
||||
|
||||
// 惊讶
|
||||
.emoji-amazed{
|
||||
background-position: -180px -30px;
|
||||
}
|
||||
|
||||
// 难过
|
||||
.emoji-feelSorry{
|
||||
background-position: -210px -30px;
|
||||
}
|
||||
|
||||
// 酷
|
||||
.emoji-cool{
|
||||
background-position: 0px -60px;
|
||||
}
|
||||
|
||||
// 囧
|
||||
.emoji-orz{
|
||||
background-position: -30px -60px;
|
||||
}
|
||||
|
||||
// 抓狂
|
||||
.emoji-crazy{
|
||||
background-position: -60px -60px;
|
||||
}
|
||||
|
||||
// 吐
|
||||
.emoji-vomit{
|
||||
background-position: -90px -60px;
|
||||
}
|
||||
|
||||
// 偷笑
|
||||
.emoji-titter{
|
||||
background-position: -120px -60px;
|
||||
}
|
||||
|
||||
// 愉快
|
||||
.emoji-happy{
|
||||
background-position: -150px -60px;
|
||||
}
|
||||
|
||||
// 白眼
|
||||
.emoji-whiteEye{
|
||||
background-position: -180px -60px;
|
||||
}
|
||||
|
||||
// 傲慢
|
||||
.emoji-arrogance{
|
||||
background-position: -210px -60px;
|
||||
}
|
||||
|
||||
// 饥饿
|
||||
.emoji-hunger{
|
||||
background-position: -0px -90px;
|
||||
}
|
||||
|
||||
// 困
|
||||
.emoji-tired{
|
||||
background-position: -30px -90px;
|
||||
}
|
||||
|
||||
// 惊恐
|
||||
.emoji-terrified{
|
||||
background-position: -60px -90px;
|
||||
}
|
||||
|
||||
// 流汗
|
||||
.emoji-sweat{
|
||||
background-position: -90px -90px;
|
||||
}
|
||||
|
||||
// 憨笑
|
||||
.emoji-smileFatuously{
|
||||
background-position: -120px -90px;
|
||||
}
|
||||
|
||||
// 悠闲
|
||||
.emoji-easy{
|
||||
background-position: -150px -90px;
|
||||
}
|
||||
|
||||
// 奋斗
|
||||
.emoji-struggle{
|
||||
background-position: -180px -90px;
|
||||
}
|
||||
|
||||
// 咒骂
|
||||
.emoji-swear{
|
||||
background-position: -210px -90px;
|
||||
}
|
||||
|
||||
// 疑问
|
||||
.emoji-query{
|
||||
background-position: -0px -120px;
|
||||
}
|
||||
|
||||
// 嘘
|
||||
.emoji-hiss{
|
||||
background-position: -30px -120px;
|
||||
}
|
||||
|
||||
// 晕
|
||||
.emoji-giddy{
|
||||
background-position: -60px -120px;
|
||||
}
|
||||
|
||||
// 疯了
|
||||
.emoji-insane{
|
||||
background-position: -90px -120px;
|
||||
}
|
||||
|
||||
// 衰
|
||||
.emoji-decline{
|
||||
background-position: -120px -120px;
|
||||
}
|
||||
|
||||
// 骷髅
|
||||
.emoji-skull{
|
||||
background-position: -150px -120px;
|
||||
}
|
||||
|
||||
// 敲打
|
||||
.emoji-beat{
|
||||
background-position: -180px -120px;
|
||||
}
|
||||
|
||||
// 再见
|
||||
.emoji-goodbye{
|
||||
background-position: -210px -120px;
|
||||
}
|
||||
|
||||
// 擦汗
|
||||
.emoji-wipePerspiration{
|
||||
background-position: -0px -150px;
|
||||
}
|
||||
|
||||
// 抠鼻
|
||||
.emoji-pickNose{
|
||||
background-position: -30px -150px;
|
||||
}
|
||||
|
||||
// 鼓掌
|
||||
.emoji-applaud{
|
||||
background-position: -60px -150px;
|
||||
}
|
||||
|
||||
// 糗大了
|
||||
.emoji-embarrassed{
|
||||
background-position: -90px -150px;
|
||||
}
|
||||
|
||||
// 坏笑
|
||||
.emoji-snicker{
|
||||
background-position: -120px -150px;
|
||||
}
|
||||
|
||||
// 左哼哼
|
||||
.emoji-leftHum{
|
||||
background-position: -150px -150px;
|
||||
}
|
||||
|
||||
// 右哼哼
|
||||
.emoji-rightHum{
|
||||
background-position: -180px -150px;
|
||||
}
|
||||
|
||||
// 哈欠
|
||||
.emoji-yawn{
|
||||
background-position: -210px -150px;
|
||||
}
|
||||
|
||||
// 鄙视
|
||||
.emoji-disdain{
|
||||
background-position: 0px -180px;
|
||||
}
|
||||
|
||||
// 委屈
|
||||
.emoji-grievance{
|
||||
background-position: -30px -180px;
|
||||
}
|
||||
|
||||
// 快哭了
|
||||
.emoji-cring{
|
||||
background-position: -60px -180px;
|
||||
}
|
||||
|
||||
// 阴险
|
||||
.emoji-cattiness{
|
||||
background-position: -90px -180px;
|
||||
}
|
||||
|
||||
// 亲亲
|
||||
.emoji-kiss{
|
||||
background-position: -120px -180px;
|
||||
}
|
||||
|
||||
// 吓
|
||||
.emoji-threaten{
|
||||
background-position: -150px -180px;
|
||||
}
|
||||
|
||||
// 可怜
|
||||
.emoji-pitiful{
|
||||
background-position: -180px -180px;
|
||||
}
|
||||
|
||||
// 菜刀
|
||||
.emoji-kitchenKnife{
|
||||
background-position: -210px -180px;
|
||||
}
|
||||
|
||||
// 西瓜
|
||||
.emoji-watermelon{
|
||||
background-position: 0px -210px;
|
||||
}
|
||||
|
||||
// 啤酒
|
||||
.emoji-beer{
|
||||
background-position: -30px -210px;
|
||||
}
|
||||
|
||||
// 篮球
|
||||
.emoji-basketball{
|
||||
background-position: -60px -210px;
|
||||
}
|
||||
|
||||
// 乒乓
|
||||
.emoji-ping-pong{
|
||||
background-position: -90px -210px;
|
||||
}
|
||||
|
||||
// 咖啡
|
||||
.emoji-coffee{
|
||||
background-position: -120px -210px;
|
||||
}
|
||||
|
||||
// 饭
|
||||
.emoji-rice{
|
||||
background-position: -150px -210px;
|
||||
}
|
||||
|
||||
// 猪头
|
||||
.emoji-pigHead{
|
||||
background-position: -180px -210px;
|
||||
}
|
||||
|
||||
// 玫瑰
|
||||
.emoji-rose{
|
||||
background-position: -210px -210px;
|
||||
}
|
||||
|
||||
// 凋谢
|
||||
.emoji-fade{
|
||||
background-position: 0px -240px;
|
||||
}
|
||||
|
||||
// 嘴唇
|
||||
.emoji-lip{
|
||||
background-position: -30px -240px;
|
||||
}
|
||||
|
||||
// 爱心
|
||||
.emoji-love{
|
||||
background-position: -60px -240px;
|
||||
}
|
||||
|
||||
// 心碎
|
||||
.emoji-heartbreak{
|
||||
background-position: -90px -240px;
|
||||
}
|
||||
|
||||
// 蛋糕
|
||||
.emoji-cake{
|
||||
background-position: -120px -240px;
|
||||
}
|
||||
|
||||
// 闪电
|
||||
.emoji-lightning{
|
||||
background-position: -150px -240px;
|
||||
}
|
||||
|
||||
// 炸弹
|
||||
.emoji-bombs{
|
||||
background-position: -180px -240px;
|
||||
}
|
||||
|
||||
// 刀
|
||||
.emoji-knife{
|
||||
background-position: -210px -240px;
|
||||
}
|
||||
|
||||
// 足球
|
||||
.emoji-soccer{
|
||||
background-position: 0px -270px;
|
||||
}
|
||||
|
||||
// 瓢虫
|
||||
.emoji-ladybird{
|
||||
background-position: -30px -270px;
|
||||
}
|
||||
|
||||
// 便便
|
||||
.emoji-excrement{
|
||||
background-position: -60px -270px;
|
||||
}
|
||||
|
||||
// 月亮
|
||||
.emoji-moon{
|
||||
background-position: -90px -270px;
|
||||
}
|
||||
|
||||
// 太阳
|
||||
.emoji-sun{
|
||||
background-position: -120px -270px;
|
||||
}
|
||||
|
||||
// 礼物
|
||||
.emoji-gift{
|
||||
background-position: -150px -270px;
|
||||
}
|
||||
|
||||
// 拥抱
|
||||
.emoji-embrace{
|
||||
background-position: -180px -270px;
|
||||
}
|
||||
|
||||
// 强
|
||||
.emoji-strong{
|
||||
background-position: -210px -270px;
|
||||
}
|
||||
|
||||
// 弱
|
||||
.emoji-weak{
|
||||
background-position: 0px -300px;
|
||||
}
|
||||
|
||||
// 握手
|
||||
.emoji-handshake{
|
||||
background-position: -30px -300px;
|
||||
}
|
||||
|
||||
// 胜利
|
||||
.emoji-victory{
|
||||
background-position: -60px -300px;
|
||||
}
|
||||
|
||||
// 抱拳
|
||||
.emoji-holdFist{
|
||||
background-position: -90px -300px;
|
||||
}
|
||||
|
||||
// 勾引
|
||||
.emoji-seduce{
|
||||
background-position: -120px -300px;
|
||||
}
|
||||
|
||||
// 拳头
|
||||
.emoji-fist{
|
||||
background-position: -150px -300px;
|
||||
}
|
||||
|
||||
// 差劲
|
||||
.emoji-bad{
|
||||
background-position: -180px -300px;
|
||||
}
|
||||
|
||||
// 爱你
|
||||
.emoji-loveYou{
|
||||
background-position: -210px -300px;
|
||||
}
|
||||
|
||||
// NO
|
||||
.emoji-no{
|
||||
background-position: 0px -330px;
|
||||
}
|
||||
|
||||
// OK
|
||||
.emoji-ok{
|
||||
background-position: -30px -330px;
|
||||
}
|
||||
Reference in New Issue
Block a user