YXGJ/cloud/contacts/index.vue

<template>
    <view class="cantacts">
        <view style="padding: 10px;">
            <My_search placeholder="搜索名称，手机号" @onSearch="onSearch"></My_search>
        </view>
        <view class="content">
            <view class="type-list">
                <u-list>
                    <u-list-item v-for="(item,index) in groupList" :key="item.sys_phonebookgroupid">
                        <view :class="['type-item',act == index ? 'active' : '']" @click="typeClick(index,item)">
                            {{ item.groupname }}
                        </view>
                    </u-list-item>
                </u-list>
            </view>
            
            <view class="list">
                <My_listbox ref="List" @getlist="getList" :bottomHeight="70" :isShowEmpty="false">
                    <List :list="list" v-if="list.length"></List>
                    <view v-else :style="{marginTop:tovw(150)}">
                        <u-empty mode="data" size="small"/>
                    </view>
                </My_listbox>
            </view>
        </view>
    </view>
</template>

<script>
import List from './list.vue'
export default {
    components:{List},
    data () {
        return {
            list:[],
            content: {
                "pageNumber": 1,
                "pageSize": 20,
                "where": {
                    "condition": "",
                    "groupname": ""
                }
            },
            groupParam: {
                "id": "20240516135202",
                "content": {
                    "pageNumber": 1,
                    "pageSize": 99999,
                    "where": {
                        "isenable": 1
                    }
                },
            },
            groupList:[],
            act:0
        }
    },
    methods: {
        onSearch (condition) {
            this.content.where.condition = condition
            this.getList(true)
        },
        typeClick (index,item) {
            this.act = index
            this.content.where.groupname = item.groupname
            this.getList(true)
        },
        getList(init = false) {
            return new Promise((resolve, reject) => {
                if (this.paging(this.content, init)) return resolve();
                this.$Http.basic({
                    "id": "20240516144502",
                    content: this.content
                }).then(res => {
                    this.$refs.List.setHeight()
                    this.$refs.List.RefreshToComplete()
                    resolve();
                    if (this.cutoff(res.msg)) return;
                    this.list = res.pageNumber == 1 ? res.data : this.list.concat(res.data);
                    console.log("获取通讯录列表", this.list)
                    this.content = this.$refs.List.paging(this.content, res)
                })
            })
        },
        async getGroup () {
            let res = await this.$Http.basic(this.groupParam)
            this.groupList = res.data
            if (this.groupList.length) this.content.where.groupname = this.groupList[0].groupname
            this.getList()
            console.log(this.groupList,'分组列表');
        },
        onLoad () {
            uni.setNavigationBarTitle({
                title:'通讯录',
            })
            this.getGroup()
        }
    },
}
</script>

<style lang="scss">
/deep/.u-list {
    height: calc(100vh - 55px) !important;
}
.cantacts {
    box-sizing: border-box;
    background: #ffffff;
    .content {
        font-family: Source Han Sans SC, Source Han Sans SC;
        display: flex;
        .type-list {
            background: #F7F7F7;
            width: 90px;
            flex-basis: 90px;
            .type-item {
                font-weight: 400;
                font-size: 14px;
                color: #333333;
                display: flex;
                align-items: center;
                background: #F7F7F7;
                align-content: center;
                padding: 12px 16px;
            }
        }
        .active {
            background: #ffffff !important;
        }
        .list { 
            flex: 1;
        }
    }
}
</style>