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": [{
"app-plus" :
{
"launchtype" : "remote"
"launchtype" : "local"
},
"default" :
{

38
apis/interfaces/im.js
View File

@@ -1,4 +1,3 @@
/**
* Web唐明明
* 匆匆数载恍如梦，岁月迢迢华发增。
@@ -6,7 +5,9 @@
* moduleName: 聊聊
*/
import { request } from '../index'
import {
request
} from '../index'
// 获取好友列表
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 {
getImToken,
getFriends,
getUserInfo,
getPedings
getPedings,
resolveFriend,
rejectFriend,
searchFriend,
pedingFriend
}

4
manifest.json
View File

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

8
pages.json
View File

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

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

@@ -1,66 +1,49 @@
<template>
<view>
<view class="list">
<view class="list__item" @click="toPending">
<u-avatar size="35" icon="plus-people-fill" fontSize="26" bg-color="#f0ad4e"></u-avatar>
<text class="list__item__user-name">新的朋友</text>
</view>
<u-line></u-line>
<view class="list__item" @click="showToast">
<u-avatar size="35" icon="account-fill" fontSize="26" bg-color="#4cd964"></u-avatar>
<text class="list__item__user-name">我的群聊</text>
</view>
<u-line></u-line>
</view>
<block v-if="friendsArr.length > 0">
<u-index-list activeColor="#34CE98">
<template v-for="(item, index) in friendsArr">
<!-- #ifdef APP-NVUE -->
<u-index-anchor bgColor="#F3F6FB" color="#666" :text="indexList[index]" :key="index"></u-index-anchor>
<!-- #endif -->
<u-index-item :key="index">
<!-- #ifndef APP-NVUE -->
<u-index-anchor :text="indexList[index]" bgColor="#F3F6FB" color="#666"></u-index-anchor>
<!-- #endif -->
<view class="list" v-for="(item1, index1) in item" :key="index1">
<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>
<u-list height="auto">
<u-list-item>
<u-cell title="新的朋友" @click="toPending">
<u-avatar slot="icon" size="35" font-size="24" icon="plus-people-fill" shape="square"
bg-color="#f0ad4e"></u-avatar>
</u-cell>
</u-list-item>
<u-list-item>
<u-cell title="我的群聊" @click="showToast">
<u-avatar slot="icon" size="35" font-size="24" icon="account-fill" shape="square"
bg-color="#4cd964"></u-avatar>
</u-cell>
</u-list-item>
</u-list>
<block v-if="friends.length > 0">
<u-list height="auto">
<u-list-item v-for="(item, index) in friends" :key="index">
<u-cell :title="item.name + item.userId" @click="toInfo(item.userId)">
<u-avatar slot="icon" shape="square" size="35" :src="item.portraitUrl"></u-avatar>
</u-cell>
</u-list-item>
</u-list>
</block>
<block v-else>
<u-empty
class="pages-null"
mode="data"
icon="http://cdn.uviewui.com/uview/empty/data.png"
text="暂未添加好友"
>
<u-empty class="pages-null" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无好友">
</u-empty>
</block>
</view>
</template>
<script>
import { getFriends } from '@/apis/interfaces/im'
import {
getFriends
} from '@/apis/interfaces/im'
export default {
data() {
return {
friendsArr: []
friends: []
}
},
onShow() {
getFriends().then(res => {
this.friendsArr = res
console.log(res)
this.friends = res
})
},
computed: {
@@ -83,7 +66,7 @@
// 用户资料
toInfo(targetId) {
uni.navigateTo({
url: '/pages/im/friends/info?targeId=' + targetId
url: '/pages/im/friends/info?targetId=' + targetId
})
}
},
@@ -94,30 +77,6 @@
</script>
<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 {
height: 70vh;

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

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

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

@@ -1,33 +1,111 @@
<template>
<view>
<!-- 搜索 -->
<u-sticky>
<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>
</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">
<view class="lists-item" v-for="(item, index) in 10" :key="index">
<image class="lists-item-cover" src="" mode="aspectFill"></image>
<view class="">好友</view>
<view class="">
<text>通过</text>
<text>拒绝</text>
</view>
</view>
</view>
<!-- 空列表 -->
<view class="">
空列表
</view>
<u-divider text="好友申请"></u-divider>
<u-list height="auto">
<u-swipe-action>
<u-list-item v-for="(item, index) in pedings" :key="index">
<u-swipe-action-item autoClose :options="options" @click="action($event, item)">
<u-cell :title="item.name">
<u-avatar slot="icon" shape="square" size="35" :src="item.portraitUrl"></u-avatar>
</u-cell>
</u-swipe-action-item>
</u-list-item>
</u-swipe-action>
</u-list>
</view>
</template>
<script>
import {
getPedings,
resolveFriend,
rejectFriend,
searchFriend,
pedingFriend
} from '@/apis/interfaces/im.js'
export default {
data() {
return {
searchValue: "",
listsArr: []
searchResult: [],
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>
.header-search {
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;
}
}
}
</style>

228
pages/im/index.vue
View File

@@ -24,28 +24,39 @@
<block v-if="conversations.length < 1">
<view class="vertical null-list">
<u-empty icon="http://cdn.uviewui.com/uview/empty/message.png" textColor="#999" text="暂无好友消息">
<template>
<!-- <template>
<view class="null-list-btn">开启聊天</view>
</template>
</template> -->
</u-empty>
</view>
</block>
<block v-else>
<view v-for="(item, index) in conversations" :key="index" class="mssage-box" @click="toDetail(item)">
<view class="mssage-action">
<block v-if="!friend(item.targetId).portraitUrl">
<u-avatar clsss="mssage-action-cover" size="44" :text="friend(item.targetId).name ? friend(item.targetId).name.substring(0,1) : '未'" font-size="14" randomBgColor></u-avatar>
</block>
<block v-else>
<u-avatar clsss="mssage-action-cover" :src="friend(item.targetId).portraitUrl" size="44">
<u-alert type="warning" v-if="connection != 0" description="网络似乎断开了" :show-icon="true"></u-alert>
<view v-for="(item, index) in conversations" :key="index" :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"
: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>
</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 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>
@@ -75,7 +86,16 @@
return {
isShown: true, // 当前页面显示状态
conversations: [], // 会话列表
isImToken: '', // 是否已鉴权
connection: 0,
/* 窗口尺寸 */
winSize: {},
/* 显示操作弹窗 */
showPop: false,
/* 弹窗按钮列表 */
popButton: ['置顶聊天', '删除该聊天'],
/* 弹窗定位样式 */
popStyle: "",
pickedItem: {}
}
},
computed: {
@@ -87,16 +107,14 @@
},
onShow() {
if (this.$store.state.token !== '') {
if (this.isImToken === '') {
getImToken().then(res => {
im.connect(res.token, res.userInfo)
this.isImToken = res.token
console.log("IMTOKEN", res);
im.connect(res.token, res.userInfo, () => {
this.getConversationList()
})
})
}
this.getConversationList()
this.isShown = true
}
},
onHide() {
this.isShown = false
@@ -121,9 +139,54 @@
if (this.isShown) {
this.getConversationList()
}
},
'$store.getters.connection': function(n, o) {
this.connection = n
}
},
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() {
if (this.$store.state.token === '') {
@@ -133,13 +196,11 @@
}
return true
},
getFriend(targetId) {
return this.$store.getters.userInfo(targetId)
},
getConversationList() {
const count = 1000
const timestamp = 0 // 会话的时间戳（获取这个时间戳之前的会话列表，0 表示从最新开始获取）会话类型
const timestamp = 0
RongIMLib.getConversationList(undefined, count, timestamp, (res) => {
console.log('获取列表', res);
if (res.code === 0 && res.conversations.length > 0) {
this.conversations = res.conversations
}
@@ -147,6 +208,7 @@
},
// 进入聊天的详情页面，清理未读消息数量
toDetail(item) {
this.hidePop()
uni.navigateTo({
url: '/pages/im/private/index?targetId=' + item.targetId + '&conversationType=' + item
.conversationType
@@ -220,13 +282,53 @@
}
}
.mssage-box {
background: white;
.mssage-action {
.message {
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 {
position: absolute;
left: $padding + 108;
@@ -236,46 +338,42 @@
height: 1rpx;
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;
color: $text-gray;
@extend .nowrap;
}
}
/* 遮罩 */
.shade {
.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 {
.mssage-action::after {
display: none;
&>view {
padding: 0 20rpx;
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>
<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">
<text>{{ item.sentTime|timeCustomCN }}</text>
</view>
<view class="chat-item" v-for="(item,index) in messages" :key="index">
<view class="chat-item-article" :class="item.messageDirection == 1 ? 'right' : 'left'">
<view class="chat-msg">
<view class="chat-msg-text">{{ item.content.content }}</view>
@@ -14,18 +12,22 @@
<view class="chat-status" :class="{'hide': item.sentStatus == 50}"
v-if="item.messageDirection == 1">{{ item.sentStatus == 50 ? '已读': '未读'}}</view>
<view class="chat-avatar">
<!-- <u-avatar :src="userInfo.portraitUrl" @click="showFriend"></u-avatar> -->
<u-avatar v-if="item.messageDirection == 2" :src="friend(targetId).portraitUrl"></u-avatar>
<u-avatar v-else :src="$store.getters.sender.portraitUrl"/>
<u-avatar v-if="item.messageDirection == 2" bg-color="#ffffff" :src="userInfo.portraitUrl"
@click="showFriend(targetId)"></u-avatar>
<u-avatar v-else @click="showMine" bg-color="#ffffff"
:src="$store.getters.sender.portraitUrl" />
</view>
</view>
<view class="chat-item-time" :id="'chatId_'+index">
<text>{{ item.sentTime|timeCustomCN }}</text>
</view>
</view>
</scroll-view>
<view class="chat-footer">
<input class="chat-input" type="text" v-model="inputTxt" confirm-type="发送" @confirm="send"
cursor-spacing="10" />
<button class="chat-push" size="mini" @click="send">发送</button>
<button class="chat-push" :disabled="disabled" size="mini" @click="send">发送</button>
</view>
</view>
</template>
@@ -85,8 +87,8 @@
RongIMLib.clearReadReceiptReceivedListener()
},
computed: {
showSendButton() {
return this.inputTxt.length > 0
disabled() {
return this.inputTxt.length == 0
},
friend() {
return function(targetId) {
@@ -98,7 +100,13 @@
if (e.index == 0) {
uni.navigateTo({
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 = ''
})
},
showFriend() {
// uni.navigateTo({
// url: '/pages/im/friends/info?targetId=' + this.targetId
// })
showFriend(targetId) {
uni.navigateTo({
url: '/pages/im/friends/info?targetId=' + targetId
})
},
showMine() {
// uni.navigateTo({
// url: '/pages/im/friends/mine'
// })
uni.navigateTo({
url: '/pages/im/friends/mine'
})
},
scrollBottom() {
this.$nextTick(function() {
@@ -310,6 +318,10 @@
font-size: $title-size-m;
font-weight: bold;
&[disabled] {
background: $uni-bg-color-grey;
}
&::after {
display: none;
}

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

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

44
pages/topic/details.vue
View File

@@ -19,7 +19,8 @@
<text>{{ topicData.favorites }} 人点赞</text>
</view>
<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 ? '已赞' : '点赞' }}
</view>
</view>
@@ -44,7 +45,9 @@
相关商品
</view>
<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="nowrap item-name">
{{ item.name }}
@@ -53,7 +56,8 @@
￥{{ item.price }}
</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>
@@ -64,7 +68,10 @@
</template>
<script>
import { topicDet, topicThumb } from '@/apis/interfaces/topic'
import {
topicDet,
topicThumb
} from '@/apis/interfaces/topic'
import userAuth from '@/public/userAuth'
export default {
data() {
@@ -88,10 +95,10 @@
this.topicData = res
this.goodsArr = res.goods
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) {
if (this.$store.state.token === '') {
@@ -101,6 +108,8 @@
}
topicThumb(id).then(res => {
this.isFavorite = !this.isFavorite
this.topicData.favorites = res
})
}
}
@@ -116,6 +125,7 @@
position: relative;
width: 100vw;
padding-top: 90%;
&::after {
position: absolute;
content: '';
@@ -126,6 +136,7 @@
z-index: 2;
background-color: rgba($color: #000000, $alpha: .35);
}
.img {
position: absolute;
left: 0;
@@ -136,6 +147,7 @@
filter: blur(10rpx);
overflow: hidden;
}
.head {
padding: $padding * 3 $padding + 30 0;
color: white;
@@ -145,32 +157,39 @@
top: 0;
width: 100%;
z-index: 9;
.title {
font-size: $title-size + 8;
margin-bottom: $margin - 10;
height: 100rpx;
font-weight: 600;
}
.tips {
margin-bottom: $margin + 20;
}
.text {
margin: $margin 0 $margin + 10;
line-height: 48rpx;
height: 100rpx;
font-size: $title-size-lg;
}
.tool {
width: 100%;
font-size: $title-size-m;
display: flex;
line-height: 48rpx;
.tool-see {
flex: 1;
text {
padding-right: $padding;
}
}
.tool-btn {
border: 2rpx solid white;
border-radius: $radius * 2;
@@ -178,6 +197,7 @@
padding: 0 $padding - 5;
line-height: 48rpx;
display: flex;
&.active {
background-color: white;
color: $text-color;
@@ -196,6 +216,7 @@
border-radius: $radius * 3 $radius * 3 0 0;
padding: $padding;
box-sizing: border-box;
.brief-text {
margin: $margin 0;
line-height: 48rpx;
@@ -204,14 +225,17 @@
padding: 0 $padding - 20;
box-sizing: border-box;
}
.source {
position: relative;
.source-logo {
width: 70rpx;
height: 70rpx;
border-radius: 50%;
margin-top: $margin - 24;
}
.source-title {
position: absolute;
left: 0;
@@ -220,10 +244,12 @@
padding-left: 90rpx;
box-sizing: border-box;
font-size: $title-size-lg;
.source-name {
font-weight: 600;
margin-bottom: $margin - 25;
}
.source-text {
line-height: 48rpx;
font-size: $title-size-m;
@@ -235,10 +261,12 @@
.goods {
margin-top: $margin;
.title {
font-weight: bold;
font-size: $title-size;
}
.item {
position: relative;
margin-top: $margin - 10;
@@ -246,11 +274,13 @@
border-radius: $radius;
padding: $padding;
box-sizing: border-box;
.item-cover {
width: 120rpx;
height: 90rpx;
border-radius: $radius-m;
}
.item-title {
position: absolute;
left: 0;
@@ -261,11 +291,13 @@
font-size: $title-size-lg;
margin-bottom: 10px;
color: $text-color;
.item-price {
color: $text-price;
margin-top: $margin - 20;
}
}
.item-btn {
position: absolute;
right: $padding;

21
store/modules/im.js
View File

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

5
utils/im/index.js
View File

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