index.vue

<template>
    <view class="study">
        <u-navbar :is-back="false" background="{background: transparent}" :border-bottom="false" :is-fixed="false">
            <text class="title-view">学习</text>
        </u-navbar>
        <image :src="bannerImage" mode="" class="banner"></image>
        <view>
            <u-tabs-swiper bg-color="#F4F5F7" inactive-color="#999999" font-size="28" ref="uTabs" :list="tabs"
                :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
        </view>
        <swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish"
            style="height: 755rpx;">
            <swiper-item class="swiper-item">
                <scroll-view scroll-y style="height:796rpx;width:100%;" @scrolltolower="onreachBottom">
                    <view class="standard" @click="goToPrint">
                        <text>充电桩交付规范</text>
                        <text>></text>
                    </view>
                </scroll-view>
            </swiper-item>
            <swiper-item class="swiper-item">
                <scroll-view scroll-y style="height:100%;width:100%;" @scrolltolower="onreachBottom">
                    <view v-for="item in list" :key="item.id" class="notice" @click="bbb(item)">
                        <view class="n-head">
                            《{{item.title}}》
                        </view>
                        <view class="news" v-html="item.body">
                            <u-parse :html="item.body"></u-parse>
                        </view>
                        <u-line color="#F4F5F7" class="content-line"/>
                    </view>
                    <view v-shou="isLoadMore">
                        <u-loadmore :status="loadStatus" />
                    </view>
                </scroll-view>
            </swiper-item>
            <swiper-item class="swiper-item">
                <scroll-view scroll-y style="height:100%;width:100%;">
                    <view class="lean">
                        <view class="top">
                            <view class="title u-margin-top-10 u-margin-bottom-30">通用课程</view>
                            <view class="currency-class">
                                <view class="class1" @click=ccc(courselist[0].id)>
                                    <image class="img" :src="courselist[0].pic" mode=""></image>
                                    <view class="right">
                                        <view class="u-font-32 font-bold">
                                            {{ courselist[0].title }}
                                        </view>
                                        <view class="u-font-24">
                                            {{ courselist[0].desc }}
                                        </view>
                                        <view class="line-percent">
                                            <u-line-progress active-color="#2979ff" :percent="courselist[0].percent"
                                                :show-percent="false">
                                            </u-line-progress>
                                            <text class="font-default-color"
                                                :class="{'font-active-color':courselist[0].percent}"
                                                v-text="courselist[0].status"></text>
                                        </view>
                                    </view>
                                </view>
                                <view class="class1 u-margin-top-40" @click=ccc(courselist[1].id)>
                                    <image class="img" :src="courselist[1].pic" mode=""></image>
                                    <view class="right">
                                        <view class="u-font-32 font-bold">
                                            {{ courselist[1].title }}
                                        </view>
                                        <view class="u-font-24">
                                            {{ courselist[1].desc }}
                                        </view>
                                        <view class="line-percent">
                                            <u-line-progress active-color="#2979ff" :percent="courselist[1].percent"
                                                :show-percent="false">
                                            </u-line-progress>
                                            <text class="font-default-color"
                                                :class="{'font-active-color':courselist[1].percent}"
                                                v-text="courselist[1].status"></text>
                                        </view>
                                    </view>
                                </view>
                            </view>
                            <view class="title u-margin-top-50 u-margin-bottom-30">技能课程</view>
                            <view class="currency-class">
                                <view class="class1" @click=ccc(courselist[2].id)>
                                    <image class="img" :src="courselist[2].pic" mode=""></image>
                                    <view class="right">
                                        <view class="u-font-32 font-bold">
                                            {{ courselist[2].title }}
                                        </view>
                                        <view class="u-font-24">
                                            {{ courselist[2].desc }}
                                        </view>
                                        <view class="line-percent" style="display:flex;justify-content: space-between;">
                                            <u-line-progress active-color="#2979ff" :percent="courselist[2].percent"
                                                :show-percent="false">
                                            </u-line-progress>
                                            <text class="font-default-color"
                                                :class="{'font-active-color':courselist[2].percent}"
                                                v-text="courselist[2].status"></text>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </swiper-item>
            <swiper-item>
                <scroll-view scroll-y style="height:100%;width:100%;" @scrolltolower="onreachBottom">
                    <view class="lean">
                        <view class="top">
                            <view class="title u-margin-top-10 u-margin-bottom-30">通用认证</view>
                            <view class="currency-class">
                                <view class="class1" @click="aaa(0)">
                                    <image class="img" :src="examList[0].pic" mode=""></image>
                                    <view class="right">
                                        <view class="u-font-32 font-bold">
                                            {{ examList[0].title }}
                                        </view>
                                        <view class="u-font-24">
                                            {{ examList[0].desc }}
                                        </view>
                                        <view class="u-font-24" style="display:flex;justify-content: space-between;">
                                            <text class="font-color-999999">{{ examList[0].condition }}</text>
                                            <text class="font-default-exam-color"
                                                :class="{'font-active-color':examList[0].isComplete}">
                                                {{ examList[0].status }}
                                            </text>
                                        </view>
                                    </view>
                                </view>
                                <view class="class1 u-margin-top-40" @click="aaa(1)">
                                    <image class="img" :src="examList[1].pic" mode=""></image>
                                    <view class="right">
                                        <view class="u-font-32 font-bold">
                                            {{examList[1].title}}
                                        </view>
                                        <view class="u-font-24">
                                            {{ examList[1].desc }}
                                        </view>
                                        <view class="u-font-24" style="display:flex;justify-content: space-between;">
                                            <text class="font-color-999999">{{ examList[1].condition }}</text>
                                            <text class="font-default-exam-color"
                                                :class="{'font-active-color':examList[1].isComplete}">
                                                {{ examList[1].status }}</text>
                                        </view>
                                    </view>
                                </view>
                            </view>
                            <view class="title u-margin-top-50 u-margin-bottom-30">技能认证</view>
                            <view class="currency-class">
                                <view class="class1" @click="aaa(2)">
                                    <image class="img" :src="examList[2].pic" mode=""></image>
                                    <view class="right">
                                        <view class="u-font-32 font-bold">
                                            {{ examList[2].title }}
                                        </view>
                                        <view class="u-font-24">
                                            {{ examList[2].desc }}
                                        </view>
                                        <view class="u-font-24" style="display:flex;justify-content: space-between;">
                                            <text class="font-color-999999">{{ examList[2].condition }}</text>
                                            <text class="font-default-exam-color"
                                                :class="{'font-active-color':examList[2].isComplete}">
                                                {{ examList[2].status }}</text>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                msg: "赣南吴彦祖",
                tabs: [{
                        name: "交付规范",
                    },
                    {
                        name: "培训通知",
                    },
                    {
                        name: "在线学习",
                    },
                    {
                        name: "考核认证",
                    },
                ],
                current: 0,
                swiperCurrent: 0,
                params: {
                    start: 0,
                },
                list: [],
                courselist: [{
                        title: '服务规范',
                        desc: '为用户提供更好服务，自己赚更多钱',
                        percent: 0,
                        status: '',
                        pic: process.uniEnv.qn_base_url + "guifan1@3x.png",
                        id: 173
                    },
                    {
                        title: '接单操作',
                        desc: '快速学习，使用APP 接单、抢单',
                        percent: 0,
                        status: '',
                        pic: process.uniEnv.qn_base_url + "guifan2@3x.png",
                        id: 173
                    },
                    {
                        title: '从0-1学习充电桩安装服务',
                        desc: '让你全面了解充电桩市场及服务规范',
                        percent: 0,
                        status: '',
                        pic: process.uniEnv.qn_base_url + "kecehng1@3x.png",
                        id: 173
                    }
                ],
                examList: [{
                        title: '服务规范',
                        desc: '通过本认证，是接单的必要条件',
                        condition: '随机20题，及格20题',
                        status: '',
                        pic: process.uniEnv.qn_base_url + "guifan1@3x.png",
                        id: 2,
                        examId: '',
                        examStatus: '',
                        isComplete: false
                    },
                    {
                        title: '接单操作',
                        desc: '快速认证,是否具备接单操作能力',
                        condition: '随机20题，及格16题',
                        status: '',
                        pic: process.uniEnv.qn_base_url + "guifan2@3x.png",
                        id: 2,
                        examId: '',
                        examStatus: '',
                        isComplete: false
                    },
                    {
                        title: '从0-1学习充电桩安装服务',
                        desc: '通过本认证后,可接充电桩业务单',
                        condition: '随机30题，及格25题',
                        status: '',
                        pic: process.uniEnv.qn_base_url + "kecehng1@3x.png",
                        id: 2,
                        examId: '',
                        examStatus: '',
                        isComplete: false
                    }
                ],
                loadStatus: "loading", //加载样式:loadMore-加载前样式,loading-加载加载中样式,nomore-没有数据样式
                isLoadMore: false, //是否加载中
                course_id: "course_id_=173",
                exam: null,
            };
        },
        onLoad() {
            // this.getList();
            // this.getCourseList();
            // this.getUserExamInfo();
        },
        computed: {
            bannerImage() {
                return process.uniEnv.qn_base_url + "banner-xx@3x.png";
            },
        },
        methods: {
            getList() {
                this.$u.api
                    .getTrainingNoticeList(this.params)
                    .then((res) => {
                        if (res.code == 200) {
                            if (res.data) {
                                this.list = this.list.concat(res.data);
                                if (res.data.length < 5) {
                                    //判断接口返回数据量小于请求数据量，则表示此为最后一页
                                    this.isLoadMore = true;
                                    this.loadStatus = "nomore";
                                } else {
                                    this.isLoadMore = false;
                                }
                            } else {
                                this.isLoadMore = true;
                                this.loadStatus = "nomore";
                            }
                        } else {
                            //接口请求失败的处理
                            uni.showToast({
                                title: res.message,
                                icon: "none",
                            });
                            this.isLoadMore = false;
                            if (this.params.start > 0) {
                                this.page -= 5;
                            }
                        }
                    })
                    .catch((err) => {
                        uni.showToast({
                            title: err,
                            icon: "none",
                        });
                        this.isLoadMore = false;
                        if (this.params.start > 0) {
                            this.page -= 5;
                        }
                    });
            },
            getTypeName(percent) {
                if (percent == 0) {
                    return '未开始';
                } else if (percent == '100') {
                    return '已完成';
                } else {
                    return '继续';
                }
            },
            //在线学习通用课程信息
            getCourseList() {
                let courseLength = this.courselist.length;
                for (let i = 0; i < courseLength; i++) {
                    let param = {
                        course_id: this.courselist[i].id
                    };
                    this.$u.api
                        .CourseList(param)
                        .then((res) => {
                            if (res.code == 200) {
                                if (res.data) {
                                    res.data.learnedInfo.learnPercent *= 100;
                                    this.courselist[i].status = this.getTypeName(res.data.learnedInfo.learnPercent);
                                    this.courselist[i].percent = res.data.learnedInfo.learnPercent;
                                }
                            }
                        })
                        .catch((err) => {
                            uni.showToast({
                                title: err,
                                icon: "none",
                            });
                        });
                }
            },
            //tabs通知swiper切换
            tabsChange(index) {
                this.swiperCurrent = index;
                switch (index) {
                    case 1:
                        this.params.start = 0;
                        this.list = [];
                        this.getList();
                        break;
                    case 2:
                        this.getCourseList();
                        console.log('重新加载学习进度');
                        break;
                    case 3:
                        this.getUserExamInfo();
                        break;
                }
            },
            //swiper-item左右移动,通知tabs的滑块跟随移动
            transition(e) {
                let dx = e.detail.dx;
                this.$refs.uTabs.setDx(dx);
            },
            animationfinish(e) {
                let current = e.detail.current;
                this.$refs.uTabs.setFinishCurrent(current);
                this.swiperCurrent = current;
                this.current = current;
            },
            //跳转到assessment页面
            aaa(index) {
                var examInfo = this.examList[index];
                if (examInfo.examStatus == 0) {
                    console.log("这是申请的考试id", examInfo.examId);

                    wx.navigateTo({
                        url: "./answer?userExamId=" + examInfo.examId,
                    });
                } else if (examInfo.examStatus == 1) {
                    wx.navigateTo({
                        url: "./result?userExamId=" + examInfo.examId,
                    });
                } else if (examInfo.examStatus == 2) {
                    wx.navigateTo({
                        url: "./assessment",
                    });
                }
            },
            //跳转到课程介绍
            ccc(id) {
                uni.navigateTo({
                    url: "./curriculum?course_id=" + id,
                });
            },
            //跳转到
            bbb(e) {
                var news = {
                    body: e.body,
                    id: e.id,
                    level: e.level,
                    title: e.title,
                };
                // console.log(news)

                uni.navigateTo({
                    url: "./news-details",
                });
                setTimeout(() => {
                    uni.$emit("news", news), console.log("发送数据");
                }, 500);

                console.log("跳转结束11111111");
            },
            //scroll-view到底部加载更多
            onreachBottom() {
                console.log("上拉触底函数");
                //上拉触底函数
                if (!this.isLoadMore) {
                    this.isLoadMore = true;
                    this.params.start += 5;
                    if (this.loadStatus !== "nomore") {
                        this.getList();
                    }
                }
            },
            //跳转到拍照小程序首页
            goToPrint() {
                console.log("111111");
                uni.navigateToMiniProgram({
                    appId: "wxd1d6eede324b0465",
                    success(res) {
                        //打开成功
                        console.log("success", res);
                    },
                    fail(err) {
                        console.log("err", err);
                    },
                });
            },
            //考核认证,通用认证,考试通过or未通过查询接口请求
            getUserExamInfo() {
                uni.showLoading({
                    title: "请稍候",
                });

                let that = this;
                let token = that.vuex_token;
                let length = this.examList.length;
                for (let i = 0; i < length; i++) {
                    let examId = this.examList[i].id;
                    this.$u.api
                        .getExamResult(examId)
                        .then((res) => {
                            if (res.code == 200) {
                                this.examList[i].examId = res.data.id;
                                let examResult = res.data.examLevelResult;
                                this.examList[i].status = examResult != '' ? examResult : '未通过';
                                // examStatus 用户考试状态 0考试中 1考试完成 2未参与
                                that.exam = res.data;
                                console.log(that.exam);
                                if (res.data.examStatus == 2) {
                                    console.log("examStatus " + i + " 2");
                                    that.applyExam();
                                    return;
                                }
                                if (res.data.examStatus == 1) {
                                    console.log("examStatus " + i + " 1");
                                    that.examList[i].isComplete = true;
                                    that.examScore = res.data.examScore;
                                    that.postResult();
                                    return;
                                }
                                if (res.data.examStatus == 0) {
                                    console.log("examStatus " + i + " 0");
                                    that.userExamId = res.data.id;
                                    // that.getNext();
                                }
                            } else {
                                console.log('getUserExamInfo 200 err');
                                uni.showToast({
                                    icon: "none",
                                    title: '获取考试信息失败',
                                });
                            }
                        })
                        .catch((err) => {
                            console.log('getUserExamInfo err' + err);
                            uni.hideLoading();
                            uni.showToast({
                                icon: "none",
                                title: "获取考试信息失败",
                            });
                        });

                }
            }
        },
    };
