chat-set.vue

<template><view style="background-color: #EDEDED;"><!-- 导航栏 --><free-nav-bar title="聊天信息" showBack :showRight="false"></free-nav-bar><view class="flex flex-wrap py-3 bg-white"><!-- 私聊 --><view v-if="detail.chat_type === 'user'" class="flex flex-column align-center justify-center mb-2" style="width: 150rpx;"><free-avatar :src="detail.avatar || '/static/images/userpic.png'" size="110"></free-avatar><text class="font text-muted mt-1" >{{detail.name}}</text></view><!-- 群聊 --><view v-else class="flex flex-column align-center justify-center mb-2" style="width: 150rpx;" v-for="(item,index) in list" :key='index'><free-avatar :src="item.avatar || '/static/images/userpic.png'" size="110"></free-avatar><text class="font text-muted mt-1" >{{item.name}}</text></view><view class="flex flex-column align-center justify-center mb-2" style="width: 150rpx;"  @click="openMail"><view class="flex align-center justify-center border"  hover-class="bg-light" style="width: 120rpx;height: 120rpx;"><text class="text-light-muted" style="font-size: 100rpx;" >+</text></view></view></view><free-divider></free-divider><view v-if="detail.chat_type==='group'"><free-list-item title="群聊名称" showRight :showLeftIcon="false"><text slot="right" class="font text-muted">{{detail.name}}</text></free-list-item><free-list-item title="群二维码" showRight :showLeftIcon="false"><text slot="right" class="iconfont font-md text-light-muted">&#xe647;</text></free-list-item><free-list-item title="群公告" showRight :showLeftIcon="false"></free-list-item></view><free-divider></free-divider><free-list-item title="查找聊天记录" showRight :showLeftIcon="false"></free-list-item><free-divider></free-divider><free-list-item title="消息免打扰" showRight :showLeftIcon="false" :showRightIcon="false"><switch slot="right" :checked="detail.nowarn" @change="" color="#08C060"/></free-list-item><free-list-item title="置顶聊天" showRight :showLeftIcon="false" :showRightIcon="false"><switch slot="right" :checked="detail.istop" @change="" color="#08C060"/></free-list-item><free-list-item title="强提醒" showRight :showLeftIcon="false" :showRightIcon="false"><switch slot="right" :checked="detail.strongwarn" @change="" color="#08C060"/></free-list-item><free-divider></free-divider><free-list-item title="清空聊天记录" showRight :showLeftIcon="false"></free-list-item><free-divider></free-divider><view v-if="detail.chat_type==='group'"><free-divider></free-divider><free-list-item title="我在本群的昵称" showRight :showLeftIcon="false"><text slot="right" class="font text-muted">昵称</text></free-list-item><free-list-item title="显示群成员昵称" showRight :showLeftIcon="false" :showRightIcon="false"><switch slot="right" :checked="detail.shownickname" @change="" color="#08C060"/></free-list-item></view><free-divider></free-divider><free-list-item title="投诉" showRight :showLeftIcon="false"></free-list-item><free-divider></free-divider><view class="py-3 flex align-center justify-center bg-white" hover-class="bg-light"><text class="font-md text-danger">删除并退出</text></view><view style="height: 200rpx;"></view></view>
</template><script>import freeNavBar from '@/components/free-ui/free-nav-bar.vue';import freeAvatar from '@/components/free-ui/free-avatar.vue';import freeDivider from '@/components/free-ui/free-divider.vue';import freeListItem from '@/components/free-ui/free-list-item.vue';import { mapState } from 'vuex';import $H from '@/common/free-lib/request.js';export default {components:{freeNavBar,freeAvatar,freeDivider,freeListItem},computed:{...mapState({chat:state=>state.user.chat})},data() {return {list:[],detail:{id:0,  // 接收人/群 idchat_type:'user', // 接收类型 user 单聊 group群聊name:'', // 接收人/群 昵称avatar:"", // 接收人/群 头像type:'',// 最后一条消息类型istop:false, // 是否置顶shownickname:false, // 是否显示昵称nowarn:false, // 是否免打扰strongwarn:false, //  是否强提醒user_id:0,//管理员id，remark:'', // 群公告invite_confirm:0, // 邀请确认}}},methods: {openMail(){uni.navigateTo({url:'/pages/mail/mail/mail?type=createGroup'})}},onLoad(e) {if(!e.params){return this.backToast();}let detail = JSON.parse(e.params);// 获取当前会话的详细资料detail = this.chat.getChatListItem(detail.id,detail.chat_type);if(!detail){return this.backToast()}this.detail = detail;if(this.detail.chat_type === 'group'){$H.get('/group_info/'+this.detail.id).then(res=>{this.list = res.group_users.map(item=>{return {id:item.user_id,name:item.nickname || item.user.nickname || item.user.username,avatar:item.user.avatar}})}).catch(err=>{uni.navigateBack({delta:1,})})}}}
</script><style></style>

free-nav-bar.vue

<template><view><view :class="getClass"><!-- 状态栏 --><view :style="'height:'+statusBarHeight+'px'"></view><!-- 导航 --><view class="w-100 flex align-center justify-between" style="height: 90rpx;"><!-- 左边 --><view class="flex align-center"><!-- 返回按钮 --><!-- #ifndef MP --><free-icon-button v-if="showBack" @click="back"><text class="iconfont font-md">&#xe60d;</text></free-icon-button><!-- #endif --><!-- 标题 --><slot><text v-if="title" class="font-md ml-3">{{getTitle}}</text></slot></view><!-- 右边 --><view class="flex align-center" v-if="showRight"><slot name="right"><free-icon-button @click="search"><text class="iconfont font-md">&#xe6e3;</text></free-icon-button><free-icon-button @click="openExtend"><text class="iconfont font-md">&#xe682;</text></free-icon-button></slot></view></view></view><!-- 占位 --><view v-if="fixed" :style="fixedStyle"></view><!-- 扩展菜单 --><free-popup v-if="showRight" ref="extend" :bodyWidth="320" :bodyHeight="525"bodyBgColor="bg-dark" transformOrigin="right top"><view class="flex flex-column" style="width: 320rpx;height: 525rpx;"><view class="flex-1 flex align-center" hover-class="bg-hover-dark"v-for="(item,index) in menus":key="index"@click="clickEvent(item)"><text class="iconfont pl-3 pr-2 font-md text-white">{{item.icon}}</text><text class="font-md text-white">{{item.name}}</text></view></view></free-popup></view>
</template><script>import freeIconButton from "./free-icon-button.vue"import freePopup from "./free-popup.vue"export default {props: {showBack:{type:Boolean,default:false},backEvent:{type:Boolean,default:true},title: {type: [String,Boolean],default:false },fixed:{type:Boolean,default:true},noreadnum:{type:[Number,String],default:0},bgColor:{type:String,default:"bg-light"},showRight:{type:Boolean,default:true}},components:{freeIconButton,freePopup},data() {return {statusBarHeight:0,navBarHeight:0,menus:[{name:"发起群聊",event:"navigateTo",path:"/pages/mail/mail/mail?type=createGroup",icon:"\ue633"},{name:"添加好友",event:"navigateTo",path:"/pages/common/search/search",icon:"\ue65d"},// #ifndef H5{name:"扫一扫",event:"",icon:"\ue614"},// #endif{name:"收付款",event:"",icon:"\ue66c"},{name:"帮助与反馈",event:"",icon:"\ue66c"}],}},mounted() {// #ifdef APP-PLUS-NVUEthis.statusBarHeight = plus.navigator.getStatusbarHeight()// #endifthis.navBarHeight = this.statusBarHeight + uni.upx2px(90)},computed: {fixedStyle() {return `height:${this.navBarHeight}px`},getTitle(){let noreadnum = this.noreadnum > 0 ? '('+this.noreadnum+')' : ''return this.title + noreadnum},getClass(){let fixed = this.fixed?'fixed-top':''return `${fixed} ${this.bgColor}` }},methods: {openExtend() {this.$refs.extend.show(uni.upx2px(415),uni.upx2px(150))},// 返回back(){if(this.backEvent){return uni.navigateBack({delta: 1});}this.$emit('back')},search(){uni.navigateTo({url: '/pages/common/search/search'});},clickEvent(item){this.$refs.extend.hide()switch (item.event){case 'navigateTo':uni.navigateTo({url: item.path,});break;default:uni.showToast({title: '靓仔，自己发挥',icon: 'none'});break;}}},}
</script><style>
</style>

下图是我测试的截图

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