Files
UNION_NSI/target/classes/views/mobile/trainEducation/AlbumList.html
T
2026-09-08 19:49:21 +08:00

161 lines
4.6 KiB
HTML

<!--#
layout("/mobile/platform.html"){
#-->
<style>
#app {
background: #FFFFFF;
}
.topTitle {
font-size: 16px;
padding: 10px 16px;
}
.list-card {
padding: 0 16px;
}
.list-item {
max-width: calc(100% - 100px);
}
.list-item > div {
height: 30px;
line-height: 30px;
}
.newest-video, .nav-button {
padding: 0 20px;
}
</style>
<div id="app" v-cloak>
<m-page-loading v-if="mLoading"></m-page-loading>
<van-nav-bar
title="视频资料"
left-arrow
placeholder
fixed
@click-left="window.history.back()"
></van-nav-bar>
<div class="newest-video">
<h4>{{typeName}}</h4>
</div>
<div class="nav-button">
<van-button type="info" :plain="pageForm.searchType !== 'new'" size="small" @click="searchTypeClick('new')">
最新视频
</van-button>
<van-button type="info" :plain="pageForm.searchType !== 'most'" size="small" @click="searchTypeClick('most')">
播放最多
</van-button>
<van-button type="info" :plain="pageForm.searchType !== null" size="small" @click="searchTypeClick(null)">全部
</van-button>
</div>
<van-divider></van-divider>
<div style="margin: 20px auto 0 auto;position: relative">
<van-list v-model="loading"
:finished="finished"
:finished-text="tableData.length>0?'没有更多了':''"
:immediate-check="false"
@load="pageData">
<div v-for="o in tableData" class="list-card" @click="goVideoPage(o)">
<div style="display: flex;padding-bottom: 10px" class="van-hairline--bottom">
<van-image
style="margin-right: 10px"
width="90"
height="90"
:src="FILE_DOMAIN+'/fileStreamPreview?id='+o.cover"
></van-image>
<div class="list-item">
<div style="font-size: 14px">{{o.title}}</div>
<div class="van-ellipsis" style="color: darkgray;font-size: 13px">
{{removeHTMLTag(o.description)}}
</div>
<div>
<van-tag plain type="primary">{{o.videoCount}}个视频</van-tag>
</div>
</div>
</div>
</div>
</van-list>
</div>
<van-empty v-if="mLoading==false&&tableData.length==0" class="custom-image" image="/none.svg"
description="暂无数据">
</van-empty>
</div>
<script>
<!--#include("/platform/trainEdu/include/include.js"){}#-->
var vue = new Vue({
el: '#app',
mixins: [mobileMixins],
data() {
return {
typeName: null,
videoTypeList: [],
pageForm: {
searchType: null
}
}
},
methods: {
async pageData() {
this.mLoading = true
const {data} = await $.get('/mobile/trainEducation/getAlbumList', this.pageForm)
setTimeout(() => {
this.tableData = this.tableData.concat(data.list)
if (this.tableData.length === data.totalCount) {
this.finished = true
} else {
this.pageForm.pageNumber++
}
this.mLoading = false
this.pageForm.totalCount = data.totalCount
}, 300)
},
searchTypeClick(val) {
this.pageForm.searchType = val
this.pageForm.pageNumber = 1
this.tableData = []
this.pageData()
},
doSearch() {
this.pageForm.pageNumber = 1
this.tableData = []
this.pageData()
},
goVideoPage(item) {
window.location.href = '/mobile/trainEducation/videoPage?id=' + item.id
}
},
async created() {
this.videoTypeList = await getVideoType()
const typeId = this.GetQueryString("id")
const type = this.videoTypeList.find(v => parseInt(v.id) === parseInt(typeId))
this.typeName = type.typeName
if (typeId) {
this.$set(this.pageForm, 'typeId', typeId)
await this.pageData()
}
}
})
</script>
<!--#
}
#-->