Film页面,列表视图用el-table实现,感谢buvta贡献

This commit is contained in:
haiyangcui
2020-10-31 21:43:09 +01:00
parent 15c542db82
commit 2af85fbfd1

View File

@@ -28,8 +28,7 @@
</div>
</div>
<div class="listpage-body" id="film-body" infinite-wrapper>
<div class="body-box" v-show="!show.find">
<div class="show-picture" v-if="setting.view === 'picture'">
<div class="show-picture" v-if="setting.view === 'picture' && !show.find">
<Waterfall ref="waterfall" :list="list" :gutter="20" :width="240"
:breakpoints="{ 1200: { rowPerView: 4 } }"
animationEffect="fadeInUp"
@@ -56,29 +55,70 @@
</template>
</Waterfall>
<infinite-loading force-use-infinite-wrapper :identifier="infiniteId" @infinite="infiniteHandler"></infinite-loading>
</div>
<div class="show-table" v-if="setting.view === 'table'">
<div class="zy-table">
<div class="tBody">
<ul>
<li v-for="(i, j) in list" :key="j" @click="detailEvent(site, i)" v-show="!setting.excludeR18Films || !containsR18Keywords(i.type)">
<span class="name">{{i.name}}</span>
<span class="type">{{i.type}}</span>
<span class="time">{{i.year}}</span>
<span class="note">{{i.note}}</span>
<span class="last">{{i.last}}</span>
<span class="operate">
<span class="btn" @click.stop="playEvent(site, i)">播放</span>
<span class="btn" @click.stop="starEvent(site, i)">收藏</span>
<span class="btn" @click.stop="shareEvent(site, i)">分享</span>
<span class="btn" @click.stop="downloadEvent(site, i)">下载</span>
</span>
</li>
</ul>
<infinite-loading force-use-infinite-wrapper :identifier="infiniteId" @infinite="infiniteHandler"></infinite-loading>
</div>
</div>
</div>
</div>
<div class="show-table" v-if="setting.view === 'table' && !show.find">
<el-table size="mini"
:data="list.filter(res => !setting.excludeR18Films || !containsR18Keywords(res.type))"
height="100%"
row-key="id"
@row-click="(row) => detailEvent(site, row)"
style="width: 100%">
<el-table-column
prop="name"
label="片名">
</el-table-column>
<el-table-column
prop="director"
label="导演"
width="100">
</el-table-column>
<el-table-column
prop="type"
label="类型"
width="100">
</el-table-column>
<el-table-column
prop="year"
label="上映"
align="center"
width="100">
</el-table-column>
<el-table-column
prop="area"
label="地区"
align="center"
width="100">
</el-table-column>
<el-table-column
prop="lang"
label="语言"
align="center"
width="100">
</el-table-column>
<el-table-column
prop="note"
label="备注">
</el-table-column>
<el-table-column
label="操作"
header-align="center"
align="right"
width="200">
<template slot-scope="scope">
<el-button @click.stop="playEvent(site, scope.row)" type="text">播放</el-button>
<el-button @click.stop="starEvent(site, scope.row)" type="text">收藏</el-button>
<el-button @click.stop="shareEvent(site, scope.row)" type="text">分享</el-button>
<el-button @click.stop="downloadEvent(site, scope.row)" type="text">下载</el-button>
</template>
</el-table-column>
<infinite-loading
slot="append"
:identifier="infiniteId"
@infinite="infiniteHandler"
force-use-infinite-wrapper=".el-table__body-wrapper">
<div slot="no-more">数据量过少时请重复操作一次,以防网站抽风</div>
</infinite-loading>
</el-table>
</div>
<div class="show-table" v-show="show.find">
<el-table size="mini"