crmcard/pages/list/videoList.vue

<template>
	<view class="caseList">
		<uni-menubar title="视频管理" />
		<tm-search v-model="videoParams.keyword" color="blue" @confirm="getVideos"></tm-search>
		<tm-tabs color="blue" @change="tabClick" v-model="activeIndex" :list="allCateList" range-key="name"
			align="left">
		</tm-tabs>
		<tm-row>
			<tm-col v-for="(item,index) in videoList" :padding="10" :grid="6" :key="index" @click="videoDetail(item)">
				<tm-sheet :padding="[0,0]" :margin="[10,10]">
					<view class="" style="position: relative;">
						<image :src="item.thumb" style="width: 100%;height: 260rpx;"></image>
						<view class="pa-10 text-size-xs"
							style="color: #fff;position: absolute;top: 0;right: 0rpx;background-color: #0000006b;">
							共{{item.views}}次播放</view>
						<view class="px-15">
							<view class="mt-20" style="font-size: 26rpx;">
								<text>{{item.name}}</text>
							</view>
							<view class="mt-20" style="font-size: 24rpx;">
								<text style="color: #9E9E9E;">{{item.create_time}}</text>
							</view>
							<view class="pt-20 pb-20 flex flex-between" style="font-size: 24rpx;">
								<view v-if="item.is_edit">
									<tm-button theme="blue" size="s" @click="addVideoForm = item,videoShow = true">编辑
									</tm-button>
									<tm-button theme="red" size="s" @click="delVideo(item)">删除</tm-button>
								</view>
							</view>
						</view>
					</view>
				</tm-sheet>
			</tm-col>
		</tm-row>

		<tm-poup v-if="videoShow" v-model="videoShow" position="bottom" height="70%" :round="0">
			<view class="pa-20">
				<view class="text-xl text-bold">视频编辑</view>
				<tm-input name="name" required title="视频名称" v-model="addVideoForm.name"></tm-input>
				<picker @change="bindVideoPickerChange" :value="addVideoForm.cate_id" range-key="name"
					:range="cateList">
					<tm-input required title="选择分类" placeholder="请选择分类" disabled
						:value="addVideoForm.cate_id  ? cateList.find(v=>v.id == addVideoForm.cate_id)['name'] : '请选择分类'">
					</tm-input>
				</picker>
				<view class="py-12 px-24 mx-12 round-3 border-b-1 grey text">
					<text class="text-size-n text-weight-b ">上传视频</text>
					<text class="text-grey text-size-xs px-10">(最多可以上传1个)</text>
				</view>
				<view class="py-32 mx-12">
					<video v-if="addVideoForm.path" style="width: 100%;" :src="addVideoForm.path" controls></video>
					<tm-button theme="light-green" size="n" @click="addVideo">点击选择视频</tm-button>
				</view>
				<view class="px-24">
					<tm-button block @click="saveAlbum">确定提交</tm-button>
				</view>
			</view>
		</tm-poup>
		<tm-flotbutton v-if="user.card_id>0" @click="videoShow = true" label="添加" :show-text="true"
			color="bg-gradient-blue-accent">
		</tm-flotbutton>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "",
				activeIndex: 0,
				videoList: [],
				videoParams: {
					cate_id: 0, //分类id
					keyword: "",
					page: 1 //分页页码，数字类型
				},
				videoFinish: false,
				videoLoding: false,
				isShow: 0,

				header: {
					'Authorization': uni.getStorageSync('token'),
					'Content-Type': 'multipart/form-data'
				},
				cateList: [],
				allCateList: [{
					'name': '全部',
					'id': 0
				}],
				videoShow: false,
				addVideoForm: {
					name: '',
					cate_id: '',
					path: ''
				}
			}
		},
		computed: {
			user() {
				return this.$tm.vx.state().user.userInfo || {}
			}
		},
		onLoad() {
			this.getVideoCatList()
			this.getVideos()
		},
		onReachBottom(e) {
			this.videoScroll()
		},
		methods: {
			videoDetail(item) {
				uni.navigateTo({
					url: "/pages/list/videoDetail?detail=" + JSON.stringify(item) + "&card_id=" + uni
						.getStorageSync('card_id')
				})
			},
			getVideoCatList(id) {
				this.$tm.request.post('video/cate').then(res => {
					this.cateList = res.data
					this.allCateList = [...this.allCateList, ...this.cateList]
				})
			},
			tabClick(e) {
				this.activeIndex = e
				this.videoParams.cate_id = this.allCateList[e].id
				this.getVideos()
			},
			getVideos() {
				this.$tm.request.post('video/list', this.videoParams).then(res => {
					this.videoList = res.data
				})
			},
			addVideo() {
				let that = this
				uni.chooseMedia({
					count: 1,
					mediaType: ['video'],
					sourceType: ['album'],
					maxDuration: 60,
					success(res) {
						let item = res.tempFiles[0]
						uni.showToast({
							title: '上传中',
							icon: "none"
						});
						uni.uploadFile({
							url: 'https://cardoa.platomix.net/api/upload', //仅为示例，非真实的接口地址
							filePath: item.tempFilePath,
							name: 'file',
							header: that.header,
							success: (uploadFileRes) => {
								let video = JSON.parse(uploadFileRes.data)
								uni.uploadFile({
									url: 'https://cardoa.platomix.net/api/upload', //仅为示例，非真实的接口地址
									filePath: item.thumbTempFilePath,
									name: 'file',
									header: that.header,
									success: (imgdata) => {
										imgdata = JSON.parse(imgdata.data)
										uni.hideToast();
										that.addVideoForm.path = video.data
										that.addVideoForm.thumb = imgdata.data
										that.addVideoForm.duration = item.duration
										that.addVideoForm.height = item.height
										that.addVideoForm.width = item.width
										that.addVideoForm.size = item.size
									}
								});
							}
						});

					}
				})
			},
			delVideo(item) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否永久删除',
					success(res) {
						if (res.confirm) {
							that.$tm.request.post('video/update', {
								id: item.id,
								isdel: true,
							}).then(res => {
								that.getVideos()
							})
						} else if (res.cancel) {}
					}
				});
			},

			videoScroll(etype) {
				this.videoParams.page++
				this.$tm.request.post('video/list', this.videoParams).then(res => {
					this.videoLoding = false
					if (res.data.length > 0) {
						res.data.forEach(val => {
							this.videoList.push(val)
						})
					}
				})
			},
			bindVideoPickerChange(o) {
				this.addVideoForm.cate_id = this.cateList[o.detail.value].id
			},
			saveAlbum() {
				this.$tm.request.post('video/update', this.addVideoForm).then(res => {
					this.getVideos()
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.caseList {
		// background-color: #f5f5f5;

	}
</style>