/pages/find/moments/moments.nvue
<template> <view> <free-transparent-bar :scrollTop="scrollTop" @clickRight="clickRight"></free-transparent-bar> <view class="position-relative" style="height: 620rpx;"> <image src="https://douyinzcmcss.oss-cn-shenzhen.aliyuncs.com/shengchengqi/datapic/1.jpg" mode="aspectFill" style="height: 590rpx;" class="bg-secondary w-100"></image> <image :src="user.avatar || '/static/images/demo/demo6.jpg'" style="width: 120rpx;height:120rpx;right: 30rpx;" mode="" class="bg-secondary rounded position-absolute bottom-0"></image> <text class="text-white font-md position-absolute" style="bottom: 45rpx;right: 160rpx">{{user.nickname || user.username}}</text> </view> <!-- 朋友圈列表样式 --> <free-moment-list v-for="(item,index) in list" :key='index' :item="item" :index="index" @action="doAction" @reply="replyEvent"></free-moment-list> <!-- 评论框 --> <free-popup ref="action" bottom transformOrigin="center bottom"> <view style="height: 105rpx;" class="bg-light border-top flex align-center"> <textarea fixed class="bg-white rounded p-2 font-md" style="height: 80rpx;width: 480rpx;" value="" placeholder="" v-model="content" :focus="true"/> <free-icon-button @click="changeFaceModeal"><text class="iconfont font-lg"></text></free-icon-button> <free-main-button name="发送" :disabled="content.length===0" @click="send"></free-main-button> </view> <!-- 表情包 --> <scroll-view v-if="faceModal" scroll-y="true" style="height: 350rpx;" class="bg-light"> <view class="flex flex-wrap"> <view class="flex align-center justify-center" hover-class="bg-white" style="width:107rpx;height:107rpx;" v-for="(item,index) in faceList" :key="index" @click="addFace(item)"> <text>{{item}}</text> </view> </view> </scroll-view> </free-popup> <!-- 上拉加载 --> <view class="flex align-center justify-center py-5 bg-light" v-if="list.length >= 10"> <text class="text-muted font">{{loadmore}}</text> </view> </view> </template> <script> import freeTransparentBar from '@/components/free-ui/free-transparent-bar.vue'; import freeMomentList from '@/components/free-ui/free-moment-list.vue'; import freePopup from '@/components/free-ui/free-popup.vue'; import freeIconButton from '@/components/free-ui/free-icon-button.vue'; import freeMainButton from '@/components/free-ui/free-main-button.vue'; import $H from '@/common/free-lib/request.js'; import { mapState } from 'vuex'; export default { components:{ freeTransparentBar, freeMomentList, freePopup, freeIconButton, freeMainButton }, data() { return { content:'', scrollTop:0, faceModal:false, faceList:["😀","😁","😂","😃","😄","😅","😆","😉","😊","😋","😎","😍","😘","😗","😙","😚","😇","😐","😑","😶","😏","😣","😥","😮","😯","😪","😫","😴","😌","😛","😜","😝","😒","😓","😔","😕","😲","😷","😖","😞","😟","😤","😢","😭","😦","😧","😨","😬","😰","😱","😳","😵","😡","😠"], commentIndex:-1, page:1, loadmore:'上拉加载更多', key:'moment_timeline', list:[], reply_user:false } }, onPageScroll(e) { this.scrollTop = e.scrollTop; }, onReachBottom() { if(this.loadmore !== '上拉加载更多'){ return; } this.page += 1; this.loadmore = '加载中...'; this.getData().catch(err=>{ this.page -= 1; uni.showToast({ title:'加载失败', icon:'none' }); this.loadmore = '上拉加载更多'; }) }, onLoad(e) { if(e.key){ this.key = e.key; } this.page = 1; this.getData(); uni.$on('momentNotice',this.momentNotice) }, destroyed() { uni.$off('momentNotice',this.momentNotice) }, onPullDownRefresh() { this.page = 1; this.getData().then(res=>{ uni.showToast({ title:'刷新成功', icon:'none' }); uni.stopPullDownRefresh(); }).catch(err=>{ uni.showToast({ title:'刷新失败', icon:'none' }); uni.stopPullDownRefresh(); }); }, computed:{ ...mapState({ user:state=>state.user.user }) }, methods: { momentNotice(e){ this.page = 1; this.getData().then(res=>{ uni.showToast({ title:'刷新成功', icon:'none' }); }); }, // 点击操作菜单 doAction(e){ uni.showActionSheet({ itemList: ['点赞','评论'], success: res => { if(res.tapIndex === 0){ // 点赞 this.doSupport(e) }else{ this.content=''; this.faceModal=false; this.commentIndex = e.index; this.reply_user = false; this.$refs.action.show(); // this.doComment(e) } } }); }, // 获取数据 getData(){ return new Promise((result,reject)=>{ let page = this.page; $H.get('/'+this.key+'/'+page).then(res=>{ this.list = page === 1 ? res : [...this.list,...res]; this.loadmore = this.list.length === (page * 10) ? '上拉加载更多' : '没有更多了' result(res); }).catch(err=>{ reject(err); }) }) }, // 点赞 doSupport(e){ $H.post('/moment/like',{id:e.item.moment_id}).then(res=>{ let i = e.item.likes.findIndex(item=>item.id === this.user.id); if(i !== -1){ // 取消点赞 e.item.likes.splice(i,1); }else{ // 点赞 e.item.likes.push({ id:this.user.id, name:this.user.nickname || this.user.username }) } uni.showToast({ title:i !== -1 ? '取消点赞成功' : '点赞成功', icon:'none' }); }) }, // 添加表情 addFace(item){ this.content += item; }, // 开启关闭表情包面板 changeFaceModeal(){ uni.hideKeyboard(); setTimeout(()=>{ this.faceModal = !this.faceModal; },100); }, // 发送 send(){ console.log(this.reply_user); let item = this.list[this.commentIndex]; $H.post('/moment/comment',{ id:item.moment_id, content:this.content, reply_id:this.reply_user ? this.reply_user.id : 0 }).then(res=>{ item.comments.push({ content:this.content, user:{ id:this.user.id, name:this.user.nickname || this.user.username }, replay:this.reply_user ? this.reply : null }) uni.showToast({ title:'评论成功', icon:'none' }) }) this.$refs.action.hide(); }, replyEvent(e){ this.content = ''; this.faceModal = false, this.commentIndex = e.index, this.reply_user = e.reply; this.$refs.action.show(); }, // 选择发表朋友圈类型 clickRight(){ let list = [{ name:'图文', key:'image' }, { name:'视频', key:'video' }, { name:'文字', key:'content' }]; uni.showActionSheet({ itemList:list.map(v=>v.name), success:res=>{ uni.navigateTo({ url: '../add-moment/add-moment?type='+list[res.tapIndex].key, }); } }) } }, } </script> <style> </style>
/pages/chat/chat/chat.nvue
<template> <view> <!-- 导航栏 --> <free-nav-bar :title="detail.name" :noreadnum="totalNoreadnum" showBack> <free-icon-button slot="right" @click="openChatSet"><text class="iconfont font-lg"></text> </free-icon-button> </free-nav-bar> <!-- 聊天内容区域 --> <scroll-view scroll-y class="bg-light position-fixed left-0 right-0 px-3" style="bottom: 105rpx;box-sizing: border-box;" :style="chatBodyBottom" :show-scrollbar="false" :scroll-into-view="scrollIntoView" :scroll-with-animation="true" @click="clickPage"> <!-- 聊天信息列表组件 --> <view v-for="(item,index) in list" :key="index" :id="'chatItem_'+index"> <free-chat-item :item="item" :index="index" ref="chatItem" :pretime=" index > 0 ? list[index-1].create_time : 0" @long="long" @preview="previewImage" :shownickname="currentChatItem.shownickname"></free-chat-item> </view> </scroll-view> <!-- #ifdef APP-PLUS-NVUE --> <div v-if="mode === 'action' || mode === 'emoticon'" class="position-fixed top-0 right-0 left-0" :style="'bottom:'+maskBottom+'px;'" @click="clickPage"></div> <!-- #endif --> <!-- 底部输入框 --> <view class="position-fixed left-0 right-0 border-top flex align-center" style="background-color: #F7F7F6;height: 105rpx;" :style="'bottom:'+KeyboardHeight+'px;'"> <free-icon-button v-if="mode === 'audio'" @click="changeVoiceOrText"><text class="iconfont font-lg"></text></free-icon-button> <free-icon-button v-else @click="changeVoiceOrText"><text class="iconfont font-lg"></text> </free-icon-button> <view class="flex-1"> <view v-if="mode === 'audio'" class="rounded flex align-center justify-center" style="height: 80rpx;" :class="isRecording?'bg-hover-light':'bg-white'" @touchstart="voiceTouchStart" @touchend="voiceTouchEnd" @touchcancel="voiceTouchCancel" @touchmove="voiceTouchMove"> <text class="font">{{isRecording ? '松开 结束':'按住 说话'}}</text> </view> <textarea v-else fixed class="bg-white rounded p-2 font-md" style="height: 80rpx;max-width: 450rpx;" :adjust-position="false" v-model="text" @focus="mode = 'text'" /> </view> <!-- 表情 --> <free-icon-button @click="openActionOrEmoticon('emoticon')"><text class="iconfont font-lg"></text> </free-icon-button> <template v-if="text.length === 0"> <!-- 扩展菜单 --> <free-icon-button @click="openActionOrEmoticon('action')"><text class="iconfont font-lg"></text> </free-icon-button> </template> <view v-else class="flex-shrink"> <!-- 发送按钮 --> <free-main-button name="发送" @click="send('text')"></free-main-button> </view> </view> <!-- 扩展菜单 --> <free-popup ref="action" bottom transformOrigin="center bottom" @hide="KeyboardHeight = 0" :mask="false"> <view style="height: 580rpx;" class="border-top border-light-secondary bg-light"> <swiper :indicator-dots="emoticonOrActionList.length > 1" style="height: 510rpx;"> <swiper-item class="row" v-for="(item,index) in emoticonOrActionList" :key="index"> <view class="col-3 flex flex-column align-center justify-center" style="height: 255rpx;" v-for="(item2,index2) in item" :key="index2" @click="actionEvent(item2)"> <image :src="item2.icon" mode="widthFix" style="width: 100rpx;height: 100rpx;"></image> <text class="font-sm text-muted mt-2">{{item2.name}}</text> </view> </swiper-item> </swiper> </view> </free-popup> <!-- 弹出层 --> <free-popup ref="extend" :bodyWidth="240" :bodyHeight="450" :tabbarHeight="105"> <view class="flex flex-column" style="width: 240rpx;" :style="getMenusStyle"> <view class="flex-1 flex align-center" hover-class="bg-light" v-for="(item,index) in menusList" :key="index" @click="clickEvent(item.event)"> <text class="font-md pl-3">{{item.name}}</text> </view> </view> </free-popup> <!-- 录音提示 --> <view v-if="isRecording" class="position-fixed top-0 left-0 right-0 flex align-center justify-center" style="bottom: 105rpx;"> <view style="width: 360rpx;height: 360rpx;background-color: rgba(0,0,0,0.5);" class="rounded flex flex-column align-center justify-center"> <image src="/static/images/audio/audio/recording.gif" style="width: 150rpx;height: 150rpx;"></image> <text class="font text-white mt-3">{{unRecord ? '松开手指，取消发送':'手指上滑，取消发送'}}</text> </view> </view> </view> </template> <script> // #ifdef APP-PLUS-NVUE const dom = weex.requireModule('dom') // #endif import freeNavBar from "@/components/free-ui/free-nav-bar.vue" import freeIconButton from "@/components/free-ui/free-icon-button.vue" import freeChatItem from '@/components/free-ui/free-chat-item.vue'; import freePopup from "@/components/free-ui/free-popup.vue" import freeMainButton from '@/components/free-ui/free-main-button.vue'; import { mapState, mapMutations } from 'vuex' import auth from '@/common/mixin/auth.js'; import $U from '@/common/free-lib/util.js'; import $H from '@/common/free-lib/request.js'; import $C from '@/common/free-lib/config.js'; export default { mixins: [auth], components: { freeNavBar, freeIconButton, freeChatItem, freePopup, freeMainButton }, data() { return { scrollIntoView: "", // 模式 text输入文字，emoticon表情，action操作，audio音频 mode: "text", // 扩展菜单列表 actionList: [ [{ name: "相册", icon: "/static/images/extends/pic.png", event: "uploadImage" }, { name: "拍摄", icon: "/static/images/extends/video.png", event: "uploadVideo" }, { name: "收藏", icon: "/static/images/extends/shoucan.png", event: "openFava" }, { name: "名片", icon: "/static/images/extends/man.png", event: "sendCard" }, { name: "语音通话", icon: "/static/images/extends/phone.png", event: "" }, { name: "位置", icon: "/static/images/extends/path.png", event: "" }] ], emoticonList: [], // 键盘高度 KeyboardHeight: 0, menusList: [], navBarHeight: 0, list: [], // 当前操作的气泡索引 propIndex: -1, // 输入文字 text: "", // 音频录制状态 isRecording: false, RecordingStartY: 0, // 取消录音 unRecord: false, detail: { id: 0, name: "", avatar: "", chat_type: "user" } } }, mounted() { var statusBarHeight = 0 // #ifdef APP-PLUS-NVUE statusBarHeight = plus.navigator.getStatusbarHeight() // #endif this.navBarHeight = statusBarHeight + uni.upx2px(90) // 监听键盘高度变化 uni.onKeyboardHeightChange(res => { if (this.mode !== 'action' && this.mode !== 'emoticon') { this.KeyboardHeight = res.height } if (this.KeyboardHeight > 0) { this.pageToBottom() } }) // 注册发送音频事件 this.regSendVoiceEvent((url) => { if (!this.unRecord) { this.send('audio', url, { time: this.RecordTime }) } }) this.pageToBottom() }, computed: { ...mapState({ chatList: state => state.user.chatList, RECORD: state => state.audio.RECORD, RecordTime: state => state.audio.RecordTime, chat: state => state.user.chat, totalNoreadnum: state => state.user.totalNoreadnum, user: state => state.user.user }), // 当前会话配置信息 currentChatItem() { let index = this.chatList.findIndex(item => item.id === this.detail.id && item.chat_type === this.detail .chat_type) if (index !== -1) { return this.chatList[index] } return {} }, // 获取蒙版的位置 maskBottom() { return this.KeyboardHeight + uni.upx2px(105) }, // 动态获取菜单高度 getMenusHeight() { let H = 100 return this.menusList.length * H }, // 获取菜单的样式 getMenusStyle() { return `height: ${this.getMenusHeight}rpx;` }, // 判断是否操作本人信息 isdoSelf() { // 获取本人id（假设拿到了） let id = 1 let user_id = this.propIndex > -1 ? this.list[this.propIndex].user_id : 0 return user_id === id }, // 聊天区域bottom chatBodyBottom() { return `bottom:${uni.upx2px(105) + this.KeyboardHeight}px;top:${this.navBarHeight}px;` }, // 获取操作或者表情列表 emoticonOrActionList() { return (this.mode === 'emoticon' || this.mode === 'action') ? this[this.mode + 'List'] : [] }, // 所有信息的图片地址 imageList() { let arr = [] this.list.forEach((item) => { if (item.type === 'emoticon' || item.type === 'image') { arr.push(item.data) } }) return arr } }, watch: { mode(newValue, oldValue) { if (newValue !== 'action' && newValue !== 'emoticon') { this.$refs.action.hide() } if (newValue !== 'text') { uni.hideKeyboard() } } }, onLoad(e) { if (!e.params) { return this.backToast() } this.detail = JSON.parse(decodeURIComponent(e.params)) //console.log(this.detail); // 初始化 this.__init() // 创建聊天对象 this.chat.createChatObject(this.detail) // 获取历史记录 this.list = this.chat.getChatDetail() // 监听接收聊天信息 uni.$on('onMessage', this.onMessage) uni.$on('updateHistory', this.updateHistory) // 监听发送收藏和名片 uni.$on('sendItem', this.onSendItem) }, destroyed() { // 销毁聊天对象 this.chat.destoryChatObject() // 销毁监听接收聊天消息 uni.$off('onMessage', this.onMessage) uni.$off('updateHistory', this.updateHistory) uni.$off('sendItem', this.onSendItem) }, methods: { ...mapMutations(['regSendVoiceEvent']), onSendItem(e) { if (e.sendType === 'fava' || e.sendType === 'card') { this.send(e.type, e.data, e.options) } }, updateHistory(isclear = true) { if (isclear) { this.list = [] } else { this.list = this.chat.getChatDetail() } }, onMessage(message) { //console.log('[聊天页] 监听接收聊天信息', message); if ((message.from_id === this.detail.id && message.chat_type === 'user') || (message.chat_type === 'group' && message.to_id === this.detail.id)) { if (message.isremove !== 1) { this.list.push(message) // 置于底部 return this.pageToBottom() } // 撤回消息 let index = this.list.findIndex(item => item.id === message.id) if (index !== -1) { this.list[index].isremove = 1 } } }, __init() { var total = 24; var page = Math.ceil(total / 8); var arr = []; for (var i = 0; i < page; i++) { var start = i * 8; arr[i] = []; for (var j = 0; j <= 8; j++) { arr[i].push({ name: '表情' + (start + j), icon: '/static/images/emoticon/5497/' + (start + j) + '.gif', event: 'sendEmoticon' }) } } this.emoticonList = arr; // var total = 20 // var page = Math.ceil(total/8) // var arr = [] // for (var i = 0; i < page; i++) { // var start = i*8 // arr[i] = [] // for (var j = 0; j < 8; j++) { // var no = start + j // if ((no+1) > total) { // continue; // } // arr[i].push({ // name:"表情"+no, // icon: $C.emoticonUrl + no +'.gif', // event:"sendEmoticon" // }) // } // } // this.emoticonList = arr // 初始化会话列表 this.chat.initChatListItem({ chat_type: this.detail.chat_type, to_id: this.detail.id, to_name: this.detail.name, to_avatar: this.detail.avatar, data: this.detail.chat_type === 'user' ? '你们已经是好友，可以开始聊天了' : '你已经加入群聊，可以开始聊天了' }) }, // 打开扩展菜单或者表情包 openActionOrEmoticon(mode = 'action') { this.mode = mode this.$refs.action.show() uni.hideKeyboard() this.KeyboardHeight = uni.upx2px(580) }, // 发送 send(type, data = '', options = {}) { // 组织数据格式 switch (type) { case 'text': data = data || this.text break; } let message = this.chat.formatSendData({ type, data, options }) // 渲染到页面 let index = this.list.length this.list.push(message) // 监听上传进度 let onProgress = false if (message.type !== 'text' && message.type !== 'emoticon' && message.type !== 'card' && !message.data .startsWith('http')) { onProgress = (progress) => { // //console.log('上传进度：', progress); } } // 发送到服务端 this.chat.send(message, onProgress).then(res => { //console.log(res); // 发送成功 this.list[index].id = res.id this.list[index].data = res.data; this.list[index].sendStatus = 'success' }).catch(err => { // 发送失败 this.list[index].sendStatus = 'fail' //console.log(err); }) // 发送文字成功，清空输入框 if (type === 'text') { this.text = '' } // 置于底部 this.pageToBottom() }, // 回到底部 pageToBottom() { setTimeout(() => { // #ifdef APP-PLUS-NVUE let chatItem = this.$refs.chatItem if(chatItem){ let lastIndex = chatItem.length > 0 ? chatItem.length - 1 : 0 if (chatItem[lastIndex]) { dom.scrollToElement(chatItem[lastIndex], {}) } } // #endif // #ifndef APP-NVUE let lastIndex = this.list.length - 1 this.scrollIntoView = 'chatItem_' + lastIndex // #endif }, 300) }, // 长按消息气泡 long({ x, y, index }) { // 初始化 索引 this.propIndex = index // 组装菜单 let menus = [{ name: "发送给朋友", event: 'sendToChatItem' }, { name: "收藏", event: 'fava' }, { name: "删除", event: 'delete' }] let item = this.list[this.propIndex] let isSelf = this.user.id === item.from_id if (isSelf) { menus.push({ name: "撤回", event: 'removeChatItem' }) } // #ifndef H5 if (item.type === 'text') { menus.unshift({ name: "复制", event: 'copy', }) } // #endif this.menusList = menus // 显示扩展菜单 this.$refs.extend.show(x, y) }, // 操作菜单方法分发 clickEvent(event) { let item = this.list[this.propIndex] let isSelf = this.user.id === item.from_id switch (event) { case 'removeChatItem': // 撤回消息 // 拿到当前被操作的信息 this.chat.recall(item).then(res => { item.isremove = 1 }) break; case 'sendToChatItem': uni.navigateTo({ url: '../chat-list/chat-list?params=' + encodeURIComponent(JSON.stringify(item)), }); break; case 'copy': // 复制 uni.setClipboardData({ data: item.data, success: () => { uni.showToast({ title: '复制成功', icon: 'none' }); } }); break; case 'delete': uni.showModal({ content: '是否要删除该记录？', success: (res) => { if (!res.confirm) return; this.chat.deleteChatDetailItem(item, isSelf) this.list.splice(this.propIndex, 1) // 删除最后一条消息 if (this.list.length === this.propIndex) { this.chat.updateChatItem({ id: this.detail.id, chat_type: this.detail.chat_type }, (v) => { let o = this.list[this.propIndex - 1] let data = '' if (o) { data = this.chat.formatChatItemData(o, isSelf) } v.data = data return v }) } } }); break; case 'fava': // 加入收藏 uni.showModal({ content: '是否要加入收藏？', success: (res) => { if (res.confirm) { $H.post('/fava/create', { type: item.type, data: item.data, options: JSON.stringify(item.options) }).then(res => { uni.showToast({ title: '加入收藏成功', icon: 'none' }); }) } } }); break; } // 关闭菜单 this.$refs.extend.hide() }, // 扩展菜单 actionEvent(e) { switch (e.event) { case 'uploadImage': // 选择相册 uni.chooseImage({ count: 9, success: (res) => { // 发送到服务器 // 渲染到页面 res.tempFilePaths.forEach((item) => { this.send('image', item) }) } }) break; case 'uploadVideo': // 发送短视频 uni.chooseVideo({ maxDuration: 10, success: (res) => { this.send('video', res.tempFilePath) // 渲染页面 // 发送到服务端（获取视频封面，返回url） // 修改本地的发送状态 } }) break; case 'sendEmoticon': // 发送表情包 this.send('emoticon', e.icon) break; case 'openFava': // 发送收藏 uni.navigateTo({ url: '../../my/fava/fava?type=send', }); break; case 'sendCard': // 发送名片 uni.navigateTo({ url: '../../mail/mail/mail?type=sendCard&limit=1', }); break; } }, // 点击页面 clickPage() { this.mode = '' }, // 预览图片 previewImage(url) { uni.previewImage({ current: url, urls: this.imageList, indicator: "default" }) }, // 切换音频录制和文本输入 changeVoiceOrText() { this.mode = this.mode !== 'audio' ? 'audio' : 'text' }, // 录音相关 // 录音开始 voiceTouchStart(e) { // 初始化 this.isRecording = true this.RecordingStartY = e.changedTouches[0].screenY this.unRecord = false // 开始录音 this.RECORD.start({ format: "mp3" }) }, // 录音结束 voiceTouchEnd() { this.isRecording = false // 停止录音 this.RECORD.stop() }, // 录音被打断 voiceTouchCancel() { this.isRecording = false this.unRecord = true // 停止录音 this.RECORD.stop() }, voiceTouchMove(e) { let Y = Math.abs(e.changedTouches[0].screenY - this.RecordingStartY) this.unRecord = (Y >= 50) }, // 打开聊天信息设置 openChatSet() { uni.navigateTo({ url: '../chat-set/chat-set?params=' + JSON.stringify({ id: this.detail.id, chat_type: this.detail.chat_type }), }); } } } </script> <style> </style>
/common/free-lib/chat.js
import $U from "./util.js"; import $H from './request.js'; import $store from '@/store/index.js'; class chat { constructor(arg) { this.url = arg.url this.isOnline = false this.socket = null this.reconnectConfirm = 0 this.isOpenReconnect = false // 获取当前用户相关信息 let user = $U.getStorage('user'); this.user = user ? JSON.parse(user) : {}, // 初始化聊天对象 this.TO = false; // 连接和监听 if (this.user.token) { this.connectSocket() } } // 断线重连 reconnect(){ if(this.isOnline){ return; } if(this.reconnectTime >= 3){ return this.reconnectConfirm(); } this.reconnectTime += 1; this.connectSocket(); } // 连接socket connectSocket() { //console.log(this.user); this.socket = uni.connectSocket({ url: this.url + '?token=' + this.user.token, complete: () => {} }) // 监听连接成功 this.socket.onOpen(() => this.onOpen()) // 监听接收信息 this.socket.onMessage((res) => this.onMessage(res)) // 监听断开 this.socket.onClose(() => this.onClose()) // 监听错误 this.socket.onError(() => this.onError()) } // 监听打开 onOpen() { // 用户状态上线 this.isOnline = true; //console.log('socket连接成功'); this.reconnectTime = 0; this.isOpenReconnect = true; // 获取用户离线消息 this.getMessage(); } // 获取离线消息 getMessage() { $H.post('/chat/getmessage'); } // 获取聊天记录 getChatDetail(key = false) { key = key ? key : `chatDetail_${this.user.id}_${this.TO.chat_type}_${this.TO.id}` return this.getStorage(key) } // 监听关闭 onClose() { // 用户下线 this.isOnline = false; this.socket = null; if(this.isOpenReconnect){ this.reconnect(); } //console.log('socket连接关闭'); } // 监听消息 onMessage(data) { //console.log('监听消息', data); let res = JSON.parse(data.data) // 错误 switch (res.msg) { case 'fail': return uni.showToast({ title: res.data, icon: 'none' }); break; case 'recall': // 撤回消息 this.handleOnRecall(res.data) break; case 'updateApplyList': // 新的好友申请 $store.dispatch('getApply'); break; case 'moment': // 朋友圈更新 this.handleMoment(res.data) break; default: // 处理消息 this.handleOnMessage(res.data) break; } } // 获取本地存储中的朋友圈动态通知 getNotice(){ let notice = $U.getStorage('moment_'+this.user.id); return notice ? JSON.parse(notice) : { avatar:'', user_id:0, num:0 } } // 处理朋友圈通知 async handleMoment(message){ let notice = this.getNotice(); switch(message.type){ case 'new': if(message.user_id !== this.user.id){ notice.avatar = message.avatar; notice.user_id = message.user_id; uni.showTabBarRedDot({ index:2 }) } break; default: if(message.user_id !== this.user.id){ notice.avatar = message.avatar notice.user_id = message.user_id notice.num += 1 } if(notice.num > 0){ uni.setTabBarBadge({ index:2, text:notice.num > 99 ? '99+' : notice.num.toString() }) }else{ uni.removeTabBarBadge({ index:2 }) } break; } uni.$emit('momentNotice',notice); $U.setStorage('moment_'+this.user.id,JSON.stringify(notice)); } // 读取朋友圈动态 async readMoments(){ let notice = { avatar:'', user_id:0, num:0 }; $U.setStorage('moment_'+this.user.id,JSON.stringify(notice)); uni.hideTabBarRedDot({ index:2 }) uni.removeTabBarBadge({ index:2 }) uni.$emit('momentNotice',notice); } // 监听撤回消息处理 async handleOnRecall(message) { // 通知聊天页撤回消息 uni.$emit('onMessage', { ...message, isremove: 1 }) // 修改聊天记录 let id = message.chat_type === 'group' ? message.to_id : message.from_id // key值：chatDetail_当前用户id_会话类型_接收人/群id let key = `chatDetail_${this.user.id}_${message.chat_type}_${id}` // 获取原来的聊天记录 let list = this.getChatDetail(key) // 根据k查找对应聊天记录 let index = list.findIndex(item => item.id === message.id) if (index === -1) return; list[index].isremove = 1 // 存储 this.setStorage(key, list) // 当前会话最后一条消息的显示 this.updateChatItem({ id, chat_type: message.chat_type }, (item) => { item.data = '对方撤回了一条消息' item.update_time = (new Date()).getTime() return item }) } // 处理消息 async handleOnMessage(message) { // 添加消息记录到本地存储中 let { data } = this.addChatDetail(message, false) // 更新会话列表 this.updateChatList(data, false) // 全局通知 uni.$emit('onMessage', data) // 消息提示 // this.messageNotice() } // 监听连接错误 onError() { // 用户下线 this.isOnline = false; this.socket = null; //console.log('socket连接错误'); } // 关闭连接 close() { if(this.socket){ this.socket.close() } this.isOpenReconnect = false } // 创建聊天对象 createChatObject(detail) { this.TO = detail; //console.log('创建聊天对象', this.TO) } // 销毁聊天对象 destoryChatObject() { this.TO = false } // 组织发送信息格式 formatSendData(params) { return { id: 0, // 唯一id，后端生成，用于撤回指定消息 from_avatar: this.user.avatar, // 发送者头像 from_name: this.user.nickname || this.user.username, // 发送者昵称 from_id: this.user.id, // 发送者id to_id: params.to_id || this.TO.id, // 接收人/群 id to_name: params.to_name || this.TO.name, // 接收人/群 名称 to_avatar: params.to_avatar || this.TO.avatar, // 接收人/群 头像 chat_type: params.chat_type || this.TO.chat_type, // 接收类型 type: params.type, // 消息类型 data: params.data, // 消息内容 options: params.options ? params.options : {}, // 其他参数 create_time: (new Date()).getTime(), // 创建时间 isremove: 0, // 是否撤回 sendStatus: params.sendStatus ? params.sendStatus : "pending" // 发送状态，success发送成功,fail发送失败,pending发送中 } } // 发送信息 send(message, onProgress = false) { return new Promise(async (result, reject) => { // 添加消息历史记录 // this.addChatDetail(); let { k } = this.addChatDetail(message); // 更新会话列表 this.updateChatList(message); // 验证是否上线 if (!this.checkOnLine()) return reject('未上线'); // 上传文件 let isUpload = (message.type !== 'text' && message.type !== 'emoticon' && message.type !== 'card' && !message.data.startsWith('http://akyan.oss-cn-beijing.aliyuncs.com/')) let uploadResult = '' if (isUpload) { uploadResult = await $H.upload('/upload', { filePath: message.data }, onProgress); if(!uploadResult){ message.sendStatus = 'fail'; // 更新指定历史记录 this.updateChatDetail(message, k); // 断线重连提示 return result(err); } } // 提交到后端 let data = isUpload ? uploadResult : message.data; $H.post('/chat/send', { to_id: this.TO.id, type: message.type, chat_type: this.TO.chat_type, data, options: JSON.stringify(message.options) }).then(res => { // 发送成功 //console.log('chat.js发送成功'); message.id = res.id message.sendStatus = 'success'; if (message.type === 'video') { message.data = res.data; message.options = res.options; } // 更新指定历史记录 //console.log('更新指定历史记录',message); this.updateChatDetail(message, k); result(res); }).catch(err => { // 发送失败 //console.log('chat.js发送失败'); message.sendStatus = 'fail'; // 更新指定历史记录 this.updateChatDetail(message, k); // 断线重连提示 result(err); }); }) } // 验证是否上线 checkOnLine() { if (!this.isOnline) { // 断线重连提示 this.reconnectConfirm(); return false; } return true; } // 断线重连提示 reconnectConfirm() { uni.showModal({ title: '你已经断线，是否重新连接？', content: '重新连接', success: res => { if (res.confirm) { this.connectSocket(); } }, }); } // 添加聊天记录 addChatDetail(message, isSend = true) { //console.log('添加到聊天记录'); // 获取对方id let id = message.chat_type === 'user' ? (isSend ? message.to_id : message.from_id) : message.to_id; if (!id) { return { data: {}, k: 0 } } // key值：chatDetail_当前用户id_会话类型_接收人/群id let key = `chatDetail_${this.user.id}_${message.chat_type}_${id}`; //console.log(key); // 获取原来的聊天记录 let list = this.getChatdetail(key) //console.log('获取原来的聊天记录', list); // 标识 message.k = 'k' + list.length list.push(message) // 加入存储 //console.log('加入存储', message); this.setStorage(key, list); // 返回 return { data: message, k: message.k } } // 删除指定聊天记录 async deleteChatDetailItem(message,isSend = true){ // 获取对方id let id = message.chat_type === 'user' ? (isSend ? message.to_id : message.from_id) : message.to_id; // key值：chatDetail_当前用户id_会话类型_接收人/群id let key = `chatDetail_${this.user.id}_${message.chat_type}_${id}`; // 获取原来的聊天记录 let list = this.getChatdetail(key); // 根据k查找对应聊天记录 let index = list.findIndex(item => item.k === message.k || item.id === message.id); if (index === -1) return; list.splice(index,1); // 存储 this.setStorage(key, list); } // 更新指定历史记录 async updateChatDetail(message, k, isSend = true) { // 获取对方id let id = message.chat_type === 'user' ? (isSend ? message.to_id : message.from_id) : message.to_id; // key值：chatDetail_当前用户id_会话类型_接收人/群id let key = `chatDetail_${this.user.id}_${message.chat_type}_${id}`; // 获取原来的聊天记录 let list = this.getChatdetail(key); // 根据k查找对应聊天记录 let index = list.findIndex(item => item.k === k); if (index === -1) return; list[index] = message; // 存储 this.setStorage(key, list); } // 获取聊天记录 getChatdetail(key = false) { key = key ? key : `chatDetail_${this.user.id}_${this.TO.chat_type}_${this.TO.id}`; return this.getStorage(key); } // 格式化会话最后一条消息显示 formatChatItemData(message, isSend) { let data = message.data.length > 18 ? message.data.slice(0, 17) + '...' : message.data; switch (message.type) { case 'emoticon': data = '[表情]' break; case 'image': data = '[图片]' break; case 'audio': data = '[语音]' break; case 'video': data = '[视频]' break; case 'card': data = '[名片]' break; } data = isSend ? data : `${message.from_name}: ${data}` return data } // 更新会话列表 updateChatList(message, isSend = true) { // 获取本地存储会话列表 let list = this.getChatList() // 是否处于当前聊天中 let isCurrentChat = false // 接收人/群 id/头像/昵称 let id = 0 let avatar = '' let name = '' // 判断私聊还是群聊 if (message.chat_type === 'user') { // 私聊 // 聊天对象是否存在 isCurrentChat = this.TO ? (isSend ? this.TO.id === message.to_id : this.TO.id === message.from_id) : false id = isSend ? message.to_id : message.from_id avatar = isSend ? message.to_avatar : message.from_avatar name = isSend ? message.to_name : message.from_name } else { // 群聊 isCurrentChat = this.TO && (this.TO.id === message.to_id) id = message.to_id avatar = message.to_avatar name = message.to_name } // 会话是否存在 let index = list.findIndex(item => { return item.chat_type === message.chat_type && item.id === id }) // 最后一条消息展现形式 // let data = isSend ? message.data : `${message.from_name}: ${message.data}` let data = this.formatChatItemData(message, isSend) // 会话不存在，创建会话 // 未读数是否 + 1 let noreadnum = (isSend || isCurrentChat) ? 0 : 1 if (index === -1) { let chatItem = { id, // 接收人/群 id chat_type: message.chat_type, // 接收类型 user单聊 group群聊 avatar, // 接收人/群 头像 name, // 接收人/群 昵称 update_time: (new Date()).getTime(), // 最后一条消息的时间戳 data, // 最后一条消息内容 type: message.type, // 最后一条消息类型 noreadnum, // 未读数 istop: false, // 是否置顶 shownickname: false, // 是否显示昵称 nowarn: false, // 消息免打扰 strongwarn: false, // 是否开启强提醒 } // 群聊 if (message.chat_type === 'group' && message.group) { chatItem.shownickname = true chatItem.name = message.to_name chatItem = { ...chatItem, user_id: message.group.user_id, // 群管理员id remark: "", // 群公告 invite_confirm: 1, // 邀请确认 } } list.unshift(chatItem) } else { // 存在，更新会话 // 拿到当前会话 let item = list[index] // 更新该会话最后一条消息时间，内容，类型 item.update_time = (new Date()).getTime() item.name = message.to_name item.data = data item.type = message.type // 未读数更新 item.noreadnum += noreadnum // 置顶会话 list = this.listToFirst(list, index) } // 存储 let key = `chatlist_${this.user.id}` this.setStorage(key, list) // 更新未读数 this.updateBadge(list) // 通知更新vuex中的聊天会话列表 uni.$emit('onUpdateChatList', list) return list } // 获取聊天记录 getChatList() { let key = `chatlist_${this.user.id}` return this.getStorage(key) } getChatList_old(message, isSend = true) { // 获取本地存储会话列表 let list = this.getChatList(); // 是否处在当前聊天中 let isCurrentChat = false // 接收人/群 id/头像/昵称 let id = 0; let avatar = ''; let name = ''; // 判断私聊还是群聊 if (message.chat_type === 'user') { // 私聊 isCurrentChat = this.TO ? (isSend ? this.TO.id === message.to_id : message.from_id) : false; id = isSend ? message.to_id : message.from_id; avatar = isSend ? message.to_avatar : message.from_avatar name = isSend ? message.to_name : message.from_name } else { // 群聊 } // 会话是否存在 let index = list.findIndex(item => { return item.chat_type === message.chat_type && item.id === id; }) // 最后一条消息展现形式 let data = isSend ? message.data : `${message.from_name}:${message.data}`; // 未读数是否 +1 let noreadnum = (isSend || isCurrentChat) ? 0 : 1; // 会话不存在 创建会话 if (index === -1) { let chatItem = { id, // 接收人/群 id chat_type: message.chat_type, // 接收类型 user 单聊 group群聊 name, // 接收人/群 昵称 avatar, // 接收人/群 头像 update_time: (new Date()).getTime(), // 最后发送的时间 data, // 最后一条消息的内容 type: message.type, noreadnum: 1, // 未读数 istop: false, // 是否置顶 shownickname: false, // 是否显示昵称 nowarn: false, // 是否免打扰 strongwarn: false, // 是否强提醒 } if (message.chat_type === 'group') { chatItem = { ...chatItem, user_id: 0, // 管理员id remark: '', // 群公告 invite_confirm: 0 // 邀请确认 } } list.unshift(chatItem) } else { // 存在，更新会话 // 拿到当前会话 let item = list[index] // 更新改会话最后一条消息时间，内容，类型 item.update_time = (new Date()).getTime(); item.data = data; item.type = message.type; // 未读数更新 item.noreadnum += noreadnum // 置顶会话 list = this.listToFirst(list, index); } // 存储 let key = `chatlist_${this.user.id}`; this.setStorage(key, list); // 更新未读数 this.updateBadge(list); // 更新vuex中的聊天会话列表 uni.$emit('onUpdateChatList', list); //console.log('获取到的会话列表：', list) return list; /** * { id:1, // 接收人/群 id chat_type:'user', // 接收类型 user 单聊 group群聊 name:'昵称', // 接收人/群 昵称 avatar:"/static/images/demo/demo6.jpg", // 接收人/群 头像 type:'',// 最后一条消息类型 update_time:1628069958, // 最后发送的时间 data:"你好啊，哈哈哈", // 最后一条消息的内容 noreadnum:1, // 未读数 istop:false, // 是否置顶 shownickname:0, // 是否显示昵称 nowarn:0, // 是否免打扰 strongwarn:0, // 是否强提醒 user_id://管理员id， remark:'公告', // 群公告 invite_confirm:0, // 邀请确认 }, **/ } // 获取本地存储会话列表 getChatList() { let key = `chatlist_${this.user.id}`; return this.getStorage(key); } // 更新指定会话 async updateChatItem(where, data) { // 获取所有会话列表 let list = this.getChatList(); // 找到当前会话 let index = list.findIndex(item => item.id === where.id && item.chat_type === where.chat_type); if (index === -1) return; // 更新数据 if(typeof data === 'function'){ list[index] = data(list[index]) }else{ list[index] = data } let key = `chatlist_${this.user.id}`; this.setStorage(key, list); // 更新会话列表状态 uni.$emit('onUpdateChatList', list); } // 读取指定会话 async readChatItem(id, chat_type) { // 获取所有会话列表 let list = this.getChatList(); // 找到当前会话 let index = list.findIndex(item => item.id === id && item.chat_type === chat_type); if (index !== -1) { list[index].noreadnum = 0; let key = `chatlist_${this.user.id}`; this.setStorage(key, list); // 重新获取未读数 this.updateBadge(); // 更新会话列表状态 uni.$emit('onUpdateChatList', list); } } // 删除指定会话 async removeChatItem(id, chat_type) { // 获取所有会话列表 let list = this.getChatList(); // 找到当前会话 let index = list.findIndex(item => item.id === id && item.chat_type === chat_type); if (index !== -1) { list.splice(index, 1); let key = `chatlist_${this.user.id}`; this.setStorage(key, list); // 重新获取未读数 this.updateBadge(); // 更新会话列表状态 uni.$emit('onUpdateChatList', list); } } // 清空聊天记录 async clearChatDetail(id, chat_type) { let key = `chatDetail_${this.user.id}_${chat_type}_${id}`; $U.removeStorage(key); // 获取所有会话列表 let list = this.getChatList(); // 找到当前会话 let index = list.findIndex(item => item.id === id && item.chat_type === chat_type); if (index !== -1) { list[index].data = ''; let key = `chatlist_${this.user.id}`; this.setStorage(key, list); // 更新会话列表状态 uni.$emit('onUpdateChatList', list); } } /** { id:1, // 接收人/群 id chat_type:'user', // 接收类型 user单聊 group群聊 avatar:'', // 接收人/群 头像 name:'昵称', // 接收人/群 昵称 update_time:(new Date()).getTime(), // 最后一条消息的时间戳 data:"最后一条消息内容", // 最后一条消息内容 type:'text', // 最后一条消息类型 noreadnum:0, // 未读数 istop:false, // 是否置顶 shownickname:0, // 是否显示昵称 nowarn:0, // 消息免打扰 strongwarn:0, // 是否开启强提醒 user_id:0, // 群管理员id remark:"公告", // 群公告 invite_confirm:0, // 邀请确认 } * **/ // 初始化会话 initChatListItem(message) { // 获取本地存储会话列表 let list = this.getChatList() // 会话是否存在 let index = list.findIndex(item => { return item.chat_type === message.chat_type && item.id === message.to_id }) // 最后一条消息展现形式 let data = this.formatChatItemData(message, true) // 会话不存在，创建会话 if (index === -1) { let chatItem = { id: message.to_id, // 接收人/群 id chat_type: message.chat_type, // 接收类型 user单聊 group群聊 avatar: message.to_avatar, // 接收人/群 头像 name: message.to_name, // 接收人/群 昵称 update_time: (new Date()).getTime(), // 最后一条消息的时间戳 data: message.data, // 最后一条消息内容 type: 'system', // 最后一条消息类型 noreadnum: 0, // 未读数 istop: false, // 是否置顶 shownickname: false, // 是否显示昵称 nowarn: false, // 消息免打扰 strongwarn: false, // 是否开启强提醒 } // 群聊 if (message.chat_type === 'group' && message.group) { chatItem = { ...chatItem, user_id: message.group.user_id, // 群管理员id remark: '', // 群公告 invite_confirm: message.group.invite_confirm, // 邀请确认 } } list.unshift(chatItem) // 存储 let key = `chatlist_${this.user.id}` this.setStorage(key, list) // 通知更新vuex中的聊天会话列表 uni.$emit('onUpdateChatList', list) } } // 获取指定会话 getChatListItem(id, chat_type) { // 获取所有会话列表 let list = this.getChatList() // 找到当前会话 let index = list.findIndex(item => item.id === id && item.chat_type === chat_type) if (index !== -1) { return list[index] } return false } // 更新未读数 async updateBadge(list = false) { // 获取所有会话列表 list = list ? list : this.getChatList() // 统计所有未读数 let total = 0 list.forEach(item => { total += item.noreadnum }) // 设置底部导航栏角标 if (total > 0) { uni.setTabBarBadge({ index: 0, text: total <= 99 ? total.toString() : '99+' }) } else { uni.removeTabBarBadge({ index: 0 }) } uni.$emit('totalNoreadnum', total) } // 获取存储 getStorage(key) { let list = $U.getStorage(key); return list ? JSON.parse(list) : []; } // 设置存储 setStorage(key, value) { return $U.setStorage(key, JSON.stringify(value)); } // 数组置顶 listToFirst(arr, index) { if (index != 0) { arr.unshift(arr.splice(index, 1)[0]); } return arr; } // 撤回消息 recall(message) { return new Promise((result, reject) => { $H.post('/chat/recall', { to_id: message.to_id, chat_type: message.chat_type, id: message.id, }).then(res => { // key值：chatDetail_当前用户id_会话类型_接收人/群id let key = `chatDetail_${this.user.id}_${message.chat_type}_${message.to_id}` // 获取原来的聊天记录 let list = this.getChatDetail(key) // 根据k查找对应聊天记录 let index = list.findIndex(item => item.id === message.id) if (index === -1) return; list[index].isremove = 1 // 存储 this.setStorage(key, list) result(res) // 更新会话最后一条消息显示 this.updateChatItem({ id: message.to_id, chat_type: message.chat_type }, (item) => { item.data = '你撤回了一条消息' item.update_time = (new Date()).getTime() return item }) }).catch(err => { reject(err) }) }) } } export default chat
/components/free-ui/free-chat-item.vue
<template> <div @longpress="long"> <!-- 时间显示 --> <view v-if="showTime" class="flex align-center justify-center pb-4 pt-2"> <text class="font-sm text-light-muted">{{showTime}}</text> </view> <!-- 撤回消息 --> <view v-if="item.isremove" ref="isremove" class="flex align-center justify-center pb-4 pt-1"> <text class="font-sm text-light-muted">{{ isself ? '你' : '对方' }}撤回了一条信息</text> </view> <!-- 系统消息 --> <view v-if="item.type === 'system'" ref="isremove" class="flex align-center justify-center pb-4 pt-1"> <text class="font-sm text-light-muted">{{item.data}}</text> </view> <!-- 气泡 --> <view v-if="item.type !== 'system' && !item.isremove" class="flex align-start position-relative mb-3" :class="!isself ? 'justify-start' : 'justify-end'"> <!-- 好友 --> <template v-if="!isself"> <free-avater size="70" :src="item.from_avatar" @click="openUser"></free-avater> <text v-if="hasLabelClass" class="iconfont text-white font-md position-absolute chat-left-icon" :style="shownickname ? 'top:45rpx;':'top:20rpx;'"></text> </template> <view class="flex flex-column"> <!-- 昵称 --> <view v-if="shownickname" class="flex" :class="nicknameClass" style="max-width:500rpx;background-color: rgba(0,0,0,0);" :style="labelStyle"> <text class="font-sm text-muted">{{item.from_name}}</text> </view> <div class="p-2 rounded" :class="labelClass" style="max-width:500rpx;" :style="labelStyle"> <!-- 文字 --> <text v-if="item.type === 'text'" class="font-md">{{item.data}}</text> <!-- 表情包 | 图片--> <free-image @longpress="stop" v-else-if="item.type === 'emoticon' || item.type === 'image'" :src="item.data" @click="preview(item.data)" imageClass="rounded" :maxWidth="500" :maxHeight="350"></free-image> <!-- 音频 --> <view v-else-if="item.type === 'audio'" class="flex align-center" @tap="openAudio" @longpress="stop"> <image v-if="isself" :src=" !audioPlaying ? '/static/images/audio/audio3.png' : '/static/images/audio/audio/play.gif'" style="width: 50rpx;height: 50rpx;" class="mx-1"></image> <text class="font">{{item.options.time + '"'}}</text> <image v-if="!isself" :src=" !audioPlaying ? '/static/images/audio/audio3.png' : '/static/images/audio/audio/play.gif'" style="width: 50rpx;height: 50rpx;" class="mx-1"></image> </view> <!-- 视频 --> <view v-else-if="item.type === 'video'" class="position-relative rounded" @tap="openVideo" @longpress="stop"> <free-image :src="item.options.poster" imageClass="rounded" :maxWidth="300" :maxHeight="350" @load="loadPoster"></free-image> <text class="iconfont text-white position-absolute" style="font-size: 80rpx;width: 80rpx;height: 80rpx;" :style="posterIconStyle"></text> </view> <!-- 名片 --> <view v-else-if="item.type === 'card'" class="bg-white" style="width: 400rpx;" hover-class="bg-light" @tap="openUserBase" @longpress="stop"> <view class="p-3 flex align-center border-bottom border-light-secondary"> <free-avater size="70" :src="item.options.avatar" clickType="navigate"></free-avater> <text class="font ml-2">{{item.data}}</text> </view> <view class="flex align-center p-2"> <text class="font-small text-muted">个人名片</text> </view> </view> </div> </view> <!-- 本人 --> <template v-if="isself"> <text v-if="hasLabelClass" class="iconfont text-chat-item font-md position-absolute chat-right-icon" :style="shownickname ? 'top:45rpx;':'top:20rpx;'"></text> <free-avater size="70" :src="item.from_avatar" @click="openUser"></free-avater> </template> </view> <view v-if="item.sendStatus && item.sendStatus !== 'success'" class="flex align-center justify-end px-4"> <text class="font-sm" :class="item.sendStatus === 'fail' ? 'text-danger' : 'text-muted'">{{item.sendStatus === 'fail' ? '发送失败' : '发送中...'}}</text> </view> </div> </template> <script> import freeAvater from "@/components/free-ui/free-avater.vue" import freeImage from './free-image.vue'; import $T from "@/common/free-lib/time.js" import { mapState,mapActions } from 'vuex' export default { components: { freeAvater, freeImage }, props: { item: Object, index:Number, // 上一条消息的时间戳 pretime:[Number,String], shownickname:{ type:Boolean, default:false } }, data() { return { innerAudioContext:null, audioPlaying:false, // 默认封面的宽高 poster:{ w:100, h:100 } } }, computed: { ...mapState({ user:state=>state.user.user }), // 是否是本人 isself() { // 获取本人id let id = this.user.id ? this.user.id : 0 return this.item.from_id === id }, // 显示的时间 showTime(){ return $T.getChatTime(this.item.create_time,this.pretime) }, // 是否需要气泡样式 hasLabelClass(){ return this.item.type === 'text' || this.item.type === 'audio' }, // 气泡的样式 labelClass(){ let label = this.hasLabelClass ? 'bg-chat-item mr-3' : 'mr-3' return this.isself ? label : 'bg-white ml-3' }, nicknameClass(){ let c = this.isself ? 'justify-end' : '' return c +' '+ this.labelClass }, labelStyle(){ if (this.item.type === 'audio') { let time = this.item.options.time || 0 let width = parseInt(time) / (60/500) width = width < 150 ? 150 : width return `width:${width}rpx;` } }, // 短视频封面图标位置 posterIconStyle(){ let w = this.poster.w/2 - uni.upx2px(80)/2 let h = this.poster.h/2- uni.upx2px(80)/2 return `left:${w}px;top:${h}px;` } }, mounted() { // 注册全局事件 if (this.item.type === 'audio') { this.audioOn(this.onPlayAudio) } // 监听是否撤回消息 // #ifdef APP-PLUS-NVUE this.$watch('item.isremove',(newVal,oldVal)=>{ if (newVal) { const animation = weex.requireModule('animation') this.$nextTick(()=>{ animation.transition(this.$refs.isremove, { styles: { opacity:1 }, duration: 100, //ms timingFunction: 'ease', }, function () { console.log('动画执行结束'); }) }) } }) // #endif }, // 组件销毁 destroyed() { if (this.item.type === 'audio') { this.audioOff(this.onPlayAudio) } // 销毁音频 if (this.innerAudioContext) { this.innerAudioContext.destroy() this.innerAudioContext = null } }, methods:{ ...mapActions(['audioOn','audioEmit','audioOff']), openUser(){ uni.navigateTo({ url: '/pages/mail/user-base/user-base?user_id='+this.item.from_id, }); }, stop(){}, // 打开名片 openUserBase(){ uni.navigateTo({ url: '/pages/mail/user-base/user-base?user_id='+this.item.options.id, }); }, // 加载封面 loadPoster(e){ this.poster.w = e.w this.poster.h = e.h }, // 监听播放音频全局事件 onPlayAudio(index){ if (this.innerAudioContext) { if (this.index !== index) { this.innerAudioContext.pause() } } }, // 播放音频 openAudio(){ // 通知停止其他音频 this.audioEmit(this.index) if (!this.innerAudioContext) { this.innerAudioContext = uni.createInnerAudioContext(); this.innerAudioContext.src = this.item.data this.innerAudioContext.play() // 监听播放 this.innerAudioContext.onPlay(()=>{ this.audioPlaying = true }) // 监听暂停 this.innerAudioContext.onPause(()=>{ this.audioPlaying = false }) // 监听停止 this.innerAudioContext.onStop(()=>{ this.audioPlaying = false }) // 监听错误 this.innerAudioContext.onError(()=>{ this.audioPlaying = false }) } else { this.innerAudioContext.stop() this.innerAudioContext.play() } }, // 预览图片 preview(url){ this.$emit('preview',url) }, // 长按事件 long(e){ if(this.item.type==='system' || this.item.isremove){ return; } let x = 0 let y = 0 // #ifdef APP-PLUS-NVUE if (Array.isArray(e.changedTouches) && e.changedTouches.length > 0) { x = e.changedTouches[0].screenX y = e.changedTouches[0].screenY } // #endif // #ifdef H5 x = e.changedTouches[0].pageX y = e.changedTouches[0].pageY // #endif // #ifdef MP x = e.detail.x y = e.detail.y // #endif this.$emit('long',{ x, y, index:this.index }) }, // 打开视频 openVideo(){ uni.navigateTo({ url: '/pages/chat/video/video?url='+this.item.data, }); } } } </script> <style scoped> .chat-left-icon{ left: 80rpx; } .chat-right-icon{ right: 80rpx; } .chat-animate{ /* #ifndef APP-PLUS-NVUE */ opacity: 0; /* #endif */ } </style>
感谢大家观看，我们下次见
