lw_test/app/mobile/view/soldier/video.html

{extend name="public/base"/}
{block name="css"}
<style>
    .series-title {font-size: 16px;}
    .series-time {font-size: 12px;color: #999;}

    .lw-list article{border-radius: 5px;width:100%;height:110px;display:flex;align-items:center;background:white;padding:5px 10px;}
    .lw-list article .s-left {height:90px;display:flex;flex-direction:column;width: 100%;margin-left:auto;}
    .lw-list article .s-left.image {width: calc(100% - 120px);}
    .lw-list article .s-left .s-title{font-size: 16px;text-overflow: ellipsis;display: -webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: 3;text-align:left;color:#323233;}
    .lw-list article .s-left .s-time{font-size: 12px;color:#999;margin-top:auto;text-align:right;}
    .lw-list article .s-left .s-color3{color:var(--blue);}
    .lw-list article .s-left .s-color2{color:var(--red);}
    .lw-list article .s-right {width:110px;}

    .s-status {font-size: 14px;color:#999;margin-top:auto;text-align:right;padding-right:20px;}
    .s-status.s-color3{color:var(--blue);}
    .s-status.s-color2{color:var(--red);}

    .lw-header {background:white;padding:5px 10px;}
</style>
{/block}
{block name="body"}
<van-nav-bar
        class="nav-theme"
        :placeholder="true"
        left-text="返回"
        left-arrow
        @click-left="onBack"
>
    <template #title>
        <span class="text-white">学习视频</span>
    </template>
</van-nav-bar>
<h3 style="text-align:center;">{$video.title}</h3>
<div class="s-status" :class="'s-color'+video.watch_status">{{video.watch_text}}</div>
<video src="{$video.video}"
       style="width:100%;margin:20px auto;"
       id="myVideo"
       controls
       @timeupdate="timeUpdate"
       @ended="VideoEnded">
</video>
<div class="lw-header">相关视频</div>
<div class="lw-list">
    <article v-for="video in list" @click="toVideo(video.id)">
        <section class="s-right">
            <van-image
                    width="110"
                    height="85"
                    fit="cover"
                    :src="video.main_image"
            ></van-image>
        </section>
        <section class="s-left image">
            <div class="s-title">{{video.title}}</div>
            <div class="s-time" :class="'s-color'+video.watch_status">{{video.watch_text}}</div>
        </section>
    </article>

    <div class="van-list__finished-text" v-if="list.length == 0">暂无更多视频</div>
</div>

{/block}
{block name="script"}
<script>
    function v_setup() {
        let base = {};

        base.video = Vue.reactive({$video});
        base.list = Vue.reactive({$video_list});


        base.toVideo = (id) => {
            location.href = "{:url('soldier/video')}?id=" + id;
        };

        //视频
        let time = localStorage.getItem('video_{$video.id}');
        base.currentTime = time ? time : 0; //上次观看时间
        base.newsschedule = base.currentTime; //当前观看时间
        base.timeUpdate = (e) => {
            if (e.target.currentTime - base.newsschedule > 1) {
                vant.showToast('不允许拖动进度条');
                let videoContext = document.getElementById("myVideo");
                videoContext.currentTime = base.newsschedule;
            } else {
                base.newsschedule = e.target.currentTime;
                localStorage.setItem('video_{$video.id}',base.newsschedule);
            }
        };
        base.VideoEnded = () => {
            postJson('/soldier/videoEnd', {id:base.video.id}).then(({data, code}) => {
                base.video.watch_status = 3;
                base.video.watch_text = '已完成';
                vant.showDialog({ message: '学习完毕' });
            })
        };

        base.onBack = () => {
            history.back();
        };

        Vue.onMounted(() => {
            let videoContext = document.getElementById("myVideo");
            if (videoContext) {
                if (base.currentTime > 0) {
                    vant.showToast('上次已观看到'+ parseInt(base.currentTime)+'秒');
                }
                videoContext.currentTime = base.currentTime;
            }
        });

        return base;
    }


</script>
{/block}