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

12
apis/interfaces/im.js
View File

@@ -85,6 +85,15 @@ const pedingFriend = (recipient) => {
})
}
/**
* 好友申请数量
*/
const getPendingCount = () => {
return request({
url: 'im/friends/pending/count'
})
}
export {
getImToken,
deleteFriend,
@@ -95,5 +104,6 @@ export {
resolveFriend,
rejectFriend,
searchFriend,
pedingFriend
pedingFriend,
getPendingCount
}

35
components/im/imAUDIO.vue
View File

@@ -1,8 +1,10 @@
<template>
<view class="im--audio" :class="guest ? 'right': 'left'">
<image v-if="!guest" class="audio-mp3" src="@/static/icon/audio_green.png" mode="widthFix"></image>
<text class="audio-text">"60"</text>
<image v-if="guest" class="audio-mp3" src="@/static/icon/audio_white.png" mode="widthFix"></image>
<view>
<view class="im--audio" :class="guest ? 'right': 'left'" @click="onPlayMsg">
<image v-if="!guest" class="audio-mp3" src="@/static/icon/audio_green.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>
</template>
@@ -11,8 +13,13 @@
name:"im",
props:{
msg : {
type : String,
default: 'https://images.pexels.com/photos/10266655/pexels-photo-10266655.jpeg'
type : Object,
default: () => {
return {
src: "",
time: "20"
}
}
},
guest: {
type: Boolean,
@@ -20,10 +27,18 @@
}
},
methods:{
openImg(){
uni.previewImage({
urls : [this.msg],
current : 1
// 播放语音消息
onPlayMsg() {
let innerAudioContext = uni.createInnerAudioContext()
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:{
msg : {
type : String,
default: '文字消息'
default: ''
},
guest: {
type: Boolean,
@@ -31,8 +31,6 @@
padding: 20rpx;
font-size: 28rpx;
line-height: 40rpx;
min-height: 40rpx;
min-width: 50rpx;
}
.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.autofocus\"/>",
"<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_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",

12
pages.json
View File

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

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

@@ -4,7 +4,9 @@
<view>
<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>
<view class="name">新的朋友</view>
<view class="name">
新的朋友 ({{ pendingCount }})
</view>
</view>
<view class="friend-flex" @click="showToast">
<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>
<!-- #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 } })">
<block v-if="friendItem.portraitUrl != ''">
<u-avatar class="cover" size="40" shape="square" :src="friendItem.portraitUrl || ''"
@@ -47,24 +50,29 @@
<script>
import {
getFriends
getFriends,
getPendingCount
} from '@/apis/interfaces/im';
export default {
data() {
return {
indexs: [],
friends: []
friends: [],
pendingCount: 0
};
},
onShow() {
getFriends().then(res => {
this.indexs = res.indexList;
this.friends = res.itemArr;
});
this.indexs = res.indexList
this.friends = res.itemArr
})
getPendingCount().then(res => {
console.log(res);
this.pendingCount = res
})
},
computed: {},
methods: {
// 扫码提示
showToast() {
uni.showToast({
title: '群聊功能暂未开放，敬请期待',
@@ -104,7 +112,9 @@
.name {
flex: 1;
padding-left: $padding;
font-size: $title-size;
font-size: $title-size + 2;
font-size: $title-size + 2;
color: #454545 !important;
@extend .nowrap;
}
}

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

@@ -2,7 +2,7 @@
<view class="content">
<!-- 用户信息 -->
<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="nickname">{{userInfo.name}}</view>
<view class="address" @longpress="copyAddress">地址：{{userInfo.address}}</view>
@@ -22,11 +22,11 @@
<view class="info-btns">
<view class="item u-border-bottom" @click="setRemark">
<label>设置备注</label>
<u-icon name="arrow-right" color="#999" size="16"></u-icon>
<u-icon name="arrow-right" color="#eee" size="16" />
</view>
<view class="item u-border-bottom" @click="setRemark">
<label>设置标签</label>
<u-icon name="arrow-right" color="#999" size="16"></u-icon>
<u-icon name="arrow-right" color="#eee" size="16" />
</view>
<view class="item u-border-bottom">
<label>聊天免打扰</label>
@@ -40,21 +40,21 @@
<view class="footer">
<view class="footer-item" @click="deleteFriend">
<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 class="text">删除好友</view>
</view>
<view class="footer-item" @click="toPrivate">
<view class="icon">
<u-icon class="icon-u" name="chat-fill" color="#fff" size="26"></u-icon>
<view class="icon ">
<u-icon class="icon-u" name="chat-fill" color="#fff" size="30" />
</view>
<view class="text">发送消息</view>
</view>
<view class="footer-item" @click="callShow = true">
<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 class="text">视频通话</view>
<view class="text">音/视频通话</view>
</view>
</view>
</block>
@@ -62,7 +62,7 @@
<view class="footer">
<view class="footer-item" @click="toBeFriend">
<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 class="text">申请好友</view>
</view>
@@ -105,6 +105,7 @@
}
},
onLoad(e) {
console.log(e);
this.targetId = e.targetId
getFriendInfo(e.targetId).then(res => {
this.userInfo = res
@@ -126,123 +127,99 @@
}
});
},
toPrivate() {
uni.redirectTo({
url: '/pages/im/private/index?conversationType=1&targetId=' + this.targetId
});
},
setRemark() {
uni.showToast({
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'
});
}
});
});
}
methods: {
copyAddress() {
uni.setClipboardData({
data: this.userInfo.address,
success: () => {
uni.showToast({
icon: 'none',
title: '复制成功'
})
},
toPrivate() {
uni.redirectTo({
url: '/pages/im/private/index?conversationType=1&targetId=' + this.targetId
})
},
setRemark() {
uni.showToast({
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/chat?conversationType=1&targetId=' + this.targetId
});
},
setRemark() {
uni.showToast({
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'
})
}
})
}
})
}
})
},
setStatus() {
RongIMLib.setConversationNotificationStatus(this.conversationType, this.targetId, this.status, ({
}
})
},
setStatus() {
RongIMLib.setConversationNotificationStatus(this.conversationType, this.targetId, this.status,
({
status
}) => {
this.status = !Boolean(status)
})
},
setTop() {
RongIMLib.setConversationToTop(this.conversationType, this.targetId, this.isTop, (res) => {
RongIMLib.getConversation(this.conversationType, this.targetId, ({
conversation
}) => {
this.isTop = conversation.isTop
})
},
setTop() {
RongIMLib.setConversationToTop(this.conversationType, this.targetId, this.isTop, (res) => {
RongIMLib.getConversation(this.conversationType, this.targetId, ({
conversation
}) => {
this.isTop = conversation.isTop
})
},
// 申请好友
toBeFriend() {
pedingFriend(this.targetId).then(res => {
uni.showToast({
title: '申请成功',
icon: 'none'
});
})
},
// 申请好友
toBeFriend() {
pedingFriend(this.targetId).then(res => {
uni.showToast({
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>
<style lang="scss" scoped>
@@ -269,7 +246,7 @@
.nickname {
line-height: 30px;
font-size: $title-size + 6;
color: $text-color;
color: #454545;
text-align: left;
}
@@ -296,26 +273,36 @@
.footer-item {
margin: 0 $margin/2;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
.icon {
background: $main-color;
width: 88rpx;
height: 88rpx;
line-height: 88rpx;
display: inline-block;
// line-height: 88rpx;
// display: inline-block;
border-radius: 50%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
.icon-u {
margin-top: calc((88rpx/2) - 13px);
margin-left: calc((88rpx/2) - 13px);
// margin-top: calc((88rpx/2) - 13px);
// margin-left: calc((88rpx/2) - 13px);
}
}
.text {
color: $main-color;
font-size: $title-size-m;
font-size: $title-size-m - 2;
text-align: center;
padding-top: 10rpx;
padding-top: 16rpx;
}
}
}
@@ -326,12 +313,14 @@
background: white;
margin: $margin;
border-radius: $radius;
.u-border-bottom{
border-bottom: solid 1rpx #f9f9f9 !important;
}
.item {
line-height: 100rpx;
display: flex;
align-items: center;
padding: 0 $padding;
padding:10rpx $padding;
justify-content: space-between;
font-size: $title-size-lg;

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

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

80
pages/im/index.vue
View File

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

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

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

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

@@ -2,12 +2,20 @@
<view class="chat">
<!-- chat -->
<list class="chat-scroll">
<cell class="cell" :class="{'left': index%2 == 0, 'right': index%2 == 1}" v-for="(item, index) in msgArr" :key="index">
<image class="active" src="" mode="aspectFill"></image>
<view class="msg">
<imAUDIO :guest="index%2 == 1"></imAUDIO>
<imIMG :guest="index%2 == 1"></imIMG>
<imTXT :guest="index%2 == 1"></imTXT>
<cell class="cell" v-for="(item, index) in messages" :key="index">
<view class="cell-time">
<text class="cell-time-text">{{ item.sentTime|timeCustomCN }}</text>
</view>
<view class="cell-item" :class="item.messageDirection == 1 ? 'right' : 'left'">
<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>
</cell>
<cell class="cell-footer" ref="chatBottom"></cell>
@@ -26,46 +34,255 @@
<block v-if="importTabs === 1">
<input class="chat-input" type="text" v-model="inputTxt" confirm-type="发送" @confirm="send" cursor-spacing="10" />
</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>
</template>
<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 imIMG from '@/components/im/imIMG'
import imTXT from '@/components/im/imTXT'
var transcribe
var recorderManager = uni.getRecorderManager()
const ChatList = uni.requireNativePlugin('dom')
export default {
data() {
return {
toMsg : '',
msgArr : [
"NVUE界面信息界面信息界面信息界面信息界面信息界面信息界面信息界面信息界面信息"
],
importTabs: 1
targetId: '',
scrollIntoID: 'chatID_0',
inputTxt: '',
messages: [],
conversationType: 1,
totalCount: 0,
userInfo: {
name: '',
userId: '',
portraitUrl: ''
},
importTabs: 1,
showAudioTranscribe: false,
transcribeTime: 60,
audioSrc: '',
audioContextPaused: true
}
},
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: {
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(() => {
let el = this.$refs.chatBottom
ChatList.scrollToElement(el, {
animated: true
})
},50)
},
msgType(){
this.importTabs = this.importTabs === 1 ? 0 : 1
},100)
}
}
}
</script>
<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{
background: #F3F6FB;
@@ -75,9 +292,23 @@
flex: 1;
}
.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;
margin: 0 30rpx;
padding:10rpx 0;
justify-content: flex-start;
}
.cell-footer{
@@ -92,12 +323,23 @@
.msg{
margin: 0 20rpx;
}
.cell.left{
.state{
padding-top: 10rpx;
}
.state-text{
font-size: 24rpx;
color: #666;
}
.cell-item.left{
flex-direction: row;
}
.cell.right{
.cell-item.right{
flex-direction: row-reverse;
}
.cell-item.right .state{
flex-direction: row;
justify-content: flex-end;
}
/* footer */
.chat-footer{
background: white;

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

@@ -123,6 +123,18 @@
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)
this.getMessageList()
im.setNotifyBadge()
}
})
},
beforeDestroy() {
uni.$off('onReceiveMessage')
},
onUnload() {
RongIMLib.clearReadReceiptReceivedListener()
@@ -130,11 +142,6 @@
computed: {
disabled() {
return this.inputTxt.length == 0
},
friend() {
return function(targetId) {
return this.$store.getters.userInfo(targetId)
}
}
},
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: {
// 播放语音消息
onPlayMsg() {
@@ -247,6 +244,9 @@
messages
}) => {
if (code === 0) {
console.log(this.messages)
this.messages = messages.reverse()
this.scrollBottom()
}

691
pages/user/index.vue
View File

@@ -4,7 +4,8 @@
<view class="info-box">
<image src="@/static/user/user_back.png" mode="aspectFill" />
<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' })"
:src="userInfo.avatar || require('@/static/user/cover.png')" mode="aspectFill" />
<view class="user-content">
<block v-if="$store.state.token != ''">
<view class="name">{{ userInfo.nickname }}</view>
@@ -21,10 +22,14 @@
</view>
</view>
<view class="chainAddress" v-if="userInfo.chain_address">
<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" />
<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>
</block>
<block v-else><view class="name" @click="isLogin()">未登录</view></block>
<block v-else>
<view class="name" @click="isLogin()">未登录</view>
</block>
</view>
</view>
</view>
@@ -36,7 +41,10 @@
<image src="@/static/user/icon_06.png" mode="widthFix" />
ZH会员
</view>
<view class="subtitle"><u-notice-bar :text="cardText" icon="" bgColor="" duration="3000" color="#fcc692" direction="column"></u-notice-bar></view>
<view class="subtitle">
<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>
@@ -121,352 +129,403 @@
</template>
<script>
import { info } from '@/apis/interfaces/user';
import userAuth from '@/public/userAuth';
export default {
data() {
return {
cardText: ['新用户首单即赠会员', '老用户专属验证开通会员'],
userInfo: {
nickname: '',
avatar: '',
identity: []
}
};
},
onShow() {
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'
});
});
import {
info
} from '@/apis/interfaces/user';
import userAuth from '@/public/userAuth';
import im from '@/utils/im/index.js'
export default {
data() {
return {
cardText: ['新用户首单即赠会员', '老用户专属验证开通会员'],
userInfo: {
nickname: '',
avatar: '',
identity: []
}
};
},
// 开通会员
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;
onShow() {
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', '');
// 断开IM链接
im.disconnect()
},
copy(data) {
uni.setClipboardData({
data: data,
success: function() {
uni.showToast({
title: '复制成功',
icon: 'none'
})
}
});
}
},
// 开通钱包
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'
})
}
});
}
}
};
};
</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;
.content {
background: $window-color;
min-height: 100vh;
}
.user-flex {
// 版权信息
.footer-text {
text-align: center;
font-size: $title-size-sm;
padding: $padding $padding $padding * 2;
color: $text-gray-m;
}
// 用户信息
.info-box {
position: relative;
padding: $padding * 2 $padding ($padding * 2 + 60);
height: 128rpx;
.cover {
background: linear-gradient(to right, #34ce98, #22aa98);
color: white;
@extend .ios-top;
&>image {
position: absolute;
width: 128rpx;
height: 128rpx;
border-radius: 50%;
border: solid 6rpx white;
box-sizing: border-box;
z-index: 100;
top: 0;
right: 0;
width: 100%;
height: 100%;
// z-index: 100;
}
.user-content {
padding-left: 158rpx;
height: 128rpx;
display: flex;
flex-direction: column;
justify-content: center;
.user-flex {
position: relative;
.chainAddress {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: $title-size-m;
padding-top: 10rpx;
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: row;
align-items: center;
justify-content: flex-start;
flex-direction: column;
justify-content: center;
position: relative;
z-index: 200;
}
.name {
line-height: 40rpx;
font-weight: bold;
font-size: $title-size + 8;
@extend .nowrap;
}
.tabs {
padding-top: 10rpx;
&-item {
background: rgba($color: #000000, $alpha: 0.3);
font-size: $title-size-sm - 4;
display: inline-block;
line-height: 36rpx;
padding: 0 20rpx;
border-radius: 20rpx;
image {
width: 26rpx;
height: 26rpx;
vertical-align: middle;
margin-bottom: 2rpx;
margin-right: 8rpx;
.chainAddress {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: $title-size-m;
padding-top: 10rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
position: relative;
z-index: 200;
}
.name {
line-height: 40rpx;
font-weight: bold;
font-size: $title-size + 8;
@extend .nowrap;
}
.tabs {
padding-top: 10rpx;
&-item {
background: rgba($color: #000000, $alpha: 0.3);
font-size: $title-size-sm - 4;
display: inline-block;
line-height: 36rpx;
padding: 0 20rpx;
border-radius: 20rpx;
image {
width: 26rpx;
height: 26rpx;
vertical-align: middle;
margin-bottom: 2rpx;
margin-right: 8rpx;
}
}
}
}
}
}
}
// 会员卡
.vip-card {
position: relative;
margin: -60rpx $margin $margin;
background: linear-gradient(to right bottom, #3e5364, #31364a);
border-radius: $radius;
box-sizing: border-box;
color: #fcc692;
padding: $padding ($padding + 170) $padding $padding;
.title {
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;
}
}
.subtitle {
font-size: $title-size-sm;
margin-top: 10rpx;
.u-notice-bar {
padding: 0;
}
}
.btn {
position: absolute;
right: $margin;
margin-top: -30rpx;
top: 50%;
height: 60rpx;
line-height: 60rpx;
background: linear-gradient(to right, #fce3c5, #fcc590);
color: #31364a;
font-weight: bold;
width: 150rpx;
text-align: center;
font-size: $title-size-m;
border-radius: 30rpx;
}
}
// 订单信息
.order-box {
margin: $margin;
background: white;
border-radius: $radius;
display: flex;
justify-content: space-between;
&-item {
width: 25%;
padding: $padding $padding/2;
text-align: center;
.icon {
width: 48rpx;
height: 48rpx;
vertical-align: top;
}
.title {
font-size: $title-size-sm;
margin-top: $margin/3;
}
}
}
// 健康数据
.health-flex {
display: flex;
margin: $margin ($margin - 10);
&-item {
margin: 0 10rpx;
background: white;
width: calc(50% - 20rpx);
// 会员卡
.vip-card {
position: relative;
margin: -60rpx $margin $margin;
background: linear-gradient(to right bottom, #3e5364, #31364a);
border-radius: $radius;
padding: $padding;
box-sizing: border-box;
color: #fcc692;
padding: $padding ($padding + 170) $padding $padding;
.title {
font-weight: bold;
font-size: $title-size-lg;
.icon {
line-height: 40rpx;
image {
width: 32rpx;
height: 32rpx;
margin-right: 10rpx;
vertical-align: middle;
margin-left: 10rpx;
margin-bottom: 2rpx;
margin-bottom: 4rpx;
}
}
.num {
font-weight: bold;
font-size: $title-size + 10;
padding: $padding/3 0;
text {
font-size: 70%;
padding-left: 10rpx;
}
}
.hith {
.subtitle {
font-size: $title-size-sm;
color: $text-gray;
margin-top: 10rpx;
.u-notice-bar {
padding: 0;
}
}
}
}
// 模块
.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 {
.btn {
position: absolute;
right: $margin;
}
.icon {
width: 44rpx;
height: 44rpx;
vertical-align: middle;
margin-right: $margin/2;
margin-bottom: 8rpx;
margin-top: -30rpx;
top: 50%;
height: 60rpx;
line-height: 60rpx;
background: linear-gradient(to right, #fce3c5, #fcc590);
color: #31364a;
font-weight: bold;
width: 150rpx;
text-align: center;
font-size: $title-size-m;
border-radius: 30rpx;
}
}
// 订单信息
.order-box {
margin: $margin;
background: white;
border-radius: $radius;
display: flex;
justify-content: space-between;
&-item {
width: 25%;
padding: $padding $padding/2;
text-align: center;
.icon {
width: 48rpx;
height: 48rpx;
vertical-align: top;
}
.title {
font-size: $title-size-sm;
margin-top: $margin/3;
}
}
}
// 健康数据
.health-flex {
display: flex;
margin: $margin ($margin - 10);
&-item {
margin: 0 10rpx;
background: white;
width: calc(50% - 20rpx);
border-radius: $radius;
padding: $padding;
box-sizing: border-box;
.title {
font-size: $title-size-lg;
.icon {
width: 32rpx;
height: 32rpx;
vertical-align: middle;
margin-left: 10rpx;
margin-bottom: 2rpx;
}
}
.num {
font-weight: bold;
font-size: $title-size + 10;
padding: $padding/3 0;
text {
font-size: 70%;
padding-left: 10rpx;
}
}
.hith {
font-size: $title-size-sm;
color: $text-gray;
}
}
}
// 模块
.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>

223
public/userAuth.js
View File

@@ -5,111 +5,132 @@
* moduleName: 登录
*/
import { router } from '../router'
import { keyAuth } from '../apis/interfaces/auth'
import {
router
} from '../router'
import {
keyAuth
} from '../apis/interfaces/auth'
import store from '../store'
import {
getImToken
} from '@/apis/interfaces/im.js'
import im from '@/utils/im/index.js'
class userAuth {
constructor() {
this.univerfyConfig = {
fullScreen: true,
authButton: {
'title': '一键登录',
'normalColor': '#34CE98',
'highlightColor': '#16b17a',
'disabledColor': '#aae4cc',
},
otherLoginButton: {
'title': '其他手机号码',
'borderColor': '#34CE98',
'textColor': '#34CE98'
},
privacyTerms: {
'checkedImage': '/static/icon/checked-icon.png',
'uncheckedImage': '/static/icon/unchecked-icon.png',
'textColor': '#999',
'termsColor': '#34CE98',
'suffix': '并使用本机号码登录/注册',
'privacyItems': [{
'url': 'https://www.baidu.com',
'title': '隐私协议'
}, {
'url': 'https://www.baidu.com',
'title': '服务协议'
}]
},
buttons: {
'iconWidth': '45px',
'list': [{
"provider": '微信登录',
"iconPath": '/static/icons/wechat.png',
}]
}
}
}
// 预登录
Login() {
//#ifdef H5
router.push({ name: 'Auth' })
return
//#endif
constructor() {
this.univerfyConfig = {
fullScreen: true,
authButton: {
'title': '一键登录',
'normalColor': '#34CE98',
'highlightColor': '#16b17a',
'disabledColor': '#aae4cc',
},
otherLoginButton: {
'title': '其他手机号码',
'borderColor': '#34CE98',
'textColor': '#34CE98'
},
privacyTerms: {
'checkedImage': '/static/icon/checked-icon.png',
'uncheckedImage': '/static/icon/unchecked-icon.png',
'textColor': '#999',
'termsColor': '#34CE98',
'suffix': '并使用本机号码登录/注册',
'privacyItems': [{
'url': 'https://www.baidu.com',
'title': '隐私协议'
}, {
'url': 'https://www.baidu.com',
'title': '服务协议'
}]
},
buttons: {
'iconWidth': '45px',
'list': [{
"provider": '微信登录',
"iconPath": '/static/icons/wechat.png',
}]
}
}
}
// 预登录
Login() {
//#ifdef H5
router.push({
name: 'Auth'
})
return
//#endif
return new Promise((resolve, reject) => {
uni.showLoading({
title: '加载中',
mask: true
})
uni.preLogin({
provider: 'univerify',
success: res => {
this.keyLogin().then(() => {
resolve({
auth: true
})
}).catch(errMsg => {
reject(errMsg)
})
},
fail: err => {
router.push({ name: 'Auth' })
},
complete() {
uni.hideLoading()
}
})
})
}
// 一键登录
keyLogin() {
return new Promise((resolve, reject) => {
uni.login({
provider: 'univerify',
univerifyStyle: {
...this.univerfyConfig
},
success: authResult => {
keyAuth({
access_token: authResult.authResult.access_token,
openid: authResult.authResult.openid
}).then(res => {
uni.closeAuthView()
store.commit('setToken', res.token_type + ' ' + res.access_token)
resolve()
}).catch(err => {
reject(err)
})
},
fail: err => {
uni.closeAuthView()
switch (err.code) {
case 30002:
router.push({ name: 'Auth', params: { keyPhone: 1 }})
break
}
}
})
})
}
return new Promise((resolve, reject) => {
uni.showLoading({
title: '加载中',
mask: true
})
uni.preLogin({
provider: 'univerify',
success: res => {
this.keyLogin().then(() => {
resolve({
auth: true
})
}).catch(errMsg => {
reject(errMsg)
})
},
fail: err => {
router.push({
name: 'Auth'
})
},
complete() {
uni.hideLoading()
}
})
})
}
// 一键登录
keyLogin() {
return new Promise((resolve, reject) => {
uni.login({
provider: 'univerify',
univerifyStyle: {
...this.univerfyConfig
},
success: authResult => {
keyAuth({
access_token: authResult.authResult.access_token,
openid: authResult.authResult.openid
}).then(res => {
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

3
router/index.js
View File

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

23
store/modules/im.js
View File

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

56
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 {
getFriends,
getUserInfo
getUserInfo,
getImToken
} from '@/apis/interfaces/im.js'
const initIm = (KEY) => {
RongIMLib.init(KEY)
CallLib.init()
addListeners()
// 初始化的时候 自动链接
if (store.getters.getToken !== '') {
getImToken().then(res => {
connect(res.token, res.userInfo, () => {})
})
}
}
const setNotifyBadge = () => {
@@ -19,6 +26,9 @@ const setNotifyBadge = () => {
count
}) => {
if (code === 0) {
// #ifdef APP-PLUS
plus.runtime.setBadgeNumber(count)
// #endif
if (count > 0) {
uni.setTabBarBadge({
index: 3,
@@ -52,14 +62,25 @@ const connect = (token, userInfo, callback) => {
const model = uni.model.friendModel
model.find((err, results) => {
console.log('好友列表', results);
results.map(item => {
store.dispatch('updateFriends', item)
})
})
}
/**
* 断开链接
*/
const 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 = () => {
// 添加连接状态监听函数
RongIMLib.addConnectionStatusListener((res) => {
console.log('连接状态监', res.data.status);
store.dispatch('updateConnectionStatus', res.data.status)
console.log('连接状态监听', res.data.status);
uni.$emit('onConnectionStatusChange', res.data.status)
})
// 添加消息监听函数
RongIMLib.addReceiveMessageListener((res) => {
@@ -101,24 +122,22 @@ const addListeners = () => {
}
})
// 监听通话呼入
CallLib.onCallReceived((res) => {
console.log("Engine:OnCallReceived=>" + "监听通话呼入, 目标id=>", res.data.targetId);
console.log('RES', res);
CallLib.onCallReceived(({
data
}) => {
console.log('onCallReceived', data)
uni.navigateTo({
url: '/pages/im/private/call?targetId=' + res.data.targetId + '&mediaType=' +
res.data.mediaType,
success: (err) => {
console.log('跳转视频通话成功');
},
fail: (err) => {
console.log('跳转视频页失败', err);
}
url: '/pages/im/private/call?targetId=' + data.targetId + '&mediaType=' +
data.mediaType
})
})
CallLib.onCallConnected((res) => {
// 通话建立成功
CallLib.onCallConnected(() => {
uni.$emit('onCallConnected');
})
CallLib.onCallOutgoing((res) => {
uni.$emit('onCallOutgoing');
})
@@ -129,10 +148,12 @@ const addListeners = () => {
uni.$emit('onRemoteUserJoined');
})
CallLib.onCallDisconnected((res) => {
console.log('断开链接', res);
uni.$emit('onCallDisconnected');
})
CallLib.onRemoteUserLeft((res) => {
uni.$emit('onCallDisconnected');
console.log('远端离开', res);
uni.$emit('onRemoteUserLeft');
})
}
@@ -155,7 +176,8 @@ const newMessage = (msg) => {
syncUserInfo(msg.targetId)
}
store.dispatch('newMessage', msg)
uni.$emit('onReceiveMessage', msg);
// store.dispatch('newMessage', msg)
}
function syncUserInfo(targetId) {