keysass_app/pages/personal/myCourse/myCourse.vue

<template>
    <view class="courseWrapper">
        <view v-if="courseList.length">
            <view class="onlineTrain">
                <view class="onLineTitle">
                    <view class="onLineClassName">软测课堂</view>
                    <view class="onLineCourseTime">时间：{{ '今日 20:00' }}</view>
                </view>
                <view class="onLineCourse">如何使用性能测试工具</view>
                <view class="onLineTeacher">讲师: 风清扬老师</view>
                <view class="onLineBtnWrap">
                    <view class="onLineBtn toLearn" @click="toLearn">去学习</view>
                    <view class="onLineBtn toPay" @click="toLearn">付费学习: {{ '9.9' }}</view>
                </view>
            </view>
        </view>
        <view v-if="courseList.length">
            <view class="courseItem" v-for="course in courseList" :key="course.courseId">
                <view class="courseName">{{ course.courseName }}</view>
                <view class="courseTime">{{ course.courseTime }}</view>
                <view class="courseSource" @click="courseDialog">课程资料</view>
                <view class="signInfo" :style="{ background: course.status ? '#28D17C' : '#FBA02A' }">{{
                    course.status ? '已签到' : '未签到'
                    }}</view>
            </view>
        </view>
        <view class="mycourseWrapper" v-else>
            <img src="../../index/testtraining/noCourse.png" alt="">
            <view>暂未配置课程</view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            courseList: [],
            total: 10,
            classId: '',
            queryParams: {
                pageSize: 10,
                pageNum: 1,
            },
        }
    },
    onLoad(options) {
        const classId = options.id
        const className = options.name
        // console.log(options)
        this.classId = classId
        uni.setNavigationBarTitle({ title: className })
        this.getCourseList()
    },
    methods: {
        toLearn() {
            uni.navigateTo({
                url: '/pages/index/testtraining/onLineCourse'
            })
        },
        pagionChange(e) {
            console.log(e);
            this.queryParams.pageNum = e.current
            this.getCourseList()
        },
        async getCourseList() {
            const params = this.queryParams
            this.http.get(`/course/myCourse/class/${this.classId}`, params, true).then((res) => {
                this.total = res.data.total
                this.courseList = res.data.rows
            })
        },
        async onReachBottom() {
            if (this.total <= this.queryParams.pageSize) {
                return
            }
            this.queryParams.pageSize += 10
            this.getCourseList()
            console.log("onReachBottom");
        },
        courseDialog() {
            const url = 'https://www.bjkeyware.com'
            uni.showModal({
                title: '请去PC端下载资料',
                content: 'PC端网址:' + url,
                showCancel: false,
                confirmText: '复制网址',
                success: function (res) {
                    if (res.confirm) {
                        uni.setClipboardData({
                            data: url,
                            success: function () {
                                uni.showToast({
                                    title: '复制成功',
                                })
                            },
                            fail: function () {
                                uni.showToast({
                                    title: '复制失败',
                                })
                            },
                        })
                        console.log('用户点击确定')
                    }
                },
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.mycourseWrapper {
    font-size: 23px;
    font-weight: bold;
    color: #9D9D9D;
    text-align: center;
    margin-top: 100px;

    img {
        width: 338rpx;
        height: 254rpx;
    }
}

.courseItem {
    position: relative;
    margin: 25rpx;
    width: 700rpx;
    height: 210rpx;
    margin-bottom: 0;
    padding: 30rpx;
    background: #ffffff;
    border-radius: 10rpx;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 24rpx;
    line-height: 50rpx;
}

.courseName {
    /* width: 369rpx; */
    /* height: 29rpx; */
    font-weight: bold;
    font-size: 30rpx;
    color: #000000;
}

.courseTime {
    color: #4d4d4d;
}

.courseSource {
    color: #2853e4;
}

.signInfo {
    width: 110rpx;
    /* height: 40rpx; */
    line-height: 40rpx;
    border-radius: 20rpx;
    text-align: center;
    color: #fff;
    position: absolute;
    top: 85rpx;
    right: 25rpx;
}

.onlineTrain {
    margin: 30rpx 30rpx;
    height: 270rpx;
    background: #FFFFFF;
    border-radius: 10rpx;
}

.onLineTitle {
    display: flex;
    font-family: PingFang SC;
    font-weight: 500;
    height: 88rpx;
    line-height: 54rpx;
    justify-content: space-between;
}

.onLineClassName {
    height: 54rpx;
    width: 183rpx;
    text-align: center;
    background: linear-gradient(90deg, #5EA6FD, #1A81F9);
    border-radius: 9rpx 0rpx 46rpx 0rpx;
    font-size: 24rpx;
    color: #FFFFFF;
}

.onLineCourse {
    font-size: 28rpx;
    line-height: 46rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #1A1A1A;
    margin-left: 24rpx;

}

.onLineCourseTime {
    margin-left: 24rpx;
    margin-right: 30rpx;
    width: 174rpx;
    line-height: 88rpx;
    font-size: 22rpx;
    color: #808080;
}

.onLineTeacher {
    margin-top: 10rpx;
    margin-left: 24rpx;
    font-size: 24rpx;
    font-weight: 500;
    color: #666666;
    line-height: 46rpx;
}

.onLineBtnWrap {
    padding: 0 30rpx;
    display: flex;
    justify-content: flex-end;
}

.onLineBtn {
    width: 209rpx;
    height: 50rpx;
    border-radius: 25rpx;
    width: 209rpx;
    width: 167rpx;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 24rpx;
    color: #FFFFFF;
    line-height: 49rpx;
    text-align: center;
}

.toLearn {
    background: linear-gradient(90deg, #FB8C16, #FEC36E);
}

.toPay {
    background: linear-gradient(90deg, #5EA6FD, #1A81F9);
    border: 1px solid #AAD1FE;
}
</style>