v3-lab-xcx/pages_student/integralManage/creditPoints.vue

<!--信用分-->
<template>
    <view id="creditPoints">
        <view class="top-title-box">
            <picker @change="bindPickerChange" :value="pickerIndex" :range="pickerList" range-key="name">
                <view class="top-title-button-box">
                    <view>{{pickerList[pickerIndex].name}}</view>
                    <img src="@/images/basicsModules/icon_jlfmx_xl.png">
                </view>
            </picker>
            <view class="top-title-null-p"></view>
            <view class="top-title-get" v-if="pickerIndex == 0 || pickerIndex == 1">总获得：<span>{{obtainPoints}}</span></view>
            <view class="top-title-exchange" v-if="pickerIndex == 0 || pickerIndex == 2">总减扣：<span>{{deductPoints}}</span></view>
            <view class="top-title-img" @click="shadeTypeButton">
                <img src="@/images/basicsModules/icon_jlfmx_bz.png">
            </view>
        </view>
        <scroll-view scroll-y @scrolltolower="scrollGet" class="for-max-box">
            <view class="for-min-box" v-for="(item,index) in infoList" :key="index">
                <view class="for-top-title">
                    <view class="left-box">
                        <picker mode="date" fields="month" @change="bindDateChange">
                            <view class="for-top-title-time">{{item.yearMonth}}</view>
                        </picker>
                    </view>
                    <view class="right-box" @click.stop="moonClick(item)">
                        <img class="img-one" v-if="item.unfoldType" src="@/images/basicsModules/icon_06.png">
                        <img class="img-two" v-if="!item.unfoldType" src="@/images/basicsModules/icon_04.png">
                        <view class="for-top-title-null"></view>
                        <view class="for-top-title-get" v-if="pickerIndex == 0 || pickerIndex == 1">获得：{{item.obtainPoints}}</view>
                        <view class="for-top-title-border" v-if="pickerIndex == 0"></view>
                        <view class="for-top-title-exchange" v-if="pickerIndex == 0 || pickerIndex == 2">减扣：{{item.deductPoints}}</view>
                    </view>
                </view>
                <view class="for-list-min-box" v-for="(minItem,indexTwo) in item.elPointsLoginfoList" :key="indexTwo" v-if="item.unfoldType">
                    <img src="@/pages_student/images/icon_wd_jlf.png">
                    <view class="time-box">
                        <view>{{minItem.messageContent}}</view>
                        <view>{{minItem.createTime}}</view>
                    </view>
                    <view class="num-p" :class="minItem.points>0?'colorA':(minItem.points<0?'colorB':'')">{{minItem.points>0?'+'+minItem.points:minItem.points}}</view>
                </view>
                <view class="for-null-title" v-if="!item.elPointsLoginfoList[0]">暂无数据</view>
            </view>
            <img class="null-img" v-if="!infoList[0]" src="@/images/basicsModules/null-data-1.png">
        </scroll-view>
        <view class="shade-max-box" v-if="shadeType">
            <view class="shade-big-box">
                <view class="shade-title-box">
                    <view class="img-box"></view>
                    <view class="title-view">信用分规则</view>
                    <view class="img-box" @click="shadeTypeButton">
                        <img src="@/images/basicsModules/icon_jlfgz_gb.png">
                    </view>
                </view>
                <view class="shade-text-max-box">
                    <view class="shade-text-title title-colorA">获得</view>
                    <view class="shade-text-p">满足信用合格分获取条件，获得信用合格分;完成违规处理恢复信用分。</view>
                    <view class="shade-text-title title-colorB">减扣</view>
                    <view class="shade-text-p">违规扣分；及时进行违规处理，通过在安全学习与考试一体机学习、考试、做题等方式恢复。</view>
                </view>
                <view class="shade-button" @click="shadeTypeButton">知道了</view>
            </view>
        </view>
    </view>
</template>

<script>
    import { monthAllCount, monthCountPoints } from '@/api/apiDemo/index.js'
    export default {
        name: "creditPoints",
        data() {
            return {
                //遮罩层开关状态
                shadeType:false,
                //选项数据
                pickerList:[
                    {
                        name:"全部",
                        value:"0",
                    },
                    {
                        name:"获得",
                        value:"1",
                    },
                    {
                        name:"减扣",
                        value:"2",
                    },
                ],
                pickerIndex:0,
                //用户数据
                deductPoints:"",
                obtainPoints:"",
                //列表数据
                infoList:[],
                getData:{
                    page:1,
                    pageSize:20,
                    getType:true,
                    nullDataType:true,
                },
                //年月
                yearMonth:"",
            }
        },
        onPullDownRefresh(){
            this.page = 1;
            this.infoList = [];
            this.yearMonth = "";
            this.getList();
        },
        onLoad() {
            this.getMonthAllCount();
            this.getList();
        },
        methods: {
            //遮罩层开关
            shadeTypeButton(){
                this.shadeType = !this.shadeType;
            },
            //分类选择触发
            bindPickerChange(data){
                this.page = 1;
                this.infoList = [];
                this.pickerIndex = data.detail.value;
                this.getList();
            },
            //时间选择触发
            bindDateChange(data){
                this.page = 1;
                this.infoList = [];
                this.yearMonth = data.detail.value;
                this.getList();
            },
            //月数据展开关闭
            moonClick(item){
                item.unfoldType = !item.unfoldType;
            },
            //滚动事件
            scrollGet(){
                if(this.getData.getType){
                    this.getData.page += 1;
                    this.getList();
                }
            },
            //获取总值
            async getMonthAllCount(){
                let obj = {
                    pointsType:"1"
                };
                const {data} = await monthAllCount(obj);
                if(data.code==200){
                    this.deductPoints = data.data.deductPoints;
                    this.obtainPoints = data.data.obtainPoints;
                }
            },
            //获取列表数据
            async getList(){
                let self = this;
                let obj = {
                    bonusType:this.pickerIndex,
                    pointsType:"1",
                    yearMonth:this.yearMonth,
                    pageNum:this.getData.page,
                    pageSize:this.getData.pageSize,
                };
                const {data} = await monthCountPoints(obj);
                if(data.code==200){
                    for(let i=0;i<data.rows.length;i++){
                        data.rows[i].unfoldType = true
                    }
                    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;
                        }
                    }
                    wx.stopPullDownRefresh();
                }
            },
        }
    }
