xiamen-sb-uniapp/pages/store-check/list.vue

<template>
    <view>
        <common-tabs :list='list' :current="current" @change='change' />
        <view class="p-top8">
            <template v-if="listData.length > 0">
                <view
                    class="mx3 my2 p3 bg-color-white box p-relative"
                    v-for="(item, index) in listData"
                    :key="item.id"
                    @click="handleDetail(item.id)"
                    @longpress="showMask(item.id,$event)"
                >
                    <common-mask :item="item" :maskId="maskId" @hide='maskId = 0' @del='handleDel(item.id)' />
                    <view class="d-flex j-between border-bottom pb-2 a-center">
                        <view class="text-color-b f-size-26">{{ item.spareName }}</view>
                        <my-badge
                            :text="statusMap[item.status]"
                            :status="dict[item.status]"
                        />
                    </view>
                    <view class="mt-2 d-flex j-between">
                        <view class="text-color-3 f-size-32 f-weight-bold">{{
                                item.storeName
                            }}</view>
                    </view>
                    <view class="f-size-26 text-color-6 f-weight-4 mt-2">{{
                            item.startTime
                        }}</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>
    </view>
</template>

<script>
export default {
    data() {
        return {
            list: [],
            current: 0,
            sbId: "",
            // 加载更多
            status: "loadmore",
            page: 1,
            limit: 10,
            type: "",
            loadMore: true,
            listData: [],
            statusMap: null,
            dict: null,
            maskId: 0,
        };
    },
    onPullDownRefresh() {
        // 请求结束取消刷新
        this.page = 1;
        this.loadMore = true;
        this.listData = [];
        this.initData();
        uni.stopPullDownRefresh();
    },
    onReachBottom() {
        if (this.loadMore) {
            this.page++;
            this.initData();
        }
    },
    onLoad(options) {
        this.sbId = options.sbId
        this.initData();
        this.statusMap = this.$DictCache.getLabelByValueMapByType(
            this.$DictCache.TYPE.STORE_CHECK_JOB_STATUS
        );
        this.list = [{ label: "全部", value: "" }].concat(
            this.$DictCache.getChildrenList(this.$DictCache.TYPE.STORE_CHECK_JOB_STATUS)
        );
        this.dict = this.$DictCache.COLOR.STORE_CHECK_JOB_STATUS;
    },
    onHide() {
        this.maskId = 0
    },
    methods: {
        showMask(id, e) {
            this.maskId = id
            // #ifdef H5
            e.preventDefault()
            // #endif
        },
        handleDel(id) {
            let that = this;
            let params = [];
            params.push(id);
            uni.showModal({
                title: "提示",
                content: "您确认删除吗?",
                success: (res) => {
                    if (res.confirm) {
                        this.$Http.deleteCheckJobs(params).then((res) => {
                            uni.showToast({ title: "删除成功" });
                            this.page = 1;
                            this.loadMore = true;
                            this.listData = [];
                            this.initData();
                        });
                    } else if (res.cancel) {
                    }
                },
            });
        },
        // 详情
        handleDetail(id) {
            // if (index == 0) {
            // 	uni.navigateTo({
            // 		url: '../check-add/check-add'
            // 	});
            // } else {
            // 	uni.navigateTo({
            // 		url: '../check-detail/check-detail'
            // 	});
            // }
            if (this.maskId != 0) return this.maskId = 0
            uni.navigateTo({
                url: "/pages/store-check/store-check-detail?detailId=" + id,
            });
        },
        // tab
        change(index) {
            this.current = index;
            if (index == 0) {
                this.type = "";
            } else {
                this.type = index;
            }
            this.page = 1;
            this.loadMore = true;
            this.listData = [];
            this.initData();
        },
        handleClick() {
            uni.navigateTo({
                url: "/pages/check-add/check-add-test",
            });
        },
        initData() {
            const that = this;
            that.status = "loading";
            this.$Http
                .getStoreCheckJobPage({
                    pageNum: this.page,
                    pageSize: this.limit,
                    sbId: this.sbId,
                    type: 1,
                    filter: 0,
                    status: this.type,
                })
                .then((res) => {
                    const data = res.data.rows;
                    if (data && data.length > 0 && data.length < that.limit) {
                        that.status = "nomore";
                        that.loadMore = false;
                    } else if (data.length == that.limit) {
                        that.status = "loadmore";
                    } else {
                        that.status = "nomore";
                    }
                    that.listData = [...that.listData, ...data];
                });
        },
    },
};
</script>

<style>
page {
    background-color: #f4f4f4;
}

.box {
    padding-right: 0;
    border-radius: 20rpx;
}
</style>