android-cloud-H5/pages/transferDuration/components/transferRecord.vue

<template>
    <div class="record">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" v-if="list.length">
            <van-row v-for="(item, index) in list" :key="index" class="record-item">
                <van-col span="24">
                    <div class="flex-jub record-border">
                        <div>
                            <span>单号：</span><span style="font-weight: bold;color: #CFD1D4;">{{ item.synthesisId }}</span>
                        </div>
                        <div>
                            <span>转移天数：</span><span style="font-weight: bold;color: #CFD1D4;">{{ item.transferDurationStr
                            }}</span>
                        </div>
                    </div>
                </van-col>
                <van-col span="24">
                    <div class="record-details-item">
                        <span>扣除天数：</span><span style="font-weight: bold;color: #CFD1D4;">{{ item.commissionStr }}</span>
                    </div>
                </van-col>
                <van-col span="24">
                    <div class="flex-jub record-details-item">
                        <div>
                            <span>主设备名称：</span><span style="font-weight: bold;color: #CFD1D4;">{{ item.transferDiskName
                            }}</span>
                        </div>
                        <div>
                            <span>设备天数：</span><span style="font-weight: bold;color: #CFD1D4;">{{ item.transferDurationStr
                            }}</span>
                        </div>
                    </div>
                </van-col>
                <van-col span="24">
                    <div class="flex-jub record-details-item">
                        <div>
                            <span>副设备名称：</span><span style="font-weight: bold;color: #CFD1D4;">{{ item.acceptDiskName
                            }}</span>
                        </div>
                        <div>
                            <span>设备天数：</span><span style="font-weight: bold;color: #CFD1D4;">{{ item.obtainTime }}</span>
                        </div>
                    </div>
                </van-col>
                <van-col span="24">
                    <div class="record-details-item">
                        <span>转移时间：</span><span style="font-weight: bold;color: #CFD1D4;">{{ item.transferDurationStr
                        }}</span>
                    </div>
                </van-col>
            </van-row>
        </van-list>
        <div v-else-if="pageLoading" style="height: 100%;position: relative;">
            <div style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">
                <van-loading type="spinner" />
            </div>
        </div>
        <div style="height: 100%;display: flex;align-self: center;justify-content: center;" v-else>
            <van-empty description="暂时没有数据哦~"></van-empty>
        </div>
    </div>
</template>

<script>
export default {
    name: 'transferRecord',
    props: {
        token: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            loading: false,
            finished: false,
            params: {
                pageNum: 1,
                pageSize: 10
            },
            list: [],
            total: 0,
            pageLoading: false
        };
    },

    mounted() {
        this.getTransferDurationRecode()
    },

    methods: {
        // 获取转移记录
        getTransferDurationRecode() {
            this.pageLoading = true
            this.$axios.$post('/resources/v5/time/transfer/getUserTransferRecode', { ...this.params }, { headers: { Authorization: this.token } }).then(res => {
                if (res.success) {
                    this.list.push(...res.data.list)
                    this.total = res.data.total
                    this.loading = false;
                    this.pageLoading = false
                }
            })
        },
        // 加载分页
        onLoad() {
            if (this.list.length >= this.total) {
                this.finished = true
                return
            }
            this.params.pageNum++
            this.getTransferDurationRecode()
        }
    },
};
</script>

<style lang="scss" scoped>
.record {
    padding: 0 16px;
    font-weight: 100;
    height: 100%;

    .record-item {
        margin-bottom: 16px;
        padding: 24px 24px 24px 16px;
        background: #2C2C2D;
        box-shadow: 0px 3px 7px 0px #1E2022;
        border-radius: 8px;
    }

    .record-details-item {
        margin-top: 12px;
    }

    .record-border {
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .flex-jub {
        display: flex;
        justify-content: space-between;

    }
}
</style>