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

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>