coach_assistant/src/pages/course/task_finish/task_finish.vue

<template>
    <view class="course-task-finish fixed-bot-padding">
        <picker disabled>
            <view class="top-bar"><text>{{optionsQuery.course_name || '-'}}</text></view>
        </picker>
        <!-- <view class="ctf-time">
            <picker class="ct-picker">
                <view class="cp-con">
                    <input disabled value="2020年12月27日" />
                    <image mode="aspectFit" src="/static/images/triangle_c33.png"></image>
                </view>
            </picker>
        </view> -->
        <view class="ctf-list">
            <view class="cl-item" v-for="(e, i) in finishList" :key="i" @click="toTaskInfo(e)">
                <view class="ci-time"></view>
                <view class="ci-content">
                    <view class="cc-user">
                        <image class="u-avatar" mode="aspectFit" :src="e.user.avatar_url"></image>
                        <view class="u-name">{{e.order.name || '-'}}</view>
                        <image class="u-icon" mode="aspectFit" :src="`/static/images/sex_${e.order.gender-1}.png`"></image>
                    </view>
                    <view class="cc-status">
                        <view :class="[i == 2&&false?'active':'']">{{e.record.completion || '-'}}</view>
                        <image mode="aspectFit" src="/static/images/arrow_cb2.png"></image>
                    </view>
                </view>
            </view>
        </view>
        <view class="fixed-bot-btn"><view hover-class="hover-active" @click="remindAll">批量提醒完成</view></view>
    </view>
</template>

<script>
import { API } from '../../../js/api';
import { servers } from '../../../js/server';
import util from '../../../utils/util'
export default {
    data(){
        return {
            optionsQuery: {},
            finishList: [],
            page: 1,
        }
    },
    onReachBottom(){
        let { page, optionsQuery } = this;
        let _page = page + 1
        this.getFinishList({
            homework_id: optionsQuery.homework_id,
            page: _page
        })
        this.page = _page;
    },
    onLoad(options){
        let _query = util.jsonPar(options.query);
        this.optionsQuery = _query;
        this.getFinishList({
            homework_id: _query.homework_id
        });
    },
    methods: {
        remindAll: util.debounce(function(){
            let { optionsQuery, finishList } = this;
            console.warn(optionsQuery, 'optionsQuery')
            console.warn(finishList, 'finishList')
            servers.post({
                url: API.course.homeworkRemind,
                data: {
                    homework_id: optionsQuery.homework_id,
                    homework_record_ids: finishList.map(e=>e.record.id),
                },
                isDefaultGet: false,
            })
            .then(res=>{
                if(res.data.code == 0){
                    util.showNone(res.data.message || '操作成功！');
                    setTimeout(_=>util.routeTo(), 1200);
                }else{
                    util.showNone(res.data.message || '操作失败！');
                }
            })
        }, 300, 300),

        toTaskInfo(e){
            let { optionsQuery } = this;
            let _query = {
                ...optionsQuery,
                homework_record_id: e.record.id,
                user_name: e.order.name
            }
            util.routeTo(`/pages/course/task_info/task_info?query=${util.jsonStr(_query)}`, 'nT');
        },
        getFinishList({
            homework_id= '',
            page= 1,
            page_size= 15,
        }){
            util.showLoad();
            servers.get({
                url: API.course.homeworkRecords,
                data: {
                    homework_id,
                    page,
                    page_size
                },
                failMsg: '加载失败！'
            })
            .then(res=>{
                util.hideLoad();
                let _list = res.list || [];
                if(page == 1)return this.finishList = _list;
                if(_list.length <=0)return util.showNone('没有更多！');
                this.finishList = [...this.finishList, ..._list];
            })
        }
    }
}
</script>

<style lang="scss">
    @import "~style/public.scss";
    .course-task-finish{

    }
    .ctf-time{
        padding-top: 4upx;
        padding-left: 20upx;
        height: 96upx;
        background-color: #fff;
        .ct-picker{
            padding: 0;
            width: 312upx;
            border-radius: 10upx;
            border: 2upx solid #D8D8D8;
            background-color: #F2F2F7;
            .cp-con{
                padding: 0 20upx;
                height: 68upx;
                @include centerFlex(space-between);
                >input{
                    flex-grow: 1;
                    font-size: 28upx;
                    color: #333;
                }
                >image{
                    flex-shrink: 0;
                    width: 28upx;
                    height: 28upx;
                }
            }
        }
    }
    .ctf-list{
        padding: 24upx;
        .cl-item{
            margin-bottom: 24upx;
            padding: 20upx 24upx 44upx;
            border-radius: 10upx;
            background-color: #fff;
            .ci-time{
                text-align: right;
                font-size: 32upx;
                line-height: 44upx;
                color: #9a9a9d;
            }
            .ci-content{
                @include centerFlex(space-between);
                .cc-user{
                    @include centerFlex(space-between);
                    .u-avatar{
                        flex-shrink: 0;
                        flex-grow: 0;
                        margin-right: 20upx;
                        width: 116upx;
                        height: 116upx;
                        border-radius: 50%;
                        background-color: skyblue;
                    }
                    .u-name{
                        line-height: 44upx;
                        font-weight: 500;
                        font-size: 32upx;
                        color: #333;
                        @include textHide(1);
                    }
                    .u-icon{
                        margin-left: 12upx;
                        flex-grow: 0;
                        flex-shrink: 0;
                        width: 36upx;
                        height: 36upx;
                    }
                }
                .cc-status{
                    flex-shrink: 0;
                    margin-left: 20upx;
                    max-width: 30%;
                    @include centerFlex(flex-end);
                    >view{
                        line-height: 40upx;
                        font-size: 28upx;
                        color: $themeColor;
                        @include textHide(1);
                        &.active{
                            color: #FF4444;
                        }
                    }
                    >image{
                        flex-shrink: 0;
                        margin-left: 16upx;
                        width: 32upx;
                        height: 32upx;
                    }
                }

            }
        }
    }
</style>