<template> <div> <mt-header title="领取记录"> <div slot="left" @click="goBack"> <mt-button icon="back"></mt-button> </div> </mt-header> <div> <div class="list-data" v-infinite-scroll="loadMore" :infinite-scroll-disabled="loading" infinite-scroll-distance="10" > <div class="content" v-for="item in detailInfo" :key="item.id"> <div class="title" ><span>{{item.medicalName}}</span></div> <div class="details"> <div class="item"> <label class="item-left">规格:</label> <label class="item-right">{{item.specs || '--'}}</label> </div> <div class="item"> <label class="item-left">领取数量:</label> <label class="item-right">{{item.number || '--'}} {{item.unit}}</label> </div> <div class="item"> <label class="item-left">领取时间:</label> <label class="item-right">{{item.created || '--'}}</label> </div> <div class="item"> <label class="item-left">领取站点:</label> <label class="item-right">{{item.netName || '--'}}</label> </div> <div class="item"> <label class="item-left">站点类型:</label> <label class="item-right">{{item.netTypeName || '--'}}</label> </div> </div> </div> </div> <div class="loading" v-if="loading"> <span id="load-text">{{loadText}}</span> </div> <div v-if="noDataShow"> <NoData></NoData> </div> </div> </div> </template> <script> import {getUserCollectRecord} from '../utils/api'; import NoData from "./component/noData"; import { Toast } from 'mint-ui'; import { Indicator } from 'mint-ui'; export default { name: "collectRecords", components: {NoData}, data() { return { loading: false, detailInfo: [], loadText:'加载中...', noDataShow: false, param: { pageIndex: 0, pageSize: 10 } } }, methods: { getRecordInfo(callBack) { Indicator.open(); getUserCollectRecord(this.param).then(({data = {}}) => { const {dataList = []} = data.data this.detailInfo = this.detailInfo.concat(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 } Indicator.close(); callBack && callBack() }).catch(res => { Toast({ message: '系统异常,请联系客服!', duration: 2000 }); this.loading = false }).finally(() => { this.loading = false }) }, loadMore() { this.loading = true this.param.pageIndex += 1 this.getRecordInfo() }, goBack() { window.history.go(-1) }, }, beforeDestroy() { this.detailInfo = [] } } </script> <style scoped> .content { width: 90%; margin: 20px auto 0px; padding: 10px; border: 1px solid #F3F3F3; border-radius: 1rem; box-shadow: darkgrey 0px 2px 20px -10px; } .content .title { font-weight: bold; line-height: 30px; border-bottom: 1px solid #F3F3F3; } .content .details .item { line-height: 24px; } .content .details .item .item-right { float: right; } .list-data{ /*height: calc(100% - 40px);*/ max-height: calc(100vh - 40px); overflow-y: auto; } .loading{ width: 100%; text-align: center; } </style>