uni-app 132发送名片功能（二）

/pages/mail/user-base/user-base.vue

<template><view class="page"><!-- 导航栏 --><free-nav-bar showBack :showRight="detail.friend" bgColor="bg-white"><free-icon-button slot="right" v-if="detail.friend"><text class="iconfont font-md"@click="openAction">&#xe6fd;</text></free-icon-button></free-nav-bar><view class="px-3 py-4 flex align-center bg-white border-bottom"><free-avatar :src="detail.avatar" size="120"></free-avatar><view class="flex flex-column ml-3 flex-1"><view class="font-lg font-weight-bold flex justify-between"><text class="font-lg font-weight-bold mb-1">{{detail.nickname}}</text><image v-if="detail.star" src="/static/images/star.png" style="width: 40rpx;height: 40rpx;"></image></view><text class="font-md text-light-muted mb-1">账号：{{detail.username}}</text><!-- <text class="font-md text-light-muted">地区：广东广州</text> --></view></view><free-list-item v-if="detail.friend" showRight :showLeftIcon="false" @click="navigate(tagPath)"><view class="flex align-center"><text class="font-md text-dark mr-3">标签</text><text class="font-md text-light-muted mr-2" v-for="(item,index) in detail.tags":key="index">{{item}}</text></view></free-list-item><free-divider></free-divider><free-list-item v-if="detail.friend" showRight :showLeftIcon="false"><view class="flex align-center"><text class="font-md text-dark mr-3">朋友圈</text><image src="/static/images/demo/cate_01.png" style="width: 90rpx; height: 90rpx;" class=" mr-2"></image><image src="/static/images/demo/cate_01.png" style="width: 90rpx; height: 90rpx;" class=" mr-2"></image><image src="/static/images/demo/cate_01.png" style="width: 90rpx; height: 90rpx;" class=" mr-2"></image></view></free-list-item><free-list-item title="更多信息" showRight :showLeftIcon="false"></free-list-item><free-divider></free-divider><view v-if="detail.friend" class="py-3 flex align-center justify-center bg-white" hover-class="bg-light" @click="doEvent"><text class="iconfont text-primary mr-1" v-if="!detail.isBlack">&#xe64e;</text><text class="font-md text-primary">{{detail.isblack ? '移除黑名单' : '发信息'}}</text></view><view v-else class="py-3 flex align-center justify-center bg-white" hover-class="bg-light"@click="navigate(addFriend())"><text class="font-md text-primary">添加好友</text></view><!-- 扩展菜单 --><free-popup ref="action" bottom transformOrigin="center bottom" maskColor><scroll-view style="height: 580rpx;" scroll-y="true" class="bg-white" :show-scrollbar="false"><free-list-item v-for="(item,index) in actions" :key="index" :title="item.title" :showRight="false":border="false" @click="popupEvent(item)"><text slot="icon" class="iconfont font-lg py-1">{{item.icon}}</text></free-list-item></scroll-view></free-popup></view>
</template><script>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 freeListItem from '@/components/free-ui/free-list-item.vue';import freeDivider from '@/components/free-ui/free-divider.vue';import freeAvatar from '@/components/free-ui/free-avatar.vue';import auth from '@/common/mixin/auth.js';import $H from '@/common/free-lib/request.js';export default {mixins: [auth],components: {freeNavBar,freeIconButton,freeChatItem,freePopup,freeListItem,freeDivider,freeAvatar},data() {return {detail: {id: 0,username: '',nickname: '',avatar: '',sex: '',sign: '',area: '',friend: false,lookhim: 1,lookme: 1,star: 0,isblack: 0,tags: []},}},onShow() {this.getData();},onLoad(e) {uni.$on('saveRemarkTag', (e) => {this.detail.tagList = e.detail.tagListthis.nickname = e.nickname;})if (!e.user_id) {return this.backToast();}this.detail.id = e.user_id;// 获取当前用户资料this.getData();},beforeDestroy() {this.$refs.action.hide();uni.$off('saveRemarkTag')},computed: {tagPath() {return "mail/user-remark-tag/user-remark-tag?params="+JSON.stringify({user_id:this.detail.id,nickname:this.detail.nickname,tags:this.detail.tags ? this.detail.tags.join(',') : ''})},actions() {return [{icon: "\ue6b3",title: "设置备注和标签",type: "navigate",path: this.tagPath}, {icon: "\ue613",title: "把他推荐给朋友",type: "navigate",path: "mail/send-card/send-card"}, {icon: "\ue6b0",title: this.detail.star ? '取消星标好友' : "设为星标朋友",type: "event",event: "setStar"}, {icon: "\ue667",title: "设置朋友圈和动态权限",type: "navigate",path: "mail/user-moments-auth/user-moments-auth?user_id="+this.detail.id+"&params="+JSON.stringify({lookme:this.detail.lookme,lookhim:this.detail.lookhim,})}, {icon: "\ue638",title: this.detail.isblack ? '移出黑名单' : "加入黑名单",type: "event",event: "setBlack"}, {icon: "\ue61c",title: "投诉",type: "navigate",path: "mail/user-report/user-report?params="+JSON.stringify({user_id:this.detail.id,type:'user'})}, {icon: "\ue638",title: "删除",type: "event",event: "deleteItem"}]}},methods: {addFriend() {let obj = {friend_id: this.detail.id,nickname: this.detail.nickname,lookme: typeof this.detail.lookme === 'number' ? this.detail.lookme : 1,lookhim: typeof this.detail.lookhim === 'number' ? this.detail.lookhim : 1,};return 'mail/add-friend/add-friend?params=' + JSON.stringify(obj);},getData() {$H.get('/friend/read/' + this.detail.id).then(res => {if (!res) {return this.backToast('该用户不存在');}this.detail = res;console.log(res);});},openAction() {this.$refs.action.show()},navigate(url) {console.log(url)uni.navigateTo({url: '/pages/' + url,});},// 操作菜单事件popupEvent(e) {if (!e.type) {return;}setTimeout(() => {// 关闭弹出层this.$refs.action.hide()}, 300)switch (e.type) {case 'navigate':this.navigate(e.path);break;case 'event':this[e.event](e);break;}},// 设为星标setStar(e) {let star = this.detail.star == 0 ? 1 : 0;$H.post('/friend/setstar/' + this.detail.id, {star}).then(res => {this.detail.star = star;e.title = this.detail.star ? '取消标星好友' : '设为标星好友';});},// 加入黑名单setBlack(e) {let msg = this.detail.isblack ? '移出黑名单' : '加入黑名单';uni.showModal({content: '是否要' + msg,success: (res) => {if (res.confirm) {let isblack = this.detail.isblack == 0 ? 1:0$H.post('/friend/setblack/' + this.detail.id, {isblack}).then(res => {this.detail.isblack = isblack;});// this.detail.isBlack = !this.detail.isBlack;// e.title = this.isBlack ? '移出黑名单' : '加入黑名单';uni.showToast({title: msg + '成功',icon: 'none'})}}})},// 发送消息doEvent(e){if(this.detail.isblack){return this.setBlack();}uni.navigateTo({url:'../../chat/chat/chat?params='+encodeURIComponent(JSON.stringify({id:this.detail.id,name:this.detail.nickname ?  this.detail.nickname : this.detail.username,avatar:this.detail.avatar,chat_type:'user'}))})}}}
</script><style></style>

/pages/chat/chat/chat.vue

<template><view><!-- 导航栏 --><free-nav-bar :title="detail.name" :noreadnum="totalNoreadnum" showBack><free-icon-button slot="right" @click="openChatSet"><text class="iconfont font-lg">&#xe6fd;</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"><textclass="iconfont font-lg">&#xe607;</text></free-icon-button><free-icon-button v-else @click="changeVoiceOrText"><text class="iconfont font-lg">&#xe606;</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: 50rpx;max-width: 450rpx;":adjust-position="false" v-model="text" @focus="mode = 'text'" /></view><!-- 表情 --><free-icon-button @click="openActionOrEmoticon('emoticon')"><text class="iconfont font-lg">&#xe605;</text></free-icon-button><template v-if="text.length === 0"><!-- 扩展菜单 --><free-icon-button @click="openActionOrEmoticon('action')"><text class="iconfont font-lg">&#xe603;</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-NVUEconst dom = weex.requireModule('dom')// #endifimport 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-NVUEstatusBarHeight = plus.navigator.getStatusbarHeight()// #endifthis.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 = 100return this.menusList.length * H},// 获取菜单的样式getMenusStyle() {return `height: ${this.getMenusHeight}rpx;`},// 判断是否操作本人信息isdoSelf() {// 获取本人id（假设拿到了）let id = 1let user_id = this.propIndex > -1 ? this.list[this.propIndex].user_id : 0return user_id === id},// 聊天区域bottomchatBodyBottom() {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 = modethis.$refs.action.show()uni.hideKeyboard()this.KeyboardHeight = uni.upx2px(580)},// 发送send(type, data = '', options = {}) {// 组织数据格式switch (type) {case 'text':data = data || this.textbreak;}let message = this.chat.formatSendData({type,data,options})// 渲染到页面let index = this.list.lengththis.list.push(message)// 监听上传进度let onProgress = falseif (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.idthis.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() {// #ifdef APP-PLUS-NVUElet chatItem = this.$refs.chatItemlet lastIndex = chatItem.length > 0 ? chatItem.length - 1 : 0if (chatItem[lastIndex]) {dom.scrollToElement(chatItem[lastIndex], {})}// #endif// #ifndef APP-NVUEsetTimeout(() => {let lastIndex = this.list.length - 1this.scrollIntoView = 'chatItem_' + lastIndex}, 300)// #endif},// 长按消息气泡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_idif (isSelf) {menus.push({name: "撤回",event: 'removeChatItem'})}// #ifndef H5if (item.type === 'text') {menus.unshift({name: "复制",event: 'copy',})}// #endifthis.menusList = menus// 显示扩展菜单this.$refs.extend.show(x, y)},// 操作菜单方法分发clickEvent(event) {let item = this.list[this.propIndex]let isSelf = this.user.id === item.from_idswitch (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 = datareturn 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 = truethis.RecordingStartY = e.changedTouches[0].screenYthis.unRecord = false// 开始录音this.RECORD.start({format: "mp3"})},// 录音结束voiceTouchEnd() {this.isRecording = false// 停止录音this.RECORD.stop()},// 录音被打断voiceTouchCancel() {this.isRecording = falsethis.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';
class chat {constructor(arg) {this.url = arg.urlthis.isOnline = falsethis.socket = null// 获取当前用户相关信息let user = $U.getStorage('user');this.user = user ? JSON.parse(user) : {},// 初始化聊天对象this.TO = false;// 连接和监听if (this.user.token) {this.connectSocket()}}// 连接socketconnectSocket() {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.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;console.log('socket连接关闭');}// 监听消息onMessage(data) {console.log('监听消息', data);let res = JSON.parse(data.data)// console.log('监听接收消息',res)// 错误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;}}// 监听撤回处理async handleOnRecall(message) {// 通知聊天页撤回消息uni.$emit('onMessage', {...message,isremove: 1})// 修改聊天记录let id = message.chat_type === 'group' ? message.to_id : message.from_id// key值：chatDetail_当前用户id_会话类型_接收人/群idlet 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() {this.socket.close()}// 创建聊天对象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, // 发送者idto_id: params.to_id || this.TO.id, // 接收人/群 idto_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);}// 提交到后端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.idmessage.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('添加到聊天记录');// 获取对方idlet id = message.chat_type === 'user' ? (isSend ? message.to_id : message.from_id) : message.to_id;if (!id) {return {data: {},k: 0}}// key值：chatDetail_当前用户id_会话类型_接收人/群idlet key = `chatDetail_${this.user.id}_${message.chat_type}_${id}`;console.log(key);// 获取原来的聊天记录let list = this.getChatdetail(key)console.log('获取原来的聊天记录', list);// 标识message.k = 'k' + list.lengthlist.push(message)// 加入存储console.log('加入存储', message);this.setStorage(key, list);// 返回return {data: message,k: message.k}}// 删除指定聊天记录async deleteChatDetailItem(message,isSend = true){// 获取对方idlet id = message.chat_type === 'user' ? (isSend ? message.to_id : message.from_id) : message.to_id;// key值：chatDetail_当前用户id_会话类型_接收人/群idlet 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) {// 获取对方idlet id = message.chat_type === 'user' ? (isSend ? message.to_id : message.from_id) : message.to_id;// key值：chatDetail_当前用户id_会话类型_接收人/群idlet 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 = 0let avatar = ''let name = ''// 判断私聊还是群聊if (message.chat_type === 'user') { // 私聊// 聊天对象是否存在isCurrentChat = this.TO ? (isSend ? this.TO.id === message.to_id : this.TO.id === message.from_id) :falseid = isSend ? message.to_id : message.from_idavatar = isSend ? message.to_avatar : message.from_avatarname = isSend ? message.to_name : message.from_name} else { // 群聊isCurrentChat = this.TO && (this.TO.id === message.to_id)id = message.to_idavatar = message.to_avatarname = 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)// 会话不存在，创建会话// 未读数是否 + 1let noreadnum = (isSend || isCurrentChat) ? 0 : 1if (index === -1) {let chatItem = {id, // 接收人/群 idchat_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 = truechatItem.name = message.to_namechatItem = {...chatItem,user_id: message.group.user_id, // 群管理员idremark: "", // 群公告invite_confirm: 1, // 邀请确认}}list.unshift(chatItem)} else { // 存在，更新会话// 拿到当前会话let item = list[index]// 更新该会话最后一条消息时间，内容，类型item.update_time = (new Date()).getTime()item.name = message.to_nameitem.data = dataitem.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_avatarname = 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}`;// 未读数是否 +1let noreadnum = (isSend || isCurrentChat) ? 0 : 1;// 会话不存在 创建会话if (index === -1) {let chatItem = {id, // 接收人/群 idchat_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, // 管理员idremark: '', // 群公告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,  // 接收人/群 idchat_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, // 接收人/群 idchat_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, // 群管理员idremark:"公告", // 群公告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, // 接收人/群 idchat_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, // 群管理员idremark: '', // 群公告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 = 0list.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_会话类型_接收人/群idlet 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

下图是我测试的截图

感谢大家观看，我们下次见

uni-app 132发送名片功能（二）相关推荐

uni app实现WIFI功能(只支持安卓APP)
uni app实现WIFI功能一.前言二.使用 uni-WIFI 三.使用h5+ api 一.前言最近需要在uniapp上实现WiFi功能,将个人的研究结果记录如下(都只支持安卓APP) 使用 ...
如何在App中实现朋友圈功能之四在朋友圈中添加发送图片功能——箭扣科技Arrownock
如何在App中实现朋友圈功能之四在朋友圈中添加发送图片功能实现概念: 当用户在界面点击发送按钮的时候,如果已经有选择好的图片,我们的做法是先上传图片到服务器,再将图片Id作为Post的属性上传. ...
【Android】多功能二维码实现思路，自动连接WI-FI
现在项目的需求是: 1. 带AP功能的机顶盒端能生成二维码,供手机客户端扫描 1.1 如果用非特定应用(手机助手)扫描,则跳转下载手机助手界面 1.2 如果用手机助手扫描,自动连接到该机顶盒的WI-F ...
App项目实战之路(二):API篇
原创文章,转载请注明:转载自Keegan小钢并标明原文链接:http://keeganlee.me/post/practice/20160812 微信订阅号:keeganlee_me 写于2016- ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
测试-APP端常见测试功能点
** 一.安装.卸载.更新.运行 1.安装.卸载 ** 应用是否可以正常安装(命令行安装:apk/ipa安装包安装)(有网,无网是否都正常) 卸载过程中出现死机,断电,重启等意外的情况,待环境恢复后是 ...
uni app页面传值
传值是很常见的知识点,刚开始接触uni app总会踩到很多传值的坑,不是这里传不过去,就是那边接收不到,以下是我遇到过的一些传值方式,实在不行,咱就一个一个试,总有一个能"干起". ...
全面剖析支付宝服务窗功能二次开发
支付宝服务窗功能二次开发是类似于微信公众号功能二次开发一样的平台,但是支付宝跟微信之间只有区别的,微信可提供给客户发布些个人相关的信息.言论.文章等,也可以提供给单位使用:而且都支持二次开发的.而支付 ...
Android App Bundle：动态功能模块
目录 Android App Bundle 创建动态功能模块动态功能模块与主模块建立关联部署应用按需分发On-Demand 免安装分发自 2021 年 8 月起,Google Play 将开 ...

uni-app 132发送名片功能（二）

uni-app 132发送名片功能（二）相关推荐

最新文章

热门文章