|
@@ -1,27 +1,27 @@
|
|
<template>
|
|
<template>
|
|
<div class="content">
|
|
<div class="content">
|
|
<div class="horizontal-invited-wrapper" v-if="state.invited_list.length">
|
|
<div class="horizontal-invited-wrapper" v-if="state.invited_list.length">
|
|
- invited({{ state.inviteCount }})
|
|
|
|
|
|
+ invited({{ state.detail.inviteCount }})
|
|
<div class="horizontal-invited-list" v-show-log="state.log_invite_list_show " @mouseleave="invitedListMouseleave($event)">
|
|
<div class="horizontal-invited-list" v-show-log="state.log_invite_list_show " @mouseleave="invitedListMouseleave($event)">
|
|
<template v-for="(item, index) in state.invited_list" :key="index">
|
|
<template v-for="(item, index) in state.invited_list" :key="index">
|
|
- <div class="invited-item" v-if="index < 9" @mouseenter="invitedItemMouseenter(item)">
|
|
|
|
|
|
+ <div class="invited-item" v-if="index < 5" @mouseenter="invitedItemMouseenter(item)">
|
|
<img :src="item.userInfo.avatarUrl" />
|
|
<img :src="item.userInfo.avatarUrl" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
- <img class="more" v-if="state.invited_list.length > 9" :src="require('@/assets/svg/icon-invited-more.svg')"
|
|
|
|
|
|
+ <img class="more" v-if="state.invited_list.length > 5" :src="require('@/assets/svg/icon-invited-more.svg')"
|
|
@mouseenter="moreMouseenter" @mouseleave="moreMouseleave" />
|
|
@mouseenter="moreMouseenter" @mouseleave="moreMouseleave" />
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="invited-user-info" @mouseenter="invitedItemMouseenter()" @mouseleave="invitedListMouseleave($event)"
|
|
<div class="invited-user-info" @mouseenter="invitedItemMouseenter()" @mouseleave="invitedListMouseleave($event)"
|
|
v-if="hoverInvitedUserInfo.userInfo">
|
|
v-if="hoverInvitedUserInfo.userInfo">
|
|
<div class="left">
|
|
<div class="left">
|
|
- <img class="avatar" :src="hoverInvitedUserInfo.userInfo.avatarUrl" />
|
|
|
|
|
|
+ <img class="avatar" @click="clickItem(hoverInvitedUserInfo)" :src="hoverInvitedUserInfo.userInfo.avatarUrl" />
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="right">
|
|
<div class="user-info">
|
|
<div class="user-info">
|
|
- <div class="name">
|
|
|
|
- {{ hoverInvitedUserInfo.userInfo.nickName }}
|
|
|
|
|
|
+ <div class="name" @click="clickItem(hoverInvitedUserInfo)">
|
|
|
|
+ @{{ hoverInvitedUserInfo.userInfo.nickName }}
|
|
</div>
|
|
</div>
|
|
<div class="time">
|
|
<div class="time">
|
|
{{ getTime(hoverInvitedUserInfo.timestamp) }}
|
|
{{ getTime(hoverInvitedUserInfo.timestamp) }}
|
|
@@ -42,8 +42,8 @@
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="right">
|
|
<div class="user-info">
|
|
<div class="user-info">
|
|
- <div class="name">
|
|
|
|
- {{ item.userInfo.nickName }}
|
|
|
|
|
|
+ <div class="name" @click="clickItem(item)">
|
|
|
|
+ @{{ item.userInfo.nickName }}
|
|
</div>
|
|
</div>
|
|
<div class="time">
|
|
<div class="time">
|
|
{{ getTime(item.timestamp) }}
|
|
{{ getTime(item.timestamp) }}
|
|
@@ -65,9 +65,13 @@ import Report from "@/log-center/log"
|
|
|
|
|
|
var moment = require('moment')
|
|
var moment = require('moment')
|
|
let state = inject('state')
|
|
let state = inject('state')
|
|
|
|
+let global_refresh = inject('global_refresh')
|
|
|
|
+
|
|
state.invited_list = []
|
|
state.invited_list = []
|
|
|
|
|
|
-let page_size = 100
|
|
|
|
|
|
+let page_num = 1;
|
|
|
|
+let page_size = 200
|
|
|
|
+let listLoadMore = false
|
|
let list_end = false
|
|
let list_end = false
|
|
|
|
|
|
let hoverInvitedUserInfo = ref({});
|
|
let hoverInvitedUserInfo = ref({});
|
|
@@ -85,16 +89,16 @@ state.log_invite_list_show = {
|
|
postId: state.postId
|
|
postId: state.postId
|
|
}
|
|
}
|
|
|
|
|
|
-watch(state, () => {
|
|
|
|
- if (state.refresh) {
|
|
|
|
- inviteListScroll({isRefresh: true});
|
|
|
|
- // list()
|
|
|
|
|
|
+watch(global_refresh, () => {
|
|
|
|
+ if (global_refresh.value) {
|
|
|
|
+ inviteListScroll({isRefresh: true});
|
|
}
|
|
}
|
|
})
|
|
})
|
|
|
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
state.btn_loading = false;
|
|
state.btn_loading = false;
|
|
inviteListScroll({isRefresh: true})
|
|
inviteListScroll({isRefresh: true})
|
|
|
|
+ console.log('state-->', state)
|
|
// list()
|
|
// list()
|
|
})
|
|
})
|
|
|
|
|
|
@@ -127,13 +131,13 @@ const clickItem = (item) => {
|
|
}
|
|
}
|
|
|
|
|
|
function handleScroll(e) {
|
|
function handleScroll(e) {
|
|
- if (list_end) {
|
|
|
|
- return
|
|
|
|
- }
|
|
|
|
e = e.target
|
|
e = e.target
|
|
if ((e.clientHeight + e.scrollTop) / e.scrollHeight > .8) {
|
|
if ((e.clientHeight + e.scrollTop) / e.scrollHeight > .8) {
|
|
- list_end = true
|
|
|
|
- inviteListScroll()
|
|
|
|
|
|
+ if(!listLoadMore) {
|
|
|
|
+ listLoadMore = true;
|
|
|
|
+ page_num++;
|
|
|
|
+ inviteListScroll()
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@@ -161,41 +165,29 @@ state.inviteListRefresh = () => {
|
|
}
|
|
}
|
|
|
|
|
|
const handleCommon = (data) => {
|
|
const handleCommon = (data) => {
|
|
- state.inviteCount = data.inviteCount
|
|
|
|
- // if (state.inviteCount > 0) {
|
|
|
|
- // state.tabs[1].txt = `invited(${state.inviteCount})`
|
|
|
|
- // }
|
|
|
|
-
|
|
|
|
- if (data.inviteUsers.length > 0) {
|
|
|
|
- data.inviteUsers.forEach(item => {
|
|
|
|
- if (state.invited_list.filter((item2) => { return item2.userInfo.uid == item.userInfo.uid }).length == 0) {
|
|
|
|
- state.invited_list.push(item)
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- // state.invited_list = state.invited_list.sort((a, b) => {
|
|
|
|
- // return b.timestamp - a.timestamp
|
|
|
|
- // })
|
|
|
|
-
|
|
|
|
- list_end = false
|
|
|
|
- } else {
|
|
|
|
- list_end = false
|
|
|
|
|
|
+ if(data && data.length) {
|
|
|
|
+ if(page_num < 2) {
|
|
|
|
+ state.invited_list = data;
|
|
|
|
+ } else {
|
|
|
|
+ let dataList = state.invited_list;
|
|
|
|
+ dataList = dataList.concat(data);
|
|
|
|
+ state.invited_list = dataList;
|
|
|
|
+ }
|
|
|
|
+ listLoadMore = false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// 滚动
|
|
// 滚动
|
|
let inviteListScroll = ({isRefresh = false}) => {
|
|
let inviteListScroll = ({isRefresh = false}) => {
|
|
- // state.invited_list
|
|
|
|
- let last_timestamp = 0
|
|
|
|
- let len = state.invited_list.length
|
|
|
|
- if (!isRefresh && len > 0) {
|
|
|
|
- last_timestamp = state.invited_list[len - 1].timestamp
|
|
|
|
|
|
+ if(isRefresh) {
|
|
|
|
+ page_num = 1
|
|
}
|
|
}
|
|
|
|
|
|
inviteList({
|
|
inviteList({
|
|
params: {
|
|
params: {
|
|
inviteCode: state.invite_code,
|
|
inviteCode: state.invite_code,
|
|
postId: state.postId,
|
|
postId: state.postId,
|
|
- lastTimestamp: last_timestamp,
|
|
|
|
|
|
+ pageNum: page_num,
|
|
pageSize: page_size
|
|
pageSize: page_size
|
|
}
|
|
}
|
|
}).then((res) => {
|
|
}).then((res) => {
|
|
@@ -261,7 +253,6 @@ async function clickBtn() {
|
|
.horizontal-invited-list {
|
|
.horizontal-invited-list {
|
|
display: flex;
|
|
display: flex;
|
|
align-items: center;
|
|
align-items: center;
|
|
- margin-left: 5px;
|
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
|
|
|
.invited-item {
|
|
.invited-item {
|
|
@@ -342,6 +333,7 @@ async function clickBtn() {
|
|
height: 30px;
|
|
height: 30px;
|
|
margin-right: 16px;
|
|
margin-right: 16px;
|
|
border-radius: 50%;
|
|
border-radius: 50%;
|
|
|
|
+ cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@@ -355,6 +347,7 @@ async function clickBtn() {
|
|
margin-bottom: 5px;
|
|
margin-bottom: 5px;
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
font-size: 15px;
|
|
font-size: 15px;
|
|
|
|
+ cursor: pointer;
|
|
}
|
|
}
|
|
|
|
|
|
.time {
|
|
.time {
|