</script>

<style lang="stylus" scoped>
    #creditPoints{
        height:100%;
        width:100%;
        display flex
        flex-direction column
        .top-title-box{
            height:100rpx;
            background #fff
            border-bottom:20rpx solid #f5f5f5;
            display flex
            .top-title-button-box{
                width:150rpx;
                height:60rpx;
                display flex
                border-radius:30rpx;
                background #0183fa
                margin:20rpx;
                view{
                    flex:1;
                    color:#fff;
                    text-align center
                    font-size:26rpx;
                    line-height:60rpx;
                }
                img{
                    width:24rpx;
                    height:14rpx;
                    margin:24rpx 25rpx 0 0;
                }
            }
            .top-title-null-p{
                flex:1;
            }
            .top-title-get{
                line-height:100rpx;
                font-size:26rpx;
                margin-right:20rpx;
            }
            .top-title-exchange{
                line-height:100rpx;
                font-size:26rpx;
            }
            .top-title-img{
                height:100rpx;
                width:100rpx;
                img{
                    width:28rpx;
                    height:28rpx;
                    margin:38rpx 36rpx 0 36rpx;
                }
            }
        }
        .for-max-box{
            flex:1;
            overflow-y scroll
            .for-min-box{
                .for-top-title{
                    background #e0e0e0
                    line-height:80rpx;
                    display: flex
                    font-size:26rpx;
                    color:#333;
                    padding:0 20rpx;
                    .left-box{
                        .for-top-title-time{
                            margin-right:20rpx;
                        }
                    }
                    .right-box{
                        display flex
                        flex:1;
                        .img-one{
                            margin-top:36rpx;
                            width:24rpx;
                            height:12rpx;
                        }
                        .img-two{
                            margin-top:28rpx;
                            width:12rpx;
                            height:24rpx;
                        }
                        .for-top-title-null{
                            flex:1;
                        }
                        .for-top-title-get{

                        }
                        .for-top-title-border{
                            height:26rpx;
                            margin:28rpx 18rpx;
                            width:1rpx;
                            background #999
                        }
                        .for-top-title-exchange{

                        }
                    }
                }
                .for-list-min-box{
                    // height:110rpx;
                    display flex
                    padding:0 20rpx;
                    background #fff
                    border-top:1rpx solid #e0e0e0;
                    img{
                        margin:42rpx 25rpx 0 0;
                        height:26rpx;
                        width:30rpx;
                    }
                    .time-box{
                        flex:1;
                        view:nth-child(1){
							padding-top:6px;
                            line-height:30rpx;
                            margin-top:13rpx;
                            font-size:24rpx;
                            color:#333;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 3;
							overflow: hidden;
                        }
                        view:nth-child(2){
                            line-height:39rpx;
                            font-size:24rpx;
                            color:#999;
							padding-bottom:6px;
                        }
                    }
                    .num-p{
						margin-left:20rpx;
                        line-height:110rpx;
                        font-size:24rpx;
                        font-weight:700;
                    }
                    .colorA{
                        color:#0b8d0e;
                    }
                    .colorB{
                        color:#ff9300;
                    }
                }
                .for-null-title{
                    text-align:center;
                    line-height:110rpx;
                    color:#999;
                    font-size:24rpx;
                }
            }
            .null-img{
                display block
                width:276rpx;
                height:321rpx;
                position absolute
                top:100rpx;
                left:274rpx;
            }
        }
        .shade-max-box{
            width:100%;
            height:100%;
            position fixed
            top:0;
            left:0;
            background rgba(0,0,0,0.4)
            .shade-big-box{
                width:528rpx;
                height:560rpx;
                border-radius:10rpx;
                background #fff
                position absolute
                left:50%;
                top:50%;
                margin-left:-264rpx;
                margin-top:-280rpx;
                display flex
                flex-direction column
                .shade-title-box{
                    height:88rpx;
                    display flex
                    .title-view{
                        font-size:28rpx;
                        color:#333;
                        flex:1;
                        text-align center;
                        line-height:88rpx;
                    }
                    .img-box{
                        width:68rpx;
                        height:68rpx;
                        img{
                            height:28rpx;
                            width:28rpx;
                            margin:20rpx;
                        }

                    }
                }
                .shade-text-max-box{
                    flex:1;
                    margin:0 37rpx;
                    .shade-text-title{
                        line-height:28rpx;
                        font-size:28rpx;
                        margin-bottom:24rpx;
                    }
                    .shade-text-p{
                        font-size:24rpx;
                        margin-bottom:24rpx;
						overflow :hidden;
                    }
                    .title-colorA{
                        color:#0B8D0E;
                    }
                    .title-colorB{
                        color:#FF9300;
                    }
                }
                .shade-button{
                    width:300rpx;
                    height:60rpx;
                    text-align center;
                    line-height:60rpx;
                    color:#fff;
                    font-size:28rpx;
                    background #0183FA
                    border-radius:10rpx;
                    margin:0 auto 40rpx;
                }
            }
        }
    }

</style>