创新实训——飞讯（六）

已于 2022-06-10 00:33:01 修改
阅读量102 收藏
点赞数
分类专栏： 项目实训 文章标签： vue.js
于 2022-05-05 21:09:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leaf_er/article/details/124597327
版权

目录

一、创建群聊界面

二、搜索/加入群聊界面

三、群详情界面

一、创建群聊界面

界面是参考教学视频编写的；基本步骤为编写结构、调整样式、编写功能等。

部分代码如下：

设置了一个变量记录已选择的人数，判断所选人数大于0且输入了群名称（群名称长度大于0）后创建按钮才不为灰；

<view class="bottom-btn btn1" :class="{notselected:selectedNumber<=0||groupname.length<=0}">创建({{selectedNumber}})</view>

.name{}中后半部分是用于限制内容呈现行数； 

.name{
		padding-left: 32rpx;
		font-size: 36rpx;
		color:$uni-text-color;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
}

<template>
	<view class="content">
		<view class="top-bar">
			<view class="top-bar-left" @tap="backOne()">
				<view class="text">取消</view>
			</view>
			<view class="top-bar-center">
				<view class="title" style="padding-left: 210rpx;">
					创建群聊
				</view>
			</view>
		</view>
		<view class="main">
			<view class="top">
				<view class="group-name">
					<input class="group-name-input" type="text" placeholder="请输入群名称" placeholder-style="color:#aaa;" v-model="groupname"/>
				</view>
				<view class="title">好友</view>
			</view>
			<view class="friends">
				<view class="user" v-for="(item,index) in friendList" :key="index" @tap="selectFriend(index)">
					<view class="selected" :class="{isselected:item.selected}">
						<image src="../../static/images/common/select.png" v-if="item.selected" class="selected-img"></image>
					</view>
					<image class="user-img" :src="item.profile.avatar"></image>
					<view class="name" v-if="item.profile.nick != ''">{{item.profile.nick}}({{item.profile.userID}})</view>
					<view class="name" v-if="item.profile.nick == ''">未设置昵称({{item.profile.userID}})</view>
				</view>
			</view>
		</view>
		<view class="bottom-bar">
			<view class="bottom-btn btn1" :class="{notselected:selectedNumber<=0||groupname.length<=0}" @tap="createGroup()">创建(已选{{selectedNumber}})</view>
		</view>
	</view>
</template>

 

二、搜索/加入群聊界面

通过修改创建群聊界面下方样式，当输入的ID能够查找到相应群聊时，能够展示消息信息，

<template>
	<view class="content">
		<view class="top-bar">
			<view class="top-bar-left" @tap="backOne()">
				<view class="text">取消</view>
			</view>
			<view class="top-bar-center">
				<view class="title" style="padding-left: 210rpx;">
					加入群聊
				</view>
			</view>
		</view>
		<view class="main">
			<view class="top">
				<view class="group-name">
					<input class="group-name-input"  type="text" placeholder="请输入群ID" placeholder-style="color:#aaa;" v-model="groupname" @input="searchGroup()"/>
				</view>
				<view class="searchtip">
					<view v-if="searchtip!=''">{{searchtip}}</view> 
				</view>
			</view>
			<view class='groupmsg' v-if="issearched==true">
				<view class="groupface">
					<image class="face" :src="info.avatar"></image>
				</view>
				<view class="groupdetail">
					<view class="groupname">{{info.name}}</view>
					<view class="groupid">{{info.groupID}}</view>
					<view class="grouptime">{{changeTime(info.createTime*1000)}}</view>
				</view>
			</view>
		</view>
		<view class="bottom-bar">
			<view class="bottom-btn btn1" :class="{notselected:false}" @tap="joinGroup()">加入</view>
		</view>
	</view>
</template>
.group-name{
			padding-left: 20rpx;
			padding-right: 20rpx;
		}
		.searchtip{
			padding-left: 40rpx;
			color:$uni-color-error;
		}
		.group-name-input{
			text-align: center;
			height: 76rpx;
			background:$uni-bg-color-grey;
			border-radius: 46rpx;
			font-size: 32rpx;
			color:$uni-text-color;
		}

三、群详情界面

参考了用户详情，并考虑到群组的不同，在增加群名、成员列表展示列。并为相应部分添加修改功能（管理群成员、邀请、修改资料等）。

部分代码：

