sooka_consult_uniapp/pages/specialService/financialInfrastructure/financialInfrastructure.vue

<template>
    <!-- 金融基建列表 -->
    <view class="container">
        <view class="rnwdList">
            <view class="list" @tap="goDetails(item.id)" v-for="(item, index1) in dataSource" :key="index1">
                <span class="listTitle">{{ item.titleName }}</span>

                <view class="onePic" v-if="item.pictureList != null && item.pictureList.length == 1">
                    <image :src="loadImgSrcLocalhost(item2)" v-for="(item2, index2) in item.pictureList" :key="index2">
                    </image>
                </view>
                <view class="twoPic" v-if="item.pictureList != null && item.pictureList.length == 2">
                    <image :src="loadImgSrcLocalhost(item2)" v-for="(item2, index2) in item.pictureList" :key="index2">
                    </image>
                </view>
                <view class="threePic" v-if="item.pictureList != null && item.pictureList.length == 3">
                    <image :src="loadImgSrcLocalhost(item2)" v-for="(item2, index2) in item.pictureList" :key="index2">
                    </image>
                </view>
                <view class="threePic" v-if="item.pictureList != null && item.pictureList.length > 3">
                    <image :src="loadImgSrcLocalhost(item2)" v-for="(item2, index2) in item.pictureList"
                           v-if="index2 < 3" :key="index2"></image>
                </view>

                <view class="jlSj">
                    <view class="ck">
						<span>
							<em class="iconfont icon-chakan"></em>
							{{ item.likeNum }}
						</span>
<!--                        <span>-->
<!--							<em class="iconfont icon-shoucang"></em>-->
<!--							{{ item.watchNum }}-->
<!--						</span>-->
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import { list ,getDetails} from '@/api/specialService/financialInfrastructure.js';
    export default {
        data() {
            return {
                dataSource: [],
                // 数据总量
                total: 0,
                queryParams: {
                    // 当前页
                    pageNum: 1,
                    // 每页数据量
                    pageSize: 10,
                },
                loading: false,
            }
        },
        /**
         * 生命周期函数--监听页面加载
         */
        onLoad(options) {
            this.getList(1)
        },
        onReachBottom(){
            let pageNum = this.queryParams.pageNum
            let pageSize = this.queryParams.pageSize
            let total = this.total
            if(pageNum * pageSize >= total){
                uni.showToast({
                    title:'暂无更多数据'
                })
                return
            } else {
                this.queryParams.pageNum += 1;
                this.getList(this.queryParams.pageNum)
            }
        },
        methods: {
            goDetails(id) {
                getDetails(id).then(res => {
                	let data = res.data
                	data.urls = data.pictureList
                	uni.navigateTo({
                		url: `/pages/common/articleDetail/articleDetail?data=${this.encodify(data)}`
                	});
                })
            },
            // 分页触发
            change(e) {
                this.getList(e.current);
            },
            // 获取数据
            getList(pageNum) {
                let params = {
                    pageSize: this.queryParams.pageSize,
                    pageNum: pageNum,
                }
                list(params).then(res => {
                    if (res.code == 200) {
                        this.dataSource = [...this.dataSource,...res.rows]
                        this.total = res.total
                    }
                })
            },
        }
    }
</script>

<style>
    @import './financialInfrastructure.css';
</style>