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

好友管理的基础流程，1.0.5

Browse Source
This commit is contained in:
Jason.Chen
2022-01-21 16:30:06 +08:00
parent 21bee49729
commit 80cd737e39
10 changed files with 378 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
App.vue
View File

@@ -5,7 +5,7 @@
export default {
onLaunch: function() {
im.initIm('lmxuhwaglu76d')
return;
//#ifdef APP-PLUS
// 获取系统版本号
getVersions({

38
apis/interfaces/im.js
View File

@@ -1,4 +1,3 @@
/**
* Web唐明明
* 匆匆数载恍如梦，岁月迢迢华发增。
@@ -6,7 +5,9 @@
* moduleName: 聊聊
*/
import { request } from '../index'
import {
request
} from '../index'
// 获取好友列表
const getFriends = () => {
@@ -38,9 +39,40 @@ const getPedings = () => {
})
}
const resolveFriend = (targetId) => {
return request({
method: 'POST',
url: 'im/friends/accept/' + targetId
})
}
const rejectFriend = (targetId) => {
return request({
method: 'DELETE',
url: 'im/friends/accept/' + targetId
})
}
const searchFriend = (mobile) => {
return request({
url: 'im/search?mobile=' + mobile
})
}
const pedingFriend = (recipient) => {
return request({
method: 'POST',
url: 'im/friends/' + recipient
})
}
export {
getImToken,
getFriends,
getUserInfo,
getPedings
getPedings,
resolveFriend,
rejectFriend,
searchFriend,
pedingFriend
}

4
manifest.json
View File

@@ -2,8 +2,8 @@
"name" : "ZH-HEALTH",
"appid" : "__UNI__C29473D",
"description" : "ZH-HEALTH，您手上的健康管理专家",
"versionName" : "1.0.2",
"versionCode" : 102,
"versionName" : "1.0.5",
"versionCode" : 105,
"transformPx" : false,
/* 5+App特有相关 */
"app-plus" : {

10
pages.json
View File

@@ -364,7 +364,7 @@
"name": "IM",
"style": {
"navigationBarTitleText": "聊聊",
"navigationBarBackgroundColor": "#FFFFFF",
"navigationBarBackgroundColor": "#F3F6FB",
"app-plus": {
"titleNView": {
"buttons": [
@@ -392,7 +392,7 @@
"name": "imPrivate",
"style": {
"navigationBarTitleText": "聊天",
"navigationBarBackgroundColor": "#FFFFFF",
"navigationBarBackgroundColor": "#F3F6FB",
"disableScroll": true,
"app-plus": {
"titleNView": {
@@ -440,8 +440,8 @@
"path": "pages/im/friends/pending",
"name": "imFriendsPending",
"style": {
"navigationBarTitleText": "新的朋友",
"navigationBarBackgroundColor":"#FFFFFF"
"navigationBarTitleText": "新朋友",
"navigationBarBackgroundColor":"#F3F6FB"
}
},
{
@@ -449,7 +449,7 @@
"name": "imFriendsInfo",
"style": {
"navigationBarTitleText": "好友资料",
"navigationBarBackgroundColor":"#FFFFFF"
"navigationBarBackgroundColor":"#F3F6FB"
}
},
{

59
pages/im/friends/index.vue
View File

@@ -12,55 +12,35 @@
</view>
<u-line></u-line>
</view>
<block v-if="friendsArr.length > 0">
<u-index-list activeColor="#34CE98">
<template v-for="(item, index) in friendsArr">
<!-- #ifdef APP-NVUE -->
<u-index-anchor bgColor="#F3F6FB" color="#666" :text="indexList[index]" :key="index"></u-index-anchor>
<!-- #endif -->
<u-index-item :key="index">
<!-- #ifndef APP-NVUE -->
<u-index-anchor :text="indexList[index]" bgColor="#F3F6FB" color="#666"></u-index-anchor>
<!-- #endif -->
<view class="list" v-for="(item1, index1) in item" :key="index1">
<view class="list__item" @click="toInfo(10047)">
<image class="list__item__avatar" :src="item1.url"></image>
<!-- <u-avatar size="35" icon="chrome-circle-fill" fontSize="26" randomBgColor></u-avatar> -->
<text class="list__item__user-name">{{item1.name}}</text>
</view>
<u-line></u-line>
</view>
</u-index-item>
</template>
<view slot="footer" class="u-safe-area-inset--bottom">
<text class="list__footer">共305位好友</text>
</view>
</u-index-list>
<block v-if="friends.length > 0">
<u-list height="auto">
<u-list-item v-for="(item, index) in friends" :key="index">
<u-cell :title="item.name + item.userId" @click="toInfo(item.userId)">
<u-avatar slot="icon" shape="square" size="35" :src="item.portraitUrl"></u-avatar>
</u-cell>
</u-list-item>
</u-list>
</block>
<block v-else>
<u-empty
class="pages-null"
mode="data"
icon="http://cdn.uviewui.com/uview/empty/data.png"
text="暂未添加好友"
>
<u-empty class="pages-null" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无好友">
</u-empty>
</block>
</view>
</template>
<script>
import { getFriends } from '@/apis/interfaces/im'
import {
getFriends
} from '@/apis/interfaces/im'
export default {
data() {
return {
friendsArr: []
friends: []
}
},
onShow() {
getFriends().then(res => {
this.friendsArr = res
console.log(res)
this.friends = res
})
},
computed: {
@@ -68,10 +48,10 @@
},
methods: {
// 扫码提示
showToast(){
showToast() {
uni.showToast({
title: "群聊功能暂未开放，敬请期待",
icon : "none"
icon: "none"
})
},
// 新朋友
@@ -83,7 +63,7 @@
// 用户资料
toInfo(targetId) {
uni.navigateTo({
url: '/pages/im/friends/info?targeId=' + targetId
url: '/pages/im/friends/info?targetId=' + targetId
})
}
},
@@ -99,17 +79,20 @@
@include flex;
padding: 6px 12px;
align-items: center;
&__avatar {
height: 35px;
width: 35px;
border-radius: 50%;
}
&__user-name {
font-size: 16px;
margin-left: 10px;
color: $u-main-color;
}
}
&__footer {
color: $u-tips-color;
font-size: 14px;
@@ -119,7 +102,7 @@
}
// 页面空
.pages-null{
.pages-null {
height: 70vh;
}
</style>

5
pages/im/friends/info.vue
View File

@@ -40,9 +40,10 @@
},
onLoad(e) {
this.targetId = e.targetId
console.log('获取资料',e.targetId);
getUserInfo(e.targetId).then(res => {
this.userInfo = res
console.log('获取资料', res);
uni.setNavigationBarTitle({
title: res.name
})
@@ -50,7 +51,7 @@
},
methods: {
toPrivate() {
uni.navigateTo({
uni.redirectTo({
url: '/pages/im/private/index?conversationType=1&targetId=' + this.targetId
})
}

148
pages/im/friends/pending.vue
View File

@@ -1,69 +1,119 @@
<template>
<view>
<!-- 搜索 -->
<u-sticky>
<view class="header-search">
<u-search placeholder="输入手机号码搜索" v-model="searchValue"></u-search>
<u-search placeholder="输入手机号码搜索" bgColor="white" @custom="search" @search="search"
v-model="searchValue"></u-search>
</view>
</u-sticky>
<u-list height="auto">
<u-list-item v-for="(item, index) in searchResult" :key="index">
<u-cell :title="item.name">
<u-avatar slot="icon" shape="square" size="35" :src="item.portraitUrl"></u-avatar>
<div style="width: 50px;" slot="value">
<u-button type="success" size="small" @click="pending(item.userId)">申请</u-button>
</div>
</u-cell>
</u-list-item>
</u-list>
<!-- 新朋友 -->
<view class="lists">
<view class="lists-item" v-for="(item, index) in 10" :key="index">
<image class="lists-item-cover" src="" mode="aspectFill"></image>
<view class="">好友</view>
<view class="">
<text>通过</text>
<text>拒绝</text>
</view>
</view>
</view>
<!-- 空列表 -->
<view class="">
空列表
</view>
<u-divider text="好友申请"></u-divider>
<u-list height="auto">
<u-swipe-action>
<u-list-item v-for="(item, index) in pedings" :key="index">
<u-swipe-action-item autoClose :options="options" @click="action($event, item)">
<u-cell :title="item.name">
<u-avatar slot="icon" shape="square" size="35" :src="item.portraitUrl"></u-avatar>
</u-cell>
</u-swipe-action-item>
</u-list-item>
</u-swipe-action>
</u-list>
</view>
</template>
<script>
export default{
data(){
return{
searchValue: "",
listsArr: []
import {
getPedings,
resolveFriend,
rejectFriend,
searchFriend,
pedingFriend
} from '@/apis/interfaces/im.js'
export default {
data() {
return {
searchResult: [],
searchValue: '',
pedings: [],
options: [{
text: '通过',
style: {
backgroundColor: '#3c9cff'
}
}, {
text: '拒绝',
style: {
backgroundColor: '#f56c6c'
}
}]
}
},
onLoad() {
this.getPeddingList()
},
methods: {
search() {
console.log('sousuo');
searchFriend(this.searchValue).then(res => {
console.log(res);
this.searchResult = res
}).catch(err => {
console.log('err', err);
})
},
action(e, item) {
if (e.index == 0) {
resolveFriend(item.userId).then(res => {
this.getPeddingList()
})
} else {
rejectFriend(item.userId).then(res => {
this.getPeddingList()
})
}
},
getPeddingList() {
getPedings().then(res => {
this.pedings = res
})
},
pending(userId) {
uni.showLoading()
pedingFriend(userId).then(res => {
uni.showToast({
title: '申请成功',
success: () => {
this.searchResult = []
}
})
}).catch(err => {
uni.showToast({
icon: 'error',
title: err.message
})
})
}
}
}
</script>
<style lang="scss" scoped>
.header-search{
.header-search {
padding: $padding/2 $padding;
background: white;
}
// 好友列表
.lists{
.lists-item{
padding: 20rpx $padding;
position: relative;
display: flex;
align-items: center;
&::after{
content: " ";
position: absolute;
left: $margin;
right: 0;
bottom: 0;
height: 1rpx;
background-color: $border-color;
}
&:last-child::after{
display: none;
}
.lists-item-cover{
width: 98rpx;
height: 98rpx;
border-radius: 50%;
background: $window-color;
}
}
}
</style>

114
pages/im/index.vue
View File

@@ -13,7 +13,8 @@
<block v-else>
<u-alert type="warning" v-if="connection != 0" description="网络似乎断开了" :show-icon="true"></u-alert>
<view v-for="(item, index) in conversations" :key="index" class="message" @click="toDetail(item)">
<view v-for="(item, index) in conversations" :key="index" :class="['message', { 'is-top': item.isTop }]"
@tap="toDetail(item)" @longpress="onLongPress" :data-item="item">
<view class="avatar">
<u-badge numberType="ellipsis" max="99" shape="horn" absolute :offset="[-5, -5]"
:value="item.unreadMessageCount" />
@@ -27,11 +28,19 @@
<view class="content">
<view class="header">
<view class="name">{{ friend(item.targetId).name || '未知用户' }}</view>
<view class="time">{{ item.targetId }} | {{ item.sentTime|timeCustomCN }}</view>
<view class="time">{{ item.sentTime|timeCustomCN }}</view>
</view>
<view class="preview">{{ item.latestMessage.content || '&nbsp;' }}</view>
</view>
</view>
<view class="shade" @tap="hidePop">
<view class="pop" :style="popStyle" :class="{'show':showPop}">
<view v-for="(item, index) in popButton" :key="index" @tap="pickerMenu" :data-index="index">
{{item}}
</view>
</view>
</view>
</block>
</view>
<!-- 未登录 -->
@@ -59,7 +68,16 @@
isShown: true, // 当前页面显示状态
conversations: [], // 会话列表
isImToken: '', // 是否已鉴权
connection: 0
connection: 0,
/* 窗口尺寸 */
winSize: {},
/* 显示操作弹窗 */
showPop: false,
/* 弹窗按钮列表 */
popButton: ['置顶聊天', '删除该聊天'],
/* 弹窗定位样式 */
popStyle: "",
pickedItem: {}
}
},
computed: {
@@ -111,6 +129,48 @@
}
},
methods: {
hidePop() {
this.showPop = false
this.pickedItem = {}
setTimeout(() => {
this.showShade = false
}, 250)
},
pickerMenu(e) {
const index = Number(e.currentTarget.dataset.index)
if (index == 0) {
RongIMLib.setConversationToTop(this.pickedItem.conversationType, this.pickedItem.targetId, !this
.pickedItem.isTop)
} else {
RongIMLib.removeConversation(this.pickedItem.conversationType, this.pickedItem.targetId)
}
this.getConversationList()
this.hidePop()
},
onLongPress(e) {
let [touches, style, item] = [e.touches[0], "", e.currentTarget.dataset.item]
if (touches.clientY > (this.winSize.height / 2)) {
style = `bottom:${this.winSize.height-touches.clientY}px;`
} else {
style = `top:${touches.clientY}px;`
}
if (touches.clientX > (this.winSize.witdh / 2)) {
style += `right:${this.winSize.witdh-touches.clientX}px`
} else {
style += `left:${touches.clientX}px`
}
this.popButton[0] = item.isTop ? '取消置顶' : '置顶聊天'
this.popStyle = style
this.pickedItem = item
this.$nextTick(() => {
setTimeout(() => {
this.showPop = true;
}, 10)
})
},
// 检查登录
toLogin() {
if (this.$store.state.token === '') {
@@ -120,21 +180,18 @@
}
return true
},
getFriend(targetId) {
return this.$store.getters.userInfo(targetId)
},
getConversationList() {
const count = 1000
const timestamp = 0 // 会话的时间戳（获取这个时间戳之前的会话列表，0 表示从最新开始获取）会话类型
RongIMLib.getConversationList(undefined, count, timestamp, (res) => {
if (res.code === 0 && res.conversations.length > 0) {
this.conversations = res.conversations
console.log(this.conversations);
}
})
},
// 进入聊天的详情页面，清理未读消息数量
toDetail(item) {
this.hidePop()
uni.navigateTo({
url: '/pages/im/private/index?targetId=' + item.targetId + '&conversationType=' + item
.conversationType
@@ -148,7 +205,6 @@
.container {
background-color: $window-color;
min-height: 100vh;
padding-bottom: 200px;
.null-list {
height: 100vh;
@@ -172,6 +228,10 @@
background: white;
padding: 24rpx 24rpx 20rpx 24rpx;
&.is-top {
background: $window-color;
}
.avatar {
position: relative;
@@ -290,4 +350,42 @@
// }
// }
}
/* 遮罩 */
.shade {
.pop {
position: fixed;
z-index: 101;
width: 200rpx;
box-sizing: border-box;
font-size: 28rpx;
text-align: left;
color: #333;
background-color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
line-height: 80rpx;
transition: transform 0.15s ease-in-out 0s;
user-select: none;
-webkit-touch-callout: none;
transform: scale(0, 0);
&.show {
transform: scale(1, 1);
}
&>view {
padding: 0 20rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
user-select: none;
-webkit-touch-callout: none;
&:active {
background-color: #f3f3f3;
}
}
}
}
</style>

8
pages/im/private/index.vue
View File

@@ -99,7 +99,13 @@
if (e.index == 0) {
uni.navigateTo({
url: '/pages/im/private/setting?targetId=' + this.targetId +
'&conversationType=' + this.conversationType
'&conversationType=' + this.conversationType,
events: {
messageClear: () => {
this.getMessageList()
console.log('聊天消息被清空');
}
}
})
}
},

37
pages/im/private/setting.vue
View File

@@ -2,18 +2,18 @@
<view class="content">
<!-- 聊天信息 -->
<view class="set-user" @click="showFriend">
<u-avatar :src="userInfo.portraitUrl" size="48"></u-avatar>
<view class="set-user-nickname">{{ userInfo.name }}</view>
<u-avatar :src="friend(targetId).portraitUrl" size="48"></u-avatar>
<view class="set-user-nickname">{{ friend(targetId).name }}</view>
</view>
<!-- 聊天设置 -->
<view class="set-group">
<view class="group-flex">
<label>消息免打扰</label>
<u-switch activeColor="#34CE98" size="22"></u-switch>
<u-switch v-model="status" activeColor="#34CE98" size="22" @change="setStatus"></u-switch>
</view>
<view class="group-flex">
<label>置顶会话</label>
<u-switch v-model="isTop" activeColor="#34CE98" size="22"></u-switch>
<label>消息置顶</label>
<u-switch v-model="isTop" activeColor="#34CE98" size="22" @change="setTop"></u-switch>
</view>
</view>
<view class="set-group">
@@ -35,22 +35,26 @@
export default {
data() {
return {
userInfo: {},
eventChannel: null,
targetId: '',
conversationType: 1,
isTop: false,
status: 0 // 0 是免打扰，1是正常通知
status: false // 0 是免打扰，1是正常通知
}
},
computed: {
friend() {
return function(targetId) {
return this.$store.getters.userInfo(targetId)
}
}
},
onLoad(e) {
this.eventChannel = this.$scope.eventChannel
this.targetId = e.targetId
this.conversationType = e.conversationType
getUserInfo(e.targetId).then(res => {
console.log(res);
this.userInfo = res
})
RongIMLib.getConversation(this.conversationType, this.targetId, ({
conversation
}) => {
@@ -60,7 +64,7 @@
RongIMLib.getConversationNotificationStatus(this.conversationType, this.targetId, ({
status
}) => {
this.status = status
this.status = !Boolean(status)
})
},
methods: {
@@ -73,16 +77,14 @@
RongIMLib.setConversationNotificationStatus(this.conversationType, this.targetId, this.status, ({
status
}) => {
this.status = status
this.status = !Boolean(status)
})
},
setTop() {
RongIMLib.setConversationToTop(this.conversationType, this.targetId, !this.isTop, (res) => {
console.log(res);
RongIMLib.setConversationToTop(this.conversationType, this.targetId, this.isTop, (res) => {
RongIMLib.getConversation(this.conversationType, this.targetId, ({
conversation
}) => {
console.log(conversation.isTop);
this.isTop = conversation.isTop
})
})
@@ -97,6 +99,7 @@
code
}) => {
if (code === 0) {
this.eventChannel.emit('messageClear')
uni.showToast({
title: '聊天记录已清空'
})