<template>
	<view>
		<view class="top-bar">
			<view class="top-bar-left" @tap="backOne()">
				<image class="back-img" src="../../static/images/common/back.png"></image>
			</view>
		</view>
		<view class="top-bar secbar" :animation="animationData1">
			<view class="top-bar-left" @tap="backOne()">
				<image class="back-img" src="../../static/images/common/back.png"></image>
			</view>
		</view>
		<view class="main">
			<view class="main-inner">
				<uni-card :is-shadow="true">
					<uni-list-item :title="groupProfile.name"
						:thumb="groupProfile.avatar"
						thumb-size="lg" :rightText="changeTime(groupProfile.createTime * 1000)" />
				</uni-card>
				
				<uni-card :is-shadow="true">
					<view class="member">
						<view class="member-top">
							<view class="title">群成员</view>
							<view class="more" @tap="manageChange()" v-if="info.userID == groupProfile.ownerID">管理群成员</view>
							<view class="more" @tap="manageChange()" v-if="info.userID != groupProfile.ownerID">查看群成员</view>
							<image src="../../static/images/common/more.png" mode="aspectFit" class="more-img"  v-if="info.userID == groupProfile.ownerID"></image>
						</view>
						<view class="member-ls" v-if="info.userID == groupProfile.ownerID">
							
							<view class="member-one" v-if="membermanage == false">
								<u-avatar-group
										:urls="avatarList"
										size="60"
										gap="0.4"
										
								></u-avatar-group>
							</view>
							<view class="member-one" style="margin-left: 300rpx;" v-if="membermanage == false">
								<view class="imgs">
									<image src="../../static/images/index/add.png" mode="aspectFill" class="user-add"  @tap="open('t-invite','邀请','',true)"></image>
								</view>
							</view>
							
							<view v-if="membermanage == true">
								<view v-for="(item,index) in memberList" :key="index">
									<view style="display: flex;margin-top: 20rpx;">
										<view style="width: 120rpx;display: flex;">
											<view><u-avatar :src="item.avatar" shape="circle" size="100rpx"></u-avatar></view>
										</view>
										<view style="width: 500rpx;display: flex;padding-top: 25rpx; padding-left:20rpx;">
											<view class="name" v-if="item.nameCard != ''">{{item.nameCard}}</view>
											<view class="name" v-if="item.nameCard == '' && item.nick != ''">{{item.nick}}</view>
											<view class="name" v-if="item.nameCard == '' && item.nick == ''">{{item.userID}}</view>
										</view>
										<view><u-button type="error" text="移除" @click="deleteGroupMember(item.userID,item.nick)"></u-button></view>
									</view>
									
								</view>
							</view>
							
						</view>
						
						<view class="member-ls" v-if="info.userID != groupProfile.ownerID">
							
							<view class="member-one" v-if="membermanage == false">
								<u-avatar-group
										:urls="avatarList"
										size="60"
										gap="0.4"
										
								></u-avatar-group>
							</view>
							<view class="member-one" style="margin-left: 300rpx;" v-if="membermanage == false">
								<view class="imgs">
									<image src="../../static/images/index/add.png" mode="aspectFill" class="user-add"  @tap="open('t-invite','邀请','',true)"></image>
								</view>
							</view>
							
							<view v-if="membermanage == true">
								<view v-for="(item,index) in memberList" :key="index">
									<view style="display: flex;margin-top: 20rpx;">
										<view style="width: 120rpx;display: flex;">
											<view><u-avatar :src="item.avatar" shape="circle" size="100rpx"></u-avatar></view>
										</view>
										<view style="width: 500rpx;display: flex;padding-top: 25rpx; padding-left:20rpx;">
											<view class="name" v-if="item.nameCard != ''">{{item.nameCard}}</view>
											<view class="name" v-if="item.nameCard == '' && item.nick != ''">{{item.nick}}</view>
											<view class="name" v-if="item.nameCard == '' && item.nick == ''">{{item.userID}}</view>
										</view>
										<!-- <view><u-button type="error" text="移除" @click="deleteGroupMember(item.userID,item.nick)"></u-button></view> -->
									</view>
									
								</view>
							</view>
							
						</view>
						<view class="clear"></view>
					</view>
				</uni-card>
				
				
				
				<uni-card :is-shadow="true">
					<view class="group-msg">
						<view class="row">
							<view class="title">群头像</view>
							<view class="cont">
								<view class="user-head">
									<image :src="groupProfile.avatar" @tap="upload" class="group-img"  v-if="groupProfile.ownerID == groupProfile.selfInfo.userID"></image>
									<image :src="groupProfile.avatar" class="group-img"  v-if="groupProfile.ownerID != groupProfile.selfInfo.userID"></image>
								</view>
								<!-- <image :src="faceImg" class="group-img" mode="aspectFill"></image> -->
							</view>
							<view class="more">
								<image src="../../static/images/common/more.png" mode="aspectFit"></image>
							</view>
						</view>
						<view class="row">
							<view class="title">群Id</view>
							<view class="cont" @click="copy(groupProfile.groupID)">{{groupProfile.groupID}}</view>
							<view class="more">
								<image src="../../static/images/common/more.png" mode="aspectFit"></image>
							</view>
						</view>
						<view class="row" @tap="open('t-name','群名称',groupProfile.name,true)" v-if="groupProfile.ownerID == groupProfile.selfInfo.userID">
							<view class="title">群名称</view>
							<view class="cont">{{groupProfile.name}}</view>
							<view class="more">
								<image src="../../static/images/common/more.png" mode="aspectFit"></image>
							</view>
						</view>
						<view class="row" v-if="groupProfile.ownerID != groupProfile.selfInfo.userID">
							<view class="title">群名称</view>
							<view class="cont">{{groupProfile.name}}</view>
							<view class="more">
								<image src="../../static/images/common/more.png" mode="aspectFit"></image>
							</view>
						</view>
						
						
						<view class="row" @tap="open('t-introduction','群介绍',groupProfile.introduction,true)" v-if="groupProfile.ownerID == groupProfile.selfInfo.userID">
							<view class="title">群简介</view>
							<view class="cont">{{groupProfile.introduction}}</view>
							<view class="more">
								<image src="../../static/images/common/more.png" mode="aspectFit"></image>
							</view>
						</view>
						<view class="row" v-if="groupProfile.ownerID != groupProfile.selfInfo.userID">
							<view class="title">群简介</view>
							<view class="cont">{{groupProfile.introduction}}</view>
							<view class="more">
								<image src="../../static/images/common/more.png" mode="aspectFit"></image>
							</view>
						</view>
						
						
						<view class="row" @tap="open('t-notice','群公告',groupProfile.notification,true)" v-if="groupProfile.ownerID == groupProfile.selfInfo.userID">
							<view class="title">群公告</view>
							<view class="cont">{{groupProfile.notification}}</view>
							<view class="more">
								<image src="../../static/images/common/more.png" mode="aspectFit"></image>
							</view>
						</view>
						<view class="row" v-if="groupProfile.ownerID != groupProfile.selfInfo.userID">
							<view class="title">群公告</view>
							<view class="cont">{{groupProfile.notification}}</view>
							<view class="more">
								<image src="../../static/images/common/more.png" mode="aspectFit"></image>
							</view>
						</view>
						<view class="row" @tap="open('t-nicknameingroup','群昵称',groupProfile.selfInfo.nameCard,true)">
							<view class="title">群昵称</view>
							<view class="cont">{{groupProfile.selfInfo.nameCard}}</view>
							<view class="more">
								<image src="../../static/images/common/more.png" mode="aspectFit"></image>
							</view>
						</view>
					</view>
				</uni-card>
				
				<view class="btn2-container">
					<view class="btn2" @tap="breakup()"  v-if="groupProfile.ownerID == groupProfile.selfInfo.userID">解散群</view>
					<view class="btn2" @tap="exit()"  v-if="groupProfile.ownerID != groupProfile.selfInfo.userID">退出群</view>
				</view>
			</view>
		</view>
		<view class="modify":style="{bottom:-+widHeight+'px'}" :animation="animationData">
			<view class="modify-header">
				<view class="close" @tap="modify">取消</view>
			</view>
			<view class="modify-main">
				<scroll-view scroll-x="true" >
					<view v-for="(item,index) in memberList" :key="index">
						<view style="display: flex;margin-top: 20rpx;">
							<view style="width: 120rpx;display: flex;">
								<view><u-avatar :src="item.avatar" shape="circle" size="100rpx"></u-avatar></view>
							</view>
							<view style="width: 500rpx;display: flex;padding-top: 25rpx; padding-left:20rpx;">
								<view class="name" v-if="item.nameCard != ''">{{item.nameCard}}</view>
								<view class="name" v-if="item.nameCard == '' && item.nick != ''">{{item.nick}}</view>
								<view class="name" v-if="item.nameCard == '' && item.nick == ''">{{item.userID}}</view>
							</view>
							<view><u-button type="error" text="移除" @click="deleteGroupMember(item.userID,item.nick)"></u-button></view>
						</view>
						
					</view>
				</scroll-view>
				
			</view>
		</view>
		
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog mode="input" v-model="data" :title="modifyTitle" :placeholder="'请输入' + modifyTitle" :duration="2000" :before-close="true" @close="close" @confirm="textconfirm"></uni-popup-dialog>
		</uni-popup>
		
	</view>
