uni-app 66聊天类chat.js封装（三）

chat.js

import  $U from "./util.js";
class chat {constructor(arg) {this.url = arg.url this.isOnline = falsethis.socket = null// 获取当前用户相关信息let user = $U.getStorage('user');this.user = user ? JSON.parse(user) : {}// 连接和监听if(this.user.token){this.connectSocket()}}// 连接socketconnectSocket(){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连接成功');// 获取用户离线消息}// 监听关闭onClose(){// 用户下线this.isOnline = false;this.socket = null;console.log('socket连接关闭');}// 监听消息onMessage(data){console.log('监听消息',data);}// 监听连接错误onError(){// 用户下线this.isOnline = false;this.socket = null;console.log('socket连接错误');}// 关闭连接close(){this.socket.close()}
}
export default chat

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.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>

uni-app 66聊天类chat.js封装（三）相关推荐

js封装毫秒时间戳转换仿微信聊天时间显示格式
js封装毫秒时间戳转换仿微信聊天时间显示格式先把微信的时间显示规则拍上来微信聊天消息时间显示说明 1.当天的消息,以每5分钟为一个跨度的显示时间: 2.消息超过1天.小于1周,显示星期+收发消息的 ...
android php实时聊天工具,Android_Android 应用APP加入聊天功能，简介自去年 LeanCloud 发布实时 - phpStudy...
Android 应用APP加入聊天功能简介自去年 LeanCloud 发布实时通信(IM)服务之后,基于用户反馈和工程师对需求的消化和对业务的提炼,上周正式发布了「实时通信 2.0 」.设计理念依 ...
uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
vant 验证手机号_【uni app】vant weapp的引入和部分详细调用（表单输入框、验证码、弹出层搭配选择器、地图）...
本次小程序的开发使用uni app+vant weapp,vant weapp如何引用和部分组件使用方法如下引入在github(https://github.com/youzan/vant-wea ...
uni app实现WIFI功能(只支持安卓APP)
uni app实现WIFI功能一.前言二.使用 uni-WIFI 三.使用h5+ api 一.前言最近需要在uniapp上实现WiFi功能,将个人的研究结果记录如下(都只支持安卓APP) 使用 ...
关于js封装函数的一些东西
关于封装函数,函数封装是一种函数的功能,它把一个程序员写的一个或者多个功能通过函数.类的方式封装起来,对外只提供一个简单的函数接口.当程序员在写程序的过程中需要执行同样的操作时,程序员(调用者)不需要 ...
使用NW.js封装微信公众号菜单编辑器为桌面应用
开发微信公众号的朋友都会遇到一个常见的需求就是修改自定义菜单,如果每个人都去开发这个不经常使用的功能确实有点浪费时间.前段时间在github上找到一个仿企业号的菜单编辑界面,结合微信的C# SDK开发 ...
js纯ajax,自动完成JS类(纯JS, Ajax模式)
自动完成JS类(纯JS, Ajax模式) 更新时间:2009年03月12日 23:51:15 作者: 自动完成JS类,用户体验较好.封装成类,方便使用.本站一. 封装的JS文件 //****** ...
消除类游戏(js版)
原文:消除类游戏(js版) 最近一直在玩一款消灭星星的消除类游戏,周末无聊就用js也写了一遍,感觉玩比写还困难一直玩不到10000分.废话不多说直接上源码. 效果图(ps 页面有点难看木有美工) 代码 ...

uni-app 66聊天类chat.js封装（三）

uni-app 66聊天类chat.js封装（三）相关推荐

最新文章

热门文章