/pages/chat/chat-list/chat-list.vue
<template> <view class="page"> <!-- 导航栏 --> <free-nav-bar title="选择" showBack :showRight="true"> <free-main-button :name="muliSelect ? '发送 ('+selectCount+')' : '多选'" slot="right" @click="handlenNav"> </free-main-button> </free-nav-bar> <!-- 搜索框 --> <view class="p-3 bg-light position-fixed left-0 right-0" :style="'top:'+top+'px;'" style="z-index: 2;"> <input type="text" value="" v-model="keyword" placeholder="搜索" class="bg-white rounded" placeholder-class="text-center" style="height: 80rpx;" /> </view> <view style="height:140rpx;"></view> <free-list-item v-for="(item,index) in allList" :key="index" :title="item.name" :cover="item.avatar || '/static/images/userpic.png'" showRight :showRightIcon="false" @click="selectItem(item)"> <view v-if="muliSelect" slot="right" class="border rounded-circle flex align-center" style="width: 40rpx;height: 40rpx;"> <view v-if="item.checked" class="main-bg-color rounded-circle" style="width: 39rpx;height: 39rpx;"> </view> </view> </free-list-item> <view style="height:100rpx;" class="flex align-center justify-center" v-if="keyword !== '' && searchList.length === 0"> <text class="font text-light-muted">暂无搜索结果</text> </view> <free-confirm ref="confirm" title="发送给:"> <scroll-view v-if="selectCount > 0" scroll-x="true" :show-scrollbar='false'> <view class="flex"> <view class="mr-1" v-for="(item,index) in selectList" :key="index"> <free-avatar :src="item.avatar" size="60"></free-avatar> </view> </view> </scroll-view> <view class="flex" v-else> <free-avatar :src="sendItem.avatar" size="60"></free-avatar> <text class="font text-muted ml-2">{{sendItem.name}}</text> </view> <view class="my-3 bg-light rounded p-2"> <text class="font text-light-muted">{{message}}</text> </view> <input type="text" value="" class="border-bottom font-md" style="height: 60rpx;" placeholder="给朋友留言" v-model="content" /> </free-confirm> </view> </template> <script> import freeNavBar from '@/components/free-ui/free-nav-bar.vue'; import freeMainButton from '@/components/free-ui/free-main-button.vue'; import freeListItem from '@/components/free-ui/free-list-item.vue'; import freeConfirm from '@/components/free-ui/free-confirm.vue'; import freeAvatar from '@/components/free-ui/free-avatar.vue'; import { mapState } from 'vuex'; export default { components: { freeNavBar, freeMainButton, freeListItem, freeConfirm, freeAvatar }, data() { return { keyword: '', muliSelect: false, top: 0, list: [], detail: {}, sendItem: {}, content:'' } }, computed: { ...mapState({ chatList: state => state.user.chatList, chat: state => state.user.chat, }), // 最终列表 allList() { return this.keyword === '' ? this.list : this.searchList; }, // 搜索结果列表 searchList() { if (this.keyword === '') { return []; } return this.list.filter(item => { return item.name.indexOf(this.keyword) !== -1; }) }, // 选中列表 selectList() { return this.list.filter(item => item.checked) }, // 选中数量 selectCount() { return this.selectList.length; }, message() { let obj = { image: '[图片]', video: '[视频]', audio: '[语音]', card: '[名片]', emoticon: '[表情]' }; return this.detail.type === 'text' ? this.detail.data : obj[this.detail.type]; } }, methods: { // 点击导航栏 (群发) handlenNav() { if (!this.muliSelect) { return this.muliSelect = true; } // 发送 if (this.selectCount === 0) { return uni.showToast({ title: '请先选择', icon: 'none' }); } this.$refs.confirm.show((close) => { this.selectList.forEach(item => { this.send(item) if (this.content) { this.send(item, this.content, 'text') } }); close(); uni.reLaunch({ url: "../../tabbar/index/index" }) }); }, // 选中、取消选中 selectItem(item) { // 选中、取消选中 if (this.muliSelect) { // 选中 if (!item.checked && (this.selectCount === 9)) { // 限制选中数量 return uni.showToast({ title: '最多选中9个', icon: 'none' }) } // 取消选中 return item.checked = !item.checked; } // 发送 this.sendItem = item; this.$refs.confirm.show((close) => { this.send(item); if (this.content) { // this.send(item, this.content, 'text') this.send(item, this.content, this.detail.type) } close(); uni.reLaunch({ url: "../../tabbar/index/index" }) }); }, send(item,data=false,type = false) { // console.log(this.detail.options.id);return; let message = this.chat.formatSendData({ to_id: item.id, to_name: item.name, to_avatar: item.avatar, data:data || this.detail.data, type:type || this.detail.type, chat_type:item.chat_type, options: { id:this.detail.options.id, avatar:this.detail.options.avatar } }); this.chat.send(message); uni.$emit('updateHistory',false); } }, onLoad(e) { let res = uni.getSystemInfoSync(); this.top = res.statusBarHeight + uni.upx2px(90); this.list = this.chatList.map(item => { return { ...item, checked: false } }) if (e.params) { this.detail = JSON.parse(decodeURIComponent(e.params)); } } } </script> <style> </style>
/pages/mail/user-base/user-base.vue
<template> <view class="page"> <!-- 导航栏 --> <free-nav-bar showBack :showRight="detail.friend" bgColor="bg-white"> <view slot="right"> <free-icon-button v-if="detail.friend"><text class="iconfont font-md" @click="openAction"></text></free-icon-button> </view> </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"></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.tagList this.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: "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(',') : '' }) }, { icon: "\ue613", title: "把他推荐给朋友", type: "navigate", path: "chat/chat-list/chat-list?params="+encodeURIComponent(JSON.stringify({ type: "card", data: this.detail.nickname || this.detail.username, options: { avatar: this.detail.avatar, id: this.detail.id } })) }, { 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+"¶ms="+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; } }, // 删除好友 deleteItem(){ uni.showModal({ title: '是否要删除好友？', success: res => { if(res.confirm){ $H.post('/friend/destroy',{friend_id:this.detail.id}).then(res=>{ uni.showToast({ title:'删除好友成功', icon:'none' }); uni.reLaunch({ url:'/pages/tabbar/index/index' }) }) } }, fail: () => {}, complete: () => {} }); }, // 设为星标 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>
感谢大家观看，我们下次见
