zoukankan      html  css  js  c++  java
  • mint-ui下拉加载(项目实例)

    <template>
    <div class="share">
    <div class="header">
    <div class="top-content">
    <span class="iconfont icon-fanhui1" @click="back"></span>
    <span>{{appMenuName}}</span>
    <span class="iconfont"></span>
    <!-- <span class="iconfont icon-nian2" @click="openPicker"></span> -->
    </div>
    </div>
     
    <!-- <search-new @search='search'></search-new> -->
     
    <div class="scrollLoad">
    <ul
    infinite-scroll-immediate-check="false"
    infinite-scroll-listen-for-event
    v-infinite-scroll="loadMore"
    infinite-scroll-disabled="loading"
    infinite-scroll-distance="80"
    infinite-scroll-throttle-delay="200">
    <li class="item" v-for='(item,index) in listData' :key="index">
    <div class="itemCardTime">
    <span class="iconfont icon-daishenpi"></span>
    <span class="date">
    <span class="date-day">
    {{item.lastApprovalTime|selectDate}}
    </span>
    </span>
    </div>
    <div class="itemCard" @click='selectItem(item)'>
    <div class="top">
    <span class="font">{{item.name}}</span>
    <span class="date">
    <span class="date-day">
    <span>申请人</span>:<span>{{item.applyUserName}}</span>
    </span>
    </span>
    </div>
    <div class="collect"><span>申请原因</span>:<span class="reasonDetail">{{item.content}}</span></div>
    <div class="bottom">
    <span class="font">{{funStatus(item.status,item.approvalUserName)}}</span>
    <span class="date">
    <span class="iconfont icon-return-copy"></span>
    </span>
    </div>
    </div>
    </li>
    </ul>
    <div class="loadingStyle" v-show="loading==true">
    <loading-pull></loading-pull>
    </div>
    </div>
    <router-view :selectIt='selectItemData' :approvalTypeV='approvalTypeV' @backParent="backParent"></router-view>
    <mt-datetime-picker
    ref="picker"
    type="date"
    :cancelText='cancelText'
    :confirmText='confirmText'
    year-format="{value}"
    :startDate="startDate"
    v-model="valueYear" @confirm="handleConfirm">
    </mt-datetime-picker>
    </div>
    </template>

    <script>
    import Vue from 'vue'
    import headx from 'base/head/head-back'
    import {mixins} from 'assets/js/mixins'
    import { DatetimePicker } from 'mint-ui';
    Vue.component(DatetimePicker.name, DatetimePicker);
    import i18n from 'assets/js/vi18n/i18n.js'
    import searchNew from 'base/search_new/search'
    import { InfiniteScroll } from 'mint-ui';
    Vue.use(InfiniteScroll)
    import loadingPull from 'base/loading/loadingPull'
    import {Toast} from 'mint-ui';
    export default {
    mixins: [mixins],
    i18n,
    data() {
    return {
    timeNow:new Date().getFullYear(),
    valueYear:new Date(),
    startDate: new Date('2018'),
    listData: [],
    selectItemData: null,
    cancelText:'',
    confirmText:'',
    curPage: 1,
    pageSize: 10,
    loading:false,
    totalPages:1,
    lastPage:false,
    }
    },
    components: {
    headx,
    loadingPull,
    searchNew
    },
    props: {
    appMenuName: {
    type: null
    },
    approvalTypeV: {
    type: Number
    }
    },
    methods: {
    handleConfirm(){
    this.timeNow=new Date(this.valueYear).getFullYear();
    this._getData();
    },
    openPicker() {
    this.$refs.picker.open();
    },
    backParent(){
    /**审批后跳回 */
    this.approvalTypeV = 0;
    this.listData = [];
    this.curPage = 1;
    this._getData();
    },
    back() {
    this.$router.push({
    path: `/onlineApproval`
    });
    },
    search(val){
    let content=val.replace(/^s+|s+$/g,"");
    this._getData(content);
    },
    selectItem(item){
    this.selectItemData=item;
    this.$router.push({
    path: `/onlineApproval/onlineApprovalList/`+item.documentTypeCode
    });
    },
    _getData() {
    let vm = this;
    var url = '/workbench/myList';
    var status=1;
    if(this.approvalTypeV==0){
    status=1;
    }else{
    status=2;
    }
    let params = {
    status:status,//1未审批2通过3驳回
    curPage: vm.curPage - 1,
    pageSize: vm.pageSize
    }
    this.ajaxSend(url, params).then(res => {
    if(res.code==='00000000'){
    if(res.payload.results.workbenchs.numberOfElements>0){
    let dataList = res.payload.results.workbenchs.content;
    vm.totalPages = res.payload.results.workbenchs.totalPages;
    for (let i = 0; i < dataList.length; i++) {
    vm.listData.push(dataList[i]);
    }
    }
    }
    })
    },
    loadMore() {
    let vm=this;
    if (vm.lastPage===true) {
    return false;
    }
    vm.loading = true;
    vm.curPage = vm.curPage + 1;
    if(vm.curPage > vm.totalPages+1){
    vm.loading = false;
    setTimeout(() => {
    Toast('已加载完所有数据');
    //已经超出页码范围,标记不能再加载
    vm.lastPage = true;
    return false;
    },500)
    }else{
    vm._getData();
    setTimeout(() => {
    vm.loading = false;
    }, 2500);
    }
    },
    funStatus(status,userName){
    if(status===0||status===1){
    return `等待${userName}审批`;
    }else if(status===2){
    return `审核通过`
    }else if(status===3){
    return `被${userName}驳回`;
    }
    },
    },
    created() {
    this._getData();
    },
    filters: {
    selectDate(value) {
    if (value < 60) {
    return value
    } else {
    var oDate = new Date(value);
    return oDate.getFullYear() + '/' + (oDate.getMonth() + 1 > 9 ? oDate.getMonth() + 1 : '0' + (oDate.getMonth() + 1)) + '/' + (oDate.getDate() > 9 ? oDate.getDate() : '0' + oDate.getDate());
    }
    },
    }
    }
    </script>

    <style scoped lang="stylus">
    @import '~assets/stylus/veriable.styl'
    @import "~assets/stylus/mixin.styl"
    .share
    position absolute
    top 0
    bottom 0
    left 0
    right 0
    z-index 15
    background $color-background
    .header
    width 100%
    background $color-background-head
    border-bottom .0625rem solid #dadada
    text-align: center
    color #000
    .top-content
    height 3.125rem
    padding-top .625rem
    width 100%
    display flex
    justify-content space-between
    align-items center
    .iconfont
    padding 0.625rem
    width 3.75rem
    color #bfbfbf
    font-size .875rem
    font-weight normal
    .scrollLoad
    position absolute
    overflow hidden
    width 100%
    top 3.2rem
    bottom 0
    background #f7f8f8
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    ul
    padding 0 0.625rem 1rem 0.625rem
    .item
    display flex
    flex-direction column
    margin 0.9375rem 0
    position relative
    .itemCardTime
    padding-bottom .5rem
    .itemCard
    background white
    border 1px solid #eaeaea
    border-radius .375rem
    padding .8rem
    .top
    display flex
    justify-content space-between
    margin-bottom 0.75rem
    .font
    color black
    font-size 1rem
    no-wrap()
    .date
    display flex
    align-items center
    font-size 0.875rem
    color #bfbfbf
    .bottom
    display flex
    justify-content space-between
    padding 0.75rem 0 0 0
    border-top 1px solid #eaeaea
    .font
    color #f7540d
    font-size 1rem
    no-wrap()
    .date
    display flex
    align-items center
    font-size 0.875rem
    color #bfbfbf
    .collect
    margin .5rem 0 .3125rem 0
    font-size .9375rem
    color #333
    .reasonDetail
    line-height 1.5rem
    word-break: break-all
    .circle
    position absolute
    width 0.625rem
    height 0.625rem
    border-radius 50%
    background #7ac143
    left -1.25rem
    top 0.25rem

    </style>
    <style lang="stylus">
    .picker-items>.picker-slot:nth-child(2)
    display none
    .picker-items>.picker-slot:nth-child(3)
    display none
    </style>


  • 相关阅读:
    JavaScript 为字符串添加样式 【每日一段代码80】
    JavaScript replace()方法 【每日一段代码83】
    JavaScript for in 遍历数组 【每日一段代码89】
    JavaScript 创建用于对象的模板【每日一段代码78】
    html5 css3 新元素简单页面布局
    JavaScript Array() 数组 【每日一段代码88】
    JavaScript toUTCString() 方法 【每日一段代码86】
    位运算
    POJ 3259 Wormholes
    POJ 3169 Layout
  • 原文地址:https://www.cnblogs.com/cx709452428/p/9228908.html
Copyright © 2011-2022 走看看