zyedu/application/wap/view/first/my/history.html

<!-- +---------------------------------------------------------------------- -->
<!-- | CRMEB [ CRMEB赋能开发者，助力企业发展 ] -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Copyright (c) 2016～2022 https://www.crmeb.com All rights reserved. -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权 -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Author: CRMEB Team <admin@crmeb.com> -->
<!-- +---------------------------------------------------------------------- -->
{extend name="public/container"}
{block name="title"}学籍档案{/block}
{block name="head"}
<style>
    body {
        background: #F5F5F5;
    }
    .price-wrap {
        display: flex;
        align-items: center;
        font-size: .24rem;
        line-height: .33rem;
        color: #FF6B00;
    }
    .price-wrap .price {
        flex: 1;
        font-weight: bold;
        font-size: .24rem;
        line-height: .45rem;
        color: #FF6B00;
    }
    .price-wrap .price span {
        font-size: .32rem;
    }
    .activity-list li > div > div > div:last-child {
        font-weight: normal;
    }

    .honor-list-page li {
        padding-right: .3rem;
        padding-left: .3rem;
        border-radius: .12rem;
        background-color: #fff;
    }

    .honor-list-page li ~ li {
        margin-top: .2rem;
    }

    .honor-list-page li .name {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding: .3rem 0 0.3rem 0 !important;
        font-size: .3rem;
        color: #282828;
        display: block;
    }

    .honor-list-page li .name img {
        width: .25rem;
        margin-right: .05rem;
        pointer-events: none;
        -webkit-touch-callout: none;
        object-fit:contain;
        height: auto;
        display: inline;
    }

    .honor-list-page li .desc {
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        align-items: center;
        height: 1.48rem;
        border-top: 1px dashed #e3e3e3 !important;
        font-size: .3rem;
        color: #9e9e9e;
    }

    .honor-list-page li .attr {
        display: -webkit-box;
        display: flex;
        margin-left: -.3rem;
        font-size: .24rem;
        text-align: center;
        color: #999;
    }

    .honor-list-page li .cell {
        position: relative;
        padding-right: .35rem;
        padding-left: .35rem;
    }

    .honor-list-page li .cell::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        height: .4rem;
        border-left: 1px solid rgba(0, 0, 0, .05);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .honor-list-page li .cell:first-child::before {
        display: none;
    }

    .honor-list-page li a {
        height: .5rem;
        padding-right: .27rem;
        padding-left: .27rem;
        border: 1px solid #191C6E;
        border-radius: .25rem;
        font-size: .24rem;
        line-height: .5rem;
        text-align: center;
        color: #191C6E;
    }
