联系人加载更多
This commit is contained in:
kuaifan
parent
72e97d57b2
commit
42fc52a067
1
public/images/file/other.svg
Normal file
1
public/images/file/other.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1625028321516" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10195" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M256 85.333333c-46.933333 0-85.333333 38.4-85.333333 85.333334v682.666666c0 46.933333 38.4 85.333333 85.333333 85.333334h512c46.933333 0 85.333333-38.4 85.333333-85.333334V337.066667L601.6 85.333333H256z" fill="#989FA5" p-id="10196"></path><path d="M686.933333 337.066667H853.333333L601.6 85.333333v166.4c0 46.933333 38.4 85.333333 85.333333 85.333334z" fill="#FFFFFF" opacity=".4" p-id="10197"></path><path d="M486.4 780.8h-170.666667c-4.266667 0-8.533333-4.266667-8.533333-8.533333s4.266667-8.533333 8.533333-8.533334h170.666667c4.266667 0 8.533333 4.266667 8.533333 8.533334s-4.266667 8.533333-8.533333 8.533333zM571.733333 695.466667h-256c-4.266667 0-8.533333-4.266667-8.533333-8.533334s4.266667-8.533333 8.533333-8.533333h256c4.266667 0 8.533333 4.266667 8.533334 8.533333s-4.266667 8.533333-8.533334 8.533334zM571.733333 610.133333h-256c-4.266667 0-8.533333-4.266667-8.533333-8.533333s4.266667-8.533333 8.533333-8.533333h256c4.266667 0 8.533333 4.266667 8.533334 8.533333s-4.266667 8.533333-8.533334 8.533333zM571.733333 524.8h-256c-4.266667 0-8.533333-4.266667-8.533333-8.533333s4.266667-8.533333 8.533333-8.533334h256c4.266667 0 8.533333 4.266667 8.533334 8.533334s-4.266667 8.533333-8.533334 8.533333z" fill="#FFFFFF" p-id="10198"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@ -67,6 +67,10 @@
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
asynch: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -172,6 +176,14 @@
|
||||
this.user = this.userInfo;
|
||||
return;
|
||||
}
|
||||
if (this.asynch) {
|
||||
setTimeout(this.loadData);
|
||||
} else {
|
||||
this.loadData();
|
||||
}
|
||||
},
|
||||
|
||||
loadData() {
|
||||
this.$store.dispatch("getUserBasic", {
|
||||
userid: this.userid,
|
||||
success: (user) => {
|
||||
|
||||
@ -19,7 +19,11 @@
|
||||
{{$L(item.name)}}
|
||||
</p>
|
||||
</div>
|
||||
<div ref="list" class="messenger-list overlay-y">
|
||||
<ScrollerY
|
||||
ref="list"
|
||||
class="messenger-list overlay-y"
|
||||
@on-scroll="listScroll"
|
||||
static>
|
||||
<ul v-if="tabActive==='dialog'" class="dialog">
|
||||
<li
|
||||
v-for="(dialog, key) in dialogList"
|
||||
@ -45,7 +49,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
<ul v-else class="contacts">
|
||||
<li v-for="(users, label) in contactsLists">
|
||||
<li v-for="(users, label) in contactsData">
|
||||
<div class="label">{{label}}</div>
|
||||
<ul>
|
||||
<li v-for="(user, index) in users" :key="index" @click="openContacts(user)">
|
||||
@ -55,8 +59,9 @@
|
||||
</ul>
|
||||
</li>
|
||||
<li v-if="contactsLoad > 0" class="loading"><Loading/></li>
|
||||
<li v-else-if="!contactsHasMorePages" class="loaded">{{$L('共' + contactsList.length + '位联系人')}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</ScrollerY>
|
||||
<div class="messenger-menu">
|
||||
<Icon @click="tabActive='dialog'" :class="{active:tabActive==='dialog'}" type="ios-chatbubbles" />
|
||||
<Icon @click="tabActive='contacts'" :class="{active:tabActive==='contacts'}" type="md-person" />
|
||||
@ -81,9 +86,10 @@
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
import DialogWrapper from "./components/DialogWrapper";
|
||||
import ScrollerY from "../../components/ScrollerY";
|
||||
|
||||
export default {
|
||||
components: {DialogWrapper},
|
||||
components: {ScrollerY, DialogWrapper},
|
||||
data() {
|
||||
return {
|
||||
tabActive: 'dialog',
|
||||
@ -100,7 +106,10 @@ export default {
|
||||
|
||||
contactsKey: '',
|
||||
contactsLoad: 0,
|
||||
contactsLists: null,
|
||||
contactsList: [],
|
||||
contactsData: null,
|
||||
contactsCurrentPage: 1,
|
||||
contactsHasMorePages: false,
|
||||
}
|
||||
},
|
||||
|
||||
@ -178,7 +187,7 @@ export default {
|
||||
|
||||
watch: {
|
||||
tabActive(val) {
|
||||
if (val && this.contactsLists === null) {
|
||||
if (val && this.contactsData === null) {
|
||||
this.getContactsList(1);
|
||||
}
|
||||
},
|
||||
@ -188,7 +197,7 @@ export default {
|
||||
contactsKey(val) {
|
||||
setTimeout(() => {
|
||||
if (this.contactsKey == val) {
|
||||
this.contactsLists = null;
|
||||
this.contactsData = null;
|
||||
this.getContactsList(1);
|
||||
}
|
||||
}, 600);
|
||||
@ -196,6 +205,20 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
listScroll(res) {
|
||||
switch (res.directionreal) {
|
||||
case 'up':
|
||||
if (res.scrollE < 10) {
|
||||
if (this.tabActive === 'contacts'
|
||||
&& this.contactsLoad == 0
|
||||
&& this.contactsHasMorePages) {
|
||||
this.getContactsList(this.contactsCurrentPage + 1);
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
closeDialog() {
|
||||
this.dialogId = 0;
|
||||
this.$store.state.method.setStorage("messenger::dialogId", 0)
|
||||
@ -223,8 +246,8 @@ export default {
|
||||
},
|
||||
|
||||
getContactsList(page) {
|
||||
if (this.contactsLists === null) {
|
||||
this.contactsLists = {};
|
||||
if (this.contactsData === null) {
|
||||
this.contactsData = {};
|
||||
}
|
||||
this.contactsLoad++;
|
||||
this.$store.dispatch("call", {
|
||||
@ -246,20 +269,21 @@ export default {
|
||||
return false;
|
||||
}
|
||||
let az = user.az ? user.az.toUpperCase() : "#";
|
||||
if (typeof this.contactsLists[az] === "undefined") this.contactsLists[az] = [];
|
||||
if (typeof this.contactsData[az] === "undefined") this.contactsData[az] = [];
|
||||
//
|
||||
let index = this.contactsLists[az].findIndex(({userid}) => userid === user.userid);
|
||||
let index = this.contactsData[az].findIndex(({userid}) => userid === user.userid);
|
||||
if (index > -1) {
|
||||
this.contactsLists[az].splice(index, 1, user);
|
||||
this.contactsData[az].splice(index, 1, user);
|
||||
} else {
|
||||
this.contactsLists[az].push(user);
|
||||
this.contactsData[az].push(user);
|
||||
this.contactsList.push(user);
|
||||
}
|
||||
});
|
||||
if (data.next_page_url && data.current_page < 3) {
|
||||
this.getContactsList(data.current_page + 1)
|
||||
}
|
||||
this.contactsCurrentPage = data.current_page;
|
||||
this.contactsHasMorePages = data.current_page < data.last_page;
|
||||
}).catch(() => {
|
||||
this.contactsLoad--;
|
||||
this.contactsHasMorePages = false;
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
@ -193,7 +193,8 @@
|
||||
line-height: 34px;
|
||||
border-bottom: 1px solid #efefef;
|
||||
}
|
||||
&.loading {
|
||||
&.loading,
|
||||
&.loaded {
|
||||
margin: 0;
|
||||
height: 52px;
|
||||
display: flex;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user