List_.vue

<template>
    <div class='all-back'>
        <van-pull-refresh v-model='isLoading'
                          success-text='刷新成功'
                          @refresh='onRefresh'
                          :disabled='isRefreshDisable'
        >
            <van-nav-bar title='慢病管理' left-text='' left-arrow>
                <template #right>
                    <van-icon name='search' size='18' />
                </template>
            </van-nav-bar>
            <div class='top-title'>
                我的待随访（16）
            </div>
            <van-tabs v-model:active='active'>
                <van-tab :title='item.title' :name='item.name' v-for='item in tabList'></van-tab>
            </van-tabs>
            <div
                class='list-data'
                v-infinite-scroll='loadMore'
                :infinite-scroll-disabled='loading'
                infinite-scroll-distance='10'
                ref='list'
            >
                <div class='mt-10 white-back p-16' v-for='item in detailInfo'>
                    <div class='flex items-center'>
                        <div class='base-title'>张曼玉</div>
                        <div class='second-title plr-8'>24岁</div>
                        <div class='second-title plr-6'>男</div>
                    </div>
                    <div class='mt-3 flex items-center'>
                        <div class='detail-left'>
                            身份证号
                        </div>
                        <div class='detail-right'>
                            3604211901****3128
                        </div>
                    </div>
                    <div class='mt-3 flex items-center'>
                        <div class='detail-left'>
                            高危评估
                        </div>
                        <div class='detail-right'>
                            高危人群
                        </div>
                    </div>
                    <div class='mt-3 flex items-center'>
                        <div class='detail-left'>
                            专病高危评估
                        </div>
                        <div class='detail-right'>
                            高血压高危
                        </div>
                    </div>
                    <div class='flex' style='align-items: baseline'>
                        <div class='detail-left' :style="{marginTop: item.diseaseList.length ? '0px': '12px'}">
                            慢病标签
                        </div>
                        <div class='detail-right' style='flex: 1'>
                            <div class='flex items-center '
                                 style='flex-wrap: wrap;'>
                                <div v-for='item1 in item.diseaseList' :class='`mt-3 ill-tabs ill-tabs-${item1.id}`'>
                                    {{ item1.name }}
                                </div>
                            </div>

                        </div>
                    </div>
                    <van-divider class='mt-3' />
                    <div class='mt-3 flex word-right'>
                        <div></div>
                        <div>
                            <van-button round size='small' class='btn' @click='toGeneralDetail'>详情</van-button>
                            <van-button round size='small' class='btn' style='margin-left: 16px' @click='toAddGeneral'>通用随访
                            </van-button>
                        </div>
                    </div>
                </div>
            </div>
        </van-pull-refresh>
    </div>
</template>

<script>
import { showFailToast } from 'vant'

