This commit is contained in:
2022-01-20 16:15:24 +08:00
parent 93a20f2d3d
commit 088327eaff
14 changed files with 348 additions and 412 deletions

BIN
.DS_Store vendored

Binary file not shown.

BIN
components/.DS_Store vendored Normal file

Binary file not shown.

BIN
pages/.DS_Store vendored Normal file

Binary file not shown.

View File

@@ -1,13 +1,13 @@
<template>
<div>
<view>
<view class="list">
<view class="list__item" @click="toPending">
<u-avatar size="35" icon="plus-people-fill" fontSize="26" randomBgColor></u-avatar>
<u-avatar size="35" icon="plus-people-fill" fontSize="26" bg-color="#f0ad4e"></u-avatar>
<text class="list__item__user-name">新的朋友</text>
</view>
<u-line></u-line>
<view class="list__item" @click="toGroup">
<u-avatar size="35" icon="account-fill" fontSize="26" randomBgColor></u-avatar>
<u-avatar size="35" icon="account-fill" fontSize="26" bg-color="#4cd964"></u-avatar>
<text class="list__item__user-name">我的群聊</text>
</view>
<u-line></u-line>
@@ -36,7 +36,7 @@
<text class="list__footer">共305位好友</text>
</view>
</u-index-list>
</div>
</view>
</template>
<script>

View File

@@ -1,8 +1,8 @@
<template>
<div>
<view>
好友资料
<u-button @click="toPrivate">发送消息</u-button>
</div>
</view>
</template>
<script>

View File

