119 lines
2.2 KiB
Plaintext
119 lines
2.2 KiB
Plaintext
<template>
|
|
<view class="video-list">
|
|
<slot name="title"></slot>
|
|
<list
|
|
class="list"
|
|
show-scrollbar="false">
|
|
<cell
|
|
class="cell"
|
|
:key="item.videoId"
|
|
v-for="item in lists">
|
|
<view
|
|
class="video-item"
|
|
@click="handleClick(item)">
|
|
<template
|
|
v-if="pickMode"
|
|
>
|
|
<image
|
|
v-if="!item.selected"
|
|
class="radio-icon"
|
|
src="@/static/icon/unselected@2x.png"></image>
|
|
<image
|
|
v-else
|
|
class="radio-icon"
|
|
src="@/static/icon/selected@2x.png"></image>
|
|
</template>
|
|
<image class="video-cover" :src="item.videoCover" mode="aspectFill"></image>
|
|
<view class="right-view">
|
|
<text
|
|
class="video-title"
|
|
:class="{active : item.videoId === currentVideo}"
|
|
>{{ item.videoTitle }}</text>
|
|
<text class="video-time">{{ item.videoTime }}</text>
|
|
</view>
|
|
</view>
|
|
</cell>
|
|
</list>
|
|
<slot name="footer"></slot>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import { mapMutations } from 'vuex'
|
|
export default {
|
|
name:"VideoList",
|
|
data() {
|
|
return {};
|
|
},
|
|
props: {
|
|
lists: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
currentVideo: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
isPushing: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
pickMode: {
|
|
type: Boolean
|
|
}
|
|
},
|
|
methods: {
|
|
...mapMutations(['makeDownloadList']),
|
|
handleClick(item) {
|
|
if (this.pickMode) {
|
|
this.$set(item, 'selected', !item.selected);
|
|
return;
|
|
}
|
|
if (this.isPushing) {
|
|
uni.showToast({
|
|
title: '投屏中，暂不支持切换',
|
|
icon: 'none'
|
|
})
|
|
return;
|
|
}
|
|
this.$emit('listClick', item);
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.video-list
|
|
flex 1
|
|
padding 0 30rpx
|
|
background-color: #FFF;
|
|
.list
|
|
flex 1
|
|
.video-item
|
|
flex-direction row
|
|
align-items: center
|
|
margin 15rpx 0
|
|
.right-view
|
|
margin-left 20rpx
|
|
flex 1
|
|
.radio-icon
|
|
margin-right: 20rpx
|
|
width: 30rpx
|
|
height: 30rpx
|
|
.video-cover
|
|
width 320rpx
|
|
height 180rpx
|
|
border-radius 10rpx
|
|
.video-title
|
|
font-size 28rpx
|
|
line-height 42rpx
|
|
color #333
|
|
&.active
|
|
color #FF920A
|
|
.video-time
|
|
margin-top 30rpx
|
|
font-size 26rpx
|
|
color #666
|
|
</style>
|