You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
340 lines
7.7 KiB
340 lines
7.7 KiB
<template>
|
|
<view class="chat_index_page">
|
|
<!-- 页面内容 -->
|
|
<view class="page_content padding-bottom-safe " v-if="isLogin">
|
|
|
|
<!-- 好友聊天列表 -->
|
|
<view class="position-relative" v-for="(item,index) in roomList" :key="index" @click="click(item.room_id)">
|
|
|
|
<!-- 聊天内容带删除 -->
|
|
<view class="position-relative flex align-center bg-ff" :style="item.style" @touchstart="touchStart"
|
|
@touchmove="touchMove" @touchend="touchEnd" :data-index="index">
|
|
|
|
<!-- 聊天内容 -->
|
|
<view class="width-100p flex align-center">
|
|
<!-- 好友头像 -->
|
|
<view class="position-relative padding-left-30">
|
|
<image class="jc-image-80 radius-10" :src="item.to_user_head_img" />
|
|
<view v-if="item.unread_number > 0" class="unread-red-dot"></view>
|
|
</view>
|
|
|
|
<!-- 聊天内容 -->
|
|
<view class="padding-tb-25 flex-one padding-lr-30 flex flex-direction align-start">
|
|
<view class="width-100p line-height-40 flex align-center justify-between">
|
|
<view class="text-cut-one text-30">{{item.to_user_nick_name}}</view>
|
|
<view class="text-22 text-98">{{item.show_time}}</view>
|
|
</view>
|
|
<view class="margin-top-10 line-height-30 text-cut-one text-24 text-98">
|
|
{{item.show_message_text}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 删除按钮 -->
|
|
<view class="move bg-main text-center text-26 text-ff">
|
|
<view @tap.stop.prevent="remove(index,item.room_id)">删除</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- border线 -->
|
|
<!-- <view :class="{ 'border-line': index < roomList.length - 1 }"></view> -->
|
|
<view class="border-line"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="emptyPage flex flex-direction align-center" v-else>
|
|
<image src="/static/home/emptyChat.png" class="chatImg"></image>
|
|
<view class="text-28 text-33 line-40 margin-top-25">
|
|
登录后可查看消息
|
|
</view>
|
|
<view class="margin-top-60 text-center text-28 text-ff loginBtn" @click="go('/pages/home/login')">
|
|
去登录
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import chat from './api/chat.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 聊天联系人列表
|
|
roomList: [],
|
|
// 触摸开始时 触摸点的X轴坐标
|
|
touchStartX: 0,
|
|
// 触摸结束时 触摸点的X轴坐标
|
|
touchEndX: 0,
|
|
isLogin: false
|
|
}
|
|
},
|
|
|
|
onReady() {
|
|
|
|
},
|
|
|
|
onShow() {
|
|
this.isLogin = this.cn.isLogin()
|
|
if (this.cn.isLogin()) {
|
|
this.getBottomTabRed()
|
|
// 修改chat属性
|
|
chat.curPage = 1
|
|
chat.that = this
|
|
|
|
console.log('列表页 websocket是否打开', this.websocket.isSocketOpen)
|
|
|
|
// 打开长连接
|
|
if (this.websocket.isSocketOpen) {
|
|
// 获取聊天列表（不分页）
|
|
this.listChatRoom()
|
|
// 还没有打开长连接
|
|
} else {
|
|
this.websocket.init().then((res) => {
|
|
// 获取聊天列表（不分页）
|
|
this.listChatRoom()
|
|
})
|
|
|
|
// 监听WebSocket接受到服务器的消息事件
|
|
chat.onMessage()
|
|
}
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
onUnload() {
|
|
// 重置chat属性
|
|
chat.curPage = 3
|
|
chat.that = {}
|
|
},
|
|
|
|
methods: {
|
|
// 获取底部导航栏红点是否显示
|
|
getBottomTabRed(){
|
|
this.rq.getData('chat/api/FriendsChat/getNoReadNumber').then((res)=>{
|
|
if(res.code == 0){
|
|
if(res.data.number > 0){
|
|
uni.showTabBarRedDot({
|
|
index: 1
|
|
})
|
|
}else{
|
|
uni.removeTabBarBadge({ index: 1 })
|
|
}
|
|
}
|
|
})
|
|
},
|
|
/**
|
|
* 点击进入详情
|
|
* @param {int} roomId 房间ID
|
|
* @date 2022-09-19
|
|
*/
|
|
click(roomId) {
|
|
// 复位其他所有数据格式
|
|
this.resetAll()
|
|
|
|
// 跳转页面
|
|
uni.navigateTo({
|
|
url: '/pages/chat/message?room_id=' + roomId
|
|
})
|
|
},
|
|
|
|
/**
|
|
* touch触摸开始
|
|
* @param {Object} e
|
|
* @date 2022-09-19
|
|
*/
|
|
touchStart(e) {
|
|
this.touchStartX = e.touches[0].pageX
|
|
this.touchEndX = e.touches[0].pageX
|
|
},
|
|
|
|
/**
|
|
* touch触摸移动
|
|
* @param {Object} e
|
|
* @date 2022-09-19
|
|
*/
|
|
touchMove(e) {
|
|
this.touchEndX = e.touches[0].pageX
|
|
|
|
// 触摸的第index个数据
|
|
let index = e.currentTarget.dataset.index
|
|
|
|
// 移动距离
|
|
let disX = this.touchStartX - this.touchEndX
|
|
|
|
// 左滑
|
|
if (disX > 5) {
|
|
this.resetAll()
|
|
let transX = this.cn.px2rpx(disX) < 100 ? this.cn.px2rpx(disX) : 100
|
|
// 本条数据样式变化
|
|
this.roomList[index].style = 'left: -' + transX + 'rpx;'
|
|
// 右滑
|
|
} else {
|
|
// 是否在左滑完成状态
|
|
if (this.roomList[index].is_moving == 0) {
|
|
return false
|
|
}
|
|
|
|
let transX = this.cn.px2rpx(-disX) < 100 ? this.cn.px2rpx(-disX) - 100 : 0
|
|
// 本条数据样式变化
|
|
this.roomList[index].style = 'left: ' + transX + 'rpx;'
|
|
}
|
|
},
|
|
|
|
/**
|
|
* touch触摸结束
|
|
* @param {Object} e
|
|
* @date 2022-09-19
|
|
*/
|
|
touchEnd(e) {
|
|
// 触摸的第index个数据
|
|
let index = e.currentTarget.dataset.index
|
|
|
|
// 移动距离
|
|
let disX = this.touchStartX - this.touchEndX
|
|
|
|
// 左滑结束
|
|
if (disX > 0) {
|
|
// 左滑超过元素的一半
|
|
if (disX > 50) {
|
|
this.roomList[index].is_moving = 1
|
|
|
|
// 本条数据样式变化
|
|
this.roomList[index].style = 'left: -100rpx;'
|
|
} else {
|
|
// 复位其他所有数据格式
|
|
this.resetAll()
|
|
}
|
|
// 右滑结束
|
|
} else if (disX < 0) {
|
|
// 复位其他所有数据格式
|
|
this.resetAll()
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 复位所有样式
|
|
* @date 2022-09-18
|
|
*/
|
|
resetAll() {
|
|
let roomList = this.roomList
|
|
roomList.forEach((e, index) => {
|
|
// 初始化样式为空
|
|
if (e.style) {
|
|
e.style = ''
|
|
e.is_moving = 0
|
|
}
|
|
})
|
|
this.roomList = roomList
|
|
},
|
|
|
|
/**
|
|
* 删除聊天记录
|
|
* @param {int} index 第index条数据
|
|
* @param {int} roomId 房间ID
|
|
* @date 2022-09-19
|
|
*/
|
|
remove(index, roomId) {
|
|
this.cn.confirm('是否确定删除?').then(res => {
|
|
// 确定按钮
|
|
if (res.confirm) {
|
|
this.rq.getData('chat/api/FriendsChat/deleteChatRoom', {
|
|
room_id: roomId
|
|
}).then(res => {
|
|
if (res.code == 0) {
|
|
let roomList = this.roomList
|
|
roomList.forEach((e, index) => {
|
|
// 移除数据
|
|
if (e.room_id == roomId) {
|
|
roomList.splice(index, 1)
|
|
}
|
|
})
|
|
this.roomList = roomList
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
//************************封装方法*******************************
|
|
/**
|
|
* 获取和好友的聊天列表
|
|
*/
|
|
listChatRoom() {
|
|
// 获取聊天列表（不分页）
|
|
chat.listChatRoom().then(res => {
|
|
let roomList = res.data.room_list
|
|
roomList.forEach((e, index) => {
|
|
// 初始化样式为空
|
|
if (!e.hasOwnProperty("style")) {
|
|
e.style = ''
|
|
// 0--没有在移动 1--在移动
|
|
e.is_moving = 0
|
|
}
|
|
})
|
|
this.roomList = res.data.room_list
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.page_content{
|
|
width: 100vw;
|
|
background: #fff;
|
|
min-height: 100vh;
|
|
}
|
|
/* 未读红点 */
|
|
.unread-red-dot {
|
|
position: absolute;
|
|
top: -10rpx;
|
|
right: -10rpx;
|
|
width: 18rpx;
|
|
height: 18rpx;
|
|
border-radius: 50%;
|
|
background-color: var(--main);
|
|
}
|
|
|
|
/* 分割线 */
|
|
.border-line {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: calc(100vw - 30rpx - 80rpx - 10rpx);
|
|
height: 2rpx;
|
|
background-color: #ededed;
|
|
}
|
|
|
|
/* 删除按钮 */
|
|
.move {
|
|
position: absolute;
|
|
top: 0;
|
|
right: -100rpx;
|
|
width: 100rpx;
|
|
height: 130rpx;
|
|
line-height: 130rpx;
|
|
}
|
|
|
|
.emptyPage{
|
|
width: 100vw;
|
|
background: #fff;
|
|
height: 100vh;
|
|
padding-top: 85rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
.chatImg{
|
|
width: 182rpx;
|
|
height: 150rpx;
|
|
display: block;
|
|
}
|
|
.loginBtn{
|
|
width: 200rpx;
|
|
height: 72rpx;
|
|
background: #2F97FF;
|
|
border-radius: 40rpx;
|
|
line-height: 72rpx;
|
|
}
|
|
</style>
|