tqApp-webView/learnMobile/record/record.vue

<template>
    <view class="registrationRecord-box">
        <!-- 头部筛选 -->
        <view class="page-head">

            <!-- <u-tabs :list="tablist"
                :itemStyle="{
                    width: '330rpx',
                    height: '80rpx'
                }"
                :activeStyle="{
                    color: '#4573FC'
                }"
                lineWidth="40"
                lineColor="#4573FC"
                @click="({ index }) => {
                    curNow = index
                    anewQueryMyList()
                }">
            </u-tabs> -->


            <u-row>
                <u-col :span="12" style="padding: 16rpx 24rpx;">
                    <view>
                        <view class="input-wapper">
                            <u--input
                                v-model="form.queryParam"
                                :disabled="false"
                                :clearable="true"
                                placeholder="请输入名称"
                                prefixIcon="search"
                                shape="circle"
                                prefixIconStyle="font-size: 22px;color: #909399"
                                inputAlign="center"
                                fontSize="28rpx"
                                disabledColor="#F2F2F2"
                                border="none"
                                :customStyle="{
                                    height: '62rpx',
                                    padding: '4rpx 28rpx',
                                    background: '#F2F2F2'
                                }"
                                @confirm="anewQueryMyList">
                            </u--input>
                        </view>
                    </view>
                </u-col>

            </u-row>
        </view>
        <view class="box-container">
            <!-- @click="handleDetaisl(item)" -->
            <view class="box-body" @click="handleDetaisl(item)" v-for="(item, index) in queryMyListdata" :key="index">
                <view class="name">{{ item.materialName }}</view>
                <view class="time">学习时间:{{ item.timeStr }}</view>
                <view class="time">学习用时:{{ item.useTimeStr }}</view>
            </view>
        </view>
        <view class="nodata-warp" v-if="!queryMyListdata.length">
					  <image :src="$getImages('/assetsMobile/images/no-data.png')" class="nodata-image"></image>
					</view>
        <u-loadmore :status="status" />
        <u-toast ref="uToast" />
        <u-calendar :show="calendarShow" mode="range" :defaultDate="defaultDate" :maxDate="maxDate" minDate="2023-10-01"
            monthNum="24" @confirm="calendarChange" @close="calendarShow = false"></u-calendar>
        <!-- 评价 -->
        <!-- <tq-rate-popup ref="ratePopupRef" @confirm="(e) => { postEvaluate(e) }"></tq-rate-popup> -->
    </view>
</template>
<script>
import { userMaterialRecord } from "@/api/learnMobile/index";

