lw_test/app/mobile/view/soldier/series.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;}
</style>
{/block}
{block name="body"}
<van-nav-bar
        class="nav-theme"
        :fixed="true"
        :placeholder="true"
        left-text="返回"
        left-arrow
        @click-left="onBack"
>
    <template #title>
        <span class="text-white">{$series.title}</span>
    </template>
</van-nav-bar>

<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onList"
    >
        <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>
    </van-list>
</van-pull-refresh>

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

        base.activeNames = Vue.ref([]);

        //列表
        base.page = Vue.ref(1);
        base.loading = Vue.ref(false);
        base.finished = Vue.ref(false);
        base.refreshing = Vue.ref(false);
        base.list = Vue.reactive([]);
        base.onList = () => {
            let param = {};
            param.page = base.page.value;
            base.page.value++;

            postJson("soldier/listSeries?id={$id}", param).then( ({data}) => {
                base.loading.value = false;
                if (base.refreshing.value) base.refreshing.value = false;
                if (data.length === 0) {
                    base.finished.value = true;
                } else {
                    base.list.push(...data);
                }
            });

        };
        base.onRefresh = () => {
            base.list = Vue.reactive([]);
            base.page.value = 1;
            base.loading.value = true;
            base.finished.value = false;

            base.onList();
        };

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

        base.onBack = () => {
            location.href = "{:url('soldier/index')}";
        };


        return base;
    }
</script>
{/block}