培训教育

2024-06-26 15:15:32 +08:00
parent ea2670dc15
commit ab39b71127
25 changed files with 3054 additions and 97 deletions
@@ -315,6 +315,7 @@ layout("/mobile/platform.html"){
    </div>

    <div v-if="paramType === '大病互助'"></div>
+
    <div v-if="paramType === '建言献策'">
        <div class="van-sidebar-item van-sidebar-item&#45;&#45;select">
            疗休养
@@ -331,6 +332,24 @@ layout("/mobile/platform.html"){
            </van-grid-item>
        </van-grid>
    </div>
+
+    <div v-if="paramType === '培训教育'">
+        <div class="van-sidebar-item van-sidebar-item&#45;&#45;select">
+            培训教育
+        </div>
+        <van-grid :border="false" :column-num="3">
+            <van-grid-item url="/platform/mobile/theRapyRecuperation/index">
+                <image src="/assets/mobile/svg/proposal/cx.svg"></image>
+                <span class="icon_text"> 疗休养</span>
+            </van-grid-item>
+
+            <van-grid-item url="/platform/mobile/theRapyRecuperation/myRecuperation">
+                <image src="/assets/mobile/svg/proposal/cx.svg"></image>
+                <span class="icon_text"> 我的疗休养</span>
+            </van-grid-item>
+        </van-grid>
+    </div>
+
 </div>

 <script src="https://res.wx.qq.com/open/js/cloudbase/1.1.0/cloud.js"></script>
@@ -55,11 +55,21 @@ layout("/mobile/platform.html"){
        <van-grid-item>
            <div class="item_div" style="background-color: rgb(155,130,239)">
                <div>
-                    <van-image height="32" width="40" src="/assets/platform/img/quickentry/jcbd.png" @click="loginOut"></van-image>
+                    <van-image height="32" width="40" src="/assets/platform/img/quickentry/jcbd.png"
+                               @click="location.href='/mobile/trainEducation/index'"></van-image>
                </div>
                <span class="icon_text">解除绑定</span>
            </div>
        </van-grid-item>
+
+        <van-grid-item>
+            <div class="item_div" style="background-color: rgb(155,130,239)">
+                <div>
+                    <van-image height="32" width="40" src="/assets/platform/img/quickentry/jcbd.png" @click="loginOut"></van-image>
+                </div>
+                <span class="icon_text">培训教育</span>
+            </div>
+        </van-grid-item>
    </van-grid>

    <!--<div>
@@ -113,7 +123,7 @@ layout("/mobile/platform.html"){
                        text: '建言献策',
                        isOpen: true,
                        backGroundColor: '#2fbabf'
-                    },
+                    }
                ]
            }
        },
