群基本信息页面样式调整;

This commit is contained in:
2022-02-17 14:31:22 +08:00
parent ca8eb54445
commit ab6ecab23a
7 changed files with 75 additions and 75 deletions

View File

@@ -1,20 +1,15 @@
<template> <template>
<view class="apply--cell u-border-bottom"> <view class="apply--cell">
<view class="avatar"> <view class="avatar">
<u-avatar :src="user.portraitUrl || require('@/static/user/cover.png')" shape="square" size="46" /> <u-avatar :src="user.portraitUrl || require('@/static/user/cover.png')" shape="square" size="46" />
</view> </view>
<view class="info"> <view class="info">
<view class="name"> <view class="name"> {{ user.name }}</view>
{{ user.name }} <view class="message"> {{ message.message!=='null' ? message.message : '听说你很优秀,想认识下你~' }} </view>
</view>
<view class="message">
{{ message.message }}
</view>
</view> </view>
<view class="action"> <view class="action">
<u-button type="success" size="mini" @click="resolve">通过</u-button> <u-button class="u-button" size="default" type="success" @click="resolve">通过</u-button>
<u-button type="warning" size="mini" @click="reject">拒绝</u-button> <u-button class="u-button" size="default" type="warning" @click="reject">拒绝</u-button>
</view> </view>
</view> </view>
</template> </template>
@@ -41,15 +36,16 @@
methods: { methods: {
resolve() { resolve() {
resolveFriend(this.message.sourceUserId).then(res => { resolveFriend(this.message.sourceUserId).then(res => {
this.clearMessages() this.clearMessages()
uni.showToast({ uni.showToast({
icon: 'none', icon: 'none',
title: '通过好友申请' title: '通过好友申请'
}) })
}).catch(err => { uni.navigateBack({})
uni.showToast({ }).catch(err => {
icon: 'none', uni.showToast({
title: err.message icon: 'none',
title: err.message
}) })
}) })
}, },
@@ -73,7 +69,7 @@
// 不管是通过还是拒绝,都要把相关的信息清理 // 不管是通过还是拒绝,都要把相关的信息清理
clearMessages() { clearMessages() {
RongIMLib.deleteMessages(RongIMLib.ConversationType.SYSTEM, this.message.sourceUserId) RongIMLib.deleteMessages(RongIMLib.ConversationType.SYSTEM, this.message.sourceUserId)
this.$emit('success') this.$emit('success')
uni.$emit('onContactNotification') uni.$emit('onContactNotification')
} }
} }
@@ -85,6 +81,7 @@
display: flex; display: flex;
padding: $padding; padding: $padding;
align-items: center; align-items: center;
border-bottom: solid 1rpx #f9f9f9;
.info { .info {
flex: 1; flex: 1;
@@ -103,9 +100,19 @@
.action { .action {
justify-content: space-between; justify-content: space-between;
display: flex;
flex-direction: row;
align-items: center;
box-sizing: border-box;
.u-button {
padding: 10rpx 20rpx !important;
font-size: $title-size-m;
height: 60rpx !important;
}
.u-button+.u-button { .u-button+.u-button {
margin-top: 10rpx; margin-left: 10rpx;
} }
} }
} }

View File

