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

调整聊天窗口

Browse Source
This commit is contained in:
唐明明
2022-01-28 14:57:39 +08:00
parent b0f2a8f1ab 112ad7ceaf
commit e6f8c28a2b
17 changed files with 1524 additions and 1129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
apis/interfaces/im.js
View File

@@ -22,14 +22,14 @@ const getImToken = () => {
url: 'im/token', url: 'im/token',
}, true) }, true)
} }
// 删除好友 // 删除好友
const deleteFriend = (targetId) => { const deleteFriend = (targetId) => {
return request({ return request({
method: 'DELETE', method: 'DELETE',
url: 'im/friends/' + targetId, url: 'im/friends/' + targetId,
}) })
} }
// 获取用户信息 // 获取用户信息
const getUserInfo = (targetId) => { const getUserInfo = (targetId) => {
@@ -37,9 +37,9 @@ const getUserInfo = (targetId) => {
url: 'im/userInfo/' + targetId, url: 'im/userInfo/' + targetId,
}) })
} }
/** /**
* 查看好友资料，附带好友关系 * 查看好友资料，附带好友关系
*/ */
const getFriendInfo = (userId) => { const getFriendInfo = (userId) => {
return request({ return request({
@@ -84,16 +84,26 @@ const pedingFriend = (recipient) => {
url: 'im/friends/' + recipient url: 'im/friends/' + recipient
}) })
} }
/**
* 好友申请数量
*/
const getPendingCount = () => {
return request({
url: 'im/friends/pending/count'
})
}
export { export {
getImToken, getImToken,
deleteFriend, deleteFriend,
getFriends, getFriends,
getUserInfo, getUserInfo,
getFriendInfo, getFriendInfo,
getPedings, getPedings,
resolveFriend, resolveFriend,
rejectFriend, rejectFriend,
searchFriend, searchFriend,
pedingFriend pedingFriend,
getPendingCount
} }

35
components/im/imAUDIO.vue
View File

@@ -1,8 +1,10 @@
<template> <template>
<view class="im--audio" :class="guest ? 'right': 'left'"> <view>
<image v-if="!guest" class="audio-mp3" src="@/static/icon/audio_green.png" mode="widthFix"></image> <view class="im--audio" :class="guest ? 'right': 'left'" @click="onPlayMsg">
<text class="audio-text">"60"</text> <image v-if="!guest" class="audio-mp3" src="@/static/icon/audio_green.png" mode="widthFix"></image>
<image v-if="guest" class="audio-mp3" src="@/static/icon/audio_white.png" mode="widthFix"></image> <text class="audio-text">"{{msg.time}}"</text>
<image v-if="guest" class="audio-mp3" src="@/static/icon/audio_white.png" mode="widthFix"></image>
</view>
</view> </view>
</template> </template>
@@ -11,8 +13,13 @@
name:"im", name:"im",
props:{ props:{
msg : { msg : {
type : String, type : Object,
default: 'https://images.pexels.com/photos/10266655/pexels-photo-10266655.jpeg' default: () => {
return {
src: "",
time: "20"
}
}
}, },
guest: { guest: {
type: Boolean, type: Boolean,
@@ -20,10 +27,18 @@
} }
}, },
methods:{ methods:{
openImg(){ // 播放语音消息
uni.previewImage({ onPlayMsg() {
urls : [this.msg], let innerAudioContext = uni.createInnerAudioContext()
current : 1 innerAudioContext.src = this.audioSrc
if (this.audioContextPaused) {
innerAudioContext.play()
this.audioContextPaused = false
return
}
innerAudioContext.stop()
innerAudioContext.onStop(resStop => {
this.audioContextPaused = true
}) })
} }
} }

4
components/im/imTXT.vue
View File

@@ -15,7 +15,7 @@
props:{ props:{
msg : { msg : {
type : String, type : String,
default: '文字消息' default: ''
}, },
guest: { guest: {
type: Boolean, type: Boolean,
@@ -31,8 +31,6 @@
padding: 20rpx; padding: 20rpx;
font-size: 28rpx; font-size: 28rpx;
line-height: 40rpx; line-height: 40rpx;
min-height: 40rpx;
min-width: 50rpx;
} }
.im--text.left{ .im--text.left{

1
manifest.json
View File

@@ -32,6 +32,7 @@
"<uses-feature android:name=\"android.hardware.camera\"/>", "<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>", "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>", "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>", "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>", "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>", "<uses-permission android:name=\"android.permission.CAMERA\"/>",

20
pages.json
View File

@@ -453,7 +453,9 @@
"path": "pages/im/friends/mine", "path": "pages/im/friends/mine",
"name": "imFriendsMine", "name": "imFriendsMine",
"style": { "style": {
"navigationBarTitleText": "我的资料" "navigationBarTitleText": "我的二维码",
"navigationBarBackgroundColor": "#34CE98",
"navigationBarTextStyle": "white"
} }
}, },
{ {
@@ -573,14 +575,14 @@
"navigationBarBackgroundColor": "#34CE98", "navigationBarBackgroundColor": "#34CE98",
"navigationBarTextStyle": "white" "navigationBarTextStyle": "white"
} }
},{ }, {
"path" : "pages/im/private/chat", "path": "pages/im/private/chat",
"style" : { "style": {
"disableScroll": true, "disableScroll": true,
"navigationBarTitleText": "聊天", "navigationBarTitleText": "聊天",
"enablePullDownRefresh": false, "enablePullDownRefresh": false,
"navigationBarBackgroundColor":"#F3F6FB" "navigationBarBackgroundColor": "#F3F6FB"
} }
} }
], ],
"tabBar": { "tabBar": {

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

@@ -4,7 +4,9 @@
<view> <view>
<view class="friend-flex u-border-bottom" @click="toPending"> <view class="friend-flex u-border-bottom" @click="toPending">
<u-avatar class="cover" size="40" shape="square" :src="require('@/static/im/im_01.png')"></u-avatar> <u-avatar class="cover" size="40" shape="square" :src="require('@/static/im/im_01.png')"></u-avatar>
<view class="name">新的朋友</view> <view class="name">
新的朋友 ({{ pendingCount }})
</view>
</view> </view>
<view class="friend-flex" @click="showToast"> <view class="friend-flex" @click="showToast">
<u-avatar class="cover" size="40" shape="square" :src="require('@/static/im/im_00.png')"></u-avatar> <u-avatar class="cover" size="40" shape="square" :src="require('@/static/im/im_00.png')"></u-avatar>
@@ -22,7 +24,8 @@
<u-index-anchor :text="indexs[friend]" bgColor="#F3F6FB" height="20" size="12" color="#666"> <u-index-anchor :text="indexs[friend]" bgColor="#F3F6FB" height="20" size="12" color="#666">
</u-index-anchor> </u-index-anchor>
<!-- #endif --> <!-- #endif -->
<view v-for="(friendItem, index) in item" :key="friendItem.userId" class="friend-flex u-border-bottom" <view v-for="(friendItem, index) in item" :key="friendItem.userId"
class="friend-flex u-border-bottom"
@click="$Router.push({ name: 'imFriendsInfo', params: { targetId: friendItem.userId } })"> @click="$Router.push({ name: 'imFriendsInfo', params: { targetId: friendItem.userId } })">
<block v-if="friendItem.portraitUrl != ''"> <block v-if="friendItem.portraitUrl != ''">
<u-avatar class="cover" size="40" shape="square" :src="friendItem.portraitUrl || ''" <u-avatar class="cover" size="40" shape="square" :src="friendItem.portraitUrl || ''"
@@ -47,24 +50,29 @@
<script> <script>
import { import {
getFriends getFriends,
getPendingCount
} from '@/apis/interfaces/im'; } from '@/apis/interfaces/im';
export default { export default {
data() { data() {
return { return {
indexs: [], indexs: [],
friends: [] friends: [],
pendingCount: 0
}; };
}, },
onShow() { onShow() {
getFriends().then(res => { getFriends().then(res => {
this.indexs = res.indexList; this.indexs = res.indexList
this.friends = res.itemArr; this.friends = res.itemArr
}); })
getPendingCount().then(res => {
console.log(res);
this.pendingCount = res
})
}, },
computed: {},
methods: { methods: {
// 扫码提示
showToast() { showToast() {
uni.showToast({ uni.showToast({
title: '群聊功能暂未开放，敬请期待', title: '群聊功能暂未开放，敬请期待',
@@ -104,7 +112,9 @@
.name { .name {
flex: 1; flex: 1;
padding-left: $padding; padding-left: $padding;
font-size: $title-size; font-size: $title-size + 2;
font-size: $title-size + 2;
color: #454545 !important;
@extend .nowrap; @extend .nowrap;
} }
} }

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

@@ -2,7 +2,7 @@
<view class="content"> <view class="content">
<!-- 用户信息 --> <!-- 用户信息 -->
<view class="info-flex"> <view class="info-flex">
<u-avatar :src="userInfo.portraitUrl" shape="square" size="50" bg-color="#fff"></u-avatar> <u-avatar :src="userInfo.portraitUrl || require('@/static/user/cover.png')" shape="square" size="50" bg-color="#fff"></u-avatar>
<view class="info-text"> <view class="info-text">
<view class="nickname">{{userInfo.name}}</view> <view class="nickname">{{userInfo.name}}</view>
<view class="address" @longpress="copyAddress">地址：{{userInfo.address}}</view> <view class="address" @longpress="copyAddress">地址：{{userInfo.address}}</view>
@@ -22,11 +22,11 @@
<view class="info-btns"> <view class="info-btns">
<view class="item u-border-bottom" @click="setRemark"> <view class="item u-border-bottom" @click="setRemark">
<label>设置备注</label> <label>设置备注</label>
<u-icon name="arrow-right" color="#999" size="16"></u-icon> <u-icon name="arrow-right" color="#eee" size="16" />
</view> </view>
<view class="item u-border-bottom" @click="setRemark"> <view class="item u-border-bottom" @click="setRemark">
<label>设置标签</label> <label>设置标签</label>
<u-icon name="arrow-right" color="#999" size="16"></u-icon> <u-icon name="arrow-right" color="#eee" size="16" />
</view> </view>
<view class="item u-border-bottom"> <view class="item u-border-bottom">
<label>聊天免打扰</label> <label>聊天免打扰</label>
@@ -40,21 +40,21 @@
<view class="footer"> <view class="footer">
<view class="footer-item" @click="deleteFriend"> <view class="footer-item" @click="deleteFriend">
<view class="icon"> <view class="icon">
<u-icon class="icon-u" name="close-circle-fill" color="#fff" size="26"></u-icon> <u-icon class="icon-u" name="close-circle-fill" color="#fff" size="30" />
</view> </view>
<view class="text">删除好友</view> <view class="text">删除好友</view>
</view> </view>
<view class="footer-item" @click="toPrivate"> <view class="footer-item" @click="toPrivate">
<view class="icon"> <view class="icon ">
<u-icon class="icon-u" name="chat-fill" color="#fff" size="26"></u-icon> <u-icon class="icon-u" name="chat-fill" color="#fff" size="30" />
</view> </view>
<view class="text">发送消息</view> <view class="text">发送消息</view>
</view> </view>
<view class="footer-item" @click="callShow = true"> <view class="footer-item" @click="callShow = true">
<view class="icon"> <view class="icon">
<u-icon class="icon-u" name="camera-fill" color="#fff" size="26"></u-icon> <u-icon class="icon-u" name="camera-fill" color="#fff" size="30" />
</view> </view>
<view class="text">视频通话</view> <view class="text">音/视频通话</view>
</view> </view>
</view> </view>
</block> </block>
@@ -62,7 +62,7 @@
<view class="footer"> <view class="footer">
<view class="footer-item" @click="toBeFriend"> <view class="footer-item" @click="toBeFriend">
<view class="icon"> <view class="icon">
<u-icon class="icon-u" name="plus-people-fill" color="#fff" size="26"></u-icon> <u-icon class="icon-u" name="plus-people-fill" color="#fff" size="30" />
</view> </view>
<view class="text">申请好友</view> <view class="text">申请好友</view>
</view> </view>
@@ -104,7 +104,8 @@
callShow: false callShow: false
} }
}, },
onLoad(e) { onLoad(e) {
console.log(e);
this.targetId = e.targetId this.targetId = e.targetId
getFriendInfo(e.targetId).then(res => { getFriendInfo(e.targetId).then(res => {
this.userInfo = res this.userInfo = res
@@ -126,123 +127,99 @@
} }
}); });
}, },
toPrivate() { methods: {
uni.redirectTo({ copyAddress() {
url: '/pages/im/private/index?conversationType=1&targetId=' + this.targetId uni.setClipboardData({
}); data: this.userInfo.address,
}, success: () => {
setRemark() { uni.showToast({
uni.showToast({ icon: 'none',
title: '开发中', title: '复制成功'
icon: 'none'
});
},
deleteFriend() {
uni.showModal({
title: '删除确认',
content: '确认删除后不可恢复',
success: e => {
if (e.confirm) {
deleteFriend(this.targetId).then(res => {
// 删除聊天记录
RongIMLib.deleteMessages(1, this.targetId);
RongIMLib.removeConversation(1, this.targetId);
uni.showToast({
icon: 'none',
title: '好友删除成功',
success() {
uni.switchTab({
url: '/pages/im/index'
});
}
});
});
}
}) })
}, }
toPrivate() { })
uni.redirectTo({ },
url: '/pages/im/private/index?conversationType=1&targetId=' + this.targetId toPrivate() {
}) uni.redirectTo({
}, url: '/pages/im/private/chat?conversationType=1&targetId=' + this.targetId
setRemark() { });
uni.showToast({ },
title: '开发中', setRemark() {
icon: 'none' uni.showToast({
}) title: '开发中',
}, icon: 'none'
deleteFriend() { });
uni.showModal({ },
title: '删除确认', deleteFriend() {
content: '确认删除后不可恢复', uni.showModal({
success: (e) => { title: '删除确认',
if (e.confirm) { content: '确认删除后不可恢复',
deleteFriend(this.targetId).then(res => { success: e => {
// 删除聊天记录 if (e.confirm) {
RongIMLib.deleteMessages(1, this.targetId) deleteFriend(this.targetId).then(res => {
RongIMLib.removeConversation(1, this.targetId) // 删除聊天记录
uni.showToast({ RongIMLib.deleteMessages(1, this.targetId);
icon: 'none', RongIMLib.removeConversation(1, this.targetId);
title: '好友删除成功', uni.showToast({
success() { icon: 'none',
uni.switchTab({ title: '好友删除成功',
url: '/pages/im/index' success() {
}) uni.switchTab({
} url: '/pages/im/index'
}) })
}
}) })
} })
} }
}) }
}, })
setStatus() { },
RongIMLib.setConversationNotificationStatus(this.conversationType, this.targetId, this.status, ({ setStatus() {
RongIMLib.setConversationNotificationStatus(this.conversationType, this.targetId, this.status,
({
status status
}) => { }) => {
this.status = !Boolean(status) this.status = !Boolean(status)
}) })
}, },
setTop() { setTop() {
RongIMLib.setConversationToTop(this.conversationType, this.targetId, this.isTop, (res) => { RongIMLib.setConversationToTop(this.conversationType, this.targetId, this.isTop, (res) => {
RongIMLib.getConversation(this.conversationType, this.targetId, ({ RongIMLib.getConversation(this.conversationType, this.targetId, ({
conversation conversation
}) => { }) => {
this.isTop = conversation.isTop this.isTop = conversation.isTop
})
}) })
}, })
// 申请好友 },
toBeFriend() { // 申请好友
pedingFriend(this.targetId).then(res => { toBeFriend() {
uni.showToast({ pedingFriend(this.targetId).then(res => {
title: '申请成功', uni.showToast({
icon: 'none' title: '申请成功',
}); icon: 'none'
});
})
.catch(err => {
uni.showToast({
icon: 'error',
title: err.message,
duration: 2000
})
})
},
singleCall(e) {
CallLib.startSingleCall(this.targetId, e.type, '');
uni.redirectTo({
url: '/pages/im/private/call',
success: (err) => {
console.log('跳转视频通话成功');
},
fail: (err) => {
console.log('跳转视频页失败', err);
}
}) })
}, .catch(err => {
uni.showToast({
icon: 'error',
title: err.message,
duration: 2000
})
})
},
singleCall(e) {
uni.showToast({
icon: 'none',
title: '功能正在开发中'
})
// CallLib.startSingleCall(this.targetId, e.type, '');
// uni.redirectTo({
// url: '/pages/im/private/call?targetId=' + this.targetId + '&mediaType=' + e.type
// })
}
} }
} }
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -269,7 +246,7 @@
.nickname { .nickname {
line-height: 30px; line-height: 30px;
font-size: $title-size + 6; font-size: $title-size + 6;
color: $text-color; color: #454545;
text-align: left; text-align: left;
} }
@@ -296,26 +273,36 @@
.footer-item { .footer-item {
margin: 0 $margin/2; margin: 0 $margin/2;
text-align: center; text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
.icon { .icon {
background: $main-color; background: $main-color;
width: 88rpx; width: 88rpx;
height: 88rpx; height: 88rpx;
line-height: 88rpx; // line-height: 88rpx;
display: inline-block; // display: inline-block;
border-radius: 50%; border-radius: 50%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
.icon-u { .icon-u {
margin-top: calc((88rpx/2) - 13px); // margin-top: calc((88rpx/2) - 13px);
margin-left: calc((88rpx/2) - 13px); // margin-left: calc((88rpx/2) - 13px);
} }
} }
.text { .text {
color: $main-color; color: $main-color;
font-size: $title-size-m; font-size: $title-size-m - 2;
text-align: center; text-align: center;
padding-top: 10rpx; padding-top: 16rpx;
} }
} }
} }
@@ -326,12 +313,14 @@
background: white; background: white;
margin: $margin; margin: $margin;
border-radius: $radius; border-radius: $radius;
.u-border-bottom{
border-bottom: solid 1rpx #f9f9f9 !important;
}
.item { .item {
line-height: 100rpx; line-height: 100rpx;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 $padding; padding:10rpx $padding;
justify-content: space-between; justify-content: space-between;
font-size: $title-size-lg; font-size: $title-size-lg;

370
pages/im/friends/mine.vue
View File

@@ -1,183 +1,191 @@
<template> <template>
<view class="content"> <view class="content">
<!-- 用户信息 --> <!-- 用户信息 -->
<view class="info-flex"> <view class="info-flex">
<u-avatar <u-avatar :src="infoObj.portraitUrl" shape="square" size="50" bg-color="#fff"></u-avatar>
:src="infoObj.portraitUrl" <view class="info-text">
shape="square" <view class="nickname">{{infoObj.name}}</view>
size="50" <view class="address">地址：{{infoObj.address}}</view>
bg-color="#fff" </view>
></u-avatar> </view>
<view class="info-text"> <!-- 用户身份 -->
<view class="nickname">{{infoObj.name}}</view> <view class="info-btns">
<view class="address">地址：{{infoObj.address}}</view> <view class="item">
</view> <label>性别</label>
</view> <view class="text" v-if="infoObj.gender === 0">保密</view>
<!-- 用户身份 --> <view class="text" v-if="infoObj.gender === 1">男</view>
<view class="info-btns"> <view class="text" v-if="infoObj.gender === 2">女</view>
<view class="item"> </view>
<label>性别</label> <view class="item">
<view class="text" v-if="infoObj.gender === 0">保密</view> <label>HASH</label>
<view class="text" v-if="infoObj.gender === 1">男</view> <view class="text">{{infoObj.hash}}</view>
<view class="text" v-if="infoObj.gender === 2">女</view> </view>
</view> </view>
<view class="item"> <!-- 二维码 -->
<label>HASH</label> <view class="info-code">
<view class="text">{{infoObj.hash}}</view> <uqrcode class="info-code-src" :size="198" ref="uQRCode" :text="qrContent" />
</view> <view class="info-code-text">
</view> <view>ZH-HEALTH扫一扫上面的二维码</view>
<!-- 二维码 --> <view>添加我的好友</view>
<view class="info-code"> </view>
<uqrcode class="info-code-src" :size="198" ref="uQRCode" text="qrContent" /> </view>
<view class="info-code-text"> </view>
<view>ZH-HEALTH扫一扫上面的二维码</view> </template>
<view>添加我的好友</view>
</view> <script>
</view> import {
</view> getUserInfo
</template> } from '@/apis/interfaces/im'
export default {
<script> data() {
import { getUserInfo } from '@/apis/interfaces/im' return {
export default{ infoObj: {
data(){ userId: '',
return{ username: '',
infoObj: { name: '',
userId : '', address: '',
username : '', portraitUrl: '',
name : '', gender: 0,
address : '', hash: ''
portraitUrl : '', },
gender : 0, qrContent: 'ADDFRIEND|'
hash : '' }
}, },
qrContent: 'ADDFRIEND|' onLoad(e) {},
} mounted() {
}, getUserInfo(this.$Route.query.targetId).then(res => {
onLoad(e){ this.infoObj = res
console.log(e) this.qrContent += res.userId
})
}, },
mounted() { methods: {
getUserInfo(this.$Route.query.targetId).then(res => {
this.infoObj = res }
this.qrContent += res.userId }
console.log(this.infoObj) </script>
})
}, <style lang="scss" scoped>
methods: { .content {
background: $window-color;
} min-height: 100vh;
} padding-top: $padding;
</script> box-sizing: border-box;
<style lang="scss" scoped> .info-code {
.content{ background: white;
background: $window-color; margin: 0 $margin;
min-height: 100vh; border-radius: $radius;
padding-top: $padding; padding: $padding*3 $padding $padding;
box-sizing: border-box; text-align: center;
.info-code{
background: white; &-src {
margin: 0 $margin; display: inline-block;
border-radius: $radius; }
padding: $padding*3 $padding $padding;
text-align: center; &-text {
&-src{ text-align: center;
display: inline-block; color: $text-gray;
} font-size: $title-size-sm;
&-text{ line-height: 40rpx;
text-align: center; padding: $padding 0;
color: $text-gray; }
font-size: $title-size-sm; }
line-height: 40rpx;
padding: $padding 0; // 用户信息
} .info-flex {
} padding: $padding;
// 用户信息 margin: 0 $margin;
.info-flex{ display: flex;
padding: $padding; background: white;
margin: 0 $margin; border-radius: $radius;
display: flex;
background: white; .info-text {
border-radius: $radius; width: calc(100% - 50px);
.info-text{ padding-left: $padding;
width: calc(100% - 50px); box-sizing: border-box;
padding-left: $padding;
box-sizing: border-box; .nickname {
.nickname{ line-height: 30px;
line-height: 30px; font-size: $title-size + 6;
font-size: $title-size + 6; color: $text-color;
color: $text-color; text-align: left;
text-align: left; }
}
.address{ .address {
line-height: 20px; line-height: 20px;
font-size: $title-size-sm; font-size: $title-size-sm;
color: $text-gray; color: $text-gray;
text-align: left; text-align: left;
@extend .nowrap; @extend .nowrap;
} }
} }
} }
// footer // footer
.footer{ .footer {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
padding: $padding*2 $padding; padding: $padding*2 $padding;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
.footer-item{
margin: 0 $margin/2; .footer-item {
.icon{ margin: 0 $margin/2;
background: $main-color;
width: 88rpx; .icon {
height: 88rpx; background: $main-color;
line-height: 88rpx; width: 88rpx;
display: inline-block; height: 88rpx;
border-radius: 50%; line-height: 88rpx;
.icon-u{ display: inline-block;
margin-top: calc((88rpx/2) - 13px); border-radius: 50%;
margin-left: calc((88rpx/2) - 13px);
} .icon-u {
} margin-top: calc((88rpx/2) - 13px);
.text{ margin-left: calc((88rpx/2) - 13px);
color: $main-color; }
font-size: $title-size-m; }
text-align: center;
padding-top: 10rpx; .text {
} color: $main-color;
} font-size: $title-size-m;
} text-align: center;
padding-top: 10rpx;
// btns }
.info-btns{ }
background: white; }
margin: $margin;
border-radius: $radius; // btns
.item{ .info-btns {
line-height: 100rpx; background: white;
border-bottom: solid 1rpx $border-color; margin: $margin;
display: flex; border-radius: $radius;
padding: 0 $padding;
justify-content: space-between; .item {
font-size: $title-size-lg; line-height: 100rpx;
&:last-child{ border-bottom: solid 1rpx $border-color;
border-bottom: none; display: flex;
} padding: 0 $padding;
label{ justify-content: space-between;
width: 200rpx; font-size: $title-size-lg;
}
.text{ &:last-child {
width: calc(100% - 200rpx); border-bottom: none;
color: $text-gray-m; }
text-align: right;
@extend .nowrap; label {
} width: 200rpx;
} }
}
.text {
width: calc(100% - 200rpx);
color: $text-gray-m;
text-align: right;
@extend .nowrap;
}
}
}
} }
</style> </style>

84
pages/im/index.vue
View File

@@ -29,17 +29,14 @@
</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" />
<view v-for="(item, index) in conversations" :key="index" <view v-for="(item, index) in conversations" :key="index"
:class="['message', 'u-border-bottom', { 'is-top': item.isTop }]" @tap="toDetail(item)" :class="['message', { 'is-top': item.isTop }]" @tap="toDetail(item)"
@longpress="onLongPress" :data-item="item"> @longpress="onLongPress" :data-item="item">
<view class="avatar"> <view class="avatar">
<u-badge numberType="ellipsis" max="99" shape="horn" absolute :offset="[-5, -5]" <u-badge numberType="ellipsis" max="99" shape="horn" absolute :offset="[-5, -5]"
:value="item.unreadMessageCount" /> :value="item.unreadMessageCount" />
<u-avatar size="44" v-if="!friend(item.targetId).portraitUrl" shape="square" <u-avatar :src="friend(item.targetId).portraitUrl || require('@/static/user/cover.png')" shape="square" size="46" />
: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>
<view class="content"> <view class="content">
<view class="header"> <view class="header">
@@ -56,7 +53,7 @@
{{item}} {{item}}
</view> </view>
</view> </view>
</view> </view>
</block> </block>
</view> </view>
<!-- 未登录 --> <!-- 未登录 -->
@@ -74,7 +71,9 @@
import * as RongIMLib from "@/uni_modules/RongCloud-IMWrapper/js_sdk/index" import * as RongIMLib from "@/uni_modules/RongCloud-IMWrapper/js_sdk/index"
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 { getImToken } from '@/apis/interfaces/im.js' import {
getImToken
} from '@/apis/interfaces/im.js'
export default { export default {
data() { data() {
return { return {
@@ -99,13 +98,20 @@
} }
} }
}, },
onLoad() {
if (this.isShown) {
uni.$on('onReceiveMessage', (msg) => {
console.log(msg);
this.getConversationList()
})
uni.$on('onConnectionStatusChange', (status) => {
this.connection = status
})
}
},
onShow() { onShow() {
if (this.$store.state.token !== '') { if (this.$store.state.token !== '') {
getImToken().then(res => { this.getConversationList()
im.connect(res.token, res.userInfo, () => {
this.getConversationList()
})
})
} }
this.isShown = true this.isShown = true
}, },
@@ -127,16 +133,6 @@
} }
} }
}, },
watch: {
'$store.getters.newMessage': function(n, o) {
if (this.isShown) {
this.getConversationList()
}
},
'$store.getters.connection': function(n, o) {
this.connection = n
}
},
methods: { methods: {
hidePop() { hidePop() {
this.showPop = false this.showPop = false
@@ -203,9 +199,10 @@
toDetail(item) { toDetail(item) {
this.hidePop() this.hidePop()
uni.navigateTo({ uni.navigateTo({
url: '/pages/im/private/index?targetId=' + item.targetId + '&conversationType=' + item url: '/pages/im/private/chat?targetId=' + item.targetId + '&conversationType=' + item.conversationType
.conversationType })
})
// url: '/pages/im/private/index?targetId=' + item.targetId + '&conversationType=' + item.conversationType
}, },
// 点击按钮 // 点击按钮
onNav(name, params) { onNav(name, params) {
@@ -226,10 +223,8 @@
scanQrCode() { scanQrCode() {
uni.scanCode({ uni.scanCode({
success: (res) => { success: (res) => {
// "result": "ADDFRIEND|10010",
if (res.scanType == 'QR_CODE') { if (res.scanType == 'QR_CODE') {
res.result.substr(0, 10) == 'ADDFRIEND|' res.result.substr(0, 10) == 'ADDFRIEND|'
// 跳转到添加好友页面
uni.navigateTo({ uni.navigateTo({
url: '/pages/im/friends/info?targetId=' + res.result.substr(10) url: '/pages/im/friends/info?targetId=' + res.result.substr(10)
}) })
@@ -293,7 +288,7 @@
.contents { .contents {
background-color: $window-color; background-color: $window-color;
min-height: 100vh; min-height: 100vh;
padding-top: 90rpx; padding-top: 90rpx + 20rpx;
box-sizing: border-box; box-sizing: border-box;
.null-list { .null-list {
@@ -314,14 +309,15 @@
.message { .message {
background: white; background: white;
padding: 20rpx 30rpx; padding: 30rpx 0 0 30rpx;
position: relative; position: relative;
display: flex; display: flex;
&.u-border-bottom {}
&.is-top { &.is-top {
background: $window-color; background: $window-color;
border-bottom: #e8e8e8;
// background-color: rgba($color: $main-color, $alpha: 0.02);
} }
.avatar { .avatar {
@@ -333,28 +329,39 @@
} }
.content { .content {
padding-left: 30rpx; margin-left: 30rpx;
width: calc(100% - 44px); width: calc(100% - 46px);
box-sizing: border-box; box-sizing: border-box;
border-bottom: solid 1rpx #f3f3f3;
position: relative;
.header { .header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.name { .name {
font-size: $title-size + 4; font-size: $title-size + 2;
color: #454545;
color: #454545;
} }
.time { .time {
font-size: $title-size-sm; font-size: $title-size-sm;
color: $text-gray; color: $text-gray-m;
position: absolute;
right: 30rpx;
} }
} }
.preview { .preview {
word-break: break-all; word-break: break-all;
color: $text-gray; color: $text-gray-m;
font-size: $title-size-sm; padding-top: $padding - 20;
padding-bottom: $padding;
font-size: $title-size-m;
height: 40rpx;
line-height: 40rpx;
width: 500rpx;
@extend .nowrap; @extend .nowrap;
} }
} }
@@ -410,4 +417,7 @@
} }
} }
} }
.u-border-bottom{
border-bottom: solid 1rpx #f9f9f9 !important;
}
</style> </style>

150
pages/im/private/call.nvue
View File

@@ -8,20 +8,43 @@
</RongCloud-Call-RCUniCallView> </RongCloud-Call-RCUniCallView>
</view> </view>
<view class="status" v-if="!connected"> <view class="status" v-if="!connected || mediaType == 0">
<view class="call-user"> <view class="call-user">
<u-avatar :src="userInfo.portraitUrl" size="150" bg-color="#fff"></u-avatar> <u-avatar v-if="userInfo.portraitUrl" :src="userInfo.portraitUrl" shape="square" size="96" bgColor="#fff" />
<view class="nickname">{{userInfo.name}}</view> <u-avatar size="80" v-if="!userInfo.portraitUrl" shape="square" :text="userInfo.name ? userInfo.name.substring(0,1) : '未'" font-size="44" randomBgColor />
<view v-if="remoteRinging" class="mediaType">等待对方接听</view> <view><text class="nickname">{{userInfo.name}}</text></view>
<view v-if="connected" class="mediaType">已接通 {{ connected }}</view> <view v-if="remoteRinging"><text class="mediaType">等待对方接听</text></view>
<view v-else class="mediaType">{{ mediaType == 0 ? '邀请您语音通话' : '邀请您视频通话' }}</view> <view v-if="connected"><text class="mediaType">已接通</text></view>
<view v-else><text class="mediaType">{{ mediaType == 0 ? '邀请您语音通话' : '邀请您视频通话' }}</text></view>
</view> </view>
</view> </view>
<view class="buttons"> <view class="buttons">
<view class="btn" v-if="connected" @click="changeMicrophone"><text class="white">麦克风</text></view> <view class="btn" v-if="connected" @click="changeMicrophone">
<view class="btn hangup" @click="hangup"><text class="white">挂断</text></view> <view class="icon">
<view class="btn" v-if="!connected" @click="accept"><text class="white">接听</text></view> <u-icon name="mic" color="#ffffff" size="30" />
<view class="btn" v-if="connected" @click="changeSpeaker"><text class="white">扬声器</text></view> <u-icon name="mic-off" color="#ffffff" size="30" />
</view>
<text class="text">麦克风</text>
</view>
<view class="btn" @click="hangup">
<view class="icon hangup">
<u-icon name="close" color="#ffffff" size="25" />
</view>
<text class="text">挂断</text>
</view>
<view class="btn" v-if="!connected" @click="accept">
<view class="icon">
<u-icon name="checkmark" color="#ffffff" size="30" />
</view>
<text class="text">接听</text>
</view>
<view class="btn" v-if="connected" @click="changeSpeaker">
<view class="icon">
<u-icon name="volume-fill" color="#ffffff" size="27" />
<u-icon name="volume-off-fill" color="#ffffff" size="27" />
</view>
<text class="text">扬声器</text>
</view>
</view> </view>
</view> </view>
</template> </template>
@@ -37,50 +60,32 @@
return { return {
targetId: '', targetId: '',
mediaType: 0, // 0 语音 1 视频 mediaType: 0, // 0 语音 1 视频
users: [],
userInfo: {}, userInfo: {},
isOut: false, isOut: false,
connected: false, connected: false,
micStatus: false, micStatus: false,
speStatus: false, speStatus: false,
remoteRinging: false, remoteRinging: false,
innerAudioContext: null ring: null
} }
}, },
onLoad(e) { onLoad(e) {
this.targetId = e.targetId || 10051 this.targetId = e.targetId
this.mediaType = e.mediaType this.mediaType = e.mediaType
getFriendInfo(this.targetId).then(res => { getFriendInfo(this.targetId).then(res => {
this.userInfo = res this.userInfo = res
}) })
this.startRing() this.startRing()
// 监听通话链接状态 // 监听通话链接状态
uni.$once('onCallConnected', this.onCallConnected)
setTimeout(() => { uni.$once('onCallDisconnected', this.hangup)
CallLib.setVideoView(10047, this.$refs.bigVideoView.ref, 0, false) uni.$once('onRemoteUserRinging', () => {
}, 200)
uni.$on('onCallConnected', () => {
console.log('OnCallConnected');
this.connected = true
this.stopRing()
})
uni.$on('onCallDisconnected', () => {
this.hangup()
})
uni.$on('onRemoteUserRinging', () => {
this.remoteRinging = true this.remoteRinging = true
}) })
uni.$on('onRemoteUserJoined', () => { uni.$once('onRemoteUserJoined', () => {
this.remoteRinging = false this.remoteRinging = false
}) })
}, },
beforeDestroy() {
uni.$off('onCallConnected')
uni.$off('onCallDisconnected')
uni.$off('onRemoteUserRinging')
uni.$off('onRemoteUserJoined')
},
computed: { computed: {
windowWidth() { windowWidth() {
return uni.getSystemInfoSync().windowWidth return uni.getSystemInfoSync().windowWidth
@@ -100,10 +105,15 @@
}, },
accept() { accept() {
CallLib.accept() CallLib.accept()
},
onCallConnected() {
// 关掉铃声
this.stopRing()
// 设置链接状态
this.connected = true
// 视频通话，才开摄像头 // 视频通话，才开摄像头
if (this.mediaType == 1) { if (this.mediaType == 1) {
const session = CallLib.getCurrentCallSession() const session = CallLib.getCurrentCallSession()
this.users = session.users
setTimeout(() => { setTimeout(() => {
CallLib.setVideoView(session.targetId, this.$refs.bigVideoView.ref, 0, CallLib.setVideoView(session.targetId, this.$refs.bigVideoView.ref, 0,
false) false)
@@ -118,11 +128,10 @@
setTimeout(() => { setTimeout(() => {
this.downRing() this.downRing()
uni.navigateBack() uni.switchTab({
// uni.redirectTo({ url: '/pages/im/index'
// url: '/pages/im/private/index?targetId=' + this.targetId + '&conversationType=1' })
// }) }, 200);
}, 500);
}, },
toHome() { toHome() {
uni.switchTab({ uni.switchTab({
@@ -130,24 +139,24 @@
}) })
}, },
startRing() { startRing() {
const innerAudioContext = uni.createInnerAudioContext() const ring = uni.createInnerAudioContext()
this.innerAudioContext = innerAudioContext this.ring = ring
innerAudioContext.autoplay = true ring.autoplay = true
innerAudioContext.loop = true ring.loop = true
innerAudioContext.src = '/static/im/sounds/call-ring.mp3' ring.src = '/static/im/sounds/call-ring.mp3'
innerAudioContext.onEnded(() => { ring.onEnded(() => {
innerAudioContext.destroy() ring.destroy()
}) })
}, },
stopRing() { stopRing() {
this.innerAudioContext.stop() this.ring.stop()
}, },
downRing() { downRing() {
const innerAudioContext = uni.createInnerAudioContext() const ding = uni.createInnerAudioContext()
innerAudioContext.autoplay = true ding.autoplay = true
innerAudioContext.src = '/static/im/sounds/call-down.mp3' ding.src = '/static/im/sounds/call-down.mp3'
innerAudioContext.onEnded(() => { ding.onEnded(() => {
innerAudioContext.destroy() ding.destroy()
}) })
} }
} }
@@ -156,17 +165,18 @@
<style scoped> <style scoped>
.call-page { .call-page {
display: flex;
flex: 1; flex: 1;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
background: #666;
} }
.bigVideoView { .bigVideoView {
background: #000; background: #000;
} }
.smallVideoView { .smallVideoView {
background: blue;
position: absolute; position: absolute;
right: 100rpx; right: 100rpx;
top: 100rpx; top: 100rpx;
@@ -184,6 +194,10 @@
} }
.btn { .btn {
align-items: center;
}
.icon {
background: #34CE98; background: #34CE98;
width: 132rpx; width: 132rpx;
height: 132rpx; height: 132rpx;
@@ -193,27 +207,41 @@
justify-content: center; justify-content: center;
} }
.btn .white { .btn .text {
margin-top: 16rpx;
color: #FFFFFF; color: #FFFFFF;
font-size: 32rpx; font-size: 32rpx;
} }
.btn.hangup { .icon.hangup {
background: #dd524d; background: #dd524d;
} }
.status {
flex: 1;
background: #666;
width: 750rpx;
position: fixed;
bottom: 0;
top: 0;
}
.call-user { .call-user {
flex: 1; flex: 1;
position: fixed;
width: 750rpx; width: 750rpx;
top: 200rpx;
left: 0;
display: flex; display: flex;
align-items: center; align-items: center;
top: 300rpx;
}
.mediaType {
font-size: 32rpx;
color: #aaa;
} }
.nickname { .nickname {
margin: 30rpx; margin: 30rpx;
font-size: 40rpx; font-size: 44rpx;
color: #ffffff;
} }
</style> </style>

290
pages/im/private/chat.nvue
View File

@@ -2,12 +2,20 @@
<view class="chat"> <view class="chat">
<!-- chat --> <!-- chat -->
<list class="chat-scroll"> <list class="chat-scroll">
<cell class="cell" :class="{'left': index%2 == 0, 'right': index%2 == 1}" v-for="(item, index) in msgArr" :key="index"> <cell class="cell" v-for="(item, index) in messages" :key="index">
<image class="active" src="" mode="aspectFill"></image> <view class="cell-time">
<view class="msg"> <text class="cell-time-text">{{ item.sentTime|timeCustomCN }}</text>
<imAUDIO :guest="index%2 == 1"></imAUDIO> </view>
<imIMG :guest="index%2 == 1"></imIMG> <view class="cell-item" :class="item.messageDirection == 1 ? 'right' : 'left'">
<imTXT :guest="index%2 == 1"></imTXT> <image class="active" :src="userInfo.portraitUrl" mode="aspectFill" @click="showFriend(targetId, item.messageDirection)"></image>
<view class="msg">
<imAUDIO v-if="item.objectName === 'RC:VcMsg'" :guest="item.messageDirection == 1" :msg="item.content.content"></imAUDIO>
<imIMG v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1" :msg="item.content.content"></imIMG>
<imTXT v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1" :msg="item.content.content"></imTXT>
<view class="state" v-if="item.messageDirection == 1">
<text class="state-text">{{ item.sentStatus == 50 ? '已读': '未读'}}</text>
</view>
</view>
</view> </view>
</cell> </cell>
<cell class="cell-footer" ref="chatBottom"></cell> <cell class="cell-footer" ref="chatBottom"></cell>
@@ -26,46 +34,255 @@
<block v-if="importTabs === 1"> <block v-if="importTabs === 1">
<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" />
</block> </block>
<text class="chat-push" :disabled="disabled" size="mini" @click="send">发送</text> <text class="chat-push" size="mini" @click="send">发送</text>
</view>
<!-- 录音中提示 -->
<view class="audio-transcribe" v-if="showAudioTranscribe">
<image class="audio-transcribe-src" src="@/static/icon/record-icon.png" mode="widthFix"></image>
<text class="audio-transcribe-text">录音中 {{transcribeTime}} s</text>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
const ChatList = uni.requireNativePlugin('dom') import * as RongIMLib from "@/uni_modules/RongCloud-IMWrapper/js_sdk/index"
import im from '@/utils/im/index.js'
import permision from "@/js_sdk/wa-permission/permission.js"
import imAUDIO from '@/components/im/imAUDIO' import imAUDIO from '@/components/im/imAUDIO'
import imIMG from '@/components/im/imIMG' import imIMG from '@/components/im/imIMG'
import imTXT from '@/components/im/imTXT' import imTXT from '@/components/im/imTXT'
var transcribe
var recorderManager = uni.getRecorderManager()
const ChatList = uni.requireNativePlugin('dom')
export default { export default {
data() { data() {
return { return {
toMsg : '', targetId: '',
msgArr : [ scrollIntoID: 'chatID_0',
"NVUE界面信息界面信息界面信息界面信息界面信息界面信息界面信息界面信息界面信息" inputTxt: '',
], messages: [],
importTabs: 1 conversationType: 1,
totalCount: 0,
userInfo: {
name: '',
userId: '',
portraitUrl: ''
},
importTabs: 1,
showAudioTranscribe: false,
transcribeTime: 60,
audioSrc: '',
audioContextPaused: true
} }
}, },
components:{ imAUDIO, imIMG, imTXT }, components:{ imAUDIO, imIMG, imTXT },
onLoad(e) {
this.targetId = e.targetId
this.conversationType = e.conversationType // 会话类型
// 消息总数量
RongIMLib.getMessageCount(this.conversationType, this.targetId, ({
code,
count
}) => {
if (code == 0) {
this.totalCount = count
}
})
this.userInfo = this.$store.getters.userInfo(this.targetId)
uni.setNavigationBarTitle({
title: this.$store.getters.userInfo(this.targetId).name
})
RongIMLib.clearMessagesUnreadStatus(this.conversationType, this.targetId, new Date().getTime())
im.setNotifyBadge()
RongIMLib.sendReadReceiptMessage(this.conversationType, this.targetId, new Date().getTime())
this.getMessageList()
// 监听消息回执
RongIMLib.addReadReceiptReceivedListener(({
data
}) => {
if (data.targetId == this.targetId) {
this.getMessageList()
}
})
// 监听录音结束
recorderManager.onStop(res => {
if (res.tempFilePath) this.audioSrc = res.tempFilePath
console.log('------------------获取到了录音的临时路径---------------')
console.log(res.tempFilePath)
})
// 简童收到新消息，判断是否是当前会话，更新会话内容
uni.$on('onReceiveMessage', (msg) => {
if (msg.targetId == this.targetId) {
RongIMLib.clearMessagesUnreadStatus(msg.conversationType, msg.targetId, msg.sentTime)
RongIMLib.sendReadReceiptMessage(msg.conversationType, msg.targetId, msg.sentTime)
console.log(msg)
this.getMessageList()
im.setNotifyBadge()
}
})
},
beforeDestroy() {
uni.$off('onReceiveMessage')
},
onUnload() {
RongIMLib.clearReadReceiptReceivedListener()
},
computed: {
disabled() {
return this.inputTxt.length == 0
}
},
onNavigationBarButtonTap(e) {
if (e.index == 0) {
uni.navigateTo({
url: '/pages/im/private/setting?targetId=' + this.targetId +
'&conversationType=' + this.conversationType,
events: {
messageClear: () => {
this.getMessageList()
console.log('聊天消息被清空');
}
}
})
}
},
methods: { methods: {
send(){ // 检查安卓录制权限
this.msgArr.push("新消息NVUE") async getAndroidPermission() {
// 此处等待数据渲染完成后滚动至底部 return await permision.requestAndroidPermission('android.permission.RECORD_AUDIO')
},
// 切换聊天信息
msgType() {
this.importTabs = this.importTabs === 1 ? 0 : 1
},
// 录制语音消息
startAudio(e) {
this.getAndroidPermission().then(code => {
switch (code) {
case 1:
this.showAudioTranscribe = true
recorderManager.start()
transcribe = setInterval(() => {
this.transcribeTime -= 1
if (this.transcribeTime === 0) {
this.chendAudio()
}
}, 1000)
break;
case 0:
uni.showToast({
title: '暂无麦克风权限，请前往应用设置开启麦克风',
icon: 'none'
})
break;
case -1:
uni.showToast({
title: '应用权限错误',
icon: 'none'
})
break;
}
})
},
// 结束录音
chendAudio(e) {
if (!this.showAudioTranscribe) return
recorderManager.stop()
clearInterval(transcribe)
this.transcribeTime = 60
this.showAudioTranscribe = false
},
getMessageList() {
// 获取消息列表
const objectNames = [
'RC:TxtMsg',
'RC:VcMsg',
'RC:HQVCMsg',
'RC:ImgMsg',
'RC:GIFMsg',
'RC:ImgTextMsg',
'RC:FileMsg',
'RC:LBSMsg',
'RC:SightMsg',
'RC:ReferenceMsg',
'RC:CombineMsg'
]
const timeStamp = new Date().getTime()
const count = 20 // 获取的消息数量
const isForward = true // 是否向前获取
RongIMLib.getHistoryMessagesByTimestamp(this.conversationType, this.targetId, objectNames, timeStamp,
count,
isForward,
({
code,
messages
}) => {
if (code === 0) {
console.log(this.messages)
this.messages = messages.reverse()
this.scrollBottom()
}
}
)
},
send() {
if(this.inputTxt === '') return
im.sendMsg(this.conversationType, this.targetId, this.inputTxt, () => {
this.getMessageList()
this.inputTxt = ''
})
},
showFriend(targetId, type) {
uni.navigateTo({
url: type === 1 ? '/pages/im/friends/mine?targetId=' +targetId : '/pages/im/friends/info?targetId=' +targetId
})
},
scrollBottom() {
setTimeout(() => { setTimeout(() => {
let el = this.$refs.chatBottom let el = this.$refs.chatBottom
ChatList.scrollToElement(el, { ChatList.scrollToElement(el, {
animated: true animated: true
}) })
},50) },100)
},
msgType(){
this.importTabs = this.importTabs === 1 ? 0 : 1
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
.audio-transcribe {
background: rgba(0,0,0,.6);
position: fixed;
height: 200rpx;
width: 300rpx;
border-radius: 10rpx;
z-index: 99;
top: 550rpx;
left: 225rpx;
flex-direction: column;
align-items: center;
justify-content: center;
}
.audio-transcribe-src{
width: 88rpx;
height: 88rpx;
}
.audio-transcribe-text {
font-size: 28rpx;
color: #FFFFFF;
}
/* 窗口 */ /* 窗口 */
.chat{ .chat{
background: #F3F6FB; background: #F3F6FB;
@@ -75,9 +292,23 @@
flex: 1; flex: 1;
} }
.cell{ .cell{
padding:10rpx 30rpx;
}
.cell-time{
justify-content: center;
align-items: center;
padding-bottom: 20rpx;
}
.cell-time-text{
background: #fff;
font-size: 24rpx;
color: #666;
line-height: 40rpx;
padding: 0 20rpx;
border-radius: 10rpx;
}
.cell-item{
width: 690rpx; width: 690rpx;
margin: 0 30rpx;
padding:10rpx 0;
justify-content: flex-start; justify-content: flex-start;
} }
.cell-footer{ .cell-footer{
@@ -92,12 +323,23 @@
.msg{ .msg{
margin: 0 20rpx; margin: 0 20rpx;
} }
.cell.left{ .state{
padding-top: 10rpx;
}
.state-text{
font-size: 24rpx;
color: #666;
}
.cell-item.left{
flex-direction: row; flex-direction: row;
} }
.cell.right{ .cell-item.right{
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.cell-item.right .state{
flex-direction: row;
justify-content: flex-end;
}
/* footer */ /* footer */
.chat-footer{ .chat-footer{
background: white; background: white;

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

@@ -123,6 +123,18 @@
console.log('------------------获取到了录音的临时路径---------------') console.log('------------------获取到了录音的临时路径---------------')
console.log(res.tempFilePath) console.log(res.tempFilePath)
}) })
// 简童收到新消息，判断是否是当前会话，更新会话内容
uni.$on('onReceiveMessage', (msg) => {
if (msg.targetId == this.targetId) {
RongIMLib.clearMessagesUnreadStatus(msg.conversationType, msg.targetId, msg.sentTime)
RongIMLib.sendReadReceiptMessage(msg.conversationType, msg.targetId, msg.sentTime)
this.getMessageList()
im.setNotifyBadge()
}
})
},
beforeDestroy() {
uni.$off('onReceiveMessage')
}, },
onUnload() { onUnload() {
RongIMLib.clearReadReceiptReceivedListener() RongIMLib.clearReadReceiptReceivedListener()
@@ -130,11 +142,6 @@
computed: { computed: {
disabled() { disabled() {
return this.inputTxt.length == 0 return this.inputTxt.length == 0
},
friend() {
return function(targetId) {
return this.$store.getters.userInfo(targetId)
}
} }
}, },
onNavigationBarButtonTap(e) { onNavigationBarButtonTap(e) {
@@ -151,16 +158,6 @@
}) })
} }
}, },
watch: {
'$store.getters.newMessage': function(msg) {
if (msg.targetId == this.targetId) {
RongIMLib.clearMessagesUnreadStatus(msg.conversationType, msg.targetId, msg.sentTime)
RongIMLib.sendReadReceiptMessage(msg.conversationType, msg.targetId, msg.sentTime)
this.getMessageList()
im.setNotifyBadge()
}
}
},
methods: { methods: {
// 播放语音消息 // 播放语音消息
onPlayMsg() { onPlayMsg() {
@@ -246,7 +243,10 @@
code, code,
messages messages
}) => { }) => {
if (code === 0) { if (code === 0) {
console.log(this.messages)
this.messages = messages.reverse() this.messages = messages.reverse()
this.scrollBottom() this.scrollBottom()
} }

993
pages/user/index.vue
View File

@@ -1,472 +1,531 @@
<template> <template>
<view class="content"> <view class="content">
<!-- 用户信息 --> <!-- 用户信息 -->
<view class="info-box"> <view class="info-box">
<image src="@/static/user/user_back.png" mode="aspectFill" /> <image src="@/static/user/user_back.png" mode="aspectFill" />
<view class="user-flex"> <view class="user-flex">
<image class="cover" @click="$Router.push({ name: 'Setting' })" :src="userInfo.avatar || require('@/static/user/cover.png')" mode="aspectFill" /> <image class="cover" @click="$Router.push({ name: 'Setting' })"
<view class="user-content"> :src="userInfo.avatar || require('@/static/user/cover.png')" mode="aspectFill" />
<block v-if="$store.state.token != ''"> <view class="user-content">
<view class="name">{{ userInfo.nickname }}</view> <block v-if="$store.state.token != ''">
<view class="tabs" v-if="userInfo.identity.length !== 0"> <view class="name">{{ userInfo.nickname }}</view>
<view class="tabs-item"> <view class="tabs" v-if="userInfo.identity.length !== 0">
<image src="@/static/user/icon_07.png" /> <view class="tabs-item">
VIP会员 <image src="@/static/user/icon_07.png" />
</view> VIP会员
</view> </view>
<view class="tabs" v-else> </view>
<view class="tabs-item"> <view class="tabs" v-else>
<image src="@/static/user/icon_07.png" /> <view class="tabs-item">
普通用户 <image src="@/static/user/icon_07.png" />
</view> 普通用户
</view> </view>
<view class="chainAddress" v-if="userInfo.chain_address"> </view>
<u-icon labelPos="left" @click="copy(userInfo.chain_address)" labelSize="14" labelColor="#fff" :label="userInfo.chain_address.substr(0, 20)+'...'" space="10" :name="require('@/static/imgs/copy.png')" size="16" /> <view class="chainAddress" v-if="userInfo.chain_address">
</view> <u-icon labelPos="left" @click="copy(userInfo.chain_address)" labelSize="14"
</block> labelColor="#fff" :label="userInfo.chain_address.substr(0, 20)+'...'" space="10"
<block v-else><view class="name" @click="isLogin()">未登录</view></block> :name="require('@/static/imgs/copy.png')" size="16" />
</view> </view>
</view> </block>
<block v-else>
<view class="name" @click="isLogin()">未登录</view>
</block>
</view>
</view>
</view> </view>
<!-- 会员卡 --> <!-- 会员卡 -->
<view class="vip-card"> <view class="vip-card">
<view class="title"> <view class="title">
<image src="@/static/user/icon_06.png" mode="widthFix" /> <image src="@/static/user/icon_06.png" mode="widthFix" />
ZH会员 ZH会员
</view> </view>
<view class="subtitle"><u-notice-bar :text="cardText" icon="" bgColor="" duration="3000" color="#fcc692" direction="column"></u-notice-bar></view> <view class="subtitle">
<view class="btn" @click="openVip" v-if="userInfo.identity.length === 0">开通</view> <u-notice-bar :text="cardText" icon="" bgColor="" duration="3000" color="#fcc692" direction="column">
</u-notice-bar>
</view>
<view class="btn" @click="openVip" v-if="userInfo.identity.length === 0">开通</view>
</view> </view>
<!-- 健康数据 --> <!-- 健康数据 -->
<view class="health-flex" v-if="userInfo.has_record"> <view class="health-flex" v-if="userInfo.has_record">
<view class="health-flex-item"> <view class="health-flex-item">
<view class="title"> <view class="title">
体脂率 体脂率
<image class="icon" src="@/static/user/icon_04.png" mode="widthFix" /> <image class="icon" src="@/static/user/icon_04.png" mode="widthFix" />
</view> </view>
<view class="num"> <view class="num">
{{ userInfo.record.fat.fat }} {{ userInfo.record.fat.fat }}
<text>%</text> <text>%</text>
</view> </view>
<view class="hith">{{ userInfo.record.fat.text }}</view> <view class="hith">{{ userInfo.record.fat.text }}</view>
</view> </view>
<view class="health-flex-item"> <view class="health-flex-item">
<view class="title"> <view class="title">
体重 体重
<image class="icon" src="@/static/user/icon_05.png" mode="widthFix" /> <image class="icon" src="@/static/user/icon_05.png" mode="widthFix" />
</view> </view>
<view class="num"> <view class="num">
{{ userInfo.record.weight.weight }} {{ userInfo.record.weight.weight }}
<text>KG</text> <text>KG</text>
</view> </view>
<view class="hith">{{ userInfo.record.weight.text }}</view> <view class="hith">{{ userInfo.record.weight.text }}</view>
</view> </view>
</view> </view>
<!-- 订单 --> <!-- 订单 -->
<view class="order-box"> <view class="order-box">
<view class="order-box-item" @click="onBtn('Order', { index: 0 })"> <view class="order-box-item" @click="onBtn('Order', { index: 0 })">
<image class="icon" src="@/static/user/order_icon_00.png" mode="widthFix" /> <image class="icon" src="@/static/user/order_icon_00.png" mode="widthFix" />
<view class="title">全部订单</view> <view class="title">全部订单</view>
</view> </view>
<view class="order-box-item" @click="onBtn('Order', { index: 1 })"> <view class="order-box-item" @click="onBtn('Order', { index: 1 })">
<image class="icon" src="@/static/user/order_icon_01.png" mode="widthFix" /> <image class="icon" src="@/static/user/order_icon_01.png" mode="widthFix" />
<view class="title">待付款</view> <view class="title">待付款</view>
</view> </view>
<view class="order-box-item" @click="onBtn('Order', { index: 2 })"> <view class="order-box-item" @click="onBtn('Order', { index: 2 })">
<image class="icon" src="@/static/user/order_icon_02.png" mode="widthFix" /> <image class="icon" src="@/static/user/order_icon_02.png" mode="widthFix" />
<view class="title">待发货</view> <view class="title">待发货</view>
</view> </view>
<view class="order-box-item" @click="onBtn('Order', { index: 3 })"> <view class="order-box-item" @click="onBtn('Order', { index: 3 })">
<image class="icon" src="@/static/user/order_icon_03.png" mode="widthFix" /> <image class="icon" src="@/static/user/order_icon_03.png" mode="widthFix" />
<view class="title">待收货</view> <view class="title">待收货</view>
</view> </view>
<view class="order-box-item" @click="onBtn('Order', { index: 4 })"> <view class="order-box-item" @click="onBtn('Order', { index: 4 })">
<image class="icon" src="@/static/user/order_icon_04.png" mode="widthFix" /> <image class="icon" src="@/static/user/order_icon_04.png" mode="widthFix" />
<view class="title">已完成</view> <view class="title">已完成</view>
</view> </view>
</view> </view>
<!-- 功能块 --> <!-- 功能块 -->
<view class="btns-box"> <view class="btns-box">
<view class="btns-box-item" @click="onWallet"> <view class="btns-box-item" @click="onWallet">
<image class="icon" src="@/static/user/userIcon_00.png" mode="widthFix" /> <image class="icon" src="@/static/user/userIcon_00.png" mode="widthFix" />
ZH钱包 ZH钱包
<uni-icons class="forward" type="forward" color="#999" /> <uni-icons class="forward" type="forward" color="#999" />
</view> </view>
<view class="btns-box-item" @click="onFiles"> <view class="btns-box-item" @click="onFiles">
<image class="icon" src="@/static/user/userIcon_02.png" mode="widthFix" /> <image class="icon" src="@/static/user/userIcon_02.png" mode="widthFix" />
健康档案 健康档案
<uni-icons class="forward" type="forward" color="#999" /> <uni-icons class="forward" type="forward" color="#999" />
</view> </view>
<view class="btns-box-item" @click="onBtn('Address', { type: 'edit' })"> <view class="btns-box-item" @click="onBtn('Address', { type: 'edit' })">
<image class="icon" src="@/static/user/userIcon_03.png" mode="widthFix" /> <image class="icon" src="@/static/user/userIcon_03.png" mode="widthFix" />
地址管理 地址管理
<uni-icons class="forward" type="forward" color="#999" /> <uni-icons class="forward" type="forward" color="#999" />
</view> </view>
</view> </view>
<view class="btns-box" v-if="$store.state.token != ''"> <view class="btns-box" v-if="$store.state.token != ''">
<view class="btns-box-item" @click="logOut"> <view class="btns-box-item" @click="logOut">
<image class="icon" src="@/static/user/userIcon_05.png" mode="widthFix" /> <image class="icon" src="@/static/user/userIcon_05.png" mode="widthFix" />
退出登录 退出登录
<uni-icons class="forward" type="forward" color="#999" /> <uni-icons class="forward" type="forward" color="#999" />
</view> </view>
</view> </view>
<view class="footer-text"> <view class="footer-text">
<view>ZH生态俱乐部</view> <view>ZH生态俱乐部</view>
<view>All Rights Reserved. ZH Eco Club</view> <view>All Rights Reserved. ZH Eco Club</view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import { info } from '@/apis/interfaces/user'; import {
import userAuth from '@/public/userAuth'; info
export default { } from '@/apis/interfaces/user';
data() { import userAuth from '@/public/userAuth';
return { import im from '@/utils/im/index.js'
cardText: ['新用户首单即赠会员', '老用户专属验证开通会员'],
userInfo: { export default {
nickname: '', data() {
avatar: '', return {
identity: [] cardText: ['新用户首单即赠会员', '老用户专属验证开通会员'],
} userInfo: {
}; nickname: '',
}, avatar: '',
onShow() { identity: []
this.getInfo();
},
methods: {
// 用户信息
getInfo() {
if (this.$store.state.token === '') return;
info()
.then(res => {
console.log(res);
uni.setNavigationBarTitle({
title: res.nickname
});
this.userInfo = res;
console.log(res);
})
.catch(err => {
uni.showToast({
title: err.message,
icon: 'none'
});
});
},
// 开通会员
openVip() {
if (this.isLogin()) {
uni.showActionSheet({
itemList: ['我是新用户', '我是老用户'],
success: res => {
switch (res.tapIndex) {
case 0:
uni.showModal({
title: '开通提示',
content: '平台新用户完成首笔订单，即可获赠ZH健康会员',
showCancel: false,
cancelText: '去完成',
success: res => {
console.log(res);
this.$Router.pushTab({ name: 'Store' });
}
});
break;
case 1:
uni.showToast({
title: '老用户渠道暂未开放',
icon: 'none'
});
break;
}
}
});
}
},
// 开通钱包
onWallet() {
if (this.isLogin()) {
if (this.userInfo.is_wallet) this.$Router.push({ name: 'WalletProperty' });
else this.$Router.push({ name: 'WalletAdd' });
}
},
// 个人档案
onFiles() {
if (this.isLogin()) {
if (!this.userInfo.has_record) {
this.$Router.push({ name: 'EssentialInfo' });
return;
}
// this.$Router.push({ name: 'UserFiles',params:{id:this.userInfo.record_id} });
uni.navigateTo({
url: `/pages/user/files?id=${this.userInfo.record.record_id}`
});
}
},
// 按钮导航
onBtn(name, params) {
if (this.isLogin()) {
this.$Router.push({ name, params });
}
},
// 检查登录
isLogin() {
if (this.$store.state.token === '') {
const Auth = new userAuth();
Auth.Login();
return false;
}
return true;
},
// 退出登录
logOut() {
this.userInfo = {
nickname: '',
avatar: '',
identity: []
};
this.$store.commit('setToken', '');
},
copy(data){
uni.setClipboardData({
data: data,
success: function () {
uni.showToast({
title:'复制成功',
icon:'none'
})
} }
}); };
} },
} onShow() {
}; this.getInfo();
</script> },
methods: {
<style lang="scss" scoped> // 用户信息
.content { getInfo() {
background: $window-color; if (this.$store.state.token === '') return;
min-height: 100vh; info()
} .then(res => {
// 版权信息 console.log(res);
.footer-text { uni.setNavigationBarTitle({
text-align: center; title: res.nickname
font-size: $title-size-sm; });
padding: $padding $padding $padding * 2; this.userInfo = res;
color: $text-gray-m; console.log(res);
} })
// 用户信息 .catch(err => {
.info-box { uni.showToast({
position: relative; title: err.message,
background: linear-gradient(to right, #34ce98, #22aa98); icon: 'none'
color: white; });
@extend .ios-top; });
& > image { },
position: absolute; // 开通会员
top: 0; openVip() {
right: 0; if (this.isLogin()) {
width: 100%; uni.showActionSheet({
height: 100%; itemList: ['我是新用户', '我是老用户'],
// z-index: 100; success: res => {
} switch (res.tapIndex) {
.user-flex { case 0:
position: relative; uni.showModal({
padding: $padding * 2 $padding ($padding * 2 + 60); title: '开通提示',
height: 128rpx; content: '平台新用户完成首笔订单，即可获赠ZH健康会员',
.cover { showCancel: false,
position: absolute; cancelText: '去完成',
width: 128rpx; success: res => {
height: 128rpx; console.log(res);
border-radius: 50%; this.$Router.pushTab({
border: solid 6rpx white; name: 'Store'
box-sizing: border-box; });
z-index: 100; }
} });
.user-content { break;
padding-left: 158rpx; case 1:
height: 128rpx; uni.showToast({
display: flex; title: '老用户渠道暂未开放',
flex-direction: column; icon: 'none'
justify-content: center; });
position: relative; break;
.chainAddress { }
overflow: hidden; }
white-space: nowrap; });
text-overflow: ellipsis; }
font-size: $title-size-m; },
padding-top: 10rpx; // 开通钱包
display: flex; onWallet() {
flex-direction: row; if (this.isLogin()) {
align-items: center; if (this.userInfo.is_wallet) this.$Router.push({
justify-content: flex-start; name: 'WalletProperty'
});
else this.$Router.push({
name: 'WalletAdd'
});
}
},
// 个人档案
onFiles() {
if (this.isLogin()) {
if (!this.userInfo.has_record) {
this.$Router.push({
name: 'EssentialInfo'
});
return;
}
// this.$Router.push({ name: 'UserFiles',params:{id:this.userInfo.record_id} });
uni.navigateTo({
url: `/pages/user/files?id=${this.userInfo.record.record_id}`
});
}
},
// 按钮导航
onBtn(name, params) {
if (this.isLogin()) {
this.$Router.push({
name,
params
});
}
},
// 检查登录
isLogin() {
if (this.$store.state.token === '') {
const Auth = new userAuth();
Auth.Login();
return false;
}
return true;
},
// 退出登录
logOut() {
this.userInfo = {
nickname: '',
avatar: '',
identity: []
};
this.$store.commit('setToken', '');
// 断开IM链接
im.disconnect()
},
copy(data) {
uni.setClipboardData({
data: data,
success: function() {
uni.showToast({
title: '复制成功',
icon: 'none'
})
}
});
}
}
};
</script>
<style lang="scss" scoped>
.content {
background: $window-color;
min-height: 100vh;
}
// 版权信息
.footer-text {
text-align: center;
font-size: $title-size-sm;
padding: $padding $padding $padding * 2;
color: $text-gray-m;
}
// 用户信息
.info-box {
position: relative;
background: linear-gradient(to right, #34ce98, #22aa98);
color: white;
@extend .ios-top;
&>image {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
// z-index: 100;
}
.user-flex {
position: relative;
padding: $padding * 2 $padding ($padding * 2 + 60);
height: 128rpx;
.cover {
position: absolute;
width: 128rpx;
height: 128rpx;
border-radius: 50%;
border: solid 6rpx white;
box-sizing: border-box;
z-index: 100;
}
.user-content {
padding-left: 158rpx;
height: 128rpx;
display: flex;
flex-direction: column;
justify-content: center;
position: relative; position: relative;
z-index: 200;
} .chainAddress {
.name { overflow: hidden;
line-height: 40rpx; white-space: nowrap;
font-weight: bold; text-overflow: ellipsis;
font-size: $title-size + 8; font-size: $title-size-m;
@extend .nowrap; padding-top: 10rpx;
} display: flex;
.tabs { flex-direction: row;
padding-top: 10rpx; align-items: center;
&-item { justify-content: flex-start;
background: rgba($color: #000000, $alpha: 0.3); position: relative;
font-size: $title-size-sm - 4; z-index: 200;
display: inline-block; }
line-height: 36rpx;
padding: 0 20rpx; .name {
border-radius: 20rpx; line-height: 40rpx;
image { font-weight: bold;
width: 26rpx; font-size: $title-size + 8;
height: 26rpx; @extend .nowrap;
vertical-align: middle; }
margin-bottom: 2rpx;
margin-right: 8rpx; .tabs {
} padding-top: 10rpx;
}
} &-item {
} background: rgba($color: #000000, $alpha: 0.3);
} font-size: $title-size-sm - 4;
} display: inline-block;
// 会员卡 line-height: 36rpx;
.vip-card { padding: 0 20rpx;
position: relative; border-radius: 20rpx;
margin: -60rpx $margin $margin;
background: linear-gradient(to right bottom, #3e5364, #31364a); image {
border-radius: $radius; width: 26rpx;
box-sizing: border-box; height: 26rpx;
color: #fcc692; vertical-align: middle;
padding: $padding ($padding + 170) $padding $padding; margin-bottom: 2rpx;
.title { margin-right: 8rpx;
font-weight: bold; }
font-size: $title-size-lg; }
line-height: 40rpx; }
image { }
width: 32rpx; }
height: 32rpx; }
margin-right: 10rpx;
vertical-align: middle; // 会员卡
margin-bottom: 4rpx; .vip-card {
} position: relative;
} margin: -60rpx $margin $margin;
.subtitle { background: linear-gradient(to right bottom, #3e5364, #31364a);
font-size: $title-size-sm; border-radius: $radius;
margin-top: 10rpx; box-sizing: border-box;
.u-notice-bar { color: #fcc692;
padding: 0; padding: $padding ($padding + 170) $padding $padding;
}
} .title {
.btn { font-weight: bold;
position: absolute; font-size: $title-size-lg;
right: $margin; line-height: 40rpx;
margin-top: -30rpx;
top: 50%; image {
height: 60rpx; width: 32rpx;
line-height: 60rpx; height: 32rpx;
background: linear-gradient(to right, #fce3c5, #fcc590); margin-right: 10rpx;
color: #31364a; vertical-align: middle;
font-weight: bold; margin-bottom: 4rpx;
width: 150rpx; }
text-align: center; }
font-size: $title-size-m;
border-radius: 30rpx; .subtitle {
} font-size: $title-size-sm;
} margin-top: 10rpx;
// 订单信息
.order-box { .u-notice-bar {
margin: $margin; padding: 0;
background: white; }
border-radius: $radius; }
display: flex;
justify-content: space-between; .btn {
&-item { position: absolute;
width: 25%; right: $margin;
padding: $padding $padding/2; margin-top: -30rpx;
text-align: center; top: 50%;
.icon { height: 60rpx;
width: 48rpx; line-height: 60rpx;
height: 48rpx; background: linear-gradient(to right, #fce3c5, #fcc590);
vertical-align: top; color: #31364a;
} font-weight: bold;
.title { width: 150rpx;
font-size: $title-size-sm; text-align: center;
margin-top: $margin/3; font-size: $title-size-m;
} border-radius: 30rpx;
} }
} }
// 健康数据
.health-flex { // 订单信息
display: flex; .order-box {
margin: $margin ($margin - 10); margin: $margin;
&-item { background: white;
margin: 0 10rpx; border-radius: $radius;
background: white; display: flex;
width: calc(50% - 20rpx); justify-content: space-between;
border-radius: $radius;
padding: $padding; &-item {
box-sizing: border-box; width: 25%;
.title { padding: $padding $padding/2;
font-size: $title-size-lg; text-align: center;
.icon {
width: 32rpx; .icon {
height: 32rpx; width: 48rpx;
vertical-align: middle; height: 48rpx;
margin-left: 10rpx; vertical-align: top;
margin-bottom: 2rpx; }
}
} .title {
.num { font-size: $title-size-sm;
font-weight: bold; margin-top: $margin/3;
font-size: $title-size + 10; }
padding: $padding/3 0; }
text { }
font-size: 70%;
padding-left: 10rpx; // 健康数据
} .health-flex {
} display: flex;
.hith { margin: $margin ($margin - 10);
font-size: $title-size-sm;
color: $text-gray; &-item {
} margin: 0 10rpx;
} background: white;
} width: calc(50% - 20rpx);
// 模块 border-radius: $radius;
.btns-box { padding: $padding;
background: white; box-sizing: border-box;
margin: $margin;
border-radius: $radius; .title {
&-item { font-size: $title-size-lg;
position: relative;
line-height: 90rpx; .icon {
padding: $padding * 0.6 $padding; width: 32rpx;
font-size: $title-size-lg; height: 32rpx;
&::after { vertical-align: middle;
position: absolute; margin-left: 10rpx;
height: 1rpx; margin-bottom: 2rpx;
content: ' '; }
left: $margin; }
right: $margin;
bottom: 0; .num {
background-color: #f9f9f9; font-weight: bold;
} font-size: $title-size + 10;
&:last-child::after { padding: $padding/3 0;
display: none;
} text {
.forward { font-size: 70%;
position: absolute; padding-left: 10rpx;
right: $margin; }
} }
.icon {
width: 44rpx; .hith {
height: 44rpx; font-size: $title-size-sm;
vertical-align: middle; color: $text-gray;
margin-right: $margin/2; }
margin-bottom: 8rpx; }
} }
}
} // 模块
.btns-box {
background: white;
margin: $margin;
border-radius: $radius;
&-item {
position: relative;
line-height: 90rpx;
padding: $padding * 0.6 $padding;
font-size: $title-size-lg;
&::after {
position: absolute;
height: 1rpx;
content: ' ';
left: $margin;
right: $margin;
bottom: 0;
background-color: #f9f9f9;
}
&:last-child::after {
display: none;
}
.forward {
position: absolute;
right: $margin;
}
.icon {
width: 44rpx;
height: 44rpx;
vertical-align: middle;
margin-right: $margin/2;
margin-bottom: 8rpx;
}
}
}
</style> </style>

249
public/userAuth.js
View File

@@ -1,115 +1,136 @@
/** /**
* Web唐明明 * Web唐明明
* 匆匆数载恍如梦，岁月迢迢华发增。 * 匆匆数载恍如梦，岁月迢迢华发增。
* 碌碌无为枉半生，一朝惊醒万事空。 * 碌碌无为枉半生，一朝惊醒万事空。
* moduleName: 登录 * moduleName: 登录
*/ */
import { router } from '../router' import {
import { keyAuth } from '../apis/interfaces/auth' router
import store from '../store' } from '../router'
import {
class userAuth { keyAuth
constructor() { } from '../apis/interfaces/auth'
this.univerfyConfig = { import store from '../store'
fullScreen: true, import {
authButton: { getImToken
'title': '一键登录', } from '@/apis/interfaces/im.js'
'normalColor': '#34CE98', import im from '@/utils/im/index.js'
'highlightColor': '#16b17a',
'disabledColor': '#aae4cc', class userAuth {
}, constructor() {
otherLoginButton: { this.univerfyConfig = {
'title': '其他手机号码', fullScreen: true,
'borderColor': '#34CE98', authButton: {
'textColor': '#34CE98' 'title': '一键登录',
}, 'normalColor': '#34CE98',
privacyTerms: { 'highlightColor': '#16b17a',
'checkedImage': '/static/icon/checked-icon.png', 'disabledColor': '#aae4cc',
'uncheckedImage': '/static/icon/unchecked-icon.png', },
'textColor': '#999', otherLoginButton: {
'termsColor': '#34CE98', 'title': '其他手机号码',
'suffix': '并使用本机号码登录/注册', 'borderColor': '#34CE98',
'privacyItems': [{ 'textColor': '#34CE98'
'url': 'https://www.baidu.com', },
'title': '隐私协议' privacyTerms: {
}, { 'checkedImage': '/static/icon/checked-icon.png',
'url': 'https://www.baidu.com', 'uncheckedImage': '/static/icon/unchecked-icon.png',
'title': '服务协议' 'textColor': '#999',
}] 'termsColor': '#34CE98',
}, 'suffix': '并使用本机号码登录/注册',
buttons: { 'privacyItems': [{
'iconWidth': '45px', 'url': 'https://www.baidu.com',
'list': [{ 'title': '隐私协议'
"provider": '微信登录', }, {
"iconPath": '/static/icons/wechat.png', 'url': 'https://www.baidu.com',
}] 'title': '服务协议'
} }]
} },
} buttons: {
// 预登录 'iconWidth': '45px',
Login() { 'list': [{
//#ifdef H5 "provider": '微信登录',
router.push({ name: 'Auth' }) "iconPath": '/static/icons/wechat.png',
return }]
//#endif }
}
return new Promise((resolve, reject) => { }
uni.showLoading({ // 预登录
title: '加载中', Login() {
mask: true //#ifdef H5
}) router.push({
uni.preLogin({ name: 'Auth'
provider: 'univerify', })
success: res => { return
this.keyLogin().then(() => { //#endif
resolve({
auth: true return new Promise((resolve, reject) => {
}) uni.showLoading({
}).catch(errMsg => { title: '加载中',
reject(errMsg) mask: true
}) })
}, uni.preLogin({
fail: err => { provider: 'univerify',
router.push({ name: 'Auth' }) success: res => {
}, this.keyLogin().then(() => {
complete() { resolve({
uni.hideLoading() auth: true
} })
}) }).catch(errMsg => {
}) reject(errMsg)
} })
// 一键登录 },
keyLogin() { fail: err => {
return new Promise((resolve, reject) => { router.push({
uni.login({ name: 'Auth'
provider: 'univerify', })
univerifyStyle: { },
...this.univerfyConfig complete() {
}, uni.hideLoading()
success: authResult => { }
keyAuth({ })
access_token: authResult.authResult.access_token, })
openid: authResult.authResult.openid }
}).then(res => { // 一键登录
uni.closeAuthView() keyLogin() {
store.commit('setToken', res.token_type + ' ' + res.access_token) return new Promise((resolve, reject) => {
resolve() uni.login({
}).catch(err => { provider: 'univerify',
reject(err) univerifyStyle: {
}) ...this.univerfyConfig
}, },
fail: err => { success: authResult => {
uni.closeAuthView() keyAuth({
switch (err.code) { access_token: authResult.authResult.access_token,
case 30002: openid: authResult.authResult.openid
router.push({ name: 'Auth', params: { keyPhone: 1 }}) }).then(res => {
break uni.closeAuthView()
} store.commit('setToken', res.token_type + ' ' + res.access_token)
} // 在这里，登录成功，链接IM服务
}) getImToken().then(res => {
}) im.connect(res.token, res.userInfo)
} })
} resolve()
}).catch(err => {
reject(err)
})
},
fail: err => {
uni.closeAuthView()
switch (err.code) {
case 30002:
router.push({
name: 'Auth',
params: {
keyPhone: 1
}
})
break
}
}
})
})
}
}
export default userAuth export default userAuth

3
router/index.js
View File

@@ -10,6 +10,9 @@ import store from '@/store/index'
const ROUTES = [{ const ROUTES = [{
'path': '/pages/im/private/call', 'path': '/pages/im/private/call',
'name': 'imPrivateCall' 'name': 'imPrivateCall'
},{
'path': '/pages/im/private/chat',
'name': 'imPrivateChat'
}] }]
// #endif // #endif

25
store/modules/im.js
View File

@@ -2,19 +2,10 @@ import im from "@/utils/im/index.js"
export default { export default {
state: { state: {
newMsg: {},
friends: {}, friends: {},
sender: {}, sender: {},
// IM连接状态，0是正常
connection: 0
}, },
getters: { getters: {
newMessage(state) {
return state.newMsg
},
connection(state) {
return state.connection
},
friends(state) { friends(state) {
return state.friends return state.friends
}, },
@@ -40,28 +31,14 @@ export default {
} }
}, },
mutations: { mutations: {
newMessage(state, msg) {
Vue.set(state, 'newMsg', msg)
},
updateFriends(state, userInfo) { updateFriends(state, userInfo) {
Vue.set(state.friends, userInfo.userId, userInfo) Vue.set(state.friends, userInfo.userId, userInfo)
}, },
SET_state_sender(state, userInfo) { SET_state_sender(state, userInfo) {
state.sender = userInfo state.sender = userInfo
},
SET_connection_status(state, status) {
state.connection = status
} }
}, },
actions: { actions: {
updateConnectionStatus({commit}, status) {
commit('SET_connection_status', status)
},
newMessage({
commit
}, msg) {
commit('newMessage', msg)
},
setSenderInfo({ setSenderInfo({
commit commit
}, userInfo) { }, userInfo) {

92
utils/im/index.js
View File

@@ -3,13 +3,20 @@ import * as CallLib from '@/uni_modules/RongCloud-CallWrapper/lib/index'
import store from '@/store/index.js' import store from '@/store/index.js'
import { import {
getFriends, getFriends,
getUserInfo getUserInfo,
getImToken
} from '@/apis/interfaces/im.js' } from '@/apis/interfaces/im.js'
const initIm = (KEY) => { const initIm = (KEY) => {
RongIMLib.init(KEY) RongIMLib.init(KEY)
CallLib.init() CallLib.init()
addListeners() addListeners()
// 初始化的时候 自动链接
if (store.getters.getToken !== '') {
getImToken().then(res => {
connect(res.token, res.userInfo, () => {})
})
}
} }
const setNotifyBadge = () => { const setNotifyBadge = () => {
@@ -19,6 +26,9 @@ const setNotifyBadge = () => {
count count
}) => { }) => {
if (code === 0) { if (code === 0) {
// #ifdef APP-PLUS
plus.runtime.setBadgeNumber(count)
// #endif
if (count > 0) { if (count > 0) {
uni.setTabBarBadge({ uni.setTabBarBadge({
index: 3, index: 3,
@@ -52,14 +62,25 @@ const connect = (token, userInfo, callback) => {
const model = uni.model.friendModel const model = uni.model.friendModel
model.find((err, results) => { model.find((err, results) => {
console.log('好友列表', results);
results.map(item => { results.map(item => {
store.dispatch('updateFriends', item) store.dispatch('updateFriends', item)
}) })
}) })
} }
/**
* 断开链接
*/
const disconnect = () => { const disconnect = () => {
RongIMLib.disconnect() RongIMLib.disconnect()
// 移除提醒数量
// #ifdef APP-PLUS
plus.runtime.setBadgeNumber(0)
// #endif
uni.removeTabBarBadge({
index: 3
})
} }
// 允许通知的消息类型，触发更新消息列表操作 // 允许通知的消息类型，触发更新消息列表操作
@@ -89,8 +110,8 @@ function inArray(search, array) {
const addListeners = () => { const addListeners = () => {
// 添加连接状态监听函数 // 添加连接状态监听函数
RongIMLib.addConnectionStatusListener((res) => { RongIMLib.addConnectionStatusListener((res) => {
console.log('连接状态监', res.data.status); console.log('连接状态监听', res.data.status);
store.dispatch('updateConnectionStatus', res.data.status) uni.$emit('onConnectionStatusChange', res.data.status)
}) })
// 添加消息监听函数 // 添加消息监听函数
RongIMLib.addReceiveMessageListener((res) => { RongIMLib.addReceiveMessageListener((res) => {
@@ -101,39 +122,39 @@ const addListeners = () => {
} }
}) })
// 监听通话呼入 // 监听通话呼入
CallLib.onCallReceived((res) => { CallLib.onCallReceived(({
console.log("Engine:OnCallReceived=>" + "监听通话呼入, 目标id=>", res.data.targetId); data
console.log('RES', res); }) => {
console.log('onCallReceived', data)
uni.navigateTo({ uni.navigateTo({
url: '/pages/im/private/call?targetId=' + res.data.targetId + '&mediaType=' + url: '/pages/im/private/call?targetId=' + data.targetId + '&mediaType=' +
res.data.mediaType, data.mediaType
success: (err) => {
console.log('跳转视频通话成功');
},
fail: (err) => {
console.log('跳转视频页失败', err);
}
}) })
}) })
CallLib.onCallConnected((res) => { // 通话建立成功
uni.$emit('onCallConnected'); CallLib.onCallConnected(() => {
}) uni.$emit('onCallConnected');
CallLib.onCallOutgoing((res) => { })
uni.$emit('onCallOutgoing');
}) CallLib.onCallOutgoing((res) => {
CallLib.onRemoteUserRinging((res) => { uni.$emit('onCallOutgoing');
uni.$emit('onRemoteUserRinging'); })
}) CallLib.onRemoteUserRinging((res) => {
CallLib.onRemoteUserJoined((res) => { uni.$emit('onRemoteUserRinging');
uni.$emit('onRemoteUserJoined'); })
}) CallLib.onRemoteUserJoined((res) => {
CallLib.onCallDisconnected((res) => { uni.$emit('onRemoteUserJoined');
uni.$emit('onCallDisconnected'); })
}) CallLib.onCallDisconnected((res) => {
CallLib.onRemoteUserLeft((res) => { console.log('断开链接', res);
uni.$emit('onCallDisconnected'); uni.$emit('onCallDisconnected');
}) })
CallLib.onRemoteUserLeft((res) => {
console.log('远端离开', res);
uni.$emit('onRemoteUserLeft');
})
} }
// 维护消息列表 // 维护消息列表
@@ -155,7 +176,8 @@ const newMessage = (msg) => {
syncUserInfo(msg.targetId) syncUserInfo(msg.targetId)
} }
store.dispatch('newMessage', msg) uni.$emit('onReceiveMessage', msg);
// store.dispatch('newMessage', msg)
} }
function syncUserInfo(targetId) { function syncUserInfo(targetId) {