epmet-work-h5-chengyang/src/views/assistance/index.vue

<template>
    <div class='pages' ref="scroll">
        <div class="scroll-box" ref="scroll-content">
            <van-tabs :active="active" sticky @change="hadelChangeTab">
                <van-tab title="待接单">
                    <card :tableData="list" @handleCLickReceive="handleCLickReceive"></card>
                </van-tab>
                <van-tab title="待处理">
                    <card :tableData="list"></card>
                </van-tab>
                <van-tab title="已完成">内容 3</van-tab>
            </van-tabs>
        </div>
        <van-dialog v-model="showRole" title="请选择接单身份" show-cancel-button>
            <van-radio-group v-model="radio">
                <van-radio name="1">单选框 1</van-radio>
                <van-radio name="2">单选框 2</van-radio>
            </van-radio-group>
        </van-dialog>
    </div>
</template>
<script>
import card from './card.vue'
import throttle from 'lodash/debounce'
import { getServiceListRcv, getServiceListProcess , getServiceListCompleted} from '@/api/service'
export default {
    data() {
        return {
            active: 0,
            clientHeight: false,
            scroll: null,
            pageNo: 1,
            pageSize: 4,
            list: [],
            total: 0,
            requestFlag:false,
            showRole:false,
            roleList:[
                "公益岗-马魁1",
                "志愿者-马魁1"
            ]
        };
    },
    created() {
        this.getServiceListRcv()
    },
    mounted() {
        this.clientHeight = document.documentElement.clientHeight; //可视高度
        console.log(this.clientHeight);
        this.$nextTick(() => {
            this.scroll = this.$refs.scroll;
            this.scroll.addEventListener('scroll', this.bottomScroll); //监听底部加载  		
        })
    },
    methods: {
        handleCLickReceive(item){
            this.showRole = true;
            console.log(item)
        },
        hadelChangeTab(e){
            this.list = [];
            this.pageNo = 1;
            this.active = e
            this.getTableData('tab')
        },
        //滚动加载
        bottomScroll: throttle(function () {
            let scrollTop = this.scroll.scrollTop; //滚动条距离顶部的高度
            let scrollHeight = this.scroll.scrollHeight; //滚动条的高度
            let clientHeight = this.scroll.clientHeight; //可视区域的高度
            if (scrollTop + clientHeight >= scrollHeight) {
                this.pageNo++;
                this.getTableData()
            }
        }, 500),

        getTableData(tab){
            if ((this.active === 0 && this.requestFlag) || (tab && this.active === 0)) {
                    this.getServiceListRcv();
                } else if ((this.active === 1 && this.requestFlag) || (tab && this.active === 1)) {
                    this.getServiceListProcess();
                }else if((this.active === 2 && this.requestFlag ) || (tab && this.active === 2)){
                    this.getServiceListCompleted()
                }
                if(!this.requestFlag){
                    this.$toast({
                        message: '没有更多数据了',
                        duration: 1000
                    })
                }
        },
        //获取待接单
        getServiceListRcv() {
            getServiceListRcv({
                pageNo: this.pageNo,
                pageSize: this.pageSize
            }).then(res => {
                console.log(res);
                this.total = res.total;
                this.requestFlag = res.data.list.length === this.pageSize;
               this.list =  this.list.concat(res.data.list)
            }).catch(err => {

            })
        },
        // 获取待处理
        getServiceListProcess() {
            getServiceListProcess({
                pageNo: this.pageNo,
                pageSize: this.pageSize
            }).then(res => {
                this.total = res.total;
                // this.requestFlag = res.length === this.pageSize;
                this.list = res.data.list;

            }).catch(err => {
            })
        },
        // 获取已完成
        getServiceListCompleted(){
            getServiceListCompleted({
                pageNo: this.pageNo,
                pageSize: this.pageSize
            }).then(res => {
                this.total = res.total;
                this.requestFlag = res.length === this.pageSize;
                this.list = this.list.concat(...this.list, ...res.list);
            }).catch(err => {
            })
        }
    },
    destroyed() {
        this.scroll.removeEventListener('scroll', this.bottomScroll);//移除滚动监听
    },
    components: { card },
    computed: {},
    watch: {}
}
</script>

<style lang='less' scoped>
:deep(.van-tabs__content){
    padding: 0 10px;
    box-sizing: border-box;
}
:deep(.van-dialog__content){
    padding: 0 10px;
    box-sizing: border-box;  
}
</style>