zhdt-miniapp/pages/zf-task-list/index.vue

<template>
    <view class="home padding-bottom">
        <cu-custom class="home-custom" bgColor=".bg-sancolor"
                   bgImage="https://ahwgh.oss-cn-hangzhou.aliyuncs.com/enterprise/6525f808df760.png" :isBack="true">
            <block slot="content">任务列表</block>
        </cu-custom>
        <view class="padding-sm">
            <view class="cu-list menu margin-top taskDetail bg-white"
                  v-for="(item, index) in taskListData" :key="index">
                <view class="cu-item">
                    <view class="title text-black text-bold text-lg">
                        <text class="cuIcon-titles text-green"></text>
                        抽样区域：{{ item.sampleUnitName }}
                    </view>
                </view>
                <view class="content padding-sm detail solid-bottom">
                    <view>
                        <text class="text-green">
                            抽样批次数：
                            <text class="text-xl text-bold">{{ item.batchNumber }}</text>
                        </text>
                    </view>
                    <view>分配单位：{{ item.publishUnitName }}</view>
                    <view>分配人员：{{ item.publishName }}</view>
                    <view>分配时间：{{item.ahTasks.updateTime}}
                    </view>
                </view>
                <view class="tools" style="justify-content: space-between">
                    <view>
                    </view>
                    <view class="tool"
                          @tap="handleRandomCmp(item)">
                        <view class="text-blue text-df text-bold text">
                            抽取检查企业>>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="cu-load bg-green light text-sm" v-show="pageTotal > 0"
              :class="page > pageTotal?'over':'loading'"></view>
        <view class="radius shadow-warp bg-white margin-top text-lg" v-show="pageTotal === 0">
            <view class="cu-list menu-avatar">
                <view class="cu-item">
                    <view class="content">
                        <view class="text-sm text-center" style="justify-content: center;">
                            <text class="text-cut">
                                <text class="cuIcon-warn text-yellow margin-right-xs text-xl"></text>
                                未查询到相关数据
                            </text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>

</template>


<script>
    import {
        _zfyTaskList
    } from "./zf-task-list-model.js";

    export default {

        data() {
            return {
                page: 1,
                size: 10,
                pageTotal: 1,
                taskListData: [],
                curTask: {},
                taskId:null
            };
        },
        onReachBottom() {
        },
        onShow() {
            this.page = 1;
            this.pageTotal = 1;
            this.getCheckTaskListBySample();
        },
        onLoad(option){
            this.taskId = option.taskId;
        },
        methods: {
            getCheckTaskListBySample() {
                if (this.page === 1 || (this.page <= this.pageTotal)) {
                    _zfyTaskList.getCheckTaskListBySample({
                        pageNum: this.page,
                        pageSize: this.size,
                        taskId:this.taskId
                    }, res => {
                        const {data, message, code} = res;
                        if (code === 200) {
                            const {records, total} = data;
                            this.pageTotal = Math.ceil(total / this.size);
                            if (this.page === 1) {
                                this.taskListData = records;
                            } else {
                                this.taskListData = this.taskListData.concat(records);
                            }
                            this.page++;
                        } else {
                            this.$msg(message);
                        }
                    });
                }
            },
            handleRandomCmp(item) {
                uni.navigateTo({
                    url: "/pages/zf-task-list/sampleRandom/index?taskId=" + item.taskId +
                        "&sampleCheckId=" + item.id+"&batchNumber="+ item.batchNumber+"&sampleId="+item.sampleId
                });
            },
            formatDate(dateTime) {
                return dateTime.substring(0, 10)
            }

        }
    };
</script>

<style scoped>
    .detail view {
        height: 2em;
        line-height: 2em !important;
        border: none;
        color: gray;
    }

    .tools {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 30upx;

    }
    .tool .text{
        font-size: 1.1em!important;
    }

    .taskDetail {
        /*border: 1rpx solid #8799a3;*/
        box-shadow: 0 0 25upx #aaa;
        border-radius: 10rpx;
        overflow: hidden;
    }

    .btn-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .cu-tag {
        padding: 20upx;
        border-radius: 10upx;
    }

    label {
        padding-left: .5em;
    }

    .text-content {
        line-height: 2em;
        white-space: pre-line;
        text-align: left;
        max-height: 60vh;
        overflow-y: scroll;
        /*padding-bottom: 100rpx;*/
    }
</style>