v3-lab-xcx/pages_student/views/integralManage/pointsRecord.vue

<!-- 积分记录 -->
<template>
    <view id="pointsRecord">
        <view class="top-max-box">
            <img src="@/pages_student/images/icon_wd_jlf.png">
            <view>当前积分：</view>
            <view>{{recordNum}}</view>
        </view>
        <scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
            <view class="for-info-box" v-for="(item,index) in infoList" :key="index" @click="goInfoPage(item)">
                <view class="left-box">
                    <view>{{item.remark}}</view>
                    <view>{{item.createTime}}</view>
                </view>
                <view class="right-box" :class="{'colorA':item.recordType.code == 1}">{{item.recordType.code==1?'+':'-'}}{{item.points}}</view>
            </view>
            <view class="get-null-box" v-if="getData.nullDataType">暂无更多数据</view>
        </scroll-view>
    </view>
</template>

<script>
    import { listMyApp,countMyApp } from '@/api/apiDemo/index.js'
    export default {
        data() {
            return {
                recordNum:"",
                infoList:[],
                //列表请求参数
                getData:{
                    page:1,
                    pageSize:20,
                    getType:true,
                    nullDataType:true,
                }
            }
        },
        onLoad() {
            this.clearData();
            this.countMyApp();
            this.getList();
        },
        methods: {
            //获取积分总数
            async countMyApp() {
                const {data} = await countMyApp()
                if(data.code == 200){
					if(data.data){
						this.recordNum = data.data;
					}else{
						this.recordNum = 0;
					}
                }
            },
            //清除
            clearData(){
                this.recordNum = "";
                this.infoList = [];
                this.getData.page = 1;
                this.getData.getType = true;
                this.getData.nullDataType = true;
            },
            //滚动事件
            scrollGet(){
                if(this.getData.getType){
                    this.getData.page += 1;
                    this.getList();
                }
            },
            //获取列表数据
            async getList(){
                let self = this;
                let obj = {
                    pageNum:this.getData.page,
                    pageSize:this.getData.pageSize,
                }
                const {data} = await listMyApp(obj)
                if(data.code==200){
                    if(self.page==1){
                        if(data.rows.length > 0 && data.rows.length == self.getData.pageSize){
                            self.infoList = data.rows;
                        }else if(data.rows.length > 0 && data.rows.length != self.getData.pageSize){
                            self.infoList = data.rows;
                            self.getData.getType = false;
                            self.getData.nullDataType = true;
                        }else{
                            self.getData.getType = false;
                            self.getData.nullDataType = true;
                        }
                    }else{
                        if(data.rows.length > 0 && data.rows.length == self.getData.pageSize){
                            self.infoList = self.infoList.concat(data.rows)
                        }else if(data.rows.length > 0 && data.rows.length != self.getData.pageSize){
                            self.infoList = self.infoList.concat(data.rows);
                            self.getData.getType = false;
                            self.getData.nullDataType = true;
                        }else{
                            self.getData.getType = false;
                            self.getData.nullDataType = true;
                        }
                    }
                }
            },
        }
    }
</script>

<style lang="stylus" scoped>
    #pointsRecord{
        height:100%;
        width:100%;
        display flex;
        flex-direction column
        .top-max-box{
            height:100rpx;
            display flex
            background :#fff;
            margin-bottom:20rpx;
            img{
                height:30rpx;
                width:30rpx;
                margin:35rpx 35rpx 35rpx 20rpx;
            }
            view:nth-child(2){
                line-height:99rpx;
                font-size:30rpx;
                color: #999999;
                width:150rpx;
            }
            view:nth-child(3){
                flex:1;
                line-height:99rpx;
                font-size:30rpx;
                color: #333333;
            }
        }
        .info-max-box{
            flex:1;
            overflow: scroll
            .for-info-box:nth-child(1){
                border:none;
            }
            .for-info-box{
                background #fff
                // height:120rpx;
                border-top:1rpx solid #F5F5F5;
                display flex
                .left-box{
                    margin-left:20rpx;
                    flex:1;
                    view:nth-child(1){
                        width:500rpx;
                        line-height: 30rpx;
                        font-size: 28rpx;
                        color: #333333;
                        margin-top:23rpx;
                    }
                    view:nth-child(2){
                        line-height: 20rpx;
                        font-size: 26rpx;
                        color: #999999;
                        margin:23rpx 0;

                    }
                }
                .right-box{
                    width:200rpx;
                    line-height:120rpx;
                    font-size: 28rpx;
                    text-align right;
                    margin-right:20rpx;
                }
                .colorA{
                    color:#12AE2B;
                }
            }
            .get-null-box{
                height:100rpx;
                line-height:100rpx;
                color:#999;
                text-align center
            }
        }
    }
</style>