| xqd
@@ -0,0 +1,269 @@
|
|
|
+<!-- +---------------------------------------------------------------------- -->
|
|
|
+<!-- | 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;
|
|
|
+ }
|
|
|
+</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">
|
|
|
+ <ul v-if="navActive == 0" class="credit-list">
|
|
|
+ <!-- 学习记录 -->
|
|
|
+ <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">6</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 == 2">
|
|
|
+ <!-- 学习时间 -->
|
|
|
+ <div class="credit-title">
|
|
|
+ <div class="title">学习时间</div>
|
|
|
+ <div class="credit">60分钟</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="credit-list">
|
|
|
+ <div class="content">
|
|
|
+ <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.content. title }}
|
|
|
+ </div>
|
|
|
+ <div class="desc">
|
|
|
+ <div v-if="item.obtain === 1">您已学完关联的所有课程/专栏</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>
|
|
|
+ </div>
|
|
|
+ </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'], function (Vue, store, $h) {
|
|
|
+ var app = new Vue({
|
|
|
+ el: '#app',
|
|
|
+ data: {
|
|
|
+ navs: ['学习记录', '我的学分', '学习时间', '我的证书'],
|
|
|
+ navActive: 0,
|
|
|
+ activityList: [],
|
|
|
+ loading: false,
|
|
|
+ loadend: false,
|
|
|
+ page: 1,
|
|
|
+ limit: 20,
|
|
|
+ loadTitle:''
|
|
|
+ },
|
|
|
+ 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 } });
|
|
|
+ },
|
|
|
+ // 获取活动列表
|
|
|
+ getActivitySignList: function () {
|
|
|
+ var that = this;
|
|
|
+ if (that.loading) return;
|
|
|
+ if (that.loadend) return;
|
|
|
+ that.loading = true;
|
|
|
+ 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;
|
|
|
+ app.activityList = app.activityList.concat(activityList);
|
|
|
+ app.loading = false;
|
|
|
+ that.loadend = activityList.length < that.limit;
|
|
|
+ that.loadTitle = that.loadend ? '已全部加载完' : '上拉加载更多';
|
|
|
+ app.finished = app.limit > activityList.length;
|
|
|
+ that.$set(this, 'activityList', that.activityList);
|
|
|
+ });
|
|
|
+ } 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}
|