@@ -3,11 +3,7 @@
<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="暂无好友消息"
>
<u-empty icon="http://cdn.uviewui.com/uview/empty/message.png" textColor="#999" text="暂无好友消息">
<template>
<view class="null-list-btn">开启聊天</view>
</template>
@@ -18,20 +14,13 @@
<view v-for="(item, index) in conversations" :key="index" class="mssage-box" @click="toDetail(item)">
<view class="mssage-action">
<block v-if="!friend(item.targetId).portraitUrl">
<u-avatar
clsss="mssage-action-cover"
size="44"
<u-avatar clsss="mssage-action-cover" size="44"
:text="friend(item.targetId).name ? friend(item.targetId).name.substring(0,1) : '未'"
font-size="14"
randomBgColor
></u-avatar>
font-size="14" randomBgColor></u-avatar>
</block>
<block v-else>
<u-avatar
clsss="mssage-action-cover"
:src="friend(item.targetId).portraitUrl"
size="44"
></u-avatar>
<u-avatar clsss="mssage-action-cover" :src="friend(item.targetId).portraitUrl" size="44">
</u-avatar>
</block>
<view class="mssage-action-content">
<view class="mssage-header">
@@ -46,11 +35,7 @@
</view>
<!-- 未登录 -->
<view v-else class="vertical null-list">
<u-empty
icon="http://cdn.uviewui.com/uview/empty/permission.png"
textColor="#999"
text="登录后开启聊天吧~"
>
<u-empty icon="http://cdn.uviewui.com/uview/empty/permission.png" textColor="#999" text="登录后开启聊天吧~">
<template>
<view class="null-list-btn" @click="toLogin">去登录</view>
</template>
@@ -63,7 +48,9 @@
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() {
@@ -84,7 +71,6 @@
if (this.$store.state.token !== '') {
if (this.isImToken === '') {
getImToken().then(res => {
im.syncFriends()
im.connect(res.token, res.userInfo)
this.isImToken = res.token
this.getConversationList()
@@ -105,7 +91,9 @@
})
}
if (e.index == 1) {
this.$Router.push({name: 'imFriends'})
this.$Router.push({
name: 'imFriends'
})
}
},
watch: {
@@ -140,7 +128,8 @@
// 进入聊天的详情页面,清理未读消息数量
toDetail(item) {
uni.navigateTo({
url: '/pages/im/private/index?targetId=' + item.targetId + '&conversationType=' + item.conversationType
url: '/pages/im/private/index?targetId=' + item.targetId + '&conversationType=' + item
.conversationType
})
}
}
@@ -151,9 +140,11 @@
.content {
background-color: $window-color;
min-height: 100vh;
.null-list {
height: 100vh;
text-align: center;
&-btn {
margin-top: $margin * 2;
line-height: 70rpx;
@@ -165,11 +156,14 @@
box-sizing: border-box;
}
}
.mssage-box {
background: white;
.mssage-action {
position: relative;
padding: 20rpx $padding;
&::after {
position: absolute;
left: $padding + 108;
@@ -179,6 +173,7 @@
height: 1rpx;
background: $border-color;
}
&-content {
position: absolute;
top: 20rpx;
@@ -188,21 +183,25 @@
display: flex;
flex-direction: column;
justify-content: center;
.mssage-header {
display: flex;
font-size: $title-size;
line-height: 40rpx;
justify-content: space-between;
.header-name {
flex: 1;
@extend .nowrap;
}
.header-time {
padding-left: $padding;
font-size: $title-size-sm - 2;
color: $text-gray;
}
}
.mssage-msg {
font-size: $title-size-sm - 2;
color: $text-gray;
@@ -210,6 +209,7 @@
}
}
}
&-item:last-child {
.mssage-action::after {
display: none;

View File

@@ -1,6 +1,7 @@
<template>
<view class="chat-content">
<scroll-view class="chat-scrool" :scroll-y="true" :scroll-into-view="scrollIntoID" :scroll-with-animation="false">
<scroll-view class="chat-scrool" :scroll-y="true" :scroll-into-view="scrollIntoID"
:scroll-with-animation="false">
<!-- 聊天窗口 -->
<view class="chat-item" v-for="(item,index) in messages" :key="index" :id="'chatId_'+index">
<view class="chat-item-time">
@@ -11,20 +12,20 @@
<view class="chat-msg-text">{{ item.content.content }}</view>
<!-- 预留一些图片语音表情包等位置 -->
</view>
<view class="chat-status" :class="{'hide': item.sentStatus == 50}" v-if="item.messageDirection == 1">{{ item.sentStatus == 50 ? '已读': '未读'}}</view>
<view class="chat-status" :class="{'hide': item.sentStatus == 50}"
v-if="item.messageDirection == 1">{{ item.sentStatus == 50 ? '已读': '未读'}}</view>
<view class="chat-avatar">
<!-- <u-avatar :src="userInfo.portraitUrl" @click="showFriend"></u-avatar> -->
<u-avatar
text="无"
fontSize="14"
bg-color="rgba(0,0,0,.2)"
></u-avatar>
<u-avatar v-if="item.messageDirection == 2" :src="friend(targetId).portraitUrl"></u-avatar>
<u-avatar v-else :src="$store.getters.sender.portraitUrl"/>
</view>
</view>
</view>
</scroll-view>
<view class="chat-footer">
<input class="chat-input" type="text" v-model="inputTxt" confirm-type="发送" @confirm="send" cursor-spacing="10"/>
<input class="chat-input" type="text" v-model="inputTxt" confirm-type="发送" @confirm="send"
cursor-spacing="10" />
<button class="chat-push" size="mini" @click="send">发送</button>
</view>
</view>
@@ -87,6 +88,11 @@
computed: {
showSendButton() {
return this.inputTxt.length > 0
},
friend() {
return function(targetId) {
return this.$store.getters.userInfo(targetId)
}
}
},
onNavigationBarButtonTap(e) {
@@ -147,14 +153,14 @@
})
},
showFriend() {
uni.navigateTo({
url: '/pages/im/friends/info?targetId=' + this.targetId
})
// uni.navigateTo({
// url: '/pages/im/friends/info?targetId=' + this.targetId
// })
},
showMine() {
uni.navigateTo({
url: '/pages/im/friends/mine'
})
// uni.navigateTo({
// url: '/pages/im/friends/mine'
// })
},
scrollBottom() {
this.$nextTick(function() {
@@ -183,14 +189,17 @@
.chat-content {
height: 100vh;
background: $window-color;
.chat-scrool {
height: calc(100vh - 140rpx);
box-sizing: border-box;
padding-bottom: $padding;
.chat-item {
.chat-item-time {
text-align: center;
padding: $padding/2 $padding;
text {
background: rgba($color: #000000, $alpha: .2);
color: white;
@@ -201,13 +210,16 @@
border-radius: $radius-lg;
}
}
.chat-item-article {
position: relative;
padding: 10rpx ($padding + 110) 0;
overflow: hidden;
min-height: 40px;
.chat-msg {
overflow: hidden;
.chat-msg-text {
display: inline-block;
padding: ($padding - 10) $padding;
@@ -216,22 +228,27 @@
font-size: $title-size-lg;
}
}
.chat-status {
color: $text-gray;
font-size: $title-size-sm;
text-align: right;
&.hide {
color: $text-gray-m;
}
}
.chat-avatar {
position: absolute;
top: 0;
}
&.left {
.chat-avatar {
left: $margin;
}
.chat-msg {
.chat-msg-text {
background-color: white;
@@ -239,12 +256,15 @@
}
}
}
&.right {
.chat-avatar {
right: $margin;
}
.chat-msg {
text-align: right;
.chat-msg-text {
border-radius: $radius*2 0 $radius*2 $radius*2;
background: $main-color;
@@ -255,6 +275,7 @@
}
}
}
.chat-footer {
position: fixed;
bottom: 0;
@@ -265,6 +286,7 @@
background: white;
box-sizing: border-box;
z-index: 99;
.chat-input {
background: $window-color;
height: 80rpx;
@@ -273,6 +295,7 @@
padding: 0 $padding;
box-sizing: border-box;
}
.chat-push[size='mini'] {
position: absolute;
right: $margin;
@@ -287,6 +310,7 @@
border-radius: $radius-lg;
font-size: $title-size-m;
font-weight: bold;
&::after {
display: none;
}

View File

@@ -1,11 +1,11 @@
<template>
<div>
<view>
会话设置 {{ targetId}}
<div @click="setStatus">免打扰开关 {{status}}</div>
<div @click="setTop">置顶会话 {{isTop}}</div>
<view @click="setStatus">免打扰开关 {{status}}</view>
<view @click="setTop">置顶会话 {{isTop}}</view>
<u-button @click="toIndex">会首页</u-button>
</div>
</view>
</template>
<script>

BIN
static/.DS_Store vendored Normal file

Binary file not shown.

View File

@@ -17,7 +17,7 @@ export default {
if (state.friends[targetId]) {
return state.friends[targetId]
} else {
console.log('没找到', targetId);
console.log('没找到, 死循环了,得处理 todo', targetId);
im.syncUserInfo(targetId)
return {
name: '',

BIN
uni_modules/.DS_Store vendored Normal file

Binary file not shown.

BIN
utils/.DS_Store vendored Normal file

Binary file not shown.

View File

@@ -1,44 +0,0 @@
const api_url = 'http://api.zh.shangkelian.cn/api/im'
/**
* 获取币种余额
*/
export const getToken = (uid) => {
return new Promise((resolve, reject) => {
uni.request({
method: 'GET',
url: api_url + '/token/' + uid,
success: (res) => {
if (res.statusCode === 200) {
resolve(res.data.data)
} else {
reject(res.message)
}
}
})
})
}
/**
* 获取好友列表
*/
export const getFriends = () => {
return new Promise((resolve, reject) => {
uni.request({
method: 'GET',
url: api_url + '/friends',
success: (res) => {
if (res.statusCode === 200) {
resolve(res.data.data)
} else {
reject(res.message)
}
}
})
})
}
export default {
getToken,
getFriends
}

View File

@@ -1,44 +0,0 @@
const openSqlite = (callback) => {
plus.sqlite.openDatabase({
name: 'friends',
path: '_doc/friends.db',
success: (res) => {
callback(res)
},
fail: (err) => {
callback(err)
}
})
}
const executeSQL = (callback) => {
plus.sqlite.selectSql({
name: 'friends',
sql: sql,
success: (res) => {
callback(res)
},
fail: (err) => {
callback(err)
}
})
}
const closeSqlite = (callback) => {
plus.sqlite.closeDatabase({
name: 'friends',
path: '_doc/friends.db',
success: (res) => {
callback(res)
},
fail: (err) => {
callback(err)
}
})
}
export {
openSqlite,
executeSQL,
closeSqlite
}