@@ -8,7 +8,7 @@
<view class="right"> <view class="right">
<view class="title"> <view class="title">
<view class="name">{{ item.name }}</view> <view class="name">{{ item.name }}</view>
<view class="des">{{ item.latestMessage.message }}</view> <view class="des">{{ item.latestMessage.message || '--' }}</view>
</view> </view>
<view class="agress-btn"> <view class="agress-btn">
<span v-if="isAgree" @click="action('agree', item)">通过</span> <span v-if="isAgree" @click="action('agree', item)">通过</span>
@@ -105,6 +105,7 @@ export default {
.agress-btn { .agress-btn {
display: flex; display: flex;
color: #fff; color: #fff;
font-size: $title-size-m;
span { span {
display: inline-block; display: inline-block;
padding: 6rpx 14rpx; padding: 6rpx 14rpx;

View File

@@ -18,7 +18,9 @@
</view> </view>
</view> </view>
<view @click="loadMore" v-if="members > users.length" class="loadmore">查看更多群成员 ></view> <view class="loadmore">
<u-icon name="arrow-right" @click="loadMore" v-if="members > users.length" color="#999" labelColor="#999" label="查看更多群成员" labelPos='left' labelSize='28rpx' size="14" />
</view>
<u-action-sheet :actions="actionMap" :title="actionTitle" cancelText="取消" @close="hideAction" <u-action-sheet :actions="actionMap" :title="actionTitle" cancelText="取消" @close="hideAction"
@select="handleAction" :show="actionShow"> @select="handleAction" :show="actionShow">
@@ -316,5 +318,10 @@
font-size: 26rpx; font-size: 26rpx;
color: $text-gray-m; color: $text-gray-m;
text-align: center; text-align: center;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
} }
</style> </style>

View File

@@ -3,22 +3,15 @@
<!-- footer --> <!-- footer -->
<view class="footer"> <view class="footer">
<view class="msg-type" @click="changeMessageType"> <view class="msg-type" @click="changeMessageType">
<image class="icon" src="@/static/icon/key-icon.png" v-if="chatType === 0" mode="widthFix"> <image class="icon" src="@/static/icon/key-icon.png" v-if="chatType === 0" mode="widthFix" />
</image> <image class="icon" src="@/static/icon/msg-icon.png" v-if="chatType === 1" mode="widthFix" />
<image class="icon" src="@/static/icon/msg-icon.png" v-if="chatType === 1" mode="widthFix">
</image>
</view>
<sent-voice v-if="chatType === 0" :conversationType="conversationType" :targetId="targetId"
@success="onSuccess" />
<sent-text v-if="chatType === 1" :conversationType="conversationType" :targetId="targetId"
@success="onSuccess" />
<view class="msg-type msg-popups" @click="showPopups = !showPopups">
<image class="icon" src="@/static/icon/popups-icon.png"></image>
</view> </view>
<sent-voice v-if="chatType === 0" :conversationType="conversationType" :targetId="targetId" @success="onSuccess" />
<sent-text v-if="chatType === 1" :conversationType="conversationType" :targetId="targetId" @success="onSuccess" />
<view class="msg-type msg-popups" @click="showPopups = !showPopups"> <image class="icon" src="@/static/icon/popups-icon.png" /> </view>
</view> </view>
<!-- 弹出层 --> <!-- 弹出层 -->
<sent-popups :show="showPopups" :conversationType="conversationType" :targetId="targetId" <sent-popups :show="showPopups" :conversationType="conversationType" :targetId="targetId" @success="() => {showPopups = false, onSuccess()}" />
@success="() => {showPopups = false, onSuccess()}"></sent-popups>
</view> </view>
</template> </template>

View File

@@ -6,19 +6,15 @@
<text class="text">{{ item.content.message }}</text> <text class="text">{{ item.content.message }}</text>
</view> </view>
<view v-else :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']"> <view v-else :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
<u-avatar class="avatar" @click="toUser(item)" size="36" shape="square" <u-avatar class="avatar" @click="toUser(item)" size="36" shape="square" :src="contact(item.senderUserId).portraitUrl" />
:src="contact(item.senderUserId).portraitUrl" />
<view class="msg"> <view class="msg">
<show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1" <show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1" :msg="item.content" :name="contact(item.senderUserId).name" />
:msg="item.content" :name="contact(item.senderUserId).name" /> <show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1" :msg="item.content" :name="contact(item.senderUserId).name" />
<show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1" <show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1" :msg="item.content" :name="contact(item.senderUserId).name" />
:msg="item.content" :name="contact(item.senderUserId).name" />
<show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
:msg="item.content" :name="contact(item.senderUserId).name" />
</view> </view>
</view> </view>
</cell> </cell>
<cell class="cell-footer" ref="chatBottom"></cell> <cell class="cell-footer" ref="chatBottom" />
</list> </list>
<sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" /> <sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
</view> </view>

View File

@@ -4,35 +4,34 @@
<group-user-list :targetId="targetId" :count="14" /> <group-user-list :targetId="targetId" :count="14" />
</view> </view>
<u-cell-group class="cells"> <u-cell-group class="cells" :border="false" >
<u-cell isLink title="群公告" :label="announcement" @click="toAnnouncement"></u-cell> <u-cell :border="false" class="u-border-bottom" isLink title="群公告" :label="announcement" @click="toAnnouncement" />
<u-cell isLink title="二维码" @click="showGroupQrCode"></u-cell> <u-cell :border="false" class="u-border-bottom" isLink title="二维码" @click="showGroupQrCode" />
<u-cell title="聊天置顶"> <u-cell :border="false" class="u-border-bottom" title="聊天置顶">
<u-switch slot="value" size="20" v-model="isTop" activeColor="#34CE98" @change="setTop"></u-switch> <u-switch slot="value" size="20" v-model="isTop" activeColor="#34CE98" @change="setTop" />
</u-cell> </u-cell>
<u-cell title="免打扰"> <u-cell class="u-border-bottom" :border="false" title="免打扰">
<u-switch slot="value" size="20" v-model="status" activeColor="#34CE98" @change="setStatus"></u-switch> <u-switch slot="value" size="20" v-model="status" activeColor="#34CE98" @change="setStatus" />
</u-cell> </u-cell>
</u-cell-group> </u-cell-group>
<u-cell-group class="cells" v-if="group.is_admin"> <u-cell-group class="cells" v-if="group.is_admin" :border="false">
<u-cell isLink title="修改群聊名称" :value="groupName" @click="onGroupName"></u-cell> <u-cell :border="false" class="u-border-bottom" isLink title="修改群聊名称" :value="groupName" @click="onGroupName" />
<u-cell isLink title="修改群头像" @click="onGroupAvatar"> <u-cell :border="false" class="u-border-bottom" isLink title="修改群头像" @click="onGroupAvatar">
<u-avatar slot="value" size="25" shape="square" :src="group.cover"></u-avatar> <u-avatar slot="value" size="25" shape="square" :src="group.cover" />
</u-cell> </u-cell>
<u-cell isLink v-if="group.is_owner" title="准入方式" :value="joinType" @click="onChangeJoinType"></u-cell> <u-cell :border="false" class="u-border-bottom" isLink v-if="group.is_owner" title="准入方式" :value="joinType" @click="onChangeJoinType" />
</u-cell-group> </u-cell-group>
<view class="cells actions u-border-top" v-if="loaded"> <view class="cells actions" v-if="loaded">
<view class="action u-border-bottom" @click="onClean">清空聊天记录</view> <view class="action u-border-bottom" @click="onClean">清空聊天记录</view>
<view class="action u-border-bottom" v-if="group.is_owner" @click="onDismiss">解散群聊</view> <view class="action u-border-bottom" v-if="group.is_owner" @click="onDismiss">解散群聊</view>
<view class="action u-border-bottom" v-else @click="onQuite">删除并退出</view> <view class="action u-border-bottom" v-else @click="onQuite">删除并退出</view>
</view> </view>
<u-modal negativeTop="300" :show="modalShow" title="修改群名称" showCancelButton @cancel="onHideModal" <u-modal negativeTop="300" :show="modalShow" title="修改群名称" showCancelButton @cancel="onHideModal" @confirm="onChangeGroupName">
@confirm="onChangeGroupName">
<view class="slot-content"> <view class="slot-content">
<u--input placeholder="群名称" border="surround" focus v-model="groupName"></u--input> <u--input placeholder="群名称" border="surround" focus v-model="groupName" />
</view> </view>
</u-modal> </u-modal>
@@ -42,9 +41,7 @@
</view> </view>
</u-modal> </u-modal>
<u-action-sheet @select="doAction" :actions="joinTypeMap" cancelText="取消" :show="showActions" <u-action-sheet @select="doAction" :actions="joinTypeMap" cancelText="取消" :show="showActions" @close="showActions=false" />
@close="showActions=false">
</u-action-sheet>
</view> </view>
</template> </template>
@@ -339,4 +336,9 @@
justify-content: center; justify-content: center;
} }
} }
.u-border-bottom {
border-bottom: solid 1rpx #f9f9f9 !important;
}
</style> </style>

