APP/pages/common/operationVideo/index.vue

<template>
	<view>
		<!-- 使用自定义导航栏 -->
		<custom-navbar title="操作视频" :showBack="true" backgroundColor="#202020" color="#FFFFFF"></custom-navbar>
		<view class="device-page" :style="{ paddingTop: navBarHeight + 'px' }">
			<scroll-view scroll-y>
				<uni-swipe-action>
					<block v-for="(item, index) in videoList" :key="index">
						<uni-swipe-action-item :right-options="item.showConfirm ? confirmOptions : deleteOptions"
							@click="handleSwipeClick($event, index,item)" class="content">
							<view class="image-box" @click="openVideoUrl(item.videoUrl)">
								<view class="deviceIMG">
									<image src="/static/images/video.png" mode="" class="video"></image>
								</view>
								<view class="">
									<view class="file-title">{{item.videoName}}</view>
									<view class="file-baidu">{{item.videoUrl}}</view>
								</view>
							</view>
							<image src="/static/images/cires.png" class="circle"></image>
						</uni-swipe-action-item>
					</block>
				</uni-swipe-action>
			</scroll-view>
			<view class="content1" @click="addvideo">
				<image src="/static/images/path1.png" class="path1"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		listOperationVideos,
		deleteOperationVideo
	} from '@/api/common/operationVideo/index.js'
	export default {
		data() {
			return {

				navBarHeight: 70 + uni.getSystemInfoSync().statusBarHeight,
				videoList: [],
				deviceID: '',
				deleteOptions: [{
						text: '编辑',
						style: {
							backgroundColor: 'rgb(224, 147, 25)',
							borderRadius: '16px 0 0 16px',
							width: '160rpx',
						},
					},
					{
						text: '删除',
						style: {
							backgroundColor: 'rgb(240, 60, 60)',
							borderRadius: '0 16px 16px 0',
							width: '160rpx',
						},
					}
				],
				confirmOptions: [{
					text: '确认删除',
					style: {
						backgroundColor: 'rgb(240, 60, 60)',
						borderRadius: '16px',
						width: '280rpx',
						fontSize: '30rpx',
					}
				}]
			}
		},
		methods: {
			// 添加视频
			addvideo() {
				uni.navigateTo({
					url: `/pages/common/addvideo/index??id=${this.deviceID}`
				})
			},

			// 处理滑动按钮点击
			handleSwipeClick(e, index, item) {
				console.log(item, 'eeeee');
				const {
					content
				} = e;
				// 如果是确认删除操作
				if (content.text === '确认删除') {
					let ids = item.id
					let data ={
						ids:item.id
					}
					deleteOperationVideo(ids).then((res) => {
						if (res.code == 200) {
							uni.showToast({
								title: res.msg,
								icon: 'success'
							});
							this.getData()
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'success'
							});
						}

					})

					// return;
				}
				// 编辑操作
				if (content.text === '编辑') {
					console.log('编辑');
					uni.navigateTo({
						url: `/pages/common/addvideo/index?item=${encodeURIComponent(JSON.stringify(item))}`
					});
				}
				// 删除操作
				else if (content.text === '删除') {
					// 只修改当前项的选项为确认删除
					this.$set(this.videoList[index], 'showConfirm', true);
					// 关闭其他项的确认状态
					this.videoList.forEach((item, i) => {
						if (i !== index && item.showConfirm) {
							this.$set(this.videoList[i], 'showConfirm', false);
						}
					});
				}
			},

			// 打开视频URL
			openVideoUrl(url) {
				console.log(url, 'url333');
				// 检查URL是否包含协议头，如果没有则添加https://
				let fullUrl = url;
				if (!url.startsWith('http://') && !url.startsWith('https://')) {
					fullUrl = 'https://' + url;
				}
				//APP跳转方式
				if (plus) {
					plus.runtime.openURL(fullUrl, function(err) {
						uni.showToast({
							title: '打开链接失败',
							icon: 'none'
						});
					});
				}
			},
			getData() {
				let data = {
					deviceId: this.deviceID
				}
				listOperationVideos(data).then((res) => {
					console.log(res, 'resss');
					if (res.code == 200) {
						this.videoList = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			}
		},
		onShow() {
			this.getData()
		},
		onLoad(options) {
			this.deviceID = options.id

		}
	}
</script>

<style scoped>
	/* 页面整体样式 */
	.device-page {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: rgb(18, 18, 18);
		padding: 30rpx;
	}

	.content {
		background: rgb(26, 26, 26);
		border-radius: 16rpx;
		align-items: center;
		box-sizing: border-box;
		margin-bottom: 30rpx;
		position: relative;
	}

	.content1 {
		height: 160rpx;
		background: rgb(26, 26, 26);
		border-radius: 16rpx;
		text-align: center;
		line-height: 200rpx;
	}

	.image-box {
		display: flex;
		align-items: center;
		padding: 30rpx;
	}

	.video {
		width: 56rpx;
		height: 56rpx;
		margin-right: 20rpx;
	}

	.file-title {
		color: rgba(255, 255, 255, 0.87);
		font-size: 32rpx;
	}

	.file-baidu {
		color: rgba(255, 255, 255, 0.6);
	}

	.path1 {
		width: 62rpx;
		height: 62rpx;
	}

	.circle {
		width: 10rpx;
		height: 50rpx;
		position: absolute;
		right: 40rpx;
		top: 50rpx;
	}
</style>