signed

QiShunwang

“诚信为本、客户至上”

vue+vant框架,上拉加载,下拉刷新代码使用

2021/1/28 17:05:38   来源:
<template>
    <div class="collectionBox" ref="wrapper">
        //司机信息
        <Driver/>
        <vant-tab v-model="active">
            <vant-tab title="新建任务">
                <van-pull-refresh v-model="refreshing01" @refresh="onRefresh01">
                    <van-list v-model="loadingt01" :finished="finished01"
                        :finished-text="finishedText01"
                        @load="onLoad01"
                        :immediate-check="false"
                    >
                    <van-empty class="custom" :image="imgSrc" description="没有新建任务" v-show="emptyShow01"></van-empty>
                    <div v-for="(item,index) in list01" :key="index" v-show="list01.length>0">
                        <div class="tackInfo">
                            <div class="taskDh">
                                <div class="name">
                                    任务单号:
                                    <span>{{item.taskId}}</span>
                                </div>
                                <van-button v-if="item.taskStatus==’2‘" color="#eec127">未开始</van-button>
                                <van-button v-if="item.taskStatus==’3‘" color="#27b783">采集中</van-button>
                                <van-button v-if="item.taskStatus==’4‘||tem.taskStatus==’5" color="#f56323">已结束</van-button>
                            </div>
                            <div class="planStart">
                                <span>开始时间:</span>
                                <span>{{item.startTime.replace(/-/g,'/')}}</span>
                            </div>
                            <div class="endTime">
                                <span>结束时间:</span>
                                <span>{{item.endTime.replace(/-/g,'/')}}</span>
                            </div>
                            <van-button type="primary" @click="seeDetailTodayClick(item,index)">查看详情</van-button>
                        </div>
                    </div>
                    </van-list>
                </van-pull-refresh>
            </vant-tab>

            <vant-tab title="历史任务">
                <van-pull-refresh v-model="refreshing02" @refresh="onRefresh02">
                    <van-list v-model="loadingt02" :finished="finished02"
                        :finished-text="finishedText02"
                        @load="onLoad02"
                        :immediate-check="false"
                    >
                    <van-empty class="custom" :image="imgSrc" description="没有历史任务" v-show="emptyShow01"></van-empty>
                    <div v-for="(item,index) in list02" :key="index" v-show="list02.length>0">
                        <div class="tackInfo">
                            <div class="taskDh">
                                <div class="name">
                                    任务单号:
                                    <span>{{item.taskId}}</span>
                                </div>
                                <van-button v-if="item.taskStatus==’2‘" color="#eec127">未开始</van-button>
                                <van-button v-if="item.taskStatus==’3‘" color="#27b783">采集中</van-button>
                                <van-button v-if="item.taskStatus==’4‘||tem.taskStatus==’5" color="#f56323">已结束</van-button>
                            </div>
                            <div class="planStart">
                                <span>开始时间:</span>
                                <span>{{item.startTime.replace(/-/g,'/')}}</span>
                            </div>
                            <div class="endTime">
                                <span>结束时间:</span>
                                <span>{{item.endTime.replace(/-/g,'/')}}</span>
                            </div>
                            <van-button type="primary" @click="seeDetailHistoryClick(item,index)">查看详情</van-button>
                        </div>
                    </div>
                    </van-list>
                </van-pull-refresh>
            </vant-tab>

             
        </vant-tabs>
    </div>