View File

@@ -3,26 +3,20 @@
<!-- chat --> <!-- chat -->
<list class="body" :show-scrollbar="false"> <list class="body" :show-scrollbar="false">
<cell class="cell" v-for="(item, index) in messages" :key="index"> <cell class="cell" v-for="(item, index) in messages" :key="index">
<view class="time"> <view class="time"> <text class="text">{{ customCN(item.sentTime) }}</text> </view>
<text class="text">{{ customCN(item.sentTime) }}</text>
</view>
<view :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']"> <view :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
<u-avatar class="avatar" size="36" shape="square" @click="showUser(targetId, item.messageDirection)" <u-avatar class="avatar" size="36" shape="square" @click="showUser(targetId, item.messageDirection)" :src="contact(item.senderUserId).portraitUrl" />
:src="contact(item.senderUserId).portraitUrl" />
<view class="msg"> <view class="msg">
<show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1" <show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1" :msg="item.content" />
:msg="item.content" /> <show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1" :msg="item.content" />
<show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1" <show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1" :msg="item.content" />
:msg="item.content" />
<show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
:msg="item.content" />
<view class="state" v-if="item.messageDirection == 1"> <view class="state" v-if="item.messageDirection == 1">
<text class="state-text">{{ item.sentStatus == 50 ? '已读': '未读'}}</text> <text class="state-text">{{ item.sentStatus == 50 ? '已读': '未读'}}</text>
</view> </view>
</view> </view>
</view> </view>
</cell> </cell>
<cell class="cell-footer" ref="chatBottom"></cell> <cell class="cell-footer" ref="chatBottom" />
</list> </list>
<sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" /> <sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
</view> </view>