const tabList = [
    { title: '高血压', name: 1, num: 3 },
    { title: '糖尿病', name: 2, num: 3 },
    { title: '冠心病', name: 3, num: 3 },
    { title: '脑卒中', name: 4, num: 3 },
    { title: '慢阻肺', name: 5, num: 3 },
    { title: '慢性肾病', name: 6, num: 3 },
    { title: '血脂异常', name: 7, num: 3 }
]
export default {
    name: 'List',
    data() {
        return {
            active: 1,
            tabList,
            loading: false,
            isLoading: false,
            detailInfo: [
                {
                    diseaseList: [
                        { id: 1, name: '高血压' },
                        { id: 2, name: '糖尿病' },
                        { id: 3, name: '冠心病' },
                        { id: 3, name: '脑卒中' },
                        { id: 5, name: '慢阻肺' },
                        { id: 6, name: '慢性肾病' },
                        { id: 7, name: '血脂异常' }
                    ]
                },
                {
                    diseaseList: [
                        { id: 1, name: '高血压' },
                        { id: 3, name: '冠心病' },
                        { id: 5, name: '慢阻肺' }
                    ]
                },
                {
                    diseaseList: [
                        { id: 1, name: '高血压' },
                        { id: 6, name: '慢性肾病' },
                        { id: 7, name: '血脂异常' }
                    ]
                }
            ],
            noDataShow: false,
            param: {
                pageIndex: 0,
                pageSize: 10
            },
            isRefreshDisable: false,
            scrollTop: 0
        }
    },
    watch: {
        scrollTop(newval) {
            if (newval > 0) {
                this.isRefreshDisable = true
            } else {
                this.isRefreshDisable = false
            }
        }
    },
    mounted() {
        this.$nextTick(() => {
            const list = this.$refs.list
            list.addEventListener('scroll', () => {
                this.scrollTop = list.scrollTop
            })
        })
    },
    methods: {
        onRefresh() {
            this.isLoading = true
            this.loading = true
            this.param.pageIndex = 1
            this.getRecordInfo()
        },
        loadMore() {
            this.loading = true
            this.param.pageIndex += 1
            this.getRecordInfo()
        },
        getRecordInfo(callBack) {
            let par = {
                ...this.param
            }
            getNetworkInfoByPhone(par).then(({ data = [] }) => {
                this.loading = false
                if (this.isLoading) { //刷新时先赋空
                    this.detailInfo = []
                }
                this.detailInfo = this.detailInfo.concat(data.data.dataList)
                if (this.detailInfo.length == 0) {
                    this.noDataShow = true
                } else {
                    this.noDataShow = false
                }
                if (data.data && data.data.length < this.param.pageSize) {
                    this.loadText = '暂无更多数据'
                } else {
                    this.loading = false
                }
                this.isLoading = false
                callBack && callBack()
            }).catch(res => {
                showFailToast('系统异常，请联系客服！')
                this.loading = false
                this.isLoading = false
            })
        },
        toGeneralDetail() {
            this.$router.push({
                path: `/doctor/followUp/generalFU/detail`
            })
        },
        toAddGeneral() {
            this.$router.push({
                path: `/doctor/followUp/generalFU/add`
            })
        }
    }
}
</script>

<style scoped lang='less'>
.all-back {
    background: #F5F5F5;

    .top-title {
        padding: 10px 12px;
    }

    .white-back {
        background: #FFFFFF;
    }

    .mt-10 {
        margin-top: 10px;
    }

    .p-16 {
        padding: 16px;
    }

    .plr-8 {
        padding: 0px 8px;
    }

    .plr-6 {
        padding: 0px 6px;
    }

    .base-title {
        font-weight: bold;
        font-size: 16px;
    }

    .second-title {
        background: #F0F3FF;
        line-height: 24px;
        margin-left: 10px;
    }

    .detail-left {
        width: 104px;
        font-size: 14px;
        color: #8C8C8C;
    }

    .detail-right {
        font-size: 14px;
    }

    .ill-tabs {
        line-height: 20px;
        border-radius: 20px;
        padding: 3px 8px 3px 8px;
    }

    .ill-tabs-1 {
        background: #FFF2E8;
        color: #F83B00;
    }

    .ill-tabs-2 {
        margin-left: 2px;
        background: #FFF1F0;
        color: #F5222D;
    }

    .ill-tabs-3 {
        margin-left: 2px;
        background: #FFF0F7;
        color: #F61E54;
    }

    .ill-tabs-4 {
        margin-left: 2px;
        background: #FFF7E6;
        color: #D46B08;
    }

    .ill-tabs-5 {
        margin-left: 2px;
        background: #F4FFE6;
        color: #A0BA01;
    }

    .ill-tabs-6 {
        margin-left: 2px;
        background: #ECEBFF;
        color: #AA63E2;
    }

    .ill-tabs-7 {
        margin-left: 2px;
        background: #E6F9FF;
        color: #4D86DA;
    }

    .word-right {
        justify-content: space-between;
        align-items: center;
    }

    .btn {
        background: #F0F3FF;
        color: #607FF0;
        border: 0px;
        line-height: 26px;
        padding: 4px 8px 4px 8px;
    }

    .list-data {
        height: calc(100vh - 140px);
        overflow-y: auto;
    }
}
</style>