</script>

<style>
    .study {
        height: 100vh;
        background-color: #f4f5f7;
        padding: 0rpx 30rpx 0 30rpx;
    }

    .title-view {
        color: #333333;
        font-weight: bold;
        font-size: 40rpx;
    }

    .banner {
        width: 690rpx;
        height: 240rpx;
        margin-top: 10rpx;
    }

    /* //交付规范 */
    .standard {
        width: 656rpx;
        display: flex;
        justify-content: space-between;
        border-bottom: 1rpx solid #82848a;
        padding: 0 34rpx;
        margin: 72rpx auto;
    }

    /* //培训通知 */
    .notice {
        /* border: #808080 solid 2rpx; */
        width: 100%;
        height: 400rpx;
        margin-top: 36rpx;
        overflow: hidden;
        background-color: #ffffff;
        border-radius: 12rpx;
    }

    .n-head {
        text-align: left;
       /* margin: 30rpx 30rpx 0 30rpx;
     */   margin-left: 30rpx;
    }

    .news {
        height: 168rpx;
        overflow: hidden;
        /* margin: 30rpx 30rpx 0 30rpx; */
    }

    /* //在线学习 */
    .currency-class {
        width: 100%;
        /* height: 340rpx; */
        background: #ffffff;
        padding: 30rpx;
        /* margin-bottom: 11px; */
        border-radius: 12rpx;
    }

    .title {
        font-size: 32rpx;
        font-weight: bold;
        font-family: PingFang-SC-Bold, PingFang-SC;
    }

    .class1 {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }

    .img {
        width: 160rpx;
        height: 120rpx;
        /* display: block; */
        /* margin-right: 0rpx; */
    }

    .right {
        width: 434rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .intro {
        color: #9999a6;
    }

    .tab {
        background: #fff;
        height: 82rpx;
        margin: 0 0;
    }

    .text {
        margin: 0 40rpx;
        line-height: 82rpx;
        color: #667eb5;
    }

    .content {
        margin: 5px 0;
        height: 485rpx;
        background: #fff;
    }

    swiper {
        height: 691rpx;
    }

    .line-percent {
        display: flex;
        justify-content: space-between;
        line-height: 24rpx;
        font-size: 24rpx;
        color: #999999;
    }

    .u-progress {
        width: 280rpx !important;
        height: 12rpx !important;
        background-color: #ececec;
    }

    .font-bold {
        font-weight: bold;
    }

    .font-default-color {
        color: #999999;
    }
    
    .font-default-exam-color {
        color: #FA5A49;
    }

    .font-active-color {
        color: #2272FF;
    }
    
    .font-color-999999 {
        color: #99999;
    }
    
    .content-line {
        margin-top: 30rpx;
    }
</style>