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

rename

Browse Source
This commit is contained in:
Jason.Chen
2022-01-20 16:15:24 +08:00
parent 93a20f2d3d
commit 088327eaff
14 changed files with 348 additions and 412 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

BIN
components/.DS_Store vendored Normal file
View File

Binary file not shown.

BIN
pages/.DS_Store vendored Normal file
View File

Binary file not shown.

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

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

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

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

298
pages/im/index.vue
View File

@@ -1,76 +1,63 @@
<template> <template>
<view class="content"> <view class="content">
<view v-if="$store.state.token != ''"> <view v-if="$store.state.token != ''">
<block v-if="conversations.length < 1"> <block v-if="conversations.length < 1">
<view class="vertical null-list"> <view class="vertical null-list">
<u-empty <u-empty icon="http://cdn.uviewui.com/uview/empty/message.png" textColor="#999" text="暂无好友消息">
icon="http://cdn.uviewui.com/uview/empty/message.png" <template>
textColor="#999" <view class="null-list-btn">开启聊天</view>
text="暂无好友消息" </template>
> </u-empty>
<template> </view>
<view class="null-list-btn">开启聊天</view> </block>
</template> <block v-else>
</u-empty> <view v-for="(item, index) in conversations" :key="index" class="mssage-box" @click="toDetail(item)">
</view> <view class="mssage-action">
</block> <block v-if="!friend(item.targetId).portraitUrl">
<block v-else> <u-avatar clsss="mssage-action-cover" size="44"
<view v-for="(item, index) in conversations" :key="index" class="mssage-box" @click="toDetail(item)"> :text="friend(item.targetId).name ? friend(item.targetId).name.substring(0,1) : '未'"
<view class="mssage-action"> font-size="14" randomBgColor></u-avatar>
<block v-if="!friend(item.targetId).portraitUrl"> </block>
<u-avatar <block v-else>
clsss="mssage-action-cover" <u-avatar clsss="mssage-action-cover" :src="friend(item.targetId).portraitUrl" size="44">
size="44" </u-avatar>
:text="friend(item.targetId).name ? friend(item.targetId).name.substring(0,1) : '未'" </block>
font-size="14" <view class="mssage-action-content">
randomBgColor <view class="mssage-header">
></u-avatar> <view class="header-name">{{ friend(item.targetId).name || '未知用户' }}</view>
</block> <view class="header-time">{{ item.sentTime|timeCustomCN }}</view>
<block v-else> </view>
<u-avatar <view class="mssage-msg">{{ item.latestMessage.content }}</view>
clsss="mssage-action-cover" </view>
:src="friend(item.targetId).portraitUrl" </view>
size="44" </view>
></u-avatar> </block>
</block> </view>
<view class="mssage-action-content"> <!-- 未登录 -->
<view class="mssage-header"> <view v-else class="vertical null-list">
<view class="header-name">{{ friend(item.targetId).name || '未知用户' }}</view> <u-empty icon="http://cdn.uviewui.com/uview/empty/permission.png" textColor="#999" text="登录后开启聊天吧~">
<view class="header-time">{{ item.sentTime|timeCustomCN }}</view> <template>
</view> <view class="null-list-btn" @click="toLogin">去登录</view>
<view class="mssage-msg">{{ item.latestMessage.content }}</view> </template>
</view> </u-empty>
</view> </view>
</view> </view>
</block>
</view>
<!-- 未登录 -->
<view v-else class="vertical null-list">
<u-empty
icon="http://cdn.uviewui.com/uview/empty/permission.png"
textColor="#999"
text="登录后开启聊天吧~"
>
<template>
<view class="null-list-btn" @click="toLogin">去登录</view>
</template>
</u-empty>
</view>
</view>
</template> </template>
<script> <script>
import * as RongIMLib from '@rongcloud/imlib-uni' import * as RongIMLib from '@rongcloud/imlib-uni'
import im from '@/utils/im/index.js' import im from '@/utils/im/index.js'
import userAuth from '@/public/userAuth' import userAuth from '@/public/userAuth'
import { getImToken } from '@/apis/interfaces/im.js' import {
getImToken
} from '@/apis/interfaces/im.js'
export default { export default {
data() { data() {
return { return {
isShown: true, // 当前页面显示状态 isShown: true, // 当前页面显示状态
conversations: [] ,// 会话列表 conversations: [], // 会话列表
isImToken: '', // 是否已鉴权 isImToken: '', // 是否已鉴权
} }
}, },
computed: { computed: {
@@ -81,31 +68,32 @@
} }
}, },
onShow() { onShow() {
if (this.$store.state.token !== '') { if (this.$store.state.token !== '') {
if(this.isImToken === ''){ if (this.isImToken === '') {
getImToken().then(res => { getImToken().then(res => {
im.syncFriends() im.connect(res.token, res.userInfo)
im.connect(res.token, res.userInfo) this.isImToken = res.token
this.isImToken = res.token this.getConversationList()
this.getConversationList() })
}) }
} this.getConversationList()
this.getConversationList() this.isShown = true
this.isShown = true }
}
}, },
onHide() { onHide() {
this.isShown = false this.isShown = false
}, },
onNavigationBarButtonTap(e) { onNavigationBarButtonTap(e) {
if (e.index == 0) { if (e.index == 0) {
uni.showToast({ uni.showToast({
title: '开发中暂未开放，敬请期待', title: '开发中暂未开放，敬请期待',
icon : 'none' icon: 'none'
}) })
} }
if (e.index == 1) { if (e.index == 1) {
this.$Router.push({name: 'imFriends'}) this.$Router.push({
name: 'imFriends'
})
} }
}, },
watch: { watch: {
@@ -140,7 +128,8 @@
// 进入聊天的详情页面，清理未读消息数量 // 进入聊天的详情页面，清理未读消息数量
toDetail(item) { toDetail(item) {
uni.navigateTo({ uni.navigateTo({
url: '/pages/im/private/index?targetId=' + item.targetId + '&conversationType=' + item.conversationType url: '/pages/im/private/index?targetId=' + item.targetId + '&conversationType=' + item
.conversationType
}) })
} }
} }
@@ -148,73 +137,84 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.content{ .content {
background-color: $window-color; background-color: $window-color;
min-height: 100vh; min-height: 100vh;
.null-list{
height: 100vh; .null-list {
text-align: center; height: 100vh;
&-btn{ text-align: center;
margin-top: $margin * 2;
line-height: 70rpx; &-btn {
color: $main-color; margin-top: $margin * 2;
border:solid 1rpx $main-color; line-height: 70rpx;
padding: 0 ($padding*3); color: $main-color;
font-size: $title-size-m; border: solid 1rpx $main-color;
border-radius: 35rpx; padding: 0 ($padding*3);
box-sizing: border-box; font-size: $title-size-m;
} border-radius: 35rpx;
} box-sizing: border-box;
.mssage-box{ }
background: white; }
.mssage-action{
position: relative; .mssage-box {
padding: 20rpx $padding; background: white;
&::after{
position: absolute; .mssage-action {
left: $padding + 108; position: relative;
right: 0; padding: 20rpx $padding;
bottom: 0;
content: " "; &::after {
height: 1rpx; position: absolute;
background: $border-color; left: $padding + 108;
} right: 0;
&-content{ bottom: 0;
position: absolute; content: " ";
top: 20rpx; height: 1rpx;
height: 44px; background: $border-color;
left: $padding + 108; }
right: $margin;
display: flex; &-content {
flex-direction: column; position: absolute;
justify-content: center; top: 20rpx;
.mssage-header{ height: 44px;
display: flex; left: $padding + 108;
font-size: $title-size; right: $margin;
line-height: 40rpx; display: flex;
justify-content: space-between; flex-direction: column;
.header-name{ justify-content: center;
flex: 1;
@extend .nowrap; .mssage-header {
} display: flex;
.header-time{ font-size: $title-size;
padding-left: $padding; line-height: 40rpx;
font-size: $title-size-sm - 2; justify-content: space-between;
color: $text-gray;
} .header-name {
} flex: 1;
.mssage-msg{ @extend .nowrap;
font-size: $title-size-sm - 2; }
color: $text-gray;
@extend .nowrap; .header-time {
} padding-left: $padding;
} font-size: $title-size-sm - 2;
} color: $text-gray;
&-item:last-child{ }
.mssage-action::after{ }
display: none;
} .mssage-msg {
} font-size: $title-size-sm - 2;
} color: $text-gray;
} @extend .nowrap;
}
}
}
&-item:last-child {
.mssage-action::after {
display: none;
}
}
}
}
</style> </style>

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

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

8
pages/im/private/setting.vue
View File

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

BIN
static/.DS_Store vendored Normal file
View File

Binary file not shown.

2
store/modules/im.js
View File

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

BIN
uni_modules/.DS_Store vendored Normal file
View File

Binary file not shown.

BIN
utils/.DS_Store vendored Normal file
View File

Binary file not shown.

44
utils/im/api.js
View File

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

44
utils/im/sqlite.js
View File

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