</template>
<script>
    import{ PullRefresh,List, Ceil, Tab, Tabs,Button, Empty} from "vant";
    import collection from "@untils/collection.js";
   export default{
       components:{
           [PullRefresh.name]:PullRefresh,
           [List.name]:List,
           [Ceil.name]:Ceil,
           [Tab.name]:Tab,
           [Tabs.name]:Tabs,
           [Button.name]:Button,
           [Empty.name]:Empty,
           [Collapse.name]:Collapse
       },
    data(){
        retrun{
            //新建任务
            list01:[],//
            loading01:false,//上拉加载
            finished01:false,//没有内容状态
            refreshing01:false,//下拉刷新
            finishedText01:"",
            active:0,
            uesrAll:"",
            imgSrc:require("@/assets/images/u77.svg"),
            dataList:[],//今日任务
            driverInfo:[],//存放当个任务信息
            emptyShow01:false,//新建任务
            currentPage01:0,//当前页面的内容
            totalPage01:0//总页数
            
            //历史任务
            list02:[],
            loading02:false,//上拉加载
            finished02:false,//没有内容状态
            refreshing02:false,//下拉刷新
            finishedText02:"",
            currentPage02:0,//当前页面的内容
            totalPage02:0//总页数
            
        }
    },
    //使用缓存,这里不能使用mounted钩子
    //在App.vue中 
    //<keep-alive include="collection,mapRouted">
        // <router-view/>
    // </keep-alive>


    
    activated(){
        let that = this;
        that.currentPage02 = 0;
        that.list02 = [];
        (that.finishedText02=""),that.onLoad02();

        that.currentPage01 = 0;
        that.list01 = [];
        (that.finishedText01=""),that.onLoad01();

    },
    methods:{
        collectionTodayClick(){
            if(this.$store.state.userInfo.uerAll){
                this.uesrAll = JSON.parse(this.$store.state.userInfo.userAll);
            }
            let driver = {
                collectDriver:this.userAll.driver,
                vehicleNumber:this.userAll.vehicleNumber
            }
            collection.collectionToday(driver).then(response=>{
                if(response.data.data.dataList.length>0){
                    this.dataList = response.data.data.dataList;
                }
            })
        },
        //新建上拉加载
        onLoad01(){
            let that =this;
            that.currentPage01+=1;
            if(that.$store.state.userInfo.userAll){
                that.userAll = JSON.parse(that.$store.state.userInfo.userAll);
            }
            let driver = {
                collectDriver:that.userAll.driver,
                vehicleNumber:that.userAll.vehicleNumber,
                page:that.currentPage01,
                limit:5
            }
            collection.collectionToday(driver).then(response=>{
                if(response.data.data.dataList.length>0){
                    if(that.refreshing01){
                        that.list01 = [];
                        that.refreshing01 = false;
                    }
                    that.totalPage01 = response.data.data.pageInfo.total;
                    that.list01 = that.list01.concat(response.data.data.dataList);
                    that.loading01 = false;
                    that.finished01= false;
                    that.finishedText01 = "没有更多数据";
                    that.emptyShow01 = false;
                    if(that.list01.length>=that.totalPage01){
                        that.finished01 = true;
                    }
                }else{
                    that.finished01 = true;
                    that.refreshing01 = false;
                    that.emptyShow01 = true;
                }
            })

        },
        //历史上拉加载
        onLoad02(){
            let that =this;
            that.currentPage02+=1;
            if(that.$store.state.userInfo.userAll){
                that.userAll = JSON.parse(that.$store.state.userInfo.userAll);
            }
            let driver = {
                collectDriver:that.userAll.driver,
                vehicleNumber:that.userAll.vehicleNumber,
                page:that.currentPage02,
                limit:5
            }
            collection.collectionToday(driver).then(response=>{
                if(response.data.data.dataList.length>0){
                    if(that.refreshing02){
                        that.list01 = [];
                        that.refreshing02 = false;
                    }
                    that.totalPage02 = response.data.data.pageInfo.total;
                    that.list01 = that.list02.concat(response.data.data.dataList);
                    that.loading02 = false;
                    that.finished02= false;
                    that.finishedText02 = "没有更多数据";
                    that.emptyShow02 = false;
                    if(that.list02.length>=that.totalPage01){
                        that.finished02 = true;
                    }
                }else{
                    that.finished02 = true;
                    that.refreshing02 = false;
                    that.emptyShow02 = true;
                }
            })
        },
        //新建下拉刷新
        onRefresh01(){
            this.currentPage01 = 0;
            this.finished01 = false;
            this.loading01 = true;//下拉加载状态
            this.list01 = [];
            (this.finishedText01 =""),this.onLoad01();
        },
        //历史下拉刷新
        onRefresh01(){
            this.currentPage02 = 0;
            this.finished02 = false;
            this.loading02 = true;//下拉加载状态
            this.list02 = [];
            (this.finishedText02 =""),this.onLoad02();
        },
        seeDetailTodayClick(item,index){
            this.$store.commit("clearTaskOrderAll");
            this.driverInfo = [];
            this.driverInfo.push({
                deviced:item.deviced,
                takskId:item.takskId,
                startTime:item.startTime,
                endTime:item.endTime,
                taskStatus:item.taskStatus
            });
            this.$store.commit("setTaskOrderAll",this.driverInfo);
            this.$router.push({name:"XXX"});
        },
        seeDetailHistoryClick(item,index){
            this.$store.commit("clearTaskOrderAll");
            this.driverInfo = [];
            this.driverInfo.push({
                deviced:item.deviced,
                takskId:item.takskId,
                startTime:item.startTime,
                endTime:item.endTime,
                taskStatus:item.taskStatus
            });
            this.$store.commit("setTaskOrderAll",this.driverInfo);
            this.$router.push({name:"XXX"});
        }
    }
   }
</script>
<style lang="less" scoped>
.collectionBox{
    padding-top: 80px;
    /deep/.van-tab_text--ellipsis{
        background-color: rgba(47,47,47,1);
        color:#fff;
    }
    /deep/.van-tabs_nav{
        background-color: rgba(47,47,47,1);
        /deep/.van-tab_text--ellipsis{
            color:#fff;
        }
    }
    /deep/.van-tabs{
        height: 43px;
    }
    /deep/.van-tabs__wrap{
        position: fixed;
        z-index: 999;
        width: 100%;
    }
    /deep/.van-tabs__content{
        padding-top: 50px;
        padding-left:12px;
        padding-right: 12px;
    }
    /deep/.van-tab_pane{
        height: 600px;
    }
    /deep/.van-list{
        color:#fff;
    }
    /deep/.van-tabs__line{
        background-color: rgba(39,183,131,1);
        width:60px;
        height: 5px;
    }
    .taskInfo{
        display: flex;
        padding: 0 10px;
        flex-direction: space-between;
        margin-bottom: 10px;
        padding-top: 15px;
        border: 1px solid rgba(121,121,121,1);
        border-radius: 12px;
        color:#fff;
        .taskDh{
            display: flex;
            font-size:16px;
            .name{
                flex:1;
            }
            /deep/.van-button{
                width:75px;
                height:30px;
                background-color: rgba(238,193,39,1);
                border: none;
                border-radius: 50px;
            }
        }
        .planStart,.endTime{
            padding: 8px 0;
            font-size: 16px;
        }
        /deep/.van-button--primary{
            background-color: rgba(39,183,131,1);
            border-radius: 12px;
            margin-bottom: 3px;
            height: 40px;
        }
    }
}
</style>