This commit is contained in:
2022-01-25 09:37:28 +08:00
11 changed files with 193 additions and 114 deletions

BIN
.DS_Store vendored

Binary file not shown.

View File

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

View File

@@ -12,7 +12,7 @@ import {
// 获取好友列表 // 获取好友列表
const getFriends = () => { const getFriends = () => {
return request({ return request({
url: 'im/friends', url: 'im/friends/letter',
}, true) }, true)
} }

View File

@@ -372,28 +372,8 @@
"path": "pages/im/index", "path": "pages/im/index",
"name": "IM", "name": "IM",
"style": { "style": {
"navigationBarTitleText": "聊聊", "navigationBarBackgroundColor": "#FFFFFF",
"navigationBarBackgroundColor": "#F3F6FB", "navigationStyle":"custom"
"app-plus": {
"titleNView": {
"buttons": [
{
"float": "left",
"text": "\ue605",
"fontSrc": "/static/iconfont.ttf",
"color": "#000",
"fontSize": "20px"
},
{
"float": "right",
"text": "\ue606",
"fontSrc": "/static/iconfont.ttf",
"color": "#000",
"fontSize": "20px"
}
]
}
}
} }
}, },
{ {

View File

@@ -1,28 +1,37 @@
<template> <template>
<view> <view>
<u-list height="auto"> <block v-if="friends.length > 0">
<u-list-item> <u-index-list :index-list="indexs" inactiveColor="#666" activeColor="#34CE98">
<u-cell title="新的朋友" @click="toPending"> <view>
<u-avatar slot="icon" size="35" font-size="24" icon="plus-people-fill" shape="square" <view class="friend-flex" @click="toPending">
bg-color="#f0ad4e"></u-avatar> <u-avatar class="cover" size="40" shape="square" :src="require('@/static/im/im_01.png')"></u-avatar>
</u-cell> <view class="name">新的朋友</view>
</u-list-item> </view>
<u-list-item> <view class="friend-flex" @click="showToast">
<u-cell title="我的群聊" @click="showToast"> <u-avatar class="cover" size="40" shape="square" :src="require('@/static/im/im_00.png')"></u-avatar>
<u-avatar slot="icon" size="35" font-size="24" icon="account-fill" shape="square" <view class="name">我的群聊</view>
bg-color="#4cd964"></u-avatar> </view>
</u-cell> </view>
</u-list-item> <template v-for="(item, friend) in friends">
</u-list> <!-- #ifdef APP-NVUE -->
<u-index-anchor :text="indexs[friend]" bgColor="#F3F6FB" height="20" size="12" color="#666"></u-index-anchor>
<block v-if="friends.length > 0"> <!-- #endif -->
<u-list height="auto"> <u-index-item>
<u-list-item v-for="(item, index) in friends" :key="index"> <!-- #ifndef APP-NVUE -->
<u-cell :title="item.name + item.userId" @click="toInfo(item.userId)"> <u-index-anchor :text="indexs[friend]" bgColor="#F3F6FB" height="20" size="12" color="#666"></u-index-anchor>
<u-avatar slot="icon" shape="square" size="35" :src="item.portraitUrl"></u-avatar> <!-- #endif -->
</u-cell> <view v-for="(friendItem, index) in item" :key="friendItem.userId" class="friend-flex">
</u-list-item> <block v-if="friendItem.portraitUrl != ''">
</u-list> <u-avatar class="cover" size="40" shape="square" :src="friendItem.portraitUrl || ''" :default-url="require('@/static/user/cover.png')"></u-avatar>
</block>
<block v-else>
<u-avatar class="cover" size="40" shape="square" :src="require('@/static/user/cover.png')"></u-avatar>
</block>
<view class="name">{{friendItem.name}}</view>
</view>
</u-index-item>
</template>
</u-index-list>
</block> </block>
<block v-else> <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="暂无好友">
@@ -37,13 +46,17 @@
} from '@/apis/interfaces/im' } from '@/apis/interfaces/im'
export default { export default {
data() { data() {
return { return {
indexs : [],
friends: [] friends: []
} }
}, },
onShow() { onShow() {
getFriends().then(res => { getFriends().then(res => {
this.friends = res this.indexs = res.indexList
this.friends = res.itemArr
console.log(res.itemArr)
}) })
}, },
computed: { computed: {
@@ -76,9 +89,36 @@
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
// 页面空 // 页面空
.pages-null { .pages-null {
height: 70vh; height: 70vh;
} }
// 好友列表
.friend-flex{
position: relative;
padding: 20rpx $padding;
display: flex;
flex-direction: row;
align-items: center;
// .cover
.name{
flex: 1;
padding-left: $padding;
font-size: $title-size;
@extend .nowrap;
}
&::after{
position: absolute;
height: 1rpx;
background: $border-color;
left: calc(40px + #{$padding * 2});
right: 0;
bottom: 0;
content: " ";
}
&:last-child::after{
display: none;
}
}
</style> </style>

View File

@@ -1,5 +1,24 @@
<template> <template>
<view class="container"> <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 != ''"> <view v-if="$store.state.token != ''">
<block v-if="conversations.length < 1"> <block v-if="conversations.length < 1">
<view class="vertical null-list"> <view class="vertical null-list">
@@ -11,30 +30,22 @@
</view> </view>
</block> </block>
<block v-else> <block v-else>
<u-alert type="warning" v-if="connection != 0" description="网络似乎断开了" :show-icon="true"></u-alert> <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 v-for="(item, index) in conversations" :key="index" :class="['message', { 'is-top': item.isTop }]" <view class="avatar">
@tap="toDetail(item)" @longpress="onLongPress" :data-item="item"> <u-badge numberType="ellipsis" max="99" shape="horn" absolute :offset="[-5, -5]" :value="item.unreadMessageCount" />
<view class="avatar"> <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-badge numberType="ellipsis" max="99" shape="horn" absolute :offset="[-5, -5]" <u-avatar v-else :src="friend(item.targetId).portraitUrl" shape="square" size="44"></u-avatar>
:value="item.unreadMessageCount" /> </view>
<u-avatar size="44" v-if="!friend(item.targetId).portraitUrl" <view class="content">
:text="friend(item.targetId).name ? friend(item.targetId).name.substring(0,1) : '未'" <view class="header">
font-size="14" randomBgColor></u-avatar>
<u-avatar v-else :src="friend(item.targetId).portraitUrl" size="44">
</u-avatar>
</view>
<view class="content">
<view class="header">
<view class="name">{{ friend(item.targetId).name || '未知用户' }}</view> <view class="name">{{ friend(item.targetId).name || '未知用户' }}</view>
<view class="time">{{ item.sentTime|timeCustomCN }}</view> <view class="time">{{ item.sentTime|timeCustomCN }}</view>
</view> </view>
<view class="preview">{{ item.latestMessage.content || '&nbsp;' }}</view> <view class="preview">{{ item.latestMessage.content || '' }}</view>
</view> </view>
</view> </view>
<view class="shade" @tap="hidePop">
<view class="shade" @tap="hidePop">
<view class="pop" :style="popStyle" :class="{'show':showPop}"> <view class="pop" :style="popStyle" :class="{'show':showPop}">
<view v-for="(item, index) in popButton" :key="index" @tap="pickerMenu" :data-index="index"> <view v-for="(item, index) in popButton" :key="index" @tap="pickerMenu" :data-index="index">
{{item}} {{item}}
@@ -58,10 +69,8 @@
import * as RongIMLib from '@rongcloud/imlib-uni' import * as RongIMLib from '@rongcloud/imlib-uni'
import im from '@/utils/im/index.js' import im from '@/utils/im/index.js'
import userAuth from '@/public/userAuth' import userAuth from '@/public/userAuth'
import { import { getImToken } from '@/apis/interfaces/im.js'
getImToken
} from '@/apis/interfaces/im.js'
export default { export default {
data() { data() {
return { return {
@@ -145,7 +154,7 @@
this.getConversationList() this.getConversationList()
this.hidePop() this.hidePop()
}, },
onLongPress(e) { onLongPress(e) {
let [touches, style, item] = [e.touches[0], "", e.currentTarget.dataset.item] let [touches, style, item] = [e.touches[0], "", e.currentTarget.dataset.item]
if (touches.clientY > (this.winSize.height / 2)) { if (touches.clientY > (this.winSize.height / 2)) {
@@ -194,82 +203,128 @@
url: '/pages/im/private/index?targetId=' + item.targetId + '&conversationType=' + item url: '/pages/im/private/index?targetId=' + item.targetId + '&conversationType=' + item
.conversationType .conversationType
}) })
} },
// 点击按钮
onNav(name, params){
if(this.toLogin){
if(name === ''){
uni.showToast({
title: '开发中,敬请期待',
icon : 'none'
})
return
}
this.$Router.push({name, params})
}
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.container { // 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
.contents {
background-color: $window-color; background-color: $window-color;
min-height: 100vh; min-height: 100vh;
padding-top: 90rpx;
box-sizing: border-box;
.null-list { .null-list {
height: 100vh; height: 100vh;
text-align: center; text-align: center;
&-btn { &-btn {
margin-top: $margin * 2; margin-top: $margin * 2;
line-height: 70rpx; line-height: 70rpx;
color: $main-color; color: $main-color;
border: solid 1rpx $main-color; border: solid 2rpx $main-color;
padding: 0 ($padding*3); padding: 0 ($padding*3);
font-size: $title-size-m; font-size: $title-size-m;
border-radius: 35rpx; border-radius: 35rpx;
box-sizing: border-box; box-sizing: border-box;
} }
} }
.message { .message {
position: relative; background: white;
display: flex; padding: 20rpx 30rpx;
background: white; position: relative;
padding: 24rpx 24rpx 20rpx 24rpx; display: flex;
&.is-top { &.is-top {
background: $window-color; background: $window-color;
} }
.avatar {
.avatar { position: relative;
position: relative;
.u-badge { .u-badge {
z-index: 999; z-index: 998;
} }
} }
.content {
.content { padding-left: 30rpx;
margin-left: 16rpx; width: calc(100% - 44px);
flex: 1; box-sizing: border-box;
.header { .header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.name { .name {
font-size: 36rpx font-size: $title-size + 4;
} }
.time { .time {
font-size: 24rpx; font-size: $title-size-sm;
color: $text-gray; color: $text-gray;
} }
} }
.preview { .preview {
width: 520rpx;
word-break: break-all; word-break: break-all;
color: $text-gray; color: $text-gray;
font-size: 26rpx; font-size: $title-size-sm;
@extend .nowrap; @extend .nowrap;
} }
} }
} }
.message:not(:last-child) { .message:not(:last-child) {
&::after { &::after {
position: absolute; position: absolute;
left: $padding + 108; left: calc(44px + #{$padding} + 30rpx);
right: 0; right: 0;
bottom: 0; bottom: 0;
content: " "; content: " ";

BIN
static/.DS_Store vendored

Binary file not shown.

View File

@@ -11,6 +11,10 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-gengduo2:before {
content: "\e608";
}
.icon-gengduo:before { .icon-gengduo:before {
content: "\e607"; content: "\e607";
} }

Binary file not shown.

BIN
static/im/im_00.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
static/im/im_01.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB