uni-app 96获取群聊相关信息(二)

wuchangjian2021-11-07 09:20:53编程学习

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,  // 接收人/群 id
							chat_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-NVUE
			this.statusBarHeight = plus.navigator.getStatusbarHeight()
			// #endif
			this.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>

下图是我测试的截图

在这里插入图片描述
感谢大家观看,我们下次见

相关文章

使用java8的lambda将list转为map(转)

常用方式 代码如下: public Map<Long, Stri...

java知识点04

java类及类的成员:属性,方法,构造器&#x...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。