</template>

群主界面：

 

普通成员界面：

 

 

leaf_er
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
创新实训——飞讯（二）
leaf_er的博客
04-23 256
一、设计登录、注册界面 利用所学的QT知识，利用可视化设计了一个基础的界面； 由于QT窗口自带一个较为丑陋的边框，为了后续方便设计，调用相关函数去掉边框； //去掉边框 setWindowFlags(Qt::WindowType::FramelessWindowHint); 但是去掉边框后，界面便不可移动等，查询解决方法后，重写了鼠标按压事件和点击事件函数； //计算鼠标与窗口左上角差值 void Login::mousePressEvent(QMouseEvent *even
易语言飞讯格式转换
07-23
易语言飞讯格式转换源码,飞讯格式转换
创新实训——飞讯（一）
leaf_er的博客
04-18 330
一、项目简介 飞讯是一款为使小型团队作业更加便捷而设计的软件，包括单聊、群聊等功能。本人负责Windows端的开发。 二、第一周工作 采用QT开发，故第一周学习QT相关UI知识，包括可视化UI设计、代码化UI设计以及混合设计的方法；并了解了QT中基本的组件的用途和用法、样式表的写法等。 ............
创新实训——飞讯（十）
leaf_er的博客
06-07 225
工作日志与问卷
创新实训——飞讯（九）
leaf_er的博客
06-06 158
聊天界面的im交互
易语言源码易语言飞讯格式转换源码.rar
02-22
易语言源码易语言飞讯格式转换源码.rar 易语言源码易语言飞讯格式转换源码.rar 易语言源码易语言飞讯格式转换源码.rar 易语言源码易语言飞讯格式转换源码.rar 易语言源码易语言飞讯格式转换源码.rar 易语言源码...
金飞讯野狼版写频软件
10-07
金飞讯野狼版对讲机专用写频软件，WLT2000只适用于金飞讯野狼版对讲机写频
金飞讯A66对讲机写频软件
08-27
金飞讯A66对讲机写频软件，写频专用。
飞讯SEO精美植物企业网站
09-22
飞讯SEO精美植物企业网站 一套方便二次弄发的ASP源码。功能完整，操作简单!
【Vue3】使用v-model实现父子组件通信（常用在组件封装规范中）
qq_42582773的博客
06-15 250
父组件添加modelValue绑定数据且传递到子组件，然后绑定@update:modelValue事件接收子组件传过来的值子组件内部使用defineProps来接收父组件modelValue传过来的值，使用defineEmits自定义事件修改值然后触发父组件@update绑定的事件。
Vue3-滑动到最右验证功能
地理信息的专栏
06-13 418
在登陆页面，需要滑块，且滑块向右移动到最右边，完成验证
【Echarts系列】平滑折线面积图
kk爱闹
06-11 354
Vue版本以及脚本语言的选择各有不同，核心内容主要是option，重点关注该部分内容即可。为了节省后续开发学习成本，这个系列将记录我工作所用到的一些echarts图表。
vue初使用实例之笔记本
m0_72168336的博客
06-11 816
vue初使用实例之笔记本
Ant Design Vue 动态表头与数据填充教程
学习编程的小羊的博客
06-11 376
安装并引入 Ant Design Vue 组件库。准备动态表头和数据的状态。发起请求获取表头和数据。将获取到的表头和数据赋值给组件的状态。使用a-table组件渲染表格，并传入动态表头和数据。根据需要为表格添加样式。
vue:对三种获取更新后的dom的方式进行分析
最新发布
qq_45820271的博客
06-17 293
由于vue的异步更新机制，我们在同步代码中是无法获取到更新后的dom的信息的针对这个问题，我们有三种解决方案获取更新后的dom:3.在微任务中获取因为更新是在同步任务结束后，执行微任务之前，所以上面三种方式可以得到更新后的dom。
第二十一节:带你梳理Vue2: 父组件使用子组件时的修饰符和双向数据绑定
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
06-10 1288
原生事件修饰符.native ,关于组件标签上的事件 在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理
Vue在表单校验中trigger属性指定何时触发校验规则
李长渊的博客
06-13 847
Vue在表单校验中trigger属性指定何时触发校验规则
uniapp 仿写弹窗
weixin_45881304的博客
06-13 483
【代码】uniapp 仿写弹窗。
elementui表格el-table最右侧操作列展示不完全
qq_46376192的博客
06-17 146
elementui表格el-table最右侧操作列展示不完全,有横线

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值