TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

h大健康群公告列表页面重构，详情页处理接口及样式兼容，群消息页面的群公告显示重构，群聊邀请审核扫码模式处理接口及样式；

Browse Source
This commit is contained in:
Z
2022-02-21 18:00:23 +08:00
parent ad40d0d4d1
commit ee3087b320
6 changed files with 404 additions and 325 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
apis/interfaces/im.js
View File

@@ -126,13 +126,13 @@ const getGroupUsers = (groupId, limit) => {
url: 'im/groups/' + groupId + '/users?limit=' + limit
})
}
// 公告列表
const getGroupAnnouncements = (groupId) => {
return request({
url: 'im/groups/' + groupId + '/announcements'
})
}
// 创建公告
const createGroupAnnouncement = (groupId, content) => {
return request({
method: 'POST',
@@ -142,13 +142,27 @@ const createGroupAnnouncement = (groupId, content) => {
}
})
}
// 查看该公告详情
const getGroupAnnouncement = (groupId, announcementId) => {
return request({
method: 'GET',
url: 'im/groups/' + groupId + '/announcements/' + announcementId
})
}
// 删除该公告
const deleteGroupAnnouncement = (groupId, announcementId) => {
return request({
method: 'DELETE',
url: 'im/groups/' + groupId + '/announcements/' + announcementId
})
}
// 置顶群公告
const topGroupAnnouncement = (groupId, announcementId) => {
return request({
method: 'POST',
url: 'im/groups/' + groupId + '/announcements/' + announcementId+'/top',
})
}
/**
* 创建群聊
@@ -267,19 +281,16 @@ const transferGroupOwner = (groupId, userId) => {
})
}
// //群成员待审核表 -- 废弃
// const getGroupMakeSure = (groupId) => {
// return request({
// url:`im/groups/${groupId}/makesure`
// })
// }
// // 群成员审核通过
// const getGroupMakeSureAllow = (groupId, userId) => {
// return request({
// method: 'POST',
// url: 'im/groups/' + groupId + '/owner/' + userId
// })
// }
// 通过审核验证群成员
const groupMakeSure = (groupId,user) => {
return request({
url:`im/groups/${groupId}/makesure/${user}`,
method:'POST'
})
}
export {
getImToken,
@@ -300,8 +311,10 @@ export {
getGroupBase,
getGroupUsers,
getGroupAnnouncements,
getGroupAnnouncement,
createGroupAnnouncement,
deleteGroupAnnouncement,
topGroupAnnouncement,
searchGroup,
joinGroupPre,
joinGroup,
@@ -311,6 +324,5 @@ export {
removeGroupUser,
setGroupAdmin,
removeGroupAdmin,
// transferGroupOwner, // -废弃待审核列表
// getGroupMakeSure // -废弃待审核列表
groupMakeSure, // 通过审核
}

6
pages/im/components/groupUserList.vue
View File

@@ -4,14 +4,16 @@
<view :class="['user', {'active': item.targetId === currentUser.targetId}]" @longpress="showAction(item)"
v-for="(item, index) in users" :key="index" @click="toUser(item)">
<view class="avatar">
<u-avatar :size="avatarSize" shape="square" :src="contact(item.targetId).portraitUrl" />
<u-avatar :size="avatarSize" shape="square"
:src="contact(item.targetId).portraitUrl || require('@/static/user/cover.png')" />
<view class="admin" v-if="item.is_admin === 1">管理</view>
<view class="owner" v-if="item.is_admin === 2">群主</view>
</view>
<view class="name">{{ item.name }}</view>
</view>
<view class="user" v-if="isAdmin">
<u-avatar @click="inviteUser" :size="avatarSize" shape="square" icon="plus" bgColor="#f9f9f9" color="#c7c7c7" />
<u-avatar @click="inviteUser" :size="avatarSize" shape="square" icon="plus" bgColor="#f9f9f9"
color="#c7c7c7" />
<view class="name">邀请好友</view>
</view>
</view>

52
pages/im/group/announceCreate.vue
View File

@@ -1,25 +1,53 @@
<template>
<view class="create">
<view class="create-title">公告内容</view>
<u--textarea v-model="content" count height="240" maxlength="240" placeholder="请输入公告内容" />
<u-button type="primary" text="发布" :disabled="disabled" @click="onCreate" color="#34CE98" />
<block v-if="type !== 'cheack'">
<u--textarea v-model="content" count height="240" maxlength="240" placeholder="请输入公告内容" />
<u-button type="primary" text="发布" :disabled="disabled" @click="onCreate" color="#34CE98" />
</block>
<block v-if="type === 'cheack'">
<view class="content-a"> {{content}} </view>
</block>
</view>
</template>
<script>
import {
createGroupAnnouncement
createGroupAnnouncement,
getGroupAnnouncement
} from '@/apis/interfaces/im.js'
export default {
data() {
return {
targetId: '',
content: ''
content: '',
aId: '',
type: '' // check ' 查看详情'
}
},
onLoad(e) {
this.targetId = e.targetId
if (e.type) {
this.type = e.type
console.log(this.type)
}
if (e.aId) {
this.aId = e.aId
getGroupAnnouncement(this.targetId, this.aId).then(res => {
console.log(res.content)
this.content = res.content
}).catch(err => {
uni.showToast({
title: err.message,
icon: 'none',
mask: true
})
})
}
},
computed: {
disabled() {
@@ -52,15 +80,16 @@
<style lang="scss" scoped>
.create {
padding: $padding;
.create-title{
.create-title {
font-size: $title-size + 4;
padding: $padding - 10 0 $padding - 10 $padding - 10 ;
padding: $padding - 10 0 $padding - 10 $padding - 10;
color: $text-color;
font-weight: 800;
position: relative;
&::before{
content:"";
&::before {
content: "";
position: absolute;
width: 10rpx;
height: 34rpx;
@@ -69,6 +98,13 @@
top: 26rpx;
}
}
.content-a {
color: $text-color;
font-size: $title-size;
line-height: 1.7;
}
.u-button {
margin-top: $padding;
}

374
pages/im/group/announcement.vue
View File

@@ -1,183 +1,231 @@
<template>
<view class="announce">
<!-- 有列表 -->
<u-skeleton rows="2" :loading="loading" avatar :rows="5" v-if="announcements.length>0">
<view v-for="(item,index) in announcements" :key="index" class="item" @longpress="actions(item.announcement_id)">
<view class="content-a"><span>置顶</span>{{ item.content }}</view>
<view class="user">
<u-avatar :src="item.user.portraitUrl" size="40rpx" />
<view class="name">{{ item.user.name }}</view>
<view class="time">{{ item.created_at }}</view>
</view>
<!-- <view class="delete" v-if="isAdmin" @click="onDelete(item.announcement_id)">删除</view> -->
</view>
</u-skeleton>
<view class="announce" :style="`background-color:${bg};`">
<!-- 有列表 -->
<u-skeleton rows="2" :loading="loading" avatar :rows="5" v-if="announcements.length>0">
<view v-for="(item,index) in announcements" :key="index" class="item"
@longpress="actions(item.announcement_id)" @click="tabA(item.announcement_id)">
<view class="content-a"><span v-if="item.is_top">置顶</span>{{ item.content }}</view>
<view class="user">
<u-avatar :src="item.user.portraitUrl" size="40rpx" />
<view class="name">{{ item.user.name }}</view>
<view class="time">{{ item.created_at }}</view>
</view>
<!-- <view class="delete" v-if="isAdmin" @click="onDelete(item.announcement_id)">删除</view> -->
</view>
</u-skeleton>
<!-- 没有列表 -->
<view class="no-lists" v-else>
<u-image class="cover" radius="4" width="400rpx" height="400rpx" :src="require('@/static/imgs/no-level-list.png')" :lazy-load="true" />
<span>暂无公告内容~</span>
</view>
<!-- 没有列表 -->
<view class="no-lists" v-else>
<u-image class="cover" radius="4" width="400rpx" height="400rpx"
:src="require('@/static/imgs/no-level-list.png')" :lazy-load="true" />
<span>暂无公告内容~</span>
</view>
<!-- 弹出 -->
<u-action-sheet :actions="actionMap" :title="actionTitle" :show="actionShow" cancelText="取消" @close="actionShow = false" @select="handleAction" />
<!-- 弹出 -->
<u-action-sheet :actions="actionMap" :title="actionTitle" :show="actionShow" cancelText="取消"
@close="actionShow = false" @select="handleAction" />
</view>
</view>
</template>
<script>
import {
getGroupInfo,
getGroupAnnouncements,
deleteGroupAnnouncement
} from '@/apis/interfaces/im.js'
import {
getGroupInfo,
getGroupAnnouncements,
deleteGroupAnnouncement,
topGroupAnnouncement
} from '@/apis/interfaces/im.js'
export default {
data() {
return {
targetId: '',
groupAnnouncementId: '', // 选择公告 id
announcements: [], // 公告列表
loading: true,
isAdmin: false,
actionShow: false,
list: [{name: '选项一'}, {name: '选项二'}],
actionMap: [{key: 1,name: '编辑',disabled: false}, {key: 2,name: '删除',disabled: false}, {key: 3,name: '置顶',disabled: false}],
actionTitle: '请选择操作',
}
},
onLoad(e) {
this.targetId = e.targetId
getGroupInfo(this.targetId).then(res => {
this.isAdmin = res.group.is_admin
})
this.initData()
uni.$on('groupAnnouncementCreated', this.initData)
},
onUnload() {
uni.$off('groupAnnouncementCreated')
},
onNavigationBarButtonTap() {
if (this.isAdmin) {
uni.navigateTo({
url: '/pages/im/group/announceCreate?targetId=' + this.targetId
})
} else {
uni.showToast({
icon: 'none',
title: '没有权限'
})
}
},
methods: {
// 获取公告信息
initData() {
getGroupAnnouncements(this.targetId).then(res => {
console.log(res)
this.announcements = res
this.loading = false
})
},
// 选择公告 并显示操作弹窗
actions(id) {
this.groupAnnouncementId = id
this.actionShow = true
},
// 选择了操作出发事件
handleAction(e) {
console.log('addadfs', e)
UNI.showToast({
title:e,
icon:"none"
})
},
// 删除公告
onDelete(aId) {
uni.showModal({
title: '删除公告',
success: (res) => {
if (res.confirm) {
deleteGroupAnnouncement(this.targetId, aId).then(res => {
uni.showToast({
icon: 'none',
title: '删除成功'
})
this.initData()
})
}
}
})
}
}
}
export default {
data() {
return {
targetId: '',
groupAnnouncementId: '', // 选择公告 id
announcements: [], // 公告列表
loading: true,
isAdmin: false,
actionShow: false,
actionMap: [{
key: 2,
name: ' 删除该公告',
disabled: false
}, {
key: 3,
name: '置顶该公告',
disabled: false
}],
actionTitle: '请选择操作',
bg:'#fff'
}
},
onLoad(e) {
this.targetId = e.targetId
getGroupInfo(this.targetId).then(res => {
this.isAdmin = res.group.is_admin
})
this.initData()
uni.$on('groupAnnouncementCreated', this.initData)
},
onUnload() {
uni.$off('groupAnnouncementCreated')
},
onNavigationBarButtonTap() {
if (this.isAdmin) {
uni.navigateTo({
url: '/pages/im/group/announceCreate?targetId=' + this.targetId
})
} else {
uni.showToast({
icon: 'none',
title: '没有权限'
})
}
},
methods: {
// 获取公告信息
initData() {
getGroupAnnouncements(this.targetId).then(res => {
if(res.length>0){
this.bg = '#f9f9f9'
}else{
this.bg = '#fff'
}
this.announcements = res
this.loading = false
})
},
// 选择公告 并显示操作弹窗
actions(id) {
if (this.isAdmin) {
this.groupAnnouncementId = id
this.actionShow = true
}
},
// 选择了操作出发事件
handleAction(e) {
console.log(e.key)
switch (e.key) {
case 2:
this.onDelete(this.groupAnnouncementId)
break;
case 3:
this.onTop(this.groupAnnouncementId)
break;
}
},
tabA(id) {
uni.navigateTo({
url: '/pages/im/group/announceCreate?type=cheack&targetId=' + this.targetId + '&aId=' + id
})
},
onTop(aId) {
topGroupAnnouncement(this.targetId, aId).then(res => {
uni.showToast({
icon: 'none',
title: ' 置顶成功',
mask: true
})
uni.$emit('updateAnnouncement')
this.initData()
})
// uni.showModal({
// title: ' 置顶该公告',
// success: (res) => {
// if (res.confirm) {
// }
// }
// })
},
// 删除公告
onDelete(aId) {
deleteGroupAnnouncement(this.targetId, aId).then(res => {
uni.showToast({
icon: 'none',
title: '删除成功',
mask: true
})
uni.$emit('updateAnnouncement')
this.initData()
})
// uni.showModal({
// title: '删除该公告',
// success: (res) => {
// if (res.confirm) {
// }
// }
// })
}
}
}
</script>
<style lang="scss" scoped>
.announce {
background-color: #f9f9f9;
min-height: 99vh;
.announce {
min-height: 99vh;
.no-lists {
padding-top: $padding * 5;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-size: $title-size-m;
color: $text-gray-m;
.no-lists {
padding-top: $padding * 5;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-size: $title-size-m;
color: $text-gray-m;
span {
padding-top: $padding;
}
}
span {
padding-top: $padding;
}
}
.item {
background-color: #fff;
padding: $padding $padding + 10;
border-bottom: $padding solid #f9f9f9;
.item {
background-color: #fff;
padding: $padding $padding + 10;
border-bottom: $padding solid #f9f9f9;
.user {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
box-sizing: border-box;
font-size: $title-size-m;
color: $text-gray-m;
.user {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
box-sizing: border-box;
font-size: $title-size-m;
color: $text-gray-m;
.name {
padding-left: 10rpx;
}
.name {
padding-left: 10rpx;
}
.time {
margin-left: 20rpx;
}
}
.time {
margin-left: 20rpx;
}
}
.content-a {
font-size: $title-size;
color: $text-color;
max-width: 100%;
margin-bottom: $padding;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
line-height: 1.5;
.content-a {
font-size: $title-size;
color: $text-color;
max-width: 100%;
margin-bottom: $padding;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
line-height: 1.5;
span {
color: #fff;
display: inline-block;
border-radius: 10rpx;
background-color: $main-color;
font-size: $title-size-m - 4;
padding: 4rpx 10rpx;
margin-right: 10rpx;
line-height: 1.4;
margin-bottom: 10rpx;
}
}
}
}
span {
color: #fff;
display: inline-block;
border-radius: 10rpx;
background-color: $main-color;
font-size: $title-size-m - 4;
padding: 4rpx 10rpx;
margin-right: 10rpx;
line-height: 1.4;
margin-bottom: 10rpx;
}
}
}
}
</style>

22
pages/im/group/info.vue
View File

@@ -5,8 +5,10 @@
</view>
<u-cell-group class="cells" :border="false">
<u-cell :border="false" class="u-border-bottom" isLink title="群公告" :label="announcement"
@click="toAnnouncement" />
<u-cell :border="false" class="u-border-bottom" isLink title="群公告"
@click="toAnnouncement" >
<view slot="label" class="announcement-label "> {{announcement}} </view>
</u-cell>
<u-cell :border="false" class="u-border-bottom" isLink title="二维码" @click="showGroupQrCode" />
<u-cell :border="false" class="u-border-bottom" v-if="group.can_makesure" isLink title="群聊邀请确认"
@click="showGroupsSure" />
@@ -106,9 +108,12 @@
this.initData()
uni.$on('groupAnnouncementCreated', this.initData)
uni.$on('groupInvitedUser', this.updateUserList)
uni.$on('updateAnnouncement',this.initData)
},
onUnload() {
uni.$off('groupAnnouncementCreated')
uni.$off('groupInvitedUser')
uni.$off('updateAnnouncement')
},
methods: {
updateUserList() {
@@ -336,6 +341,19 @@
.cells {
margin-top: $padding;
background-color: white;
.announcement-label{
font-size: $title-size-m + 2;
padding-top: 10rpx;
color: $text-gray-m;
overflow: hidden;
width: 620rpx;
display: inline-block;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
}
}
.members {

189
pages/im/group/reviewed.vue
View File

@@ -1,41 +1,40 @@
<!-- 群聊邀请确认列表页面 -->
<template>
<<<<<<< HEAD
<view class="reviewed">
<view class="reviewed-item" v-for="(item, index) in pendings" :key="index">
<u-avatar class="avatar" :src="JSON.parse(item.latestMessage.extra).portraitUrl" shape="square" size="36" />
<view style="flex:1;" v-if="item.latestMessage.operation == 'GroupPending'">
<view class="nickname">用户: {{ JSON.parse(item.latestMessage.extra).name }} 申请加入群聊</view>
<view> 申请原因：{{ item.latestMessage.message }}</view>
</view>
<view style="flex:1;" v-if="item.latestMessage.operation == 'GroupInvite'">
<view class="nickname">
<text>{{ contact(item.latestMessage.sourceUserId )}}</text>想邀请<span>{{ JSON.parse(item.latestMessage.extra).name }}</span>加入群聊
<block v-if="pendings.length > 0">
<view class="reviewed-item" v-for="(item, index) in pendings" :key="index">
<u-avatar class="avatar"
:src="JSON.parse(item.latestMessage.extra).portraitUrl || require('@/static/user/cover.png')"
shape="square" size="46" />
<view style="flex:1;" v-if="item.latestMessage.operation == 'GroupPending'">
<view class="nickname">{{ JSON.parse(item.latestMessage.extra).name }} 申请加入群聊</view>
<view> 申请原因：{{ item.latestMessage.message }}</view>
</view>
<view style="flex:1;" v-if="item.latestMessage.operation == 'GroupInvite'">
<view class="nickname">
<text>{{ contact(item.latestMessage.sourceUserId )}}</text>想邀请<span>{{ JSON.parse(item.latestMessage.extra).name }}</span>加入群聊
</view>
</view>
<view class="sure" @click="sure(item.latestMessage.targetUserId,item.latestMessageId)"> 通过 </view>
</view>
<view class="sure" @click="sure(item.latestMessage.targetUserId)"> 通过 </view>
</block>
<view class="no-lists" v-else>
<u-image class="cover" radius="4" width="400rpx" height="400rpx"
:src="require('@/static/imgs/no-friend.png')" :lazy-load="true" />
<span> 暂无群聊申请数据~</span>
</view>
</view>
</template>
<!--
[{
"latestMessage": {
"operation": "GroupPending", // GroupPending 申请加群， GroupInvite 邀请进群
"message": "null", 申请的消息
"sourceUserId": "10047", 邀请人
申请人的简要信息
"extra": "{\"name\":\"JasonChen\",\"portraitUrl\":\"http:\\/\\/storage.zh.shangkelian.cn\\/uploads\\/2022\\/02\\/17\\/2b3cb44bc8335b25ac3dc762ef810bad.jpg\"}",
"targetUserId": "10051", 被邀请人，或者是申请人
"objectName": "RC:ContactNtf"
},
}]
-->
<script>
import {
getGroupMakeSure,
getGroupMakeSureAllow
getGroupMakeSureAllow,
groupMakeSure
} from "@/apis/interfaces/im.js"
import im from '@/utils/im/message.js'
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
export default {
data() {
@@ -53,12 +52,42 @@
},
onLoad(e) {
this.targetId = e.targetId
im.getGroupPendinglist(this.targetId, (result) => {
this.pendings = result
})
this.getList()
},
methods: {
sure(targetUserId) {
getList() {
im.getGroupPendinglist(this.targetId, (result) => {
console.log(result)
this.pendings = result
})
},
sure(userId, latestMessageId) {
groupMakeSure(this.targetId, userId).then(res => {
// 清除聊天列表
RongIMLib.deleteMessagesByIds([latestMessageId], ({
code
}) => {
console.log('code', code)
if (code == 0) {
uni.showToast({
title: ` 通过 `,
icon: 'none',
mask: true,
duration: 2000
})
this.getList()
uni.$emit('groupInvitedUser')
}
})
}).catch(err => {
uni.showToast({
title: err.message,
icon: 'none',
mask: true,
duration: 2000
})
})
// 直接调用通过或拒绝的接口
}
}
@@ -75,7 +104,7 @@
justify-content: flex-start;
box-sizing: border-box;
border-bottom: solid 1rpx #f9f9f9;
font-size: $title-size-m - 2;
font-size: $title-size-m;
padding-bottom: 20rpx;
color: $text-gray-m;
@@ -86,11 +115,14 @@
}
.nickname {
font-size: $title-size-m;
font-size: $title-size;
color: $text-color;
padding-bottom: 6rpx;
span {
color: $text-color;
font-size: $title-size-m +1;
padding-top: 20rpx;
}
}
@@ -106,88 +138,19 @@
}
}
=======
<view class="reviewed">
<view class="reviewed-item">
<u-avatar class="avatar" src="require('@/static/user/cover.png')" shape="square" size="36" />
<view style="flex:1;">
<view class="nickname"><span>{{`艾米的猫儿 `}}</span>想邀请<span>{{` 用户8066`}}</span>加入群聊</view>
<view> 申请原因：{{`呵呵哒。。`}}</view>
</view>
<view class="sure" @click="sure(2)"> 通过 </view>
</view>
</view>
</template>
<script>
import im from '@/utils/im/index.js'
export default {
data() {
return {
lists: [],
};
},
onLoad(e) {
this.targetId = e.id
this.getGroupPendinglist()
},
methods: {
getGroupPendinglist() {
im.getGroupPendinglist(this.targetId,(pendings) => {
console.log(pendings)
// this.pendings = pendings
})
},
sure(id) {
uni.navigateTo({
url: "/pages/im/group/reviewedInfo?id=" + id
})
}
}
};
</script>
.no-lists {
padding-top: $padding * 5;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-size: $title-size-m;
color: $text-gray-m;
<style lang="scss" scoped>
.reviewed {
.reviewed-item {
margin: $padding - 10;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
box-sizing: border-box;
border-bottom: solid 1rpx #f9f9f9;
font-size: $title-size-m - 2;
padding-bottom: 20rpx;
color: $text-gray-m;
.avatar {
background-color: $main-color;
border-radius: 6rpx;
margin-right: 20rpx;
}
.nickname {
font-size: $title-size-m;
margin-bottom: 10rpx;
span {
color: $text-color;
font-size: $title-size-m +1;
}
}
.sure {
background-color: $main-color;
color: #Fff;
text-align: center;
font-size: $title-size-m;
padding: 6rpx 20rpx;
border-radius: 10rpx;
margin-left: 10rpx;
}
}
}
>>>>>>> e99ef72050d54c27a6fe46e8063bb57fc903fac4
span {
padding-top: $padding;
}
}
</style>