v3-lab-xcx/pages/views/information/informationInfo.vue

<!-- 测试 -->
<template>
    <view id="informationInfo">
        <scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
            <view class="for-info-box" v-for="(item,index) in infoList" :key="index">
                <view class="title-time">{{item.createTime}}</view>
                <view class="for-min-box">
                    <view>通知</view>
                    <rich-text :nodes="item.meaasgeContext"></rich-text>
                </view>
            </view>
			<!-- <view class="for-info-box" v-if="itemData.isApply==-1">
			    <view class="title-time">{{itemData.deptName}}</view>
			    <view class="for-min-box">
			        <view>通知</view>
			        <rich-text :nodes="itemData.newMessage"></rich-text>
			    </view>
			</view> -->
            <view class="get-null-box" v-if="getData.nullDataType &&itemData.isApply!=-1">暂无更多数据</view>
        </scroll-view>
    </view>
</template>

<script>
    import { groupIdList,groupListRead} from '@/api/apiDemo/index.js'
    export default {
        data() {
            return {
                //列表请求参数
                getData:{
                    page:1,
                    pageSize:20,
                    getType:true,
                    nullDataType:true,
                },
                itemData:{},
                infoList:[]
            }
        },
        onLoad(option) {
            this.itemData = JSON.parse(decodeURIComponent(option.item));

            //修改页面title
            if(this.itemData.sendUserId == '-2'){
                uni.setNavigationBarTitle({
                    title:this.itemData.sendName
                });
            }else if(this.itemData.isApply==-1){
				this.getRead()
			}else{
                uni.setNavigationBarTitle({
                    title:this.itemData.sendName+'-'+this.itemData.deptName
                });
            }
            this.getList();
        },
        methods: {
            //清除
            clearData(){
                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 getRead() {
				let self = this;
				const {data} = await groupListRead({messageId:this.itemData.messageId})
				if(data.code==200){

				}
			},
            //获取列表数据
            async getList(){
                let self = this;
                let obj = {
                    pageNum:this.getData.page,
                    pageSize:this.getData.pageSize,
                };
                const {data} = await groupIdList(this.itemData.sendUserId,obj);
                if(data.code==200){
                    let newDataList = data.rows;
                    for(let i=0;i<newDataList.length;i++){
                        let list = [];
                        if(!newDataList[i].createTime || newDataList[i].createTime == null){
                            newDataList[i].createTime = '';
                        }else{
                            list = newDataList[i].createTime.split(' ');
                            newDataList[i].createTime = list[0];
                        }
                        newDataList[i].meaasgeContext = unescape(newDataList[i].meaasgeContext);
						newDataList[i].meaasgeContext = newDataList[i].meaasgeContext.replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p')
														.replace(/<p>/ig, '<p style="font-size: 15px; line-height: 25px;">')
														.replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1')
														.replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/ig, '<img$1')
														.replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1')
														.replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/ig, '<img$1')
														.replace(/<img([\s\w"-=\/\.:;]+)/ig, '<img style="width: 100%;" $1');
                    }
                    if(self.page==1){
                        if(newDataList.length > 0 && newDataList.length == self.getData.pageSize){
                            self.infoList = newDataList;
                        }else if(newDataList.length > 0 && newDataList.length != self.getData.pageSize){
                            self.infoList = newDataList;
                            self.getData.getType = false;
                            self.getData.nullDataType = true;
                        }else{
                            self.getData.getType = false;
                            self.getData.nullDataType = true;
                        }
                    }else{
                        if(newDataList.length > 0 && newDataList.length == self.getData.pageSize){
                            self.infoList = self.infoList.concat(newDataList)
                        }else if(newDataList.length > 0 && newDataList.length != self.getData.pageSize){
                            self.infoList = self.infoList.concat(newDataList);
                            self.getData.getType = false;
                            self.getData.nullDataType = true;
                        }else{
                            self.getData.getType = false;
                            self.getData.nullDataType = true;
                        }
                    }
                }
            },
            formatDate(date) {
                let newDate = new Date(date);
                let YY = newDate.getFullYear() + '-';
                let MM = (newDate.getMonth() + 1 < 10 ? '0' + (newDate.getMonth() + 1) : newDate.getMonth() + 1) + '-';
                let DD = (newDate.getDate() < 10 ? '0' + (newDate.getDate()) : newDate.getDate());
                return YY + MM + DD;
            },
        }
    }
</script>

<style lang="stylus" scoped>
    #informationInfo{
        height:100%;
        display flex
        .info-max-box{
            flex:1;
            overflow: scroll
            background #f5f5f5;
            padding-bottom:20px;
            .for-info-box{
                border-radius: 10rpx;
                .title-time{
                    line-height:94rpx;
                    color:#CCCCCC;
                    text-align: center;
                    font-size: 24rpx;
                }
                .for-min-box{
                    background #ffffff
                    border-radius:10rpx;
                    padding:20rpx;
                    margin:0 20rpx;
                    view:nth-child(1){
                        line-height:44rpx;
                        margin-bottom:13rpx;
                        margin-left:5rpx;
                        color: #333333;
                        font-size: 30rpx;
                    }
                    view:nth-child(2){
                        line-height:42rpx;
                        font-size: 25rpx;
                        color: #666;
                    }
                    img{
                        width:100%;
                        height:100%;
						max-width 100%;
                    }
                    rich-text{
                        overflow hidden
                    }
                }
            }
            .get-null-box{
                height:100rpx;
                line-height:100rpx;
                color:#999;
                text-align center
            }
        }
    }
</style>