uniapp实现表情包发送
表情包实现 主要是表情包的json数据类似于如下数据。
·
表情包实现 主要是表情包的json数据类似于如下数据：
[{"phrase":"[微笑]","type":"face","url":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/e3/2018new_weixioa02_org.png","hot":false,"common":true,"category":"","icon":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/e3/2018new_weixioa02_org.png","value":"[微笑]","picid":""},{"phrase":"[可爱]","type":"face","url":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/09/2018new_keai_org.png","hot":false,"common":true,"category":"","icon":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/09/2018new_keai_org.png","value":"[可爱]","picid":""}]回显表情包主要取得 “[微笑]” 数据进行回显：
//替换表情符号为图片
replaceEmoji(str) {
// 这里处理 链接 换行符
let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
return '<img src="' + this.emojiList.map[item] + '" width="18rpx">';
});
return replacedStr.replace(/(\r\n)|(\n)/g, '<br>');
},全部代码如下：
<template>
<view style="position: relative;" @tap="hideinput">
<view v-if="status" class="wanl-chat">
<!-- 抽屉栏 -->
<view class="popup-layer" :class="{showLayer: popupLayerClass}" @touchmove.stop.prevent="discard">
<!-- 表情 -->
<view :class="{ hidden: hideEmoji }">
<view class="emoji">
<scroll-view class="emojinav" scroll-x scroll-with-animation>
<view class="item">
<view :class="item == TabCur ? 'emojibg' : ''" v-for="(item, index) in emojiList.categories"
:key="index" @tap="tabSelect" :data-id="item"
:style="{ backgroundImage: 'url(' + emojiList.groups[item][0].url + ')' }"></view>
</view>
</scroll-view>
<!-- 列表 -->
<scroll-view v-for="(emoji, groups) in emojiList.groups" :key="groups" v-show="TabCur == groups"
class="subject" scroll-y scroll-with-animation>
<view class="item grid margin-bottom text-center col-5">
<view v-for="(item, index) in emoji" :key="index" @tap.stop="addEmoji(item.value)"
:style="{ backgroundImage: 'url(' + item.url + ')' }"></view>
</view>
</scroll-view>
</view>
</view>
</view>
<!-- 底部输入栏 -->
<view class="input-box" :class="{ emptybottom: emptybottom, showLayer: popupLayerClass}"
@touchmove.stop.prevent="discard">
<view class="textbox">
<view class="text-mode">
<view class="box">
<textarea auto-height="true" :focus="status" maxlength="300" :show-confirm-bar="false" cursor-spacing="90"
v-model="textMsg" @focus="textareaFocus" @blur="textareaBlur" @confirm="sendText" />
</view>
<view class="em" @tap.stop="chooseEmoji">
<view class="wlIcon-biaoqing2"></view>
</view>
</view>
</view>
<view class="send" @tap.stop="sendText">
<!-- <text class="wlIcon-zhifeiji" v-if="textMsg"></text>
<text class="wlIcon-fasong" ></text> -->
发送
</view>
</view>
</view>
</view>
</template>
<script>
const emotions = require('@/static/json/emotions.json');
export default {
data() {
return {
//表情包
emojiList: this.emojiData(),
obj: {},
visitid: '',
//状态
status: false,
//表情
textMsg: '', //文字消息
scrollTop: 0,
// 取消底部
emptybottom: false,
// 抽屉参数
popupLayerClass: false,
// more参数
hideMore: true,
recording: false,
//表情定义
//表情
TabCur: '默认',
isVoice: false,
hideEmoji: true,
//
}
},
created() {
},
onLoad(option) {
},
methods: {
//底部事件
// 禁止滚动
discard() {
return;
},
//这是点赞评论
getdata() {
let url = "" + this.visitid
this.$api.get(url).then(res => {
//将请求的结果数组传递给z-paging
console.log(res)
if (res.code == 200) {
// this.valiFormData = res.data
this.obj = res.data
console.log(this.obj)
} else {
uni.showToast({
title: res.msg,
icon: "none",
});
console.log('请求数据失败')
}
}).catch(res => {})
},
//点赞
like() {
let params = {
// wqWorkComment: {
commentType: 2,
commentedId: this.obj.id,
isDel: 0,
originalType: this.obj.originalType,
commentedType: 1
// },
}
this.$api.post('', params).then(res => {
console.log(res)
if (res.code == 200) {
this.obj.supportFlag = true;
this.obj.supportNums = this.obj.supportNums + 1;
this.getdata()
}
}).catch(res => {})
},
//取消点赞
nolike() {
let params = {
id: this.obj.supportId,
}
this.$api.post('', params).then(res => {
console.log(res)
if (res.code == 200) {
this.obj.supportFlag = false;
this.obj.supportNums = this.obj.supportNums - 1;
this.getdata()
}
}).catch(res => {})
},
//评论
commentpl() {
this.status = true
},
//隐藏评论
hidepl() {
this.status = false
},
// 长按删除
onLongPress(e, index) {
console.log(e)
const that = this
uni.showModal({ // 弹框询问是否进行下一步事件
title: '提示',
content: '是否删除该评论',
success: function(res) {
if (res.confirm) {
console.log('用户点击确定');
let params = {
id: e.id,
}
that.$api.post('', params).then(res => {
console.log(res)
if (res.code == 200) {
that.getdata()
that.hidepl()
}
}).catch(res => {})
} else if (res.cancel) {
console.log('用户点击取消');
return
}
}
});
},
//这里开始是表情数据
// 表情数据
emojiData() {
var groups = {},
categories = [],
map = {};
emotions.forEach(emotion => {
var cate = emotion.category.length > 0 ? emotion.category : '默认';
if (!groups[cate]) {
groups[cate] = [];
categories.push(cate);
}
groups[cate].push(emotion);
map[emotion.phrase] = emotion.icon;
});
return {
groups,
categories,
map
};
},
//替换表情符号为图片
replaceEmoji(str) {
// 这里处理 链接 换行符
let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
return '<img src="' + this.emojiList.map[item] + '" width="18rpx">';
});
return replacedStr.replace(/(\r\n)|(\n)/g, '<br>');
},
// 发送文字消息
sendText() {
// console.log('9999999')
this.hideDrawer(); //隐藏抽屉
if (!this.textMsg) {
return;
}
let msg = {
text: this.textMsg
};
let params = {
// wqWorkComment: {
commentType: 1,
commentedId: this.obj.id,
isDel: 0,
originalType: this.obj.originalType,
commentedType: 1,
commentContent: this.textMsg
// },
}
console.log(params)
this.$api.post('', params).then(res => {
console.log(res)
if (res.code == 200) {
this.getdata()
this.hidepl()
}
}).catch(res => {})
this.textMsg = ''; //清空输入框
},
tabSelect(e) {
this.TabCur = e.currentTarget.dataset.id;
},
// callMethod(){
// console.log('调用子组件')
// this.hideDrawer()
// },
// 打开抽屉
openDrawer() {
// console.log(this.focus)
this.emptybottom = true;
this.popupLayerClass = true;
},
// 隐藏抽屉
hideDrawer() {
this.emptybottom = false;
this.popupLayerClass = false;
setTimeout(() => {
this.hideMore = true;
this.hideEmoji = true;
}, 150);
},
// 选择表情
chooseEmoji() {
this.hideMore = true;
if (this.hideEmoji) {
this.hideEmoji = false;
this.openDrawer();
} else {
this.hideDrawer();
}
},
// 失去焦点
textareaBlur() {
this.emptybottom = false;
},
//获取焦点，如果不是选表情ing,则关闭抽屉
textareaFocus() {
this.emptybottom = true;
if (this.popupLayerClass && this.hideMore == false) {
this.hideDrawer();
}
},
//添加表情
addEmoji(em) {
this.textMsg += em;
},
hideinput() {
this.status = false
},
//表情1111
}
}
</script>
<style lang="scss" scoped>
//底部
.bottombutton {
display: flex;
width: 100%;
min-height: 100rpx;
align-items: center;
position: fixed;
z-index: 2000;
background-color: #FFFFFF;
bottom: -2rpx;
transition: all 0.15s linear;
border-bottom: 1px solid #F0F0F0;
>view:nth-child(1) {
text-align: center;
width: 50%;
border-right: 1px solid #CCCCCC;
.img_one {
margin-right: 20rpx;
width: 40rpx;
}
}
>view:nth-child(2) {
text-align: center;
width: 50%;
.imgs {
width: 40rpx;
// margin-right: 20rpx;
}
// border-right: 1px solid #CCCCCC;
}
}
.input-box {
width: 100%;
min-height: 100rpx;
padding-bottom: env(safe-area-inset-bottom);
background-color: #f7f7fa;
display: flex;
align-items: flex-end;
position: fixed;
z-index: 3000;
bottom: -2rpx;
transition: all 0.15s linear;
}
.input-box [class*='wlIcon-'] {
font-size: 50rpx;
color: #4c4c4c;
}
.input-box .wlIcon-zhifeiji {
color: #fe6600;
}
.input-box.showLayer {
transform: translate3d(0, -480rpx, 0);
}
.input-box .voice,
.input-box .more {
flex-shrink: 0;
width: 90rpx;
height: 100rpx;
display: flex;
justify-content: center;
align-items: center;
}
.input-box .send {
flex-shrink: 0;
width: 90rpx;
height: 100rpx;
display: flex;
justify-content: center;
align-items: center;
}
.input-box .send .btn {
width: 110rpx;
height: 70rpx;
display: flex;
justify-content: center;
align-items: center;
border-radius: 16rpx;
font-size: 32rpx;
}
.input-box .textbox {
width: 100%;
}
.input-box .textbox .voice-mode {
width: calc(100% - 2upx);
height: 80rpx;
margin: 10rpx 0;
border-radius: 16rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 28rpx;
background-color: #fff;
color: #555;
}
.input-box .textbox .voice-mode.recording {
background-color: #e5e5e5;
}
.input-box .textbox .text-mode {
width: 100%;
min-height: 80rpx;
margin: 10rpx 0;
display: flex;
background-color: #ffffff;
border-radius: 16rpx;
}
.input-box .textbox .text-mode .box {
width: 100%;
padding-left: 30rpx;
min-height: 80rpx;
display: flex;
align-items: center;
}
.input-box .textbox .text-mode .box textarea {
width: 100%;
}
.input-box .textbox .text-mode .em {
flex-shrink: 0;
width: 80rpx;
padding-left: 10rpx;
height: 80rpx;
display: flex;
justify-content: center;
align-items: center;
}
.popup-layer {
transition: all 0.15s linear;
width: 100%;
height: 480rpx;
background-color: #f7f7fa;
position: fixed;
z-index: 3000;
top: 100%;
}
.popup-layer.showLayer {
transform: translate3d(0, -480rpx, 0);
}
.popup-layer .emoji .emojinav {
background-color: #f8f8f8;
}
.popup-layer .emoji .emojinav .item {
display: flex;
align-items: center;
height: 100rpx;
padding-left: 10rpx;
}
.popup-layer .emoji .emojinav .item .emojibg {
background-color: #dedede;
}
.popup-layer .emoji .emojinav .item>view {
margin: 0 25rpx;
width: 60rpx;
height: 60rpx;
border-radius: 18rpx;
background-repeat: no-repeat;
background-size: 80%;
background-position: center;
}
.popup-layer .emoji .subject {
height: 380rpx;
background-color: #f1f1f1;
}
.popup-layer .emoji .subject .item {
padding: 25rpx;
}
.popup-layer .emoji .subject .item>view {
background-repeat: no-repeat;
background-size: 56%;
background-position: center;
width: 12.5%;
height: 100rpx;
}
.post-footer {
background-color: #FFFFFF;
// padding: 10rpx 40rpx;
.footer_content {
padding: 8rpx 10rpx;
margin: 4rpx 0;
border-radius: 10rpx;
font-size: 12px;
background-color: #ffffff;
display: flex;
align-items: center;
// transition: all 0.25s linear;
.liked {
width: 30rpx;
}
.nickname {
margin-left: 4rpx;
}
}
.border {
border-radius: 10rpx;
}
.footer_content_pl {
padding: 8rpx 10rpx;
// border-bottom: 1px solid #F2F6FC;
border-top: 1px solid #F2F6FC;
border-radius: 10rpx;
font-size: 12px;
background-color: #ffffff;
display: flex;
align-items: center;
}
.footer_content_pl:last-child {
border-bottom: none;
}
}
</style>
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
1
0- 0
已为社区贡献3条内容
所有评论(0)