</style>
{/block}
{block name="content"}
<div class="activity-list" v-cloak id="app">
    <div class="tab">
        <div v-for="(item, index) in navs" :key="index" :class="{ on: navActive === index }" @click="navActives(index)">{{ item }}</div>
    </div>
    <div class="content" style="margin-top:1rem !important;">
        <ul v-if="navActive == 0" class="credit-list" style="margin-top: 0 !important;">
            <!-- 学习记录 -->
            <li v-for="(item, index) in activityList" :key="index" @click="specialDetails(item.id)">
                <div>
                    <div>
                        <img :src="item.image" alt="">
                    </div>
                    <div>
                        <div>{{ item.title }}</div>
                        <div>
                            <span class="labelItem">{{ item.subject_name }}</span>
                            <!-- <span class="creditinfo">3分</span> -->
                        </div>
                        <div class="price-wrap">
                            <div class="price">￥<span>{{ item.money }}</span></div>
                            <div>共{{ item.count }}节</div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <ul v-if="navActive == 1">
            <!-- 我的学分 -->
            <div class="credit-title">
                <div class="title">我的学分</div>
                <div class="credit">{{xuefencount}}</div>
            </div>
            <div class="credit-list">
                <br />
                <div class="public_title">
                    <div class="name">
                        <div class="title-circular"></div>
                        <div class="title-text">学分明细</div>
                    </div> 
                </div>
                <div class="content">
                    <ul v-if="activityList.length">
                        <li v-for="(item, index) in activityList" :key="index" @click="specialDetails(item.id)">
                            <div>
                                <div>
                                    <img :src="item.image" alt="">
                                </div>
                                <div>
                                    <div>{{ item.title }}</div>
                                    <div>
                                        <span class="labelItem">{{ item.subject_name }}</span>
                                        <span class="creditinfo">{{ item.xuefen }}分</span>
                                    </div>
                                    <div class="price-wrap">
                                        <div class="price">￥<span>{{ item.money }}</span></div>
                                        <div>共{{ item.count }}节</div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </ul>
        <ul v-if="navActive == 2">
            <!-- 学习时间 -->
            <div class="credit-title">
                <div class="title">学习时间</div>
                <div class="credit">{{shichang}}分钟</div>
            </div>
            <div class="credit-list">
                <br />
                <div class="public_title">
                    <div class="name">
                        <div class="title-circular"></div>
                        <div class="title-text">学习课程</div>
                    </div> 
                </div>
                <div class="content">
                    <ul v-if="activityList.length">
                        <li v-for="(item, index) in activityList" :key="index" @click="specialDetails(item.id)">
                            <div>
                                <div>
                                    <img :src="item.image" alt="">
                                </div>
                                <div>
                                    <div>{{ item.title }}</div>
                                    <div>
                                        <span class="labelItem">{{ item.subject_name }}</span>
                                        <!-- <span class="creditinfo">3分</span> -->
                                    </div>
                                    <div class="price-wrap">
                                        <div class="price">￥<span>{{ item.money }}</span></div>
                                        <div>共{{ item.count }}节</div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </ul>
        <ul v-if="navActive == 3">
            <!-- 我的证书 -->
            <div class="honor-list-page">
                <ul v-if="activityList.length">
                    <li v-for="item in activityList" :key="item.id">
                        <div class="name">
                            <img src="{__WAP_PATH}zsff/images/question01.png">{{ item.certtitle }}
                        </div>
                        <div class="desc">
                            <div v-if="item.obtain == 1 || item.obtain == 3">发放时间<br />{{item.add_time}}</div>
                            <div v-else class="attr">
                                <div class="cell">
                                    题目数
                                    <div>{{ item.content.item_number }}</div>
                                </div>
                                <div class="cell">
                                    错题数
                                    <div>{{ item.content.wrong_question }}</div>
                                </div>
                                <div class="cell">
                                    本次用时
                                    <div>{{ item.content.duration | formatTime }}</div>
                                </div>
                            </div>
                            <a :href="'{:url('topic/certificate_detail')}?obtain=' + item.obtain + '&id=' + item.id">查看证书</a>
                        </div>
                    </li>
                </ul>
                <img v-else-if="page > 1 && !loading" class="empty" src="{__WAP_PATH}zsff/images/no_certificate.png">
            </div>
        </ul>
        <div v-if="!activityList.length && loadend" class="empty">
            <img src="{__WAP_PATH}zsff/images/empty.png" alt="暂无数据">
            <div>暂无数据</div>
        </div>
    </div>
    <quick-menu></quick-menu>
</div>
{/block}
{block name="foot"}
<script>
    require(['vue', 'store', 'helper', '{__WAP_PATH}zsff/js/quick.js', 'moment'], function (Vue, store, $h, quick, moment) {
        var app = new Vue({
            el: '#app',
            data: {
                navs: ['学习记录', '我的学分', '学习时间', '我的证书'],
                navActive: 0,
                activityList: [],
                loading: false,
                loadend: false,
                page: 1,
                limit: 20,
                loadTitle:'',
                xuefencount:0,
                shichang:0,
            },
            mounted: function () {
                this.getActivitySignList();
                this.$nextTick(function () {
                    this.init();
                });
            },
            methods: {
                navActives: function (index) {
                    var that = this;
                    that.navActive = index;
                    that.page = 1;
                    that.loading = false;
                    that.loadend = false;
                    that.activityList = [];
                    that.getActivitySignList();
                },
                init: function () {
                    var that = this;
                    window.addEventListener('scroll', function () {
                        var clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
                            scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight,
                            scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                        if (clientHeight + scrollTop >= scrollHeight) {
                            that.getActivitySignList();
                        }
                    });
                },
                activityDetails: function (order_id) {
                    return window.location.href=$h.U({ c: 'my', a: 'sign_my_order', q: {order_id: order_id } });
                },
                specialDetails: function (order_id) {
                    return window.location.href=$h.U({ c: 'special', a: 'details', q: {id: order_id } });
                },
                // 获取活动列表
                getActivitySignList: function () {
                    var that = this;
                    if (that.loading) return;
                    if (that.loadend) return;
                    that.loading = true;
                    that.activityList = [];
                    if (that.navActive == 3) {
                        store.basePost($h.U({
                            c: 'topic',
                            a: 'getUserCertificate'
                        }), {
                            page: this.page++,
                            limit: this.limit
                        }, function (res) {
                            var activityList = res.data.data;
                            for (let i in activityList) {
                                that.xuefencount += activityList[i].xuefen;
                                console.log(activityList[i].xuefen);
                                activityList[i].add_time = moment(activityList[i].add_time * 1000).format('YYYY.MM.DD')
                                
                            }
                            that.activityList = that.activityList.concat(activityList);
                            that.loading = false;
                            that.loadend = activityList.length < that.limit;
                            that.loadTitle = that.loadend ? '已全部加载完' : '上拉加载更多';
                            that.finished = that.limit > activityList.length;
                            that.$set(this, 'activityList', that.activityList);
                        });
                    } else if (that.navActive == 1) {
                        store.baseGet($h.U({ c: 'my', a: 'history', p: { page: that.page, limit: 10000,  op:'xuefenlist' } }), function (res) {
                            var list = res.data.data;
                            that.activityList.push.apply(that.activityList, list);
                            that.loadend = list.length < 10000;
                            that.loadTitle = that.loadend ? '已全部加载完' : '上拉加载更多';
                            that.page = that.page + 1;
                            that.loading = false;
                            that.xuefencount = 0;
                            for (let i in that.activityList) {
                                that.xuefencount += that.activityList[i].xuefen;
                            }
                            that.$set(this, 'activityList', that.activityList);
                        }, function (res) {
                            // that.loadTitle = '上拉加载更多';
                            // that.loading = false;
                        });
                    } else if (that.navActive == 2) {
                        store.baseGet($h.U({ c: 'my', a: 'history', p: { page: that.page, limit: 10000,  op:'shichanglist' } }), function (res) {
                            var list = res.data.data;
                            that.activityList.push.apply(that.activityList, list);
                            that.loadend = list.length < that.limit;
                            that.loadTitle = that.loadend ? '已全部加载完' : '上拉加载更多';
                            that.page = that.page + 1;
                            that.loading = false;
                            that.shichang = 0;
                            for (let i in that.activityList) {
                                console.log(that.activityList[i].shichang);
                                if (that.activityList[i].shichang){
                                    that.shichang += parseInt(that.activityList[i].shichang / 60000);
                                }
                            }
                            that.$set(this, 'activityList', that.activityList);
                        }, function (res) {
                            // that.loadTitle = '上拉加载更多';
                            // that.loading = false;
                        });
                    } else {
                        store.baseGet($h.U({ c: 'my', a: 'special_log', p: { page: that.page, limit: that.limit,  op:'list' } }), function (res) {
                            var list = res.data.data;
                            that.activityList.push.apply(that.activityList, list);
                            that.loadend = list.length < that.limit;
                            that.loadTitle = that.loadend ? '已全部加载完' : '上拉加载更多';
                            that.page = that.page + 1;
                            that.loading = false;
                            that.$set(this, 'activityList', that.activityList);
                        }, function (res) {
                            that.loadTitle = '上拉加载更多';
                            that.loading = false;
                        });
                    }
                    
                }
            }
        });
    });
</script>
{/block}