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

用户申请调整

Browse Source
This commit is contained in:
Jason.Chen
2022-01-25 15:27:33 +08:00
parent 530f1507f4
commit 33ee2ebd55
4 changed files with 191 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

300
pages/im/index.vue
View File

@@ -1,51 +1,53 @@
<template>
<view class="contents">
<view class="ios-top"></view>
<!-- header -->
<view class="custom-header">
<view class="header-flex">
<view class="tabs">
<view class="item show">私聊</view>
<view class="item" @click="onNav('', {})">群聊</view>
</view>
<view class="btns">
<view class="item" @click="onNav('imFriends', {})">
<uni-icons color="#555" custom-prefix="iconfont" type="icon-tuandui" size="22"></uni-icons>
</view>
<view class="item" @click="onNav('', {})">
<uni-icons color="#555" custom-prefix="iconfont" type="icon-gengduo2" size="22"></uni-icons>
</view>
</view>
</view>
</view>
<!-- content -->
<view class="contents">
<view class="ios-top"></view>
<!-- header -->
<view class="custom-header">
<view class="header-flex">
<view class="tabs">
<view class="item show">私聊</view>
<view class="item" @click="onNav('', {})">群聊</view>
</view>
<view class="btns">
<view class="item" @click="onNav('imFriends', {})">
<uni-icons color="#555" custom-prefix="iconfont" type="icon-tuandui" size="22"></uni-icons>
</view>
<view class="item" @click="onNav('', {})">
<uni-icons color="#555" custom-prefix="iconfont" type="icon-gengduo2" size="22"></uni-icons>
</view>
</view>
</view>
</view>
<!-- content -->
<view v-if="$store.state.token != ''">
<block v-if="conversations.length < 1">
<view class="vertical null-list">
<u-empty icon="http://cdn.uviewui.com/uview/empty/message.png" textColor="#999" text="暂无好友消息">
<!-- <template>
<view class="null-list-btn">开启聊天</view>
</template> -->
</u-empty>
<u-empty mode="message" textColor="#999" text="暂无好友消息" />
</view>
</block>
<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', { '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" />
<u-avatar size="44" v-if="!friend(item.targetId).portraitUrl" shape="square" :text="friend(item.targetId).name ? friend(item.targetId).name.substring(0,1) : '未'" font-size="16" randomBgColor></u-avatar>
<u-avatar v-else :src="friend(item.targetId).portraitUrl" shape="square" size="44"></u-avatar>
</view>
<view class="content">
<view class="header">
<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', 'u-border-bottom', { '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" />
<u-avatar size="44" v-if="!friend(item.targetId).portraitUrl" shape="square"
:text="friend(item.targetId).name ? friend(item.targetId).name.substring(0,1) : '未'"
font-size="16" randomBgColor></u-avatar>
<u-avatar v-else :src="friend(item.targetId).portraitUrl" shape="square" size="44"></u-avatar>
</view>
<view class="content">
<view class="header">
<view class="name">{{ friend(item.targetId).name || '未知用户' }}</view>
<view class="time">{{ item.sentTime|timeCustomCN }}</view>
</view>
<view class="preview">{{ item.latestMessage.content || '' }}</view>
</view>
</view>
<view class="preview">{{ item.latestMessage.content || '' }}</view>
</view>
</view>
<view class="shade" @tap="hidePop">
<!-- TODO 长按的弹出框，怎么点击隐藏，没搞明白 -->
<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}}
@@ -69,8 +71,10 @@
import * as RongIMLib from '@rongcloud/imlib-uni'
import im from '@/utils/im/index.js'
import userAuth from '@/public/userAuth'
import { getImToken } from '@/apis/interfaces/im.js'
import {
getImToken
} from '@/apis/interfaces/im.js'
export default {
data() {
return {
@@ -97,13 +101,12 @@
},
onShow() {
if (this.$store.state.token !== '') {
getImToken().then(res => {
console.log("IMTOKEN", res);
im.connect(res.token, res.userInfo, () => {
this.getConversationList()
getImToken().then(res => {
im.connect(res.token, res.userInfo, () => {
this.getConversationList()
})
})
}
}
this.isShown = true
},
onHide() {
@@ -150,11 +153,12 @@
.pickedItem.isTop)
} else {
RongIMLib.removeConversation(this.pickedItem.conversationType, this.pickedItem.targetId)
}
}
im.setNotifyBadge()
this.getConversationList()
this.hidePop()
},
onLongPress(e) {
onLongPress(e) {
let [touches, style, item] = [e.touches[0], "", e.currentTarget.dataset.item]
if (touches.clientY > (this.winSize.height / 2)) {
@@ -189,12 +193,12 @@
getConversationList() {
const count = 1000
const timestamp = 0
RongIMLib.getConversationList(undefined, count, timestamp, (res) => {
console.log('获取列表', res);
if (res.code === 0 && res.conversations.length > 0) {
this.conversations = res.conversations
RongIMLib.getConversationList([RongIMLib.ConversationType.PRIVATE], count, timestamp, (res) => {
console.log('getConversationList', res);
if (res.code === 0) {
this.conversations = res.conversations
}
})
})
},
// 进入聊天的详情页面，清理未读消息数量
toDetail(item) {
@@ -203,76 +207,86 @@
url: '/pages/im/private/index?targetId=' + item.targetId + '&conversationType=' + item
.conversationType
})
},
// 点击按钮
onNav(name, params){
if(this.toLogin){
if(name === ''){
uni.showToast({
title: '开发中，敬请期待',
icon : 'none'
})
return
}
this.$Router.push({name, params})
}
}
},
// 点击按钮
onNav(name, params) {
if (this.toLogin) {
if (name === '') {
uni.showToast({
title: '开发中，敬请期待',
icon: 'none'
})
return
}
this.$Router.push({
name,
params
})
}
}
}
}
</script>
<style lang="scss" scoped>
// header
.custom-header{
@extend .ios-top;
background: white;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
.header-flex{
padding: 20rpx $padding;
display: flex;
justify-content: space-between;
height: 60rpx;
line-height: 60rpx;
.tabs{
.item{
margin-left: $margin;
display: inline-block;
font-size: $title-size-lg;
color: $text-gray;
padding: 0 ($padding - 10);
border-radius: 30rpx;
&:first-child{
margin: 0;
}
&.show{
background: rgba($color: $main-color, $alpha: .1);
color: $main-color;
font-weight: bold;
}
}
}
.btns{
.item{
display: inline-block;
margin-left: $margin;
}
}
}
}
// contents
<style lang="scss" scoped>
// header
.custom-header {
@extend .ios-top;
background: $window-color;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
.header-flex {
padding: 20rpx $padding;
display: flex;
justify-content: space-between;
height: 60rpx;
line-height: 60rpx;
.tabs {
.item {
margin-left: $margin;
display: inline-block;
font-size: $title-size-lg;
color: $text-gray;
padding: 0 ($padding - 10);
border-radius: 30rpx;
&:first-child {
margin: 0;
}
&.show {
background: rgba($color: $main-color, $alpha: .1);
color: $main-color;
font-weight: bold;
}
}
}
.btns {
.item {
display: inline-block;
margin-left: $margin;
}
}
}
}
// contents
.contents {
background-color: $window-color;
min-height: 100vh;
padding-top: 90rpx;
box-sizing: border-box;
min-height: 100vh;
padding-top: 90rpx;
box-sizing: border-box;
.null-list {
height: 100vh;
text-align: center;
&-btn {
margin-top: $margin * 2;
line-height: 70rpx;
@@ -284,54 +298,66 @@
box-sizing: border-box;
}
}
.message {
background: white;
padding: 20rpx 30rpx;
position: relative;
display: flex;
background: white;
padding: 20rpx 30rpx;
position: relative;
display: flex;
&.u-border-bottom {}
&.is-top {
background: $window-color;
}
.avatar {
position: relative;
background: $window-color;
}
.avatar {
position: relative;
.u-badge {
z-index: 998;
}
}
.content {
padding-left: 30rpx;
width: calc(100% - 44px);
box-sizing: border-box;
.content {
padding-left: 30rpx;
width: calc(100% - 44px);
box-sizing: border-box;
.header {
display: flex;
justify-content: space-between;
.name {
font-size: $title-size + 4;
}
.time {
font-size: $title-size-sm;
color: $text-gray;
}
}
.preview {
word-break: break-all;
color: $text-gray;
font-size: $title-size-sm;
font-size: $title-size-sm;
@extend .nowrap;
}
}
}
.message:not(:last-child) {
&::after {
position: absolute;
left: calc(44px + #{$padding} + 30rpx);
right: 0;
bottom: 0;
content: " ";
height: 1rpx;
background: $border-color;
}
}
// .message:not(:last-child) {
// &::after {
// position: absolute;
// left: calc(44px + #{$padding} + 30rpx);
// right: 0;
// bottom: 0;
// content: " ";
// height: 1rpx;
// background: $border-color;
// }
// }
}
/* 遮罩 */