qjd-shell-uniapp/pages/media/index.vue

<template>
	<view class="container">
		<view class="media-card">
			<view class="media-head">
				<view class="media-title">直播</view>
				<view class="media-handle">
					<view class="handle-card" @click="goToSetLive">
						<view class="iconfont iconshezhi"></view>
						<view class="handle-card-text">直播设置</view>
					</view>
				</view>
			</view>
			<view class="media-content">
				<image class="live-card" src="../../static/images/live-card.png" @click="goToLiveDetail"></image>
			</view>
		</view>
		<view class="media-card">
			<view class="media-head">
				<view class="media-title">短视频</view>
				<view class="media-handle">
					<view class="handle-text" style="color: #51A539;" @click="manageType = true" v-if="!manageType">管理</view>
					<view class="handle-text" style="color: #333333;" @click="manageType = false" v-if="manageType">取消</view>
					<view class="handle-text" style="color: #F95151;" @click="deleteVideo()" v-if="manageType">删除</view>
					<view class="handle-card" v-if="!manageType" @click="addVideo">
						<view class="iconfont iconshangchuan"></view>
						<view class="handle-card-text">上传视频</view>
					</view>
				</view>
			</view>
			<view class="media-content">
				<view class="video-card" v-for="(item, index) in list" :key="index" @click="!manageType&&goToVideo(item)">
					<image class="video-img" :src="item.coverUrl"></image>
					<view class="video-title-box" @click.stop="setVideoStatue(item)">
						<text class="iconfont" :class="item.check ? 'iconqueding' : 'iconfeigouxuan'" 
						 v-if="manageType"></text>
						<view class="video-title">
							{{item.videoName}}
						</view>
					</view>
				</view>
				<u-divider :color="isOver ? '#909399' : '#51A539'" :border-color="isOver ? '#909399' : '#51A539'" @click="handleLoadMore()">
					<u-loading mode="circle" v-if="loadingData"></u-loading>{{loadingData ? '加载中' : (isOver ? '没有更多了' : '点击加载更多')}}
				</u-divider>
			</view>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
	</view>
</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		data() {
			return {
				liveId: '',
				pageIndex: 1,
				isOver: false,
				list: [],
				manageType: false,
				loadingData: false,
			}
		},
		onLoad() {},
		onShow() {
			this.getBaseData()
		},
		onPullDownRefresh() {
			this.getBaseData('refresh')
		},
		methods: {
			//  取消选中
			setVideoStatue(item){
				item.check = !item.check
			},
			//  获取全部数据
			getBaseData(refresh) {
				this.pageIndex = 1
				this.list = []
				this.getList()
				NET.request(API.getLiveId, {}, 'GET').then(res => {
					if (refresh == 'refresh') {
						uni.stopPullDownRefresh();
					}
					if (res.data && res.data != 0) {
						this.liveId = res.data
					}
				}).catch(res => {
					this.$refs.uTips.show({
						title: '获取直播ID失败',
						type: 'warning',
					})
				})
			},
			//  直播设置
			goToSetLive() {
				uni.navigateTo({
					url: '/pagesMedia/liveOption'
				});
			},
			//  查看直播详情
			goToLiveDetail() {
				if (this.liveId) {
					uni.navigateTo({
						url: '/pagesMedia/liveDetail?liveId=' + this.liveId
					});
				} else {
					this.$refs.uTips.show({
						title: '当前无可进行的直播',
						type: 'warning',
					})
				}
			},
			//  新增短视频
			addVideo() {
				uni.navigateTo({
					url: '/pagesMedia/videoForm?type=add'
				});
			},
			//  懒加载
			handleLoadMore() {
				if (!this.isOver) {
					this.pageIndex++
					this.getList()
				}
			},
			//  获取列表数据
			getList() {
				this.loadingData = true
				NET.request(API.getVideoList + this.pageIndex + '/10', {}, 'GET').then(res => {
					this.loadingData = false
					this.isOver = res.data.list.length != 10
					res.data.list.forEach(site => {
						site.check = false
					})
					this.list = this.list.concat(res.data.list)
				}).catch(error => {
					this.loadingData = false
					this.$refs.uTips.show({
						title: error.data.msg,
						type: 'warning',
					})
				})
			},
			//  查看短视频详情
			goToVideo(item) {
				uni.setStorage({
					key: 'videoUrl',
					data: item.mediaUrl
				})
				uni.navigateTo({
					url: '/pagesMedia/videoDetail?videoId=' + item.videoId
				});
			},
			//  删除短视频
			deleteVideo() {
				let postData = ''
				this.list.filter(site => site.check).forEach((site, index) => {
					postData += (index ? '&' : '?') + 'videoIds=' + site.videoId
				})
				NET.request(API.deleteVideo + '/' + postData, {}, 'GET').then(res => {
					this.$refs.uTips.show({
						title: '删除成功',
						type: 'success',
					})
					this.manageType = false
					this.pageIndex = 1
					this.list = []
					this.getList()
				}).catch(error => {
					this.$refs.uTips.show({
						title: error.data.msg,
						type: 'warning',
					})
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.container {
		width: 100%;
		height: 100%;
		float: left;
		background-color: #f7f7f7;
		overflow-y: auto;

		.media-card {
			width: 100%;
			float: left;
			background: #FFFFFF;
			border-radius: 0 0 10px 10px;
			margin-bottom: 10px;

			.media-head {
				width: 100%;
				height: 45px;
				float: left;
				box-sizing: border-box;
				padding: 6px 0 6px 15px;
				border-bottom: 1px solid #EDEDED;

				.media-title {
					height: 16px;
					float: left;
					margin: 8px 0;
					padding-left: 6px;
					border-left: 2px solid #51A539;
					font-size: 15px;
					font-family: PingFang SC;
					color: #333333;
					line-height: 16px;
				}

				.media-handle {
					height: 32px;
					float: right;

					.handle-text {
						height: 32px;
						float: left;
						padding: 0 10px;
						margin: 0 5px;
						font-size: 15px;
						font-family: PingFang SC;
						line-height: 32px;
					}

					.handle-card {
						width: 96px;
						height: 32px;
						float: left;
						background: #51A539;
						border-radius: 16px 0px 0px 16px;
						font-family: PingFang SC;
						color: #FFFFFF;
						display: flex;
						align-items: center;
						justify-content: center;

						.iconfont {
							font-size: 22px;
						}

						.handle-card-text {
							float: left;
							line-height: 32px;
							font-size: 12px;
						}
					}
				}
			}

			.media-content {
				width: 100%;
				float: left;
				padding: 10px 15px;
				box-sizing: border-box;

				.live-card {
					width: 100%;
					height: 80px;
					float: left;
				}

				.video-card:nth-child(odd) {
					margin: 0 5px 10px 0;
				}

				.video-card:nth-child(even) {
					margin: 0 0 10px 5px;
				}

				.video-card {
					width: calc(50% - 5px);
					height: 206px;
					float: left;
					background: #FFFFFF;
					box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.1);
					border-radius: 5px;
					overflow: hidden;

					.video-img {
						width: 100%;
						height: 170px;
						object-fit: cover;
						float: left;
					}

					.video-title-box {
						width: 100%;
						height: 36px;
						float: left;
						font-family: PingFang SC;
						line-height: 36px;
						display: flex;
						justify-content: center;

						.iconfont {
							color: #51A539;
							font-size: 36px;
							line-height: 36px;
							display: flex;
							align-items: center;
						}

						.video-title {
							max-width: calc(100% - 36px);
							height: 36px;
							line-height: 36px;
							font-size: 15px;
							color: #333333;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}
			}
		}
	}
</style>