xiamen-sb-uniapp/components/my-page/my-page.vue

<template>
    <view class="main p-top8 " :class="checkBoxShow?'px3':''">
        <template v-if="listData.length > 0">
            <view v-for="(item, index) in listData" :key="index" 
						:class="checkBoxShow?'mb-3 bg-color-white pl-2':''" 
						style="border-radius: 20rpx;">
                <view
                    @click="myRowClick(item)"
                    @longpress="handleDel(item)"

                >
                    <u-checkbox v-model="item.isChecked" :name="item.id" shape="circle" @change="checkBoxCheck" v-if="checkBoxShow">
                        <slot name="pageRow" :recordModel="item" :rowShowParams="rowShowParams"></slot>
                    </u-checkbox>
                    <slot v-else name="pageRow" :recordModel="item" :rowShowParams="rowShowParams"></slot>
                </view>
            </view>
            <!-- 底部加载时的文字 -->
            <view class="py3">
                <u-loadmore :status="status" />
            </view>
        </template>
        <template v-else>
            <view class="empty">
                <u-empty text="暂无数据" mode="list"></u-empty>
            </view>
        </template>
    </view>
</template>

<script>
export default {
    props: {
        loadData: {
            type: Function,
            required: true
        },
        checkBoxShow: {
            type: Boolean,
            default: false
        },
        pageSize: {
            type: Number,
            default: 6
        },
        swipeAction: {
            type: Boolean,
            default: false
        },
        // 组件背景颜色
        swipeBgColor: {
            type: String,
            default: '#ffffff'
        },
        rowShowParams: {
            type: Object,
            default: () => {}
        },
        swipeOptions: {
            type: Array,
            default: () => [

            ]
        }
    },
    data() {
        return {
            // 加载更多
            status: 'loadmore',
            pageNum: 1,
            type: '',
            loadMore: true,
            listData: [],
            checkData: {}
        };
    },
    mounted() {
    },
    created() {
    },
    methods: {
        checkBoxCheck(checkItem) {
            if (checkItem.value) {
                this.checkData[checkItem.name] = checkItem.name
            } else {
                delete this.checkData[checkItem.name]
            }
        },
        initPage() {
            // 请求结束取消刷新
            this.pageNum = 1;
            this.loadMore = true;
            this.listData = [];
            this.initData();
        },
        pagePullDownRefresh() {
            // 请求结束取消刷新
            this.pageNum = 1;
            this.loadMore = true;
            this.listData = [];
            this.initData();
            uni.stopPullDownRefresh();
        },
        pageReachBottom() {
            if (this.loadMore) {
                this.pageNum++;
                this.initData();
            }
        },
        initData() {
            this.status = 'loading';
            const parameter = { pageNum: this.pageNum, pageSize: this.pageSize };
            let result = null
            // #ifdef MP-WEIXIN
            result = this.$parent[this.loadData.name](parameter)
            // #endif
            // #ifdef H5
            result = this.loadData(parameter)
            // #endif
            // #ifdef APP-PLUS
            result = this.loadData(parameter)
            // #endif
            if (
                (typeof result === 'object' || typeof result === 'function') &&
                typeof result.then === 'function'
            ) {
                result.then(res => {
                    const pages = res.pages;
                    const list = res.rows;
                    list.forEach(item => {
                        item.isChecked = false
                    })
                    // list.forEach(item => {
                    //     item.show = false;
                    // });
                    this.listData = this.listData.concat(list);
                    console.log(111, pages, this.pageNum, list, this.listData);
                    if (pages <= this.pageNum) {
                        this.status = 'nomore';
                        this.loadMore = false;
                    } else {
                        this.status = 'loadmore';
                    }
                });
            } else {
                uni.showToast({
                    title: 'data请使用方法',
                    icon: 'none'
                });
            }
        },
        // 使其他的列表选择隐藏
        // open(sel) {
        //     this.listData.map((item, idx) => {
        //         if (item.id === sel.id) {
        //             item.show = true;
        //         } else {
        //             item.show = false;
        //         }
        //     });
        // },
        myButtonClick(index, index1) {
            let record = null;
            this.listData.map((item, idx) => {
                if (item.id === index) {
                    record = item;
                }
            });
            this.$emit('buttonClick', record, index1)
        },
        myRowClick(item) {
            this.$emit('rowClick', item)
        },
        handleDel(item) {
            this.$emit('long', item)
        }
    }
};
</script>

<style lang="less">
page {
    background-color: #f4f4f4;
}
/deep/ .u-checkbox{
	 width: 100%!important;
}
 /deep/ .u-checkbox__label {
	width: 100%!important;
	margin-right: 0!important;
}
</style>