export default {
    data() {
        return {
            calendarShow: false, // 日历
            calendarStart: this.dayjs().subtract(6, 'day').format('YYYY-MM-DD'),// 开始时间
            calendarEnd: this.dayjs().subtract(0, 'day').format('YYYY-MM-DD'), // 结束时间
            defaultDate: [this.dayjs().subtract(6, 'day').format('YYYY-MM-DD'), this.dayjs().subtract(0, 'day').format('YYYY-MM-DD')],
            maxDate: this.dayjs().add(365, 'day').format('YYYY-MM-DD'),
            tablist: [
                { name: '未学习' },
                { name: '已学习' },
            ],
            curNow: 0,
            queryMyListdata: [],
            form: {
                queryParam: '',
                // createTimeBegin: '',//开始时间
                // createTimeEnd: '', //结束时间
                // applyType: '',//用车类型（字典编码：matter_type）
                // applyTypeName: '',
                // flowStatus: '',//总经办部门领导审核状态：1.审核通过、2.审核不通过
                // flowStatusName: '',
            },
            pageIndex: 1,
            total: 0,
            status: 'nomore' //loading nomore loadmore
        }
    },
    onShow(option) {
        this.queryMyListdata = []
        this.pageIndex = 1
        this.queryMyList();
    },
    methods: {
        // http://tq.5000v.com:8025/workflow/mobile/dealTask?definitionId=system_cost:3:eb004fdf-4f0d-11ef-86fb-005056bb2bc2&category=undefined&taskId=&withDealTask=false&processInstanceId=61aef549-4f18-11ef-86fb-005056bb2bc2&fromMobile=true&authtoken=eyJhbGciOiJIUzUxMiJ9.eyJjbGllbnQiOiJUUS1IVy1NT0JJTEUiLCJsb2dpbl91c2VyX2tleSI6IjFkMTY1OGYzLThhOWMtNDM5Yy04Yzk3LTYwMjQyMDg2MzUyOCJ9.C0QYkgPxsjTPLOFTwrK6xjlzLLGMInzChQ7M1Rm6IupwLEI8HA1EK0HKm6y1IfWekmiybOyc3WSx838sRem-aQ
        handleDetaisl({ id }) {
            uni.navigateTo({
                url: `/learnMobile/userMaterialRecord/details?id=` + id,
            })
        },
        handleRestartWorkflow(instance) {
            // http://localhost:9529/workflow/mobile/startFlow?id=system_cost%3A1%3A0cc5fb50-3dd3-11ef-80a8-000c29425992&processInstanceId=7455d6f9-4018-11ef-80a8-000c29425992&defaultTitle=%E8%B4%B9%E7%94%A8%E6%B5%81%E7%A8%8B_admin_20240712&name=%E9%87%8D%E6%96%B0%E5%8F%91%E8%B5%B7%E3%80%90%E8%B4%B9%E7%94%A8%E6%B5%81%E7%A8%8B%E3%80%91&restart=true
            // instance = {
            //     "procDefId": "system_cost:1:0cc5fb50-3dd3-11ef-80a8-000c29425992",
            //     "companyName": "重新发起【费用流程】",
            //     "id": "7455d6f9-4018-11ef-80a8-000c29425992"
            // }
            uni.navigateTo({
                url: `/pages/flow/diboot?routes=/workflow/mobile/startFlow&id=${instance.procDefId}&processInstanceId=${instance.processInstanceId}&defaultTitle=${instance.companyName}&name=${instance.companyName}&restart=true`,
            })
        },
        // handleTakeBack({ processInstanceId }) { //撤销
        //     uni.showModal({
        //         title: '',
        //         content: `确认撤销？`,
        //         showCancel: true,
        //         confirmText: '确定',
        //         success: async (res) => {
        //             if (res.confirm) {
        //                 let { code } = await recordtaskOperate({
        //                     processInstanceId,
        //                     taskOperate: 'cancel',
        //                     validTask: false,
        //                 })
        //                 if (code == 0) {
        //                     uni.showToast({
        //                         title: '取消成功',
        //                         icon: 'none',
        //                     })
        //                     this.anewQueryMyList()
        //                 }
        //             }
        //         }
        //     })
        // },
        calendarChange(e) {
            console.info('选择的时间', e)

            // 修改日期
            this.form.createTimeBegin = e[0]; // 开始时间
            this.form.createTimeEnd = e[e.length - 1]; // 结束时间
            this.defaultDate = [e[0], e[e.length - 1]]
            this.calendarShow = false;
            this.anewQueryMyList();
        },
        anewQueryMyList() {
            this.pageIndex = 1;
            this.queryMyListdata = [];
            this.queryMyList();
        },
        phoneCall(e) {
            uni.makePhoneCall({
                phoneNumber: e //仅为示例
            });
        },
        pointAddrParse(e) {
            let arr = JSON.parse(e)
            let arrStg = ''
            for (let item of arr) {
                arrStg += item.address + '-'
            }
            return arrStg.slice(0, -1);
        },
        sectionChange(index) {
            this.curNow = index;
            this.anewQueryMyList()
        },
        toRealMap(item) {
            let obj = {
                routeId: item.routeId,
                classId: item.classId,
                startAndEnd: item.startAndEnd
            }
            let objst = encodeURIComponent(JSON.stringify(obj))
            uni.navigateTo({
                url: '/newdriversub/setClassPlan/details?item=' + objst
            });
        },
        async queryMyList() {
            this.loading = 'loading'
            let { createTimeBegin, createTimeEnd } = this.form
            let obj = {
                ...this.form,
                page: this.pageIndex,
                size: 8,
                // createTimeBegin: createTimeBegin ? createTimeBegin + ' 00:00:00' : '',
                // createTimeEnd: createTimeEnd ? createTimeEnd + ' 23:59:59' : '',
                learnStatus: this.curNow //查询类型:学习状态:0.未学习 1.已学习


            }
            for (let key in obj) {
                if (obj[key] === '') delete obj[key]
            }
            let { data, code } = await userMaterialRecord(obj)
            if (code == "0") {

                let { list, total } = data
                this.queryMyListdata = this.queryMyListdata.concat(list)
                this.total = Number(total)
                this.loading = 'loadmore'
                if (this.queryMyListdata.length >= this.total) {
                    this.status = 'nomore'
                }
                console.log('数据', this.queryMyListdata)
            }
        },
        // 操作
        // async postEvaluate(e) {
        //     let { data, code, msg } = await evaluate(
        //         {
        //             evaluate: e.textarea,
        //             evaluateScore: e.rateNum,
        //             systemFlowVehId: e.item.id, //任务id
        //         })
        //     if (code == "0") {
        //         uni.showToast({
        //             title: msg || '评价成功',
        //             duration: 2000
        //         });
        //         this.anewQueryMyList();
        //     }
        // }

    },
    // 触底
    onReachBottom() {
        console.log('当前条数', this.queryMyListdata.length, '总条数', this.total)
        if (this.queryMyListdata.length >= this.total) return;
        this.pageIndex++
        this.queryMyList();
    }
}
</script>
<style lang="scss" scoped>
.registrationRecord-box {

    padding: 0 0 10rpx 0;
    overflow: unset;

    .page-head {
        background: #fff;
    }

    .bg-purple-light {
        word-wrap: break-word;
    }

    .list-box {
        border-radius: 10rpx;
        background: #fff;
        // padding: 20rpx;
        position: sticky;

        // align-items: center;
        // display: flex;
        top: 0px;
        width: 100%;
        z-index: 999;

        /deep/ {

            .u-form-item__body {
                padding: 0;
            }
        }

    }

    .item-list-box {
        padding: 10rpx 0 0 0;
        // background: #fff;
        position: relative;


        .info-box {
            margin-bottom: 20rpx;
            border: none;
            width: 100%;
            // border-radius: 20rpx;
            box-shadow: 2rpx 2rpx 5rpx rgba(169, 169, 169, 0.34901960784313724);
            // height: 150rpx;
            background-color: rgba(255, 255, 255, 1);
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            padding: 20rpx;
            box-sizing: border-box;
            position: relative;

            font-size: 24rpx;




        }


    }


}

.box-container {
    background: #fff;
    margin: 20rpx 10rpx;
    border-radius: 10rpx;
    font-size: 24rpx;

    .box-head {
        border-bottom: 1px solid #ddd;
        padding: 20rpx;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .box-body {
        padding:32rpx 20rpx;
        // display: flex;
        // align-items: center;
        position: relative;

        .name {
            font-size: 36rpx;
            font-weight: bolder;
        }


        .time {
            color: #333;
            margin-top: 8rpx;
            font-size: 28;
        }
    }

    .box-footer {
        border-top: 1px solid #ddd;
        // padding: 20rpx;
    }
}

.primary {
    color: $uni-color-primary;
}
.nodata-warp{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100rpx 0;
  .nodata-image{
    width: 218rpx;
    height: 150rpx;
  }
}
</style>