498 lines
14 KiB
Plaintext
498 lines
14 KiB
Plaintext
<style lang="less" scoped>
|
|
@import url(../../styles/theme.less);
|
|
page {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.ui-top-menu-list{
|
|
padding: 0 20rpx;
|
|
margin: 30rpx 0 20rpx 0;
|
|
|
|
.ui-top-menu-item{
|
|
width: 25%;
|
|
|
|
.ui-top-menu-icon{
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
|
|
.ui-top-menu-count{
|
|
position: absolute;
|
|
top: 12rpx;
|
|
right: 2rpx;
|
|
margin: auto;
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
line-height: 30rpx;
|
|
border-radius: 50%;
|
|
font-size: 22rpx;
|
|
color: #ffffff;
|
|
background: #F1013D;
|
|
border: 4rpx solid #ffffff;
|
|
}
|
|
}
|
|
|
|
.ui-top-menu-title{
|
|
margin-top: -20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ui-container{
|
|
padding-bottom: 60rpx;
|
|
.ui-no-data-box {
|
|
text-align: center;
|
|
.ui-no-data-icon {
|
|
width: 440rpx;
|
|
height: 360rpx;
|
|
margin: 160rpx auto -10rpx auto;
|
|
}
|
|
}
|
|
|
|
.ui-touch-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
padding: 24rpx 0 24rpx 30rpx;
|
|
}
|
|
|
|
.ui-content {
|
|
width: 100%;
|
|
margin-right: 0;
|
|
-webkit-transition: all 0.4s;
|
|
transition: all 0.4s;
|
|
-webkit-transform: translateX(90px);
|
|
transform: translateX(90px);
|
|
margin-left: -90px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
.ui-messageBox {
|
|
margin-top: 2rpx;
|
|
margin-left: 16rpx;
|
|
|
|
.ui-is-top{
|
|
margin-left: 16rpx;
|
|
padding-left: 8rpx;
|
|
width: 76rpx;
|
|
height: 32rpx;
|
|
background: linear-gradient(90deg, #FFD18D 0%, #FFA564 100%);
|
|
border-radius: 8rpx;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.ui-name {
|
|
width: 400rpx;
|
|
}
|
|
|
|
.ui-message {
|
|
width: 524rpx;
|
|
}
|
|
}
|
|
|
|
.ui-unreadBox {
|
|
position: absolute;
|
|
right: 30rpx;
|
|
top: 0;
|
|
overflow: hidden;
|
|
|
|
.ui-lastTime {
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.ui-no-disturbing {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-top: 12rpx;
|
|
}
|
|
|
|
.ui-unreadNum, .ui-unreadNum_1 {
|
|
float: right;
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 50%;
|
|
font-size: 20rpx;
|
|
background: #f1013D;
|
|
color: #fff;
|
|
margin-top: 12rpx;
|
|
}
|
|
|
|
.ui-unreadNum_1 {
|
|
width: 44rpx;
|
|
border-radius: 14rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ui-del-box {
|
|
background: #f1013D;
|
|
width: 90px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
-webkit-transform: translateX(90px);
|
|
transform: translateX(90px);
|
|
-webkit-transition: all 0.4s;
|
|
transition: all 0.4s;
|
|
}
|
|
|
|
.touch-move-active .ui-content,
|
|
.touch-move-active .ui-del-box {
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
</style>
|
|
<template>
|
|
<view class="ui-news">
|
|
<cuCustom @tap="jumpPath({path: '/pages/news/newsSearch'})"></cuCustom>
|
|
<view class="ui-top-menu-list f-fbc">
|
|
<view class="text-center ui-top-menu-item ui-relative" v-for="(item,index) in menuList" :key="index" @tap="jumpPath(item)">
|
|
<image class="ui-top-menu-icon ui-relative" :src="item.icon" mode="aspectFit">
|
|
<view class="ui-top-menu-count" v-if="item.count">{{item.count}}</view>
|
|
</image>
|
|
<view class="color666 font_24 ui-top-menu-title">{{item.title}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="ui-container">
|
|
<view class="ui-no-data-box" v-if="loading && list.length == 0">
|
|
<image class="ui-no-data-icon" src="https://image.fulllinkai.com/202410/08/d1bf2764cef610125120a0465f108e71.png" mode="widthFix"></image>
|
|
<view class="font_32 color999">暂无聊天消息</view>
|
|
</view>
|
|
<block v-else>
|
|
<view class="ui-touch-item" :class="{'touch-move-active' : item.isTouchMove}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove" v-for="(item,index) in list" :key="index" @tap="jumpChatPath(item, 'chat')">
|
|
<view class="ui-content">
|
|
<image class="cu-avatar round lg flo_l" :src="item.other_photo" mode="aspectFit" @tap.stop="jumpChatPath(item, 'user')"></image>
|
|
<view class="ui-messageBox flo_l">
|
|
<view class="font_30 color333 ui-name ellipsis_1 f-fcl">
|
|
{{item.other_nickname}}
|
|
<view v-if="item.is_top == 1" class="ui-is-top font_20 white">已置顶</view>
|
|
</view>
|
|
<view class="ui-message ellipsis_1 font_24 color666">
|
|
<span v-if="item.at_show" class="red">[有人@你]</span>
|
|
{{item.content ? item.content : item.chat_type == 'group_chat' ? '欢迎加入群聊' : ''}}
|
|
</view>
|
|
</view>
|
|
<view class="ui-unreadBox color999 text-right">
|
|
<view class="ui-lastTime font_22">{{item.last_time_str}}</view>
|
|
<block v-if="item.muteTeam">
|
|
<image class="ui-no-disturbing" src="https://image.fulllinkai.com/202406/29/c682c95e835831195a5af75c303a9720.png" mode="widthFix"></image>
|
|
</block>
|
|
<block v-else>
|
|
<view class="ui-unreadNum" v-if="item.new_count && item.new_count <= 99">{{item.new_count}}</view>
|
|
<view class="ui-unreadNum_1" v-if="item.new_count && item.new_count > 99">{{item.new_count}}</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
<view v-if="item.chat_type == 'group_chat'" class="ui-del-box" @tap="quitGroup(item, index)">退出</view>
|
|
<view v-else class="ui-del-box" @tap="deleteList(item, index)">删除</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
<loginDialog :loginShow="loginShow" @hiddenLogin="hiddenLogin"></loginDialog>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import wepy from '@wepy/core'
|
|
import https from '../../mixins/https'
|
|
import base from '../../mixins/base'
|
|
import {service} from '../../config'
|
|
|
|
wepy.page({
|
|
config: {},
|
|
mixins: [https, base],
|
|
|
|
data: {
|
|
loginShow: false,
|
|
loading: false,
|
|
menuList: [
|
|
{
|
|
icon: 'https://image.fulllinkai.com/202201/21/a2a7445a8b70694056dd7795ef5ecc4e.png',
|
|
title: '系统通知',
|
|
path: '/pages/news/systemNews',
|
|
count: ''
|
|
},
|
|
{
|
|
icon: 'https://image.fulllinkai.com/202201/21/1d8c26aa4e48a965bab9eb000db8d054.png',
|
|
title: '好友申请',
|
|
path: '/pages/news/friendRequest',
|
|
count: ''
|
|
},
|
|
{
|
|
icon: 'https://image.fulllinkai.com/202201/21/1715406efd38dfe258b23f632b9c16eb.png',
|
|
title: '访客/粉丝',
|
|
path: '/pages/news/visitor?type=fans',
|
|
count: ''
|
|
},
|
|
{
|
|
icon: 'https://image.fulllinkai.com/202201/21/9571a0bdddf66ea097eecd5a4a601436.png',
|
|
title: '我看过谁',
|
|
path: '/pages/news/review?type=review&title=我看过谁',
|
|
count: ''
|
|
}
|
|
],
|
|
index: null, // 滑动删除聊天消息下标
|
|
groupSessionsCount: [], // 群聊消息未读数
|
|
teamAtList: [], // 群聊@
|
|
cachePage: 0, // 记录跳转前的页数
|
|
page: 1,
|
|
no_more: false,
|
|
list: [] // 消息列表数据
|
|
},
|
|
methods: {
|
|
getList() {
|
|
let vm = this
|
|
let data = {
|
|
page: vm.page
|
|
}
|
|
vm.$showLoading('加载中...')
|
|
vm.$get({url: `${service.host}/chat/linkmen`, data}).then(({code, data}) => {
|
|
if (code === 0) {
|
|
vm.teamAtList = wx.getStorageSync('teamAtList') || []
|
|
vm.groupSessionsCount = wx.getStorageSync('teamsSessionsCount') || []
|
|
if (data.data && data.data.length > 0) {
|
|
data.data.forEach((item) => {
|
|
item.isTouchMove = false
|
|
})
|
|
if (vm.list.length == 0 || vm.page == 1) {
|
|
vm.list = data.data
|
|
} else {
|
|
data.data.map(function (item) {
|
|
vm.list.push(item)
|
|
})
|
|
}
|
|
if (vm.list.length < 15 || data.data.length < 15) {
|
|
vm.no_more = true
|
|
}
|
|
console.log(vm.list, '777')
|
|
// 赋值所在群组已开启消息免打扰字段
|
|
if (wx.getStorageSync('muteNotList') && wx.getStorageSync('muteNotList').length > 0) {
|
|
let arr = wx.getStorageSync('muteNotList')
|
|
arr.forEach((i) => {
|
|
vm.list.forEach((j) => {
|
|
if (j.chat_type == 'group_chat' && i.teamId == j.join_to_id && !j.muteTeam) {
|
|
j.new_count = 0
|
|
j.muteTeam = i.muteTeam
|
|
j.muteState = true
|
|
} else if (j.chat_type == 'group_chat') {
|
|
j.new_count = vm.getGroupCount(j.join_to_id)
|
|
}
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
vm.cachePage = vm.page
|
|
setTimeout(() => {
|
|
vm.loading = true
|
|
}, 500)
|
|
wx.hideLoading()
|
|
}).catch(err => {
|
|
wx.hideLoading()
|
|
vm.loading = true
|
|
console.log(err)
|
|
})
|
|
},
|
|
|
|
getNewCount() {
|
|
let vm = this
|
|
vm.$get({url: `${service.host}/notice/count`}).then(({code, data}) => {
|
|
if (code === 0) {
|
|
vm.menuList[0].count = data.system_count
|
|
vm.menuList[1].count = data.friend_count
|
|
vm.menuList[2].count = data.follow_count + data.visit_count
|
|
let {notice_count} = data
|
|
let groupCountList = wx.getStorageSync('teamsSessionsCount') || []
|
|
let groupCount = 0
|
|
if (groupCountList.length > 0) {
|
|
for (let i = 0; i < groupCountList.length; i++) {
|
|
groupCount += groupCountList[i].unread
|
|
}
|
|
}
|
|
if ((notice_count + groupCount) > 0) {
|
|
wx.setTabBarBadge({
|
|
index: 2,
|
|
text: `${notice_count + groupCount}`
|
|
})
|
|
} else {
|
|
wx.removeTabBarBadge({
|
|
index: 2
|
|
})
|
|
}
|
|
}
|
|
}).catch(err => {
|
|
console.log(err)
|
|
})
|
|
},
|
|
|
|
quitGroup (e, index) {
|
|
let vm = this
|
|
wx.showModal({
|
|
title: '温馨提示',
|
|
content: `是否确认退出${e.other_nickname}群聊？`,
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
vm.$showLoading('')
|
|
vm.$post({url: `${service.host}/team/${e.join_to_id}/leave`}).then(({code, data}) => {
|
|
if (code == 0) {
|
|
vm.$showToast(`已退出群聊`)
|
|
vm.list.splice(index, 1)
|
|
}
|
|
wx.hideLoading()
|
|
}).catch(() => {
|
|
wx.hideLoading()
|
|
})
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消')
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
// 删除联系人列表
|
|
deleteList (e, index) {
|
|
let vm = this
|
|
wx.showModal({
|
|
title: '温馨提示',
|
|
content: `是否确认删除？`,
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
vm.$showLoading('')
|
|
vm.$delete({url: `${service.host}/chat/linkmen/${e.join_to_id}`}).then(({code, data}) => {
|
|
if (code == 0) {
|
|
vm.$showToast(`已删除`)
|
|
vm.list.splice(index, 1)
|
|
}
|
|
wx.hideLoading()
|
|
}).catch(() => {
|
|
wx.hideLoading()
|
|
})
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消')
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
// 获取群未读数
|
|
getGroupCount(id) {
|
|
let newCount = this.groupSessionsCount.filter(item => {
|
|
return item.id == id
|
|
})
|
|
if (newCount.length === 0) {
|
|
return 0
|
|
}
|
|
return newCount[0].unread
|
|
},
|
|
|
|
touchstart (e) {
|
|
console.log(e, '7777')
|
|
let vm = this
|
|
vm.list.forEach(function (v) {
|
|
if (v.isTouchMove) { v.isTouchMove = false }
|
|
})
|
|
vm.startX = e.changedTouches[0].clientX
|
|
vm.startY = e.changedTouches[0].clientY
|
|
},
|
|
|
|
touchmove (e) {
|
|
let vm = this
|
|
vm.index = e.currentTarget.dataset.index
|
|
let startX = vm.startX
|
|
let startY = vm.startY
|
|
let touchMoveX = e.changedTouches[0].clientX
|
|
let touchMoveY = e.changedTouches[0].clientY
|
|
let angle = vm.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY })
|
|
vm.list.forEach(function (v, i) {
|
|
v.isTouchMove = false
|
|
if (Math.abs(angle) > 30) return
|
|
if (i == vm.index) {
|
|
v.isTouchMove = touchMoveX <= startX
|
|
}
|
|
})
|
|
},
|
|
|
|
angle(start, end) {
|
|
let _X = end.X - start.X
|
|
let _Y = end.Y - start.Y
|
|
return 360 * Math.atan(_Y / _X) / (2 * Math.PI)
|
|
},
|
|
|
|
// 聊天对话
|
|
jumpChatPath(e, type) {
|
|
let vm = this
|
|
// 校验是否完成注册资料
|
|
if (!vm.$signInVerify()) {
|
|
vm.loginShow = true
|
|
return
|
|
}
|
|
let url = ``
|
|
if (type === 'user') {
|
|
url = `/pages/home/information?id=${e.join_to_id}`
|
|
} else if (e.chat_type === 'group_chat') {
|
|
url = `/pages/news/groupChitchat?id=${e.join_to_id}&name=${encodeURIComponent(e.other_nickname)}&pic=${e.other_photo}`
|
|
} else {
|
|
url = `/pages/news/chitchat?id=${e.join_to_id}&name=${encodeURIComponent(e.other_nickname)}&type=${e.other_type}&pic=${e.other_photo}&real=${e.is_real_approved}`
|
|
}
|
|
wx.navigateTo({url: url})
|
|
},
|
|
jumpPath(e) {
|
|
let vm = this
|
|
// 校验是否完成注册资料
|
|
if (!vm.$signInVerify()) {
|
|
vm.loginShow = true
|
|
return
|
|
}
|
|
wx.navigateTo({url: e.path})
|
|
},
|
|
hiddenLogin() {
|
|
let vm = this
|
|
vm.loginShow = false
|
|
}
|
|
},
|
|
// 上拉获取更多数据
|
|
onReachBottom() {
|
|
let vm = this
|
|
if (!vm.no_more) {
|
|
vm.page++
|
|
vm.getList()
|
|
}
|
|
},
|
|
// 下拉刷新
|
|
onPullDownRefresh() {
|
|
let vm = this
|
|
vm.page = 1
|
|
vm.cachePage = 0
|
|
vm.no_more = false
|
|
vm.getList()
|
|
},
|
|
onShow() {
|
|
let vm = this
|
|
vm.getNewCount()
|
|
if (vm.cachePage != vm.page) {
|
|
vm.getList()
|
|
}
|
|
},
|
|
onLoad() {}
|
|
})
|
|
</script>
|
|
<config>
|
|
{
|
|
navigationBarTitleText: '消息',
|
|
navigationStyle: 'custom',
|
|
enablePullDownRefresh: true,
|
|
backgroundColorTop: '#ffffff',
|
|
backgroundColorBottom: '#ffffff',
|
|
usingComponents: {
|
|
cuCustom: '~@/components/cuCustom',
|
|
loginDialog: '~@/components/loginDialog',
|
|
}
|
|
}
|
|
</config>
|