@@ -34,6 +34,8 @@ layout("/mobile/platform.html"){
 </style>

 <div id="app" v-cloak>
+
+    <m-page-loading v-if="mLoading"></m-page-loading>
    <van-nav-bar
            title="视频资料"
            left-arrow
@@ -72,7 +74,7 @@ layout("/mobile/platform.html"){
                            style="margin-right: 10px"
                            width="90"
                            height="90"
-                            :src="'${AppFileDomain!}'+o.cover"
+                            :src="FILE_DOMAIN+'/fileStreamPreview?id='+o.cover"
                    ></van-image>
                    <div class="list-item">
                        <div style="font-size: 14px">{{o.title}}</div>
@@ -86,11 +88,12 @@ layout("/mobile/platform.html"){
                </div>
            </div>
        </van-list>
-        <van-empty v-if="mLoading==false&&tableData.length==0" class="custom-image" image="/none.svg"
-                   description="暂无数据">
-        </van-empty>
    </div>

+    <van-empty v-if="mLoading==false&&tableData.length==0" class="custom-image" image="/none.svg"
+               description="暂无数据">
+    </van-empty>
+

 </div>

@@ -112,10 +115,7 @@ layout("/mobile/platform.html"){
        },
        methods: {
            async pageData() {
-                const toast = vant.Toast.loading({
-                    message: '加载中...',
-                    forbidClick: true,
-                });
+                this.mLoading = true
                const {data} = await $.get('/mobile/trainEducation/getAlbumList', this.pageForm)
                setTimeout(() => {
                    this.tableData = this.tableData.concat(data.list)
@@ -124,8 +124,7 @@ layout("/mobile/platform.html"){
                    } else {
                        this.pageForm.pageNumber++
                    }
-                    this.loading = false
-                    toast.close()
+                    this.mLoading = false
                    this.pageForm.totalCount = data.totalCount
                }, 300)
            },
@@ -147,7 +146,7 @@ layout("/mobile/platform.html"){
        async created() {
            this.videoTypeList = await getVideoType()
            const typeId = this.GetQueryString("id")
-            const type = this.videoTypeList.find(v => parseInt(v.id) === parseInt(typeId))
+            const type = this.videoTypeList.find(v => v.id === typeId)
            this.typeName = type.typeName
            if (typeId) {
                this.$set(this.pageForm, 'typeId', typeId)
@@ -159,4 +158,4 @@ layout("/mobile/platform.html"){

 <!--#
 }
-#-->
+#-->
@@ -32,6 +32,7 @@ layout("/mobile/platform.html"){
            left-arrow
            placeholder
            fixed
+            @click-left="history.back()"
    ></van-nav-bar>

    <van-swiper>
@@ -47,7 +48,7 @@ layout("/mobile/platform.html"){
        <van-grid-item v-for="item in videoTypeList"
                       :url="'/mobile/trainEducation/AlbumList?id=' + item.id"
                       :key="item.id"
-                       :icon="'${AppFileDomain!}'+item.icon"
+                       :icon="FILE_DOMAIN+'/fileStreamPreview?id='+item.icon"
                       :text="item.typeName"></van-grid-item>
    </van-grid>

@@ -63,7 +64,7 @@ layout("/mobile/platform.html"){
                    style="margin-right: 10px"
                    width="90"
                    height="90"
-                    :src="'${AppFileDomain!}'+o.cover"
+                    :src="FILE_DOMAIN+'/fileStreamPreview?id='+o.cover"
            ></van-image>
            <div class="list-item">
                <div style="font-size: 14px">{{o.title}}</div>
@@ -101,11 +102,18 @@ layout("/mobile/platform.html"){
                this.tableData = []
                const {data} = await $.get('/mobile/trainEducation/getNewestVideo')
                this.tableData.push(data)
-                console.log(data)
            }
        },
        async created() {
-            this.videoTypeList = await getVideoType()
+            const videoTypeList = await getVideoType()
+            if (videoTypeList.length > 0) {
+                videoTypeList.map(v => {
+                    if (v.files) {
+                        v.icon = JSON.parse(v.files)[0].id
+                    }
+                })
+            }
+            this.videoTypeList = videoTypeList
            await this.getNewVideo()
        }
    })
@@ -2,6 +2,23 @@
 layout("/mobile/platform.html"){
 #-->

+<style>
+    .bottom-wrap {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        padding: 10px;
+        z-index: 1;
+    }
+
+    .bottom-wrap button {
+        border-radius: 10px;
+    }
+
+
+</style>
+
 <script src="https://cdn-go.cn/cdn/vod-js-sdk-v6/latest/vod-js-sdk-v6.js"></script>
 <link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.3.0/tcplayer.min.css" rel="stylesheet"/>
 <!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 格式的视频，需要在 tcplayer.vx.x.x.min.js 之前引入 hls.min.x.xx.xm.js。-->
@@ -78,7 +95,7 @@ layout("/mobile/platform.html"){
        <van-image
                v-else
                style="width: 100%;height: 100%"
-                :src="'${AppFileDomain!}'+albumInfo.cover"
+                :src="FILE_DOMAIN+'/fileStreamPreview?id='+albumInfo.cover"
        ></van-image>

    </div>
@@ -107,7 +124,7 @@ layout("/mobile/platform.html"){
            <div style="height: 5px;background-color: #f6f7f9"></div>

            <van-cell-group class="video-list">
-                <van-cell v-for="(o,i) in videoList" @click="playVideo(o)">
+                <van-cell v-for="(o,i) in videoList" :key="o.id" @click="playVideo(o)">
                    <template #title>
                        <van-tag plain type="primary" style="margin-right: 10px">视频</van-tag>
                        <span style="margin-right: 10px">
@@ -121,28 +138,22 @@ layout("/mobile/platform.html"){
                        {{getWatchStatus(o)}}
                    </template>
                    <template>
-                        <span v-if="o.id === currentVideo.id">
-                            播放中
-                        </span>
+
                    </template>
                </van-cell>
            </van-cell-group>
        </van-tab>
-        <!--        <van-tab title="评价">-->
-        <!--            <div style="height: 5px;background-color: #f6f7f9"></div>-->
-        <!--            <van-cell title="我的评价">-->
-        <!--                <template>-->
-        <!--                    <van-rate v-model="myComment.level" icon="like" void-icon="like-o"></van-rate>-->
-        <!--                </template>-->
-        <!--            </van-cell>-->
-        <!--        </van-tab>-->
    </van-tabs>

+    <div class="bottom-wrap">
+        <van-button type="danger" block @click="endLearn">结束本次学习</van-button>
+    </div>
+
 </div>

 <script>

-    let player = null
+    // let player = null

    const vue = new Vue({
        el: '#app',
@@ -159,7 +170,9 @@ layout("/mobile/platform.html"){
                myComment: {},
                watchRecordList: [],
                lastTime: 0,
-                isPlay: false
+                isPlay: false,
+
+                player: null,

            }
        },
@@ -173,94 +186,100 @@ layout("/mobile/platform.html"){
                const {data} = await $.get('/mobile/trainEducation/getAlbumInfo', {id: this.albumId})
                this.albumInfo = data
            },
+
            //播放视频
            async playVideo(o) {
                this.isPlay = true
-                this.currentVideo = o

-                this.$nextTick(()=>{
-                    if (!player) {
-                        player = TCPlayer('player-container-id', {})
-                    }
-                    player.src(o.mediaUrl)
-                })
-
-
-                // await this.addWatchRecord()
-                await this.getMyWatchRecord()
-
-                //接着上次继续看
-                const v = this.watchRecordList.find(v => v.videoId === o.id)
-                if (v) {
-                    this.lastTime = v.watchDuration
-                    setTimeout(() => {
-                        player.currentTime(v.watchDuration)
-                    })
-                } else {
-                    player.currentTime(0)
-                    await this.addWatchRecord()
-                    await this.getMyWatchRecord()
+                //判断当前视频是否看完
+                if (this.player && this.player.currentTime() < this.currentVideo.fileDuration) {
+                    this.$modal.msg('看完本视频后才能接着看下一个')
+                    return
                }

-                // player.play()
-                this.playPause()
-                this.playEnd()
-                this.playTimeUpdate()
-                this.playSeeked()
-            },

-            //快进 快退
-            playSeeked() {
-                player.on('seeked', () => {
-                    this.lastTime = player.currentTime()
-                    this.addWatchRecord()
-                })
-            },
-            playTimeUpdate() {
-                this.lastTime = player.currentTime()
-                player.on('timeupdate', () => {
-                    const nowTime = player.currentTime()
-                    if (nowTime - this.lastTime > 5) {
-                        this.lastTime = nowTime
-                        this.addWatchRecord()
-                    }
-                })
-            },
-            playPause() {
-                player.on('pause', () => {
-                    this.addWatchRecord()
-                })
+                this.currentVideo = o
+
+                const playVideo_ = (time = 0) => {
+                    this.$nextTick(async () => {
+                        let controlBar = TCPlayer.getComponent('controlBar');
+                        controlBar.prototype.options_ = {
+                            children: ['playToggle', 'volumePanel', 'currentTimeDisplay', 'timeDivider', 'durationDisplay', 'liveDisplay', 'remainingTimeDisplay', 'customControlSpacer', 'chaptersButton', 'descriptionsButton', 'fullscreenToggle']
+                        }
+                        if (!this.player) {
+                            this.player = TCPlayer('player-container-id', {})
+                        }
+                        this.player.src(o.mediaUrl)
+                        this.player.play()
+
+                        setTimeout(() => {
+                            this.player.currentTime(time)
+                        }, 100)
+
+                        this.playEnd()
+                    })
+                }
+
+                const v = this.watchRecordList.find(v => v.videoId === o.id)
+
+                if (v && v.finish) {
+                    this.$modal.confirm('本视频您已学习完成，是否重新观看，不会影响到完成的学习记录').then(() => {
+                        playVideo_(0)
+                    })
+                } else if (v && !v.finish) {
+                    playVideo_(v.watchDuration)
+                } else {
+                    playVideo_(0)
+                }
            },

            playEnd() {
-                player.on('ended', () => {
-                    this.addWatchRecord()
-                    this.getMyWatchRecord()
-                    const currentIndex = this.videoList.findIndex(v => v.id === this.currentVideo.id)
-                    const nextVideo = this.videoList[currentIndex + 1]
-                    if (nextVideo) {
-                        this.playVideo(nextVideo)
+                this.player.on('ended', async () => {
+                    const v = this.watchRecordList.find(v => v.videoId === this.currentVideo.id)
+                    if (v.finish) {
+                        return
                    }
+
+                    const loading = this.$toast.loading({
+                        duration: 0,
+                        forbidClick: true,
+                        message: '已完整学习本视频,自动上传中'
+                    })
+                    const resp = await this.addWatchRecord()
+                    if (resp.code === 0) {
+                        loading.message = '上传成功'
+                        loading.type = 'success'
+                    }
+                    setTimeout(() => {
+                        loading.clear()
+                    }, 2000)
+
+                    // this.addWatchRecord()
+                    // this.getMyWatchRecord()
+                    // const currentIndex = this.videoList.findIndex(v => v.id === this.currentVideo.id)
+                    // const nextVideo = this.videoList[currentIndex + 1]
+                    // if (nextVideo) {
+                    //     this.playVideo(nextVideo)
+                    // }
                })
            },

            //播放记录
            async addWatchRecord() {
-                // if (player.currentTime() < 2) {
-                //     return
-                // }
                const params = {
                    videoId: this.currentVideo.id,
-                    currentTime: parseInt(player.currentTime()),
+                    currentTime: parseInt(this.player.currentTime()),
                    albumId: this.currentVideo.albumId
                }
-                await $.post('/mobile/trainEducation/addWatchRecord', params)
+                const resp = await $.post('/mobile/trainEducation/addWatchRecord', params)
+                this.getMyWatchRecord()
+                return resp
            },
            //监听页面关闭 隐藏
            watchPage() {
                document.addEventListener('visibilitychange', () => {
                    if (document.visibilityState === 'hidden') {
-                        if (player && this.currentVideo) {
+                        if (this.player && this.currentVideo) {
                            this.addWatchRecord()
                        }
                    }
@@ -275,12 +294,45 @@ layout("/mobile/platform.html"){
                if (!v) {
                    return '学习进度：还未开始学习'
                }
+                if (v.finish) {
+                    return '学习进度：已完成'
+                }
                if (v.videoId === this.currentVideo.id) {
                    return '学习进度：正在学习中'
                }
                const percentage = (parseInt((v.watchDuration / (video.fileDuration - 1)).toFixed(2) * 100)) + "%"
+                if (percentage === 0) {
+                    return '学习进度：还未开始学习'
+                }
                return "学习进度：" + percentage
+            },
+
+            endLearn() {
+                const v = this.watchRecordList.find(v => v.videoId === this.currentVideo.id)
+                if (v.finish) {
+                    this.$modal.msg('本视频您已学习完成，无需重复上传')
+                    return
+                }
+
+                this.$modal.confirm('您是否要结束本视频学习?').then(() => {
+                    //暂停
+                    this.player.pause()
+                    //上传记录
+                    this.$modal.loading('上传中')
+                    this.addWatchRecord().then(resp => {
+                        console.log(resp)
+                        this.$modal.closeLoading()
+                        if (resp.code === 0) {
+                            this.$modal.msgSuccess('上传成功')
+                        } else {
+                            this.$modal.msgError('上传成功')
+                        }
+                    }).catch(err => {
+                        console.log(err)
+                    })
+                })
            }
+
        },
        created() {
            this.watchPage()
@@ -291,7 +343,6 @@ layout("/mobile/platform.html"){
                this.getVideoInfo()
                this.getMyWatchRecord()
            }
-
        }
    })
 </script>