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

merge

Browse Source
This commit is contained in:
唐明明
2022-01-24 14:13:34 +08:00
parent 15c83ad6bd 33b4fb304d
commit d8d54a4d1b
14 changed files with 1058 additions and 808 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.hbuilderx/launch.json
View File

@@ -4,7 +4,7 @@
"configurations": [{ "configurations": [{
"app-plus" : "app-plus" :
{ {
"launchtype" : "remote" "launchtype" : "local"
}, },
"default" : "default" :
{ {

38
apis/interfaces/im.js
View File

@@ -1,4 +1,3 @@
/** /**
* Web唐明明 * Web唐明明
* 匆匆数载恍如梦，岁月迢迢华发增。 * 匆匆数载恍如梦，岁月迢迢华发增。
@@ -6,7 +5,9 @@
* moduleName: 聊聊 * moduleName: 聊聊
*/ */
import { request } from '../index' import {
request
} from '../index'
// 获取好友列表 // 获取好友列表
const getFriends = () => { const getFriends = () => {
@@ -38,9 +39,40 @@ const getPedings = () => {
}) })
} }
const resolveFriend = (targetId) => {
return request({
method: 'POST',
url: 'im/friends/accept/' + targetId
})
}
const rejectFriend = (targetId) => {
return request({
method: 'DELETE',
url: 'im/friends/accept/' + targetId
})
}
const searchFriend = (mobile) => {
return request({
url: 'im/search?mobile=' + mobile
})
}
const pedingFriend = (recipient) => {
return request({
method: 'POST',
url: 'im/friends/' + recipient
})
}
export { export {
getImToken, getImToken,
getFriends, getFriends,
getUserInfo, getUserInfo,
getPedings getPedings,
resolveFriend,
rejectFriend,
searchFriend,
pedingFriend
} }

4
manifest.json
View File

@@ -2,8 +2,8 @@
"name" : "ZH-HEALTH", "name" : "ZH-HEALTH",
"appid" : "__UNI__C29473D", "appid" : "__UNI__C29473D",
"description" : "ZH-HEALTH，您手上的健康管理专家", "description" : "ZH-HEALTH，您手上的健康管理专家",
"versionName" : "1.0.3", "versionName" : "1.0.5",
"versionCode" : 103, "versionCode" : 105,
"transformPx" : false, "transformPx" : false,
/* 5+App特有相关 */ /* 5+App特有相关 */
"app-plus" : { "app-plus" : {

8
pages.json
View File

@@ -372,7 +372,7 @@
"name": "imPrivate", "name": "imPrivate",
"style": { "style": {
"navigationBarTitleText": "聊天", "navigationBarTitleText": "聊天",
"navigationBarBackgroundColor": "#FFFFFF", "navigationBarBackgroundColor": "#F3F6FB",
"disableScroll": true, "disableScroll": true,
"app-plus": { "app-plus": {
"titleNView": { "titleNView": {
@@ -420,8 +420,8 @@
"path": "pages/im/friends/pending", "path": "pages/im/friends/pending",
"name": "imFriendsPending", "name": "imFriendsPending",
"style": { "style": {
"navigationBarTitleText": "新的朋友", "navigationBarTitleText": "新朋友",
"navigationBarBackgroundColor":"#FFFFFF" "navigationBarBackgroundColor":"#F3F6FB"
} }
}, },
{ {
@@ -429,7 +429,7 @@
"name": "imFriendsInfo", "name": "imFriendsInfo",
"style": { "style": {
"navigationBarTitleText": "好友资料", "navigationBarTitleText": "好友资料",
"navigationBarBackgroundColor":"#FFFFFF" "navigationBarBackgroundColor":"#F3F6FB"
} }
}, },
{ {

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

@@ -1,66 +1,49 @@
<template> <template>
<view> <view>
<view class="list"> <u-list height="auto">
<view class="list__item" @click="toPending"> <u-list-item>
<u-avatar size="35" icon="plus-people-fill" fontSize="26" bg-color="#f0ad4e"></u-avatar> <u-cell title="新的朋友" @click="toPending">
<text class="list__item__user-name">新的朋友</text> <u-avatar slot="icon" size="35" font-size="24" icon="plus-people-fill" shape="square"
</view> bg-color="#f0ad4e"></u-avatar>
<u-line></u-line> </u-cell>
<view class="list__item" @click="showToast"> </u-list-item>
<u-avatar size="35" icon="account-fill" fontSize="26" bg-color="#4cd964"></u-avatar> <u-list-item>
<text class="list__item__user-name">我的群聊</text> <u-cell title="我的群聊" @click="showToast">
</view> <u-avatar slot="icon" size="35" font-size="24" icon="account-fill" shape="square"
<u-line></u-line> bg-color="#4cd964"></u-avatar>
</view> </u-cell>
<block v-if="friendsArr.length > 0"> </u-list-item>
<u-index-list activeColor="#34CE98"> </u-list>
<template v-for="(item, index) in friendsArr">
<!-- #ifdef APP-NVUE --> <block v-if="friends.length > 0">
<u-index-anchor bgColor="#F3F6FB" color="#666" :text="indexList[index]" :key="index"></u-index-anchor> <u-list height="auto">
<!-- #endif --> <u-list-item v-for="(item, index) in friends" :key="index">
<u-index-item :key="index"> <u-cell :title="item.name + item.userId" @click="toInfo(item.userId)">
<!-- #ifndef APP-NVUE --> <u-avatar slot="icon" shape="square" size="35" :src="item.portraitUrl"></u-avatar>
<u-index-anchor :text="indexList[index]" bgColor="#F3F6FB" color="#666"></u-index-anchor> </u-cell>
<!-- #endif --> </u-list-item>
<view class="list" v-for="(item1, index1) in item" :key="index1"> </u-list>
<view class="list__item" @click="toInfo(10047)">
<image class="list__item__avatar" :src="item1.url"></image>
<!-- <u-avatar size="35" icon="chrome-circle-fill" fontSize="26" randomBgColor></u-avatar> -->
<text class="list__item__user-name">{{item1.name}}</text>
</view>
<u-line></u-line>
</view>
</u-index-item>
</template>
<view slot="footer" class="u-safe-area-inset--bottom">
<text class="list__footer">共305位好友</text>
</view>
</u-index-list>
</block> </block>
<block v-else> <block v-else>
<u-empty <u-empty class="pages-null" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无好友">
class="pages-null"
mode="data"
icon="http://cdn.uviewui.com/uview/empty/data.png"
text="暂未添加好友"
>
</u-empty> </u-empty>
</block> </block>
</view> </view>
</template> </template>
<script> <script>
import { getFriends } from '@/apis/interfaces/im' import {
getFriends
} from '@/apis/interfaces/im'
export default { export default {
data() { data() {
return { return {
friendsArr: [] friends: []
} }
}, },
onShow() { onShow() {
getFriends().then(res => { getFriends().then(res => {
this.friendsArr = res this.friends = res
console.log(res)
}) })
}, },
computed: { computed: {
@@ -83,7 +66,7 @@
// 用户资料 // 用户资料
toInfo(targetId) { toInfo(targetId) {
uni.navigateTo({ uni.navigateTo({
url: '/pages/im/friends/info?targeId=' + targetId url: '/pages/im/friends/info?targetId=' + targetId
}) })
} }
}, },
@@ -94,30 +77,6 @@
</script> </script>
<style lang="scss"> <style lang="scss">
.list {
&__item {
@include flex;
padding: 6px 12px;
align-items: center;
&__avatar {
height: 35px;
width: 35px;
border-radius: 50%;
}
&__user-name {
font-size: 16px;
margin-left: 10px;
color: $u-main-color;
}
}
&__footer {
color: $u-tips-color;
font-size: 14px;
text-align: center;
margin: 15px 0;
}
}
// 页面空 // 页面空
.pages-null { .pages-null {
height: 70vh; height: 70vh;

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

@@ -2,22 +2,23 @@
<view class="content"> <view class="content">
<!-- 用户信息 --> <!-- 用户信息 -->
<view class="user-info"> <view class="user-info">
<u-avatar <u-avatar :src="userInfo.portraitUrl" size="100"></u-avatar>
src="https://cdn.uviewui.com/uview/album/1.jpg"
size="58"
></u-avatar>
<view class="nickname">{{ userInfo.name }}</view> <view class="nickname">{{ userInfo.name }}</view>
<view class="sex"> <!-- <view class="sex">
<u-tag text="男" color="#fff" borderColor="#5db6ee" size="mini" icon="man" bgColor="#5db6ee"></u-tag> <u-tag text="男" color="#fff" borderColor="#5db6ee" size="mini" icon="man" bgColor="#5db6ee"></u-tag>
<!-- <u-tag text="女" color="#fff" borderColor="#e4867a" size="mini" icon="woman" bgColor="#e4867a"></u-tag> --> <u-tag text="女" color="#fff" borderColor="#e4867a" size="mini" icon="woman" bgColor="#e4867a"></u-tag>
</view> -->
<view class="address">
{{ userInfo.address}}
</view> </view>
</view> </view>
<view class="user-lists"> <!-- <view class="user-lists">
<view class="user-lists-item"> <view class="user-lists-item">
<label>地区</label> <label>地区</label>
<text>黑龙江 哈尔滨</text> <text>黑龙江 哈尔滨</text>
</view> </view>
</view> </view> -->
<!-- 发送消息 --> <!-- 发送消息 -->
<view class="info-footer"> <view class="info-footer">
<button class="open-btn" @click="toPrivate">发送消息</button> <button class="open-btn" @click="toPrivate">发送消息</button>
@@ -33,18 +34,25 @@
export default { export default {
data() { data() {
return { return {
targetId: '',
userInfo: {} userInfo: {}
} }
}, },
onLoad(e) { onLoad(e) {
this.targetId = e.targetId
console.log('获取资料',e.targetId);
getUserInfo(e.targetId).then(res => { getUserInfo(e.targetId).then(res => {
this.userInfo = res this.userInfo = res
console.log('获取资料', res);
uni.setNavigationBarTitle({
title: res.name
})
}) })
}, },
methods: { methods: {
toPrivate() { toPrivate() {
uni.navigateTo({ uni.redirectTo({
url: '/pages/im/private/index?targetId=10047&conversationType=1' url: '/pages/im/private/index?conversationType=1&targetId=' + this.targetId
}) })
} }
} }
@@ -56,6 +64,7 @@
min-height: 100vh; min-height: 100vh;
background: $window-color; background: $window-color;
} }
// 用户信息 // 用户信息
.user-info { .user-info {
padding: $padding*3 $padding; padding: $padding*3 $padding;
@@ -64,13 +73,21 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: white; background: white;
.nickname { .nickname {
font-size: 42rpx; font-size: 42rpx;
padding-top: $padding; padding-top: $padding;
color: $text-color;
} }
.address {
line-height: 64rpx;
font-size: 26rpx;
color: $text-gray;
}
.sex { .sex {
padding-top: $padding/2; padding-top: $padding/2;
text { text {
font-size: $title-size-sm; font-size: $title-size-sm;
background: #303133; background: #303133;
@@ -82,28 +99,34 @@
} }
} }
} }
.user-lists { .user-lists {
margin-top: $margin; margin-top: $margin;
background: white; background: white;
.user-lists-item { .user-lists-item {
padding: 0 $padding; padding: 0 $padding;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
line-height: 90rpx; line-height: 90rpx;
font-size: $title-size-lg; font-size: $title-size-lg;
label { label {
color: $text-color; color: $text-color;
} }
text { text {
color: $text-gray; color: $text-gray;
} }
} }
} }
// 发送消息 // 发送消息
.info-footer { .info-footer {
padding: $padding; padding: $padding;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
.open-btn { .open-btn {
width: 100%; width: 100%;
height: 90rpx; height: 90rpx;
@@ -114,6 +137,7 @@
margin: 0; margin: 0;
color: white; color: white;
font-size: $title-size; font-size: $title-size;
&::after { &::after {
display: none; display: none;
} }

140
pages/im/friends/pending.vue
View File

@@ -1,33 +1,111 @@
<template> <template>
<view> <view>
<!-- 搜索 --> <!-- 搜索 -->
<u-sticky>
<view class="header-search"> <view class="header-search">
<u-search placeholder="输入手机号码搜索" v-model="searchValue"></u-search> <u-search placeholder="输入手机号码搜索" bgColor="white" @custom="search" @search="search"
v-model="searchValue"></u-search>
</view> </view>
</u-sticky>
<u-list height="auto">
<u-list-item v-for="(item, index) in searchResult" :key="index">
<u-cell :title="item.name">
<u-avatar slot="icon" shape="square" size="35" :src="item.portraitUrl"></u-avatar>
<div style="width: 50px;" slot="value">
<u-button type="success" size="small" @click="pending(item.userId)">申请</u-button>
</div>
</u-cell>
</u-list-item>
</u-list>
<!-- 新朋友 --> <!-- 新朋友 -->
<view class="lists"> <u-divider text="好友申请"></u-divider>
<view class="lists-item" v-for="(item, index) in 10" :key="index"> <u-list height="auto">
<image class="lists-item-cover" src="" mode="aspectFill"></image> <u-swipe-action>
<view class="">好友</view> <u-list-item v-for="(item, index) in pedings" :key="index">
<view class=""> <u-swipe-action-item autoClose :options="options" @click="action($event, item)">
<text>通过</text> <u-cell :title="item.name">
<text>拒绝</text> <u-avatar slot="icon" shape="square" size="35" :src="item.portraitUrl"></u-avatar>
</view> </u-cell>
</view> </u-swipe-action-item>
</view> </u-list-item>
<!-- 空列表 --> </u-swipe-action>
<view class=""> </u-list>
空列表
</view>
</view> </view>
</template> </template>
<script> <script>
import {
getPedings,
resolveFriend,
rejectFriend,
searchFriend,
pedingFriend
} from '@/apis/interfaces/im.js'
export default { export default {
data() { data() {
return { return {
searchValue: "", searchResult: [],
listsArr: [] searchValue: '',
pedings: [],
options: [{
text: '通过',
style: {
backgroundColor: '#3c9cff'
}
}, {
text: '拒绝',
style: {
backgroundColor: '#f56c6c'
}
}]
}
},
onLoad() {
this.getPeddingList()
},
methods: {
search() {
console.log('sousuo');
searchFriend(this.searchValue).then(res => {
console.log(res);
this.searchResult = res
}).catch(err => {
console.log('err', err);
})
},
action(e, item) {
if (e.index == 0) {
resolveFriend(item.userId).then(res => {
this.getPeddingList()
})
} else {
rejectFriend(item.userId).then(res => {
this.getPeddingList()
})
}
},
getPeddingList() {
getPedings().then(res => {
this.pedings = res
})
},
pending(userId) {
uni.showLoading()
pedingFriend(userId).then(res => {
uni.showToast({
title: '申请成功',
success: () => {
this.searchResult = []
}
})
}).catch(err => {
uni.showToast({
icon: 'error',
title: err.message
})
})
} }
} }
} }
@@ -36,34 +114,6 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.header-search { .header-search {
padding: $padding/2 $padding; padding: $padding/2 $padding;
background: white;
}
// 好友列表
.lists{
.lists-item{
padding: 20rpx $padding;
position: relative;
display: flex;
align-items: center;
&::after{
content: " ";
position: absolute;
left: $margin;
right: 0;
bottom: 0;
height: 1rpx;
background-color: $border-color;
}
&:last-child::after{
display: none;
}
.lists-item-cover{
width: 98rpx;
height: 98rpx;
border-radius: 50%;
background: $window-color; background: $window-color;
} }
}
}
</style> </style>

228
pages/im/index.vue
View File

@@ -24,28 +24,39 @@
<block v-if="conversations.length < 1"> <block v-if="conversations.length < 1">
<view class="vertical null-list"> <view class="vertical null-list">
<u-empty icon="http://cdn.uviewui.com/uview/empty/message.png" textColor="#999" text="暂无好友消息"> <u-empty icon="http://cdn.uviewui.com/uview/empty/message.png" textColor="#999" text="暂无好友消息">
<template> <!-- <template>
<view class="null-list-btn">开启聊天</view> <view class="null-list-btn">开启聊天</view>
</template> </template> -->
</u-empty> </u-empty>
</view> </view>
</block> </block>
<block v-else> <block v-else>
<view v-for="(item, index) in conversations" :key="index" class="mssage-box" @click="toDetail(item)"> <u-alert type="warning" v-if="connection != 0" description="网络似乎断开了" :show-icon="true"></u-alert>
<view class="mssage-action"> <view v-for="(item, index) in conversations" :key="index" :class="['message', { 'is-top': item.isTop }]"
<block v-if="!friend(item.targetId).portraitUrl"> @tap="toDetail(item)" @longpress="onLongPress" :data-item="item">
<u-avatar clsss="mssage-action-cover" size="44" :text="friend(item.targetId).name ? friend(item.targetId).name.substring(0,1) : '未'" font-size="14" randomBgColor></u-avatar> <view class="avatar">
</block> <u-badge numberType="ellipsis" max="99" shape="horn" absolute :offset="[-5, -5]"
<block v-else> :value="item.unreadMessageCount" />
<u-avatar clsss="mssage-action-cover" :src="friend(item.targetId).portraitUrl" size="44"> <u-avatar size="44" v-if="!friend(item.targetId).portraitUrl"
:text="friend(item.targetId).name ? friend(item.targetId).name.substring(0,1) : '未'"
font-size="14" randomBgColor></u-avatar>
<u-avatar v-else :src="friend(item.targetId).portraitUrl" size="44">
</u-avatar> </u-avatar>
</block>
<view class="mssage-action-content">
<view class="mssage-header">
<view class="header-name">{{ friend(item.targetId).name || '未知用户' }}</view>
<view class="header-time">{{ item.sentTime|timeCustomCN }}</view>
</view> </view>
<view class="mssage-msg">{{ item.latestMessage.content }}</view>
<view class="content">
<view class="header">
<view class="name">{{ friend(item.targetId).name || '未知用户' }}</view>
<view class="time">{{ item.sentTime|timeCustomCN }}</view>
</view>
<view class="preview">{{ item.latestMessage.content || '&nbsp;' }}</view>
</view>
</view>
<view class="shade" @tap="hidePop">
<view class="pop" :style="popStyle" :class="{'show':showPop}">
<view v-for="(item, index) in popButton" :key="index" @tap="pickerMenu" :data-index="index">
{{item}}
</view> </view>
</view> </view>
</view> </view>
@@ -75,7 +86,16 @@
return { return {
isShown: true, // 当前页面显示状态 isShown: true, // 当前页面显示状态
conversations: [], // 会话列表 conversations: [], // 会话列表
isImToken: '', // 是否已鉴权 connection: 0,
/* 窗口尺寸 */
winSize: {},
/* 显示操作弹窗 */
showPop: false,
/* 弹窗按钮列表 */
popButton: ['置顶聊天', '删除该聊天'],
/* 弹窗定位样式 */
popStyle: "",
pickedItem: {}
} }
}, },
computed: { computed: {
@@ -87,16 +107,14 @@
}, },
onShow() { onShow() {
if (this.$store.state.token !== '') { if (this.$store.state.token !== '') {
if (this.isImToken === '') {
getImToken().then(res => { getImToken().then(res => {
im.connect(res.token, res.userInfo) console.log("IMTOKEN", res);
this.isImToken = res.token im.connect(res.token, res.userInfo, () => {
this.getConversationList() this.getConversationList()
}) })
})
} }
this.getConversationList()
this.isShown = true this.isShown = true
}
}, },
onHide() { onHide() {
this.isShown = false this.isShown = false
@@ -121,9 +139,54 @@
if (this.isShown) { if (this.isShown) {
this.getConversationList() this.getConversationList()
} }
},
'$store.getters.connection': function(n, o) {
this.connection = n
} }
}, },
methods: { methods: {
hidePop() {
this.showPop = false
this.pickedItem = {}
setTimeout(() => {
this.showShade = false
}, 250)
},
pickerMenu(e) {
const index = Number(e.currentTarget.dataset.index)
if (index == 0) {
RongIMLib.setConversationToTop(this.pickedItem.conversationType, this.pickedItem.targetId, !this
.pickedItem.isTop)
} else {
RongIMLib.removeConversation(this.pickedItem.conversationType, this.pickedItem.targetId)
}
this.getConversationList()
this.hidePop()
},
onLongPress(e) {
let [touches, style, item] = [e.touches[0], "", e.currentTarget.dataset.item]
if (touches.clientY > (this.winSize.height / 2)) {
style = `bottom:${this.winSize.height-touches.clientY}px;`
} else {
style = `top:${touches.clientY}px;`
}
if (touches.clientX > (this.winSize.witdh / 2)) {
style += `right:${this.winSize.witdh-touches.clientX}px`
} else {
style += `left:${touches.clientX}px`
}
this.popButton[0] = item.isTop ? '取消置顶' : '置顶聊天'
this.popStyle = style
this.pickedItem = item
this.$nextTick(() => {
setTimeout(() => {
this.showPop = true;
}, 10)
})
},
// 检查登录 // 检查登录
toLogin() { toLogin() {
if (this.$store.state.token === '') { if (this.$store.state.token === '') {
@@ -133,13 +196,11 @@
} }
return true return true
}, },
getFriend(targetId) {
return this.$store.getters.userInfo(targetId)
},
getConversationList() { getConversationList() {
const count = 1000 const count = 1000
const timestamp = 0 // 会话的时间戳（获取这个时间戳之前的会话列表，0 表示从最新开始获取）会话类型 const timestamp = 0
RongIMLib.getConversationList(undefined, count, timestamp, (res) => { RongIMLib.getConversationList(undefined, count, timestamp, (res) => {
console.log('获取列表', res);
if (res.code === 0 && res.conversations.length > 0) { if (res.code === 0 && res.conversations.length > 0) {
this.conversations = res.conversations this.conversations = res.conversations
} }
@@ -147,6 +208,7 @@
}, },
// 进入聊天的详情页面，清理未读消息数量 // 进入聊天的详情页面，清理未读消息数量
toDetail(item) { toDetail(item) {
this.hidePop()
uni.navigateTo({ uni.navigateTo({
url: '/pages/im/private/index?targetId=' + item.targetId + '&conversationType=' + item url: '/pages/im/private/index?targetId=' + item.targetId + '&conversationType=' + item
.conversationType .conversationType
@@ -220,13 +282,53 @@
} }
} }
.mssage-box { .message {
background: white;
.mssage-action {
position: relative; position: relative;
padding: 20rpx $padding; display: flex;
background: white;
padding: 24rpx 24rpx 20rpx 24rpx;
&.is-top {
background: $window-color;
}
.avatar {
position: relative;
.u-badge {
z-index: 999;
}
}
.content {
margin-left: 16rpx;
flex: 1;
.header {
display: flex;
justify-content: space-between;
.name {
font-size: 36rpx
}
.time {
font-size: 24rpx;
color: $text-gray;
}
}
.preview {
width: 520rpx;
word-break: break-all;
color: $text-gray;
font-size: 26rpx;
@extend .nowrap;
}
}
}
.message:not(:last-child) {
&::after { &::after {
position: absolute; position: absolute;
left: $padding + 108; left: $padding + 108;
@@ -236,46 +338,42 @@
height: 1rpx; height: 1rpx;
background: $border-color; background: $border-color;
} }
&-content {
position: absolute;
top: 20rpx;
height: 44px;
left: $padding + 108;
right: $margin;
display: flex;
flex-direction: column;
justify-content: center;
.mssage-header {
display: flex;
font-size: $title-size;
line-height: 40rpx;
justify-content: space-between;
.header-name {
flex: 1;
@extend .nowrap;
}
.header-time {
padding-left: $padding;
font-size: $title-size-sm - 2;
color: $text-gray;
} }
} }
.mssage-msg { /* 遮罩 */
font-size: $title-size-sm - 2; .shade {
color: $text-gray;
@extend .nowrap; .pop {
} position: fixed;
} z-index: 101;
width: 200rpx;
box-sizing: border-box;
font-size: 28rpx;
text-align: left;
color: #333;
background-color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
line-height: 80rpx;
transition: transform 0.15s ease-in-out 0s;
user-select: none;
-webkit-touch-callout: none;
transform: scale(0, 0);
&.show {
transform: scale(1, 1);
} }
&-item:last-child { &>view {
.mssage-action::after { padding: 0 20rpx;
display: none; overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
user-select: none;
-webkit-touch-callout: none;
&:active {
background-color: #f3f3f3;
} }
} }
} }

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

@@ -1,11 +1,9 @@
<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" v-for="(item,index) in messages" :key="index">
<view class="chat-item-time">
<text>{{ item.sentTime|timeCustomCN }}</text>
</view>
<view class="chat-item-article" :class="item.messageDirection == 1 ? 'right' : 'left'"> <view class="chat-item-article" :class="item.messageDirection == 1 ? 'right' : 'left'">
<view class="chat-msg"> <view class="chat-msg">
<view class="chat-msg-text">{{ item.content.content }}</view> <view class="chat-msg-text">{{ item.content.content }}</view>
@@ -14,18 +12,22 @@
<view class="chat-status" :class="{'hide': item.sentStatus == 50}" <view class="chat-status" :class="{'hide': item.sentStatus == 50}"
v-if="item.messageDirection == 1">{{ item.sentStatus == 50 ? '已读': '未读'}}</view> v-if="item.messageDirection == 1">{{ item.sentStatus == 50 ? '已读': '未读'}}</view>
<view class="chat-avatar"> <view class="chat-avatar">
<!-- <u-avatar :src="userInfo.portraitUrl" @click="showFriend"></u-avatar> --> <u-avatar v-if="item.messageDirection == 2" bg-color="#ffffff" :src="userInfo.portraitUrl"
<u-avatar v-if="item.messageDirection == 2" :src="friend(targetId).portraitUrl"></u-avatar> @click="showFriend(targetId)"></u-avatar>
<u-avatar v-else :src="$store.getters.sender.portraitUrl"/> <u-avatar v-else @click="showMine" bg-color="#ffffff"
:src="$store.getters.sender.portraitUrl" />
</view> </view>
</view> </view>
<view class="chat-item-time" :id="'chatId_'+index">
<text>{{ item.sentTime|timeCustomCN }}</text>
</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" <input class="chat-input" type="text" v-model="inputTxt" confirm-type="发送" @confirm="send"
cursor-spacing="10" /> cursor-spacing="10" />
<button class="chat-push" size="mini" @click="send">发送</button> <button class="chat-push" :disabled="disabled" size="mini" @click="send">发送</button>
</view> </view>
</view> </view>
</template> </template>
@@ -85,8 +87,8 @@
RongIMLib.clearReadReceiptReceivedListener() RongIMLib.clearReadReceiptReceivedListener()
}, },
computed: { computed: {
showSendButton() { disabled() {
return this.inputTxt.length > 0 return this.inputTxt.length == 0
}, },
friend() { friend() {
return function(targetId) { return function(targetId) {
@@ -98,7 +100,13 @@
if (e.index == 0) { if (e.index == 0) {
uni.navigateTo({ uni.navigateTo({
url: '/pages/im/private/setting?targetId=' + this.targetId + url: '/pages/im/private/setting?targetId=' + this.targetId +
'&conversationType=' + this.conversationType '&conversationType=' + this.conversationType,
events: {
messageClear: () => {
this.getMessageList()
console.log('聊天消息被清空');
}
}
}) })
} }
}, },
@@ -151,15 +159,15 @@
this.inputTxt = '' this.inputTxt = ''
}) })
}, },
showFriend() { showFriend(targetId) {
// uni.navigateTo({ uni.navigateTo({
// url: '/pages/im/friends/info?targetId=' + this.targetId url: '/pages/im/friends/info?targetId=' + 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() {
@@ -310,6 +318,10 @@
font-size: $title-size-m; font-size: $title-size-m;
font-weight: bold; font-weight: bold;
&[disabled] {
background: $uni-bg-color-grey;
}
&::after { &::after {
display: none; display: none;
} }

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

@@ -1,22 +1,19 @@
<template> <template>
<view class="content"> <view class="content">
<!-- 聊天信息 --> <!-- 聊天信息 -->
<view class="set-user"> <view class="set-user" @click="showFriend">
<u-avatar <u-avatar :src="friend(targetId).portraitUrl" size="48"></u-avatar>
src="https://cdn.uviewui.com/uview/album/1.jpg" <view class="set-user-nickname">{{ friend(targetId).name }}</view>
size="48"
></u-avatar>
<view class="set-user-nickname">唐明明</view>
</view> </view>
<!-- 聊天设置 --> <!-- 聊天设置 -->
<view class="set-group"> <view class="set-group">
<view class="group-flex"> <view class="group-flex">
<label>消息免打扰</label> <label>消息免打扰</label>
<u-switch activeColor="#34CE98" size="22"></u-switch> <u-switch v-model="status" activeColor="#34CE98" size="22" @change="setStatus"></u-switch>
</view> </view>
<view class="group-flex"> <view class="group-flex">
<label>置顶会话</label> <label>消息置顶</label>
<u-switch v-model="isTop" activeColor="#34CE98" size="22"></u-switch> <u-switch v-model="isTop" activeColor="#34CE98" size="22" @change="setTop"></u-switch>
</view> </view>
</view> </view>
<view class="set-group"> <view class="set-group">
@@ -30,17 +27,30 @@
<script> <script>
import * as RongIMLib from '@rongcloud/imlib-uni' import * as RongIMLib from '@rongcloud/imlib-uni'
import {
getUserInfo
} from '@/apis/interfaces/im.js'
export default { export default {
data() { data() {
return { return {
eventChannel: null,
targetId: '', targetId: '',
conversationType: 1, conversationType: 1,
isTop: false, isTop: false,
status: 0 // 0 是免打扰，1是正常通知 status: false // 0 是免打扰，1是正常通知
}
},
computed: {
friend() {
return function(targetId) {
return this.$store.getters.userInfo(targetId)
}
} }
}, },
onLoad(e) { onLoad(e) {
this.eventChannel = this.$scope.eventChannel
this.targetId = e.targetId this.targetId = e.targetId
this.conversationType = e.conversationType this.conversationType = e.conversationType
@@ -53,33 +63,48 @@
RongIMLib.getConversationNotificationStatus(this.conversationType, this.targetId, ({ RongIMLib.getConversationNotificationStatus(this.conversationType, this.targetId, ({
status status
}) => { }) => {
this.status = status this.status = !Boolean(status)
}) })
}, },
methods: { methods: {
showFriend() {
uni.navigateTo({
url: '/pages/im/friends/info?targetId=' + this.targetId
})
},
setStatus() { setStatus() {
RongIMLib.setConversationNotificationStatus(this.conversationType, this.targetId, this.status, ({ RongIMLib.setConversationNotificationStatus(this.conversationType, this.targetId, this.status, ({
status status
}) => { }) => {
this.status = 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) => {
console.log(res);
RongIMLib.getConversation(this.conversationType, this.targetId, ({ RongIMLib.getConversation(this.conversationType, this.targetId, ({
conversation conversation
}) => { }) => {
console.log(conversation.isTop);
this.isTop = conversation.isTop this.isTop = conversation.isTop
}) })
}) })
}, },
// 清空聊天记录 // 清空聊天记录
cleanConversation() { cleanConversation() {
RongIMLib.deleteMessages(this.conversationType, this.targetId, ({code}) => { uni.showModal({
title: '清空聊天记录',
success: (res) => {
if (res.confirm) {
RongIMLib.deleteMessages(this.conversationType, this.targetId, ({
code
}) => {
if (code === 0) { if (code === 0) {
console.log('chenggong '); this.eventChannel.emit('messageClear')
uni.showToast({
title: '聊天记录已清空'
})
}
})
}
} }
}) })
} }
@@ -91,12 +116,14 @@
.content { .content {
min-height: 100vh; min-height: 100vh;
background: $window-color; background: $window-color;
// 用户信息 // 用户信息
.set-user { .set-user {
background: white; background: white;
padding: $padding; padding: $padding;
display: flex; display: flex;
align-items: center; align-items: center;
.set-user-nickname { .set-user-nickname {
padding-left: $padding; padding-left: $padding;
flex: 1; flex: 1;
@@ -104,10 +131,12 @@
font-size: $title-size + 6; font-size: $title-size + 6;
} }
} }
// 聊天设置 // 聊天设置
.set-group { .set-group {
margin: $margin 0; margin: $margin 0;
background: white; background: white;
.group-flex { .group-flex {
position: relative; position: relative;
display: flex; display: flex;
@@ -117,6 +146,7 @@
padding: 0 $padding; padding: 0 $padding;
font-size: $title-size; font-size: $title-size;
align-items: center; align-items: center;
&::after { &::after {
content: " "; content: " ";
position: absolute; position: absolute;
@@ -126,6 +156,7 @@
height: 1rpx; height: 1rpx;
background-color: $border-color; background-color: $border-color;
} }
&:last-child::after { &:last-child::after {
display: none; display: none;
} }

44
pages/topic/details.vue
View File

@@ -19,7 +19,8 @@
<text>{{ topicData.favorites }} 人点赞</text> <text>{{ topicData.favorites }} 人点赞</text>
</view> </view>
<view class="tool-btn" :class="{active : isFavorite}" @click="thumbClick(topicData.topic_id)"> <view class="tool-btn" :class="{active : isFavorite}" @click="thumbClick(topicData.topic_id)">
<u-icon name="thumb-up-fill" :color="isFavorite ? '#333': '#fff'" size="17" style="margin-right: 5rpx;"></u-icon> <u-icon name="thumb-up-fill" :color="isFavorite ? '#333': '#fff'" size="17"
style="margin-right: 5rpx;"></u-icon>
{{ isFavorite ? '已赞' : '点赞' }} {{ isFavorite ? '已赞' : '点赞' }}
</view> </view>
</view> </view>
@@ -44,7 +45,9 @@
相关商品 相关商品
</view> </view>
<view class="item" v-for="(item, index) in goodsArr" :key="index"> <view class="item" v-for="(item, index) in goodsArr" :key="index">
<image class="item-cover" src="http://api.zh.shangkelian.cn/storage/images/2022/01/06/fc143605e2a1557989e96652d990579f.png" mode="aspectFill"></image> <image class="item-cover"
src="http://api.zh.shangkelian.cn/storage/images/2022/01/06/fc143605e2a1557989e96652d990579f.png"
mode="aspectFill"></image>
<view class="item-title"> <view class="item-title">
<view class="nowrap item-name"> <view class="nowrap item-name">
{{ item.name }} {{ item.name }}
@@ -53,7 +56,8 @@
￥{{ item.price }} ￥{{ item.price }}
</view> </view>
</view> </view>
<view class="item-btn" @click="$Router.push({ name: 'StoreGoods', params: {id: item.goods_id}})"> <view class="item-btn"
@click="$Router.push({ name: 'StoreGoods', params: {id: item.goods_id}})">
查看商品 查看商品
</view> </view>
</view> </view>
@@ -64,7 +68,10 @@
</template> </template>
<script> <script>
import { topicDet, topicThumb } from '@/apis/interfaces/topic' import {
topicDet,
topicThumb
} from '@/apis/interfaces/topic'
import userAuth from '@/public/userAuth' import userAuth from '@/public/userAuth'
export default { export default {
data() { data() {
@@ -88,10 +95,10 @@
this.topicData = res this.topicData = res
this.goodsArr = res.goods this.goodsArr = res.goods
this.isFavorite = res.is_favorite this.isFavorite = res.is_favorite
this.topicContent = res.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"') this.topicContent = res.content.replace(/\<img/gi,
'<img style="max-width:100%;height:auto;display:block;"')
}) })
}, },
// 点赞 // 点赞
thumbClick(id) { thumbClick(id) {
if (this.$store.state.token === '') { if (this.$store.state.token === '') {
@@ -101,6 +108,8 @@
} }
topicThumb(id).then(res => { topicThumb(id).then(res => {
this.isFavorite = !this.isFavorite this.isFavorite = !this.isFavorite
this.topicData.favorites = res
}) })
} }
} }
@@ -116,6 +125,7 @@
position: relative; position: relative;
width: 100vw; width: 100vw;
padding-top: 90%; padding-top: 90%;
&::after { &::after {
position: absolute; position: absolute;
content: ''; content: '';
@@ -126,6 +136,7 @@
z-index: 2; z-index: 2;
background-color: rgba($color: #000000, $alpha: .35); background-color: rgba($color: #000000, $alpha: .35);
} }
.img { .img {
position: absolute; position: absolute;
left: 0; left: 0;
@@ -136,6 +147,7 @@
filter: blur(10rpx); filter: blur(10rpx);
overflow: hidden; overflow: hidden;
} }
.head { .head {
padding: $padding * 3 $padding + 30 0; padding: $padding * 3 $padding + 30 0;
color: white; color: white;
@@ -145,32 +157,39 @@
top: 0; top: 0;
width: 100%; width: 100%;
z-index: 9; z-index: 9;
.title { .title {
font-size: $title-size + 8; font-size: $title-size + 8;
margin-bottom: $margin - 10; margin-bottom: $margin - 10;
height: 100rpx; height: 100rpx;
font-weight: 600; font-weight: 600;
} }
.tips { .tips {
margin-bottom: $margin + 20; margin-bottom: $margin + 20;
} }
.text { .text {
margin: $margin 0 $margin + 10; margin: $margin 0 $margin + 10;
line-height: 48rpx; line-height: 48rpx;
height: 100rpx; height: 100rpx;
font-size: $title-size-lg; font-size: $title-size-lg;
} }
.tool { .tool {
width: 100%; width: 100%;
font-size: $title-size-m; font-size: $title-size-m;
display: flex; display: flex;
line-height: 48rpx; line-height: 48rpx;
.tool-see { .tool-see {
flex: 1; flex: 1;
text { text {
padding-right: $padding; padding-right: $padding;
} }
} }
.tool-btn { .tool-btn {
border: 2rpx solid white; border: 2rpx solid white;
border-radius: $radius * 2; border-radius: $radius * 2;
@@ -178,6 +197,7 @@
padding: 0 $padding - 5; padding: 0 $padding - 5;
line-height: 48rpx; line-height: 48rpx;
display: flex; display: flex;
&.active { &.active {
background-color: white; background-color: white;
color: $text-color; color: $text-color;
@@ -196,6 +216,7 @@
border-radius: $radius * 3 $radius * 3 0 0; border-radius: $radius * 3 $radius * 3 0 0;
padding: $padding; padding: $padding;
box-sizing: border-box; box-sizing: border-box;
.brief-text { .brief-text {
margin: $margin 0; margin: $margin 0;
line-height: 48rpx; line-height: 48rpx;
@@ -204,14 +225,17 @@
padding: 0 $padding - 20; padding: 0 $padding - 20;
box-sizing: border-box; box-sizing: border-box;
} }
.source { .source {
position: relative; position: relative;
.source-logo { .source-logo {
width: 70rpx; width: 70rpx;
height: 70rpx; height: 70rpx;
border-radius: 50%; border-radius: 50%;
margin-top: $margin - 24; margin-top: $margin - 24;
} }
.source-title { .source-title {
position: absolute; position: absolute;
left: 0; left: 0;
@@ -220,10 +244,12 @@
padding-left: 90rpx; padding-left: 90rpx;
box-sizing: border-box; box-sizing: border-box;
font-size: $title-size-lg; font-size: $title-size-lg;
.source-name { .source-name {
font-weight: 600; font-weight: 600;
margin-bottom: $margin - 25; margin-bottom: $margin - 25;
} }
.source-text { .source-text {
line-height: 48rpx; line-height: 48rpx;
font-size: $title-size-m; font-size: $title-size-m;
@@ -235,10 +261,12 @@
.goods { .goods {
margin-top: $margin; margin-top: $margin;
.title { .title {
font-weight: bold; font-weight: bold;
font-size: $title-size; font-size: $title-size;
} }
.item { .item {
position: relative; position: relative;
margin-top: $margin - 10; margin-top: $margin - 10;
@@ -246,11 +274,13 @@
border-radius: $radius; border-radius: $radius;
padding: $padding; padding: $padding;
box-sizing: border-box; box-sizing: border-box;
.item-cover { .item-cover {
width: 120rpx; width: 120rpx;
height: 90rpx; height: 90rpx;
border-radius: $radius-m; border-radius: $radius-m;
} }
.item-title { .item-title {
position: absolute; position: absolute;
left: 0; left: 0;
@@ -261,11 +291,13 @@
font-size: $title-size-lg; font-size: $title-size-lg;
margin-bottom: 10px; margin-bottom: 10px;
color: $text-color; color: $text-color;
.item-price { .item-price {
color: $text-price; color: $text-price;
margin-top: $margin - 20; margin-top: $margin - 20;
} }
} }
.item-btn { .item-btn {
position: absolute; position: absolute;
right: $padding; right: $padding;

21
store/modules/im.js
View File

@@ -4,12 +4,17 @@ export default {
state: { state: {
newMsg: {}, newMsg: {},
friends: {}, friends: {},
sender: {} sender: {},
// IM连接状态，0是正常
connection: 0
}, },
getters: { getters: {
newMessage(state) { newMessage(state) {
return state.newMsg return state.newMsg
}, },
connection(state) {
return state.connection
},
friends(state) { friends(state) {
return state.friends return state.friends
}, },
@@ -17,8 +22,8 @@ export default {
if (state.friends[targetId]) { if (state.friends[targetId]) {
return state.friends[targetId] return state.friends[targetId]
} else { } else {
console.log('没找到,， 死循环了，得处理 todo', targetId); console.log('没找到,死循环了，得处理 todo', targetId);
im.syncUserInfo(targetId) // im.syncUserInfo(targetId)
return { return {
name: '', name: '',
address: '', address: '',
@@ -43,9 +48,15 @@ export default {
}, },
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({ newMessage({
commit commit
}, msg) { }, msg) {
@@ -63,7 +74,6 @@ export default {
const model = uni.model.friendModel const model = uni.model.friendModel
model.find('userId=' + userInfo.userId, (err, user) => { model.find('userId=' + userInfo.userId, (err, user) => {
if (!err && user.length == 0) { if (!err && user.length == 0) {
console.log('哪里更新的 ', 1);
saveAvatar(userInfo, (savedFilePath) => { saveAvatar(userInfo, (savedFilePath) => {
model.insert({ model.insert({
userId: userInfo.userId, userId: userInfo.userId,
@@ -76,7 +86,6 @@ export default {
commit('updateFriends', userInfo) commit('updateFriends', userInfo)
}) })
} else if (!err && user[0].hash != userInfo.hash) { } else if (!err && user[0].hash != userInfo.hash) {
console.log('哪里更新的 ', 2);
saveAvatar(userInfo, (savedFilePath) => { saveAvatar(userInfo, (savedFilePath) => {
model.update('userId=' + userInfo.userId, { model.update('userId=' + userInfo.userId, {
name: userInfo.name, name: userInfo.name,
@@ -98,7 +107,7 @@ export default {
commit('updateFriends', userInfo) commit('updateFriends', userInfo)
}) })
} else { } else {
console.log('不需要有动作', user[0]); console.log('不用操作', user[0]);
} }
}) })
} }

2
uni.scss
View File

@@ -44,7 +44,7 @@ $uni-border-color:#c8c7cc;
/* 文字尺寸 */ /* 文字尺寸 */
$uni-font-size-sm:12px; $uni-font-size-sm:12px;
$uni-font-size-base:14px; $uni-font-size-base:14px;
$uni-font-size-lg:16; $uni-font-size-lg:16px;
/* 图片尺寸 */ /* 图片尺寸 */
$uni-img-size-sm:20px; $uni-img-size-sm:20px;

5
utils/im/index.js
View File

@@ -36,9 +36,11 @@ const setNotifyBadge = (count) => {
* @param {string} token token * @param {string} token token
* @param {object} userInfo {userId: string, name: string, portraitUrl: string} * @param {object} userInfo {userId: string, name: string, portraitUrl: string}
*/ */
const connect = (token, userInfo) => { const connect = (token, userInfo, callback) => {
RongIMLib.connect(token, res => { RongIMLib.connect(token, res => {
console.log('连接结果', res); console.log('连接结果', res);
callback(res)
}) })
store.dispatch('setSenderInfo', userInfo) store.dispatch('setSenderInfo', userInfo)
@@ -62,6 +64,7 @@ const addListeners = () => {
// 添加连接状态监听函数 // 添加连接状态监听函数
RongIMLib.addConnectionStatusListener((res) => { RongIMLib.addConnectionStatusListener((res) => {
console.log('连接状态监', res.data.status); console.log('连接状态监', res.data.status);
store.dispatch('updateConnectionStatus', res.data.status)
}) })
// 添加消息监听函数 // 添加消息监听函数
RongIMLib.addReceiveMessageListener((res) => { RongIMLib.addReceiveMessageListener((res) => {