426 lines
13 KiB
Plaintext
426 lines
13 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{
|
||
.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></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="close">
|
||
<image class="ui-top-menu-icon ui-relative" :src="item.icon" mode="aspectFit">
|
||
<view class="ui-top-menu-count" wx: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-touch-item" :class="{'touch-move-active' : item.isTouchMove}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove" v-for="(item,index) in list" :key="index" @tap="jumpPath(item)">
|
||
<view class="ui-content">
|
||
<image class="cu-avatar round lg flo_l" :src="item.icon" mode="aspectFit" @tap.stop="jumpDetailPath(item)"></image>
|
||
<view class="ui-messageBox flo_l">
|
||
<view class="font_30 color333 ui-name ellipsis_1 f-fcl">
|
||
{{item.title}}
|
||
<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}}
|
||
</view>
|
||
</view>
|
||
<view class="ui-unreadBox color999 text-right">
|
||
<view class="ui-lastTime font_22">{{item.last_time}}</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 class="ui-del-box">退出</view>
|
||
</view>
|
||
</view>
|
||
</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: {
|
||
menuList: [
|
||
{
|
||
icon: 'https://image.fulllinkai.com/202201/21/a2a7445a8b70694056dd7795ef5ecc4e.png',
|
||
title: '系统通知',
|
||
path: '/pages/users/myNews',
|
||
count: ''
|
||
},
|
||
{
|
||
icon: 'https://image.fulllinkai.com/202201/21/1d8c26aa4e48a965bab9eb000db8d054.png',
|
||
title: '好友申请',
|
||
path: '/pages/users/friendRequest',
|
||
count: ''
|
||
},
|
||
{
|
||
icon: 'https://image.fulllinkai.com/202201/21/1715406efd38dfe258b23f632b9c16eb.png',
|
||
title: '访客/粉丝',
|
||
path: '/pages/users/visitorFriendlist?type=fans',
|
||
count: ''
|
||
},
|
||
{
|
||
icon: 'https://image.fulllinkai.com/202201/21/9571a0bdddf66ea097eecd5a4a601436.png',
|
||
title: '我看过谁',
|
||
path: '/pages/users/review?type=review&title=我看过谁',
|
||
count: ''
|
||
}
|
||
],
|
||
index: null, // 滑动删除聊天消息下标
|
||
groupSessionsCount: [], // 群聊消息未读数
|
||
teamAtList: [], // 群聊@
|
||
list: [] // 消息列表数据
|
||
},
|
||
methods: {
|
||
getList() {
|
||
let vm = this
|
||
let data = {
|
||
page: vm.page
|
||
}
|
||
vm.$showLoading('加载中...')
|
||
vm.$get({url: `${service.host}/message/sessionV2`, data}).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.preview_count
|
||
let {session} = data
|
||
let arrList = []
|
||
if (session.data && session.data.length > 0) {
|
||
session.data.forEach((item) => {
|
||
if (item.chat_type == 'group_chat') {
|
||
arrList.push({
|
||
chat_type: item.chat_type,
|
||
icon: item.team.icon,
|
||
title: item.team.tname,
|
||
is_top: item.is_top,
|
||
content: item.last_message ? item.last_message.body.msg ? item.last_message.other_user.nickname ? (item.last_message.other_user.nickname + '：' + item.last_message.body.msg) : (item.last_message.other_user.name + '：' + item.last_message.body.msg) : '' : '',
|
||
last_time: item.last_message ? item.last_message.last_time : '',
|
||
id: item.team_id,
|
||
hidden_profile: 'NONE',
|
||
msgId: item.id,
|
||
isTouchMove: false,
|
||
new_count: wx.getStorageSync('muteNotList') && wx.getStorageSync('muteNotList').length > 0 ? 0 : this.getGroupCount(item.team_id),
|
||
path: `/pages/home/groupChitchat?id=${item.team_id}&name=` + encodeURIComponent(`${item.team.tname}`)
|
||
})
|
||
} else {
|
||
console.log(item.new_count, '///////****')
|
||
arrList.push({
|
||
chat_type: item.chat_type,
|
||
icon: item.other_user ? item.other_user.avatar || item.other_user.circle_avatar : '',
|
||
title: item.other_user ? item.other_user.nickname || item.other_user.name : '',
|
||
is_top: item.is_top,
|
||
content: item.last_message ? item.last_message.content : '',
|
||
last_time: item.last_message ? item.last_message.last_time : '',
|
||
id: item.other_user ? item.other_user.id : '',
|
||
hidden_profile: item.other_user ? item.other_user.hidden_profile : '',
|
||
msgId: item.id,
|
||
isTouchMove: false,
|
||
new_count: item.new_count,
|
||
path: item.other_user ? `/pages/home/chitchat?id=${item.other_user.id}&name=` + encodeURIComponent(`${item.other_user.nickname ? item.other_user.nickname : item.other_user.name}`) + `&type=${item.other_user.type}` : ''
|
||
})
|
||
}
|
||
})
|
||
}
|
||
vm.list = [...arrList]
|
||
// 赋值所在群组已开启消息免打扰字段
|
||
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.id && !j.muteState) {
|
||
j.new_count = 0
|
||
j.muteTeam = i.muteTeam
|
||
j.muteState = true
|
||
} else if (j.chat_type == 'group_chat') {
|
||
j.new_count = this.getGroupCount(j.id)
|
||
}
|
||
})
|
||
})
|
||
}
|
||
console.log(vm.list, '777')
|
||
if (vm.list.length < 15 || session.data.length < 15) {
|
||
vm.no_more = true
|
||
}
|
||
setTimeout(() => {
|
||
vm.loading = true
|
||
}, 500)
|
||
vm.page++
|
||
}
|
||
wx.hideLoading()
|
||
}).catch(err => {
|
||
wx.hideLoading()
|
||
console.log(err)
|
||
})
|
||
},
|
||
|
||
getNewCount() {
|
||
let vm = this
|
||
vm.$get({url: `${service.host}/new/message/count`}).then(({code, data}) => {
|
||
if (code === 0) {
|
||
let {new_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 ((new_count + groupCount) > 0) {
|
||
wx.setTabBarBadge({
|
||
index: 0,
|
||
text: `${new_count + groupCount}`
|
||
})
|
||
} else {
|
||
wx.removeTabBarBadge({
|
||
index: 0
|
||
})
|
||
}
|
||
}
|
||
}).catch(err => {
|
||
console.log(err)
|
||
})
|
||
},
|
||
|
||
// 获取群未读数
|
||
getGroupCount(id) {
|
||
let newCount = this.groupSessionsCount.filter(item => {
|
||
return item.id == id
|
||
})
|
||
if (newCount.length === 0) {
|
||
return 0
|
||
}
|
||
return newCount[0].unread
|
||
},
|
||
|
||
touchstart (e) {
|
||
let vm = this
|
||
vm.list.forEach(function (v, i) {
|
||
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)
|
||
},
|
||
|
||
close () {
|
||
console.log('2222222')
|
||
this.$app.$options.globalData.nim.team.updateMyMemberInfo({
|
||
teamId: '23903306874',
|
||
bitConfigMask: 1
|
||
})
|
||
},
|
||
|
||
jumpPath(e) {
|
||
console.log(e, '8888888888')
|
||
wx.navigateTo({
|
||
url: `${e.path}&pic=${e.icon}`
|
||
})
|
||
},
|
||
|
||
jumpDetailPath(e) {
|
||
wx.navigateTo({
|
||
url: `${e.path}&pic=${e.icon}`
|
||
})
|
||
}
|
||
},
|
||
// 上拉获取更多数据
|
||
onReachBottom() {
|
||
},
|
||
// 下拉刷新
|
||
onPullDownRefresh() {
|
||
},
|
||
onShow() {
|
||
this.teamAtList = wx.getStorageSync('teamAtList') || []
|
||
this.groupSessionsCount = wx.getStorageSync('teamsSessionsCount') || []
|
||
this.getList()
|
||
this.getNewCount()
|
||
},
|
||
created() {}
|
||
})
|
||
</script>
|
||
<config>
|
||
{
|
||
navigationBarTitleText: '消息',
|
||
navigationStyle: 'custom',
|
||
enablePullDownRefresh: true,
|
||
backgroundColorTop: '#ffffff',
|
||
backgroundColorBottom: '#ffffff',
|
||
usingComponents: {
|
||
cuCustom: '~@/components/cuCustom'
|
||
}
|
||
}
|
||
</config>
|