yixiang/pageC/video-list.vue

<template>
	<view class="content">
		<u-navbar title="视频管理" height="88rpx" :placeholder="true" :autoBack="true">
			<view slot="right" class="u-nav-slot">
				<text @click="show_manager = !show_manager">{{show_manager ? '完成' : '管理'}}</text>
			</view>
		</u-navbar>
		<view class="list" v-if="list.length>0">
			<u-checkbox-group v-model="select_all" placement="column" @change="selectitem">
				<view class="list-item hflex acenter" v-for="(item,index) in list" :key="index" @click="toinfo(item)">
					<u-checkbox v-if="show_manager" activeColor="#57C3C2" shape="circle" :customStyle="{marginBottom: '8px'}" :name="item.id"></u-checkbox>
					<view class="hflex acenter" style="flex:1">
						<image :src="item.image" mode="aspectFill"></image>
						<view class="img-right">
							<text class="name text_hide2">{{item.title}}</text>
							<text class="num" v-if="current != 4">{{item.created_at}}</text>
						</view>
					</view>
				</view>
			</u-checkbox-group>
		</view>
		<view class="hflex acenter jcenter " style="height: 100vh;" v-else >
			<u-empty mode="data"></u-empty>
		</view>
		<view style="height: 186rpx;" v-if="show_manager"></view>
		<view class="bottom hflex acenter jbetween" v-if="show_manager">
			<u-checkbox-group placement="column">
				<u-checkbox :checked="quanxuan" @change="selectall" activeColor="#57C3C2" shape="circle" :customStyle="{marginBottom: '8px'}" label="全选"></u-checkbox>
			</u-checkbox-group>
			<view class="btn" @click="downVideo">批量下载</view>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	export default {
		data() {
			return{
				list: [],
				current:0,
				page: 1,
				last_page: 1,
				show_manager: false,
				select_all: [],
				quanxuan: false
			}
		},
		onLoad() {
			this.getlist()
		},
		onReachBottom() {
			if(this.page < this.last_page) {
				this.page++
				this.getlist()
			} else {
				uni.$u.toast('已经到底了')
				return
			}
		},
		methods: {
			toinfo(item) {
				uni.navigateTo({
					url: '/pageC/video-detail?data=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			/* 全选 */
			selectall() {
				this.quanxuan = !this.quanxuan
				console.log(this.quanxuan);
				if(this.quanxuan) {
					this.select_all = []
					for(var i=0;i<this.list.length;i++) {
						this.select_all.push(this.list[i].id)
					}
				} else {
					this.select_all = []
				}
				console.log(this.select_all);
			},
			/* 选择 */
			selectitem(e) {
				this.select_all = e
				if(this.select_all.length == this.list.length) {
					this.quanxuan = true
				} else {
					this.quanxuan = false
				}
			},
			/* 取消收藏 */
			tocancel(item) {
			},
			/* 切换tab */
			changetabs(e) {
				this.current = e.index
				this.select_all = []
				this.quanxuan = false
				this.list = []
				this.getlist()
			},
			getlist() {
				var _this = this
				$api.req({
					url: 'admin/video',
					data: {
						is_page: 1,
						page: _this.page,
						limit: 10
					}
				}, function(res) {
					if(res.code == 10000) {
						_this.list = _this.list.concat(res.data.list)
						_this.last_page = res.data.last_page
					}
				})
				
			},
			downVideo() {}
		},
	}
</script>

<style lang="scss">
	.content::v-deep {
		background: #FFFFFF;
		position: relative;
		.bottom {
			position: fixed;
			bottom: 0;
			width: 750rpx;
			height: 166rpx;
			background: #FFFFFF;
			padding: 12rpx 28rpx 80rpx; 
			box-sizing: border-box;
			z-index: 29;
			.btn {
				width: 184rpx;
				height: 72rpx;
				background: #00B0B0;
				border-radius: 36rpx;
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 72rpx;
				text-align: center;
			}
		}
		.list{
			width: 100%;
			box-sizing: border-box;
			padding: 28rpx 28rpx;
			.list-item {
				margin: 0 0 32rpx;
				image {
					width: 200rpx;
					height: 128rpx;
					border-radius: 6rpx;
					margin: 0 20rpx 0 0;
				}
				.img-right {
					.name {
						max-width: 452rpx;
						font-size: 28rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						color: #333333;
						padding: 0 0 14rpx;
					}
					.num {
						font-size: 20rpx;
						font-family: SFPro, SFPro;
						font-weight: 400;
						color: #666666;
					}
					.price {
						font-size: 28rpx;
						font-family: JDZhengHT, JDZhengHT;
						font-weight: 400;
						color: #FF3333;
					}
				}
				.u-checkbox {
					margin: 0 32rpx 0 0;
				}
			}
		}
		.tabs {
			width: 100%;
			padding: 18rpx 0;
			border-bottom: 2rpx solid #F5F5F5;
		}
		.u-nav-slot {
			text {
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}
	}
</style>