APP/pages/6170/operationVideo/index.vue

<template>
	<view>
		<!-- 使用自定义导航栏 -->
		<custom-navbar :title="navTitle" :showBack="true" backgroundColor="#202020" color="#FFFFFF" right-text="编辑"
			right-color="rgba(255, 255, 255, 0.87)" @right-click="handleEdit"></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)" class="content">
							<view class="image-box" @click="openVideoUrl(item.url)">
								<view class="deviceIMG">
									<image src="/static/images/video.png" mode="" class="video"></image>
								</view>
								<view class="">
									<view class="file-title">{{item.title}}</view>
									<view class="file-baidu">{{item.url}}</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 {
				navTitle: '操作视频',
				navBarHeight: 70 + uni.getSystemInfoSync().statusBarHeight,
				videoList: [{
						id: 1,
						title: '使用教程1',
						url: 'https://www.bilibili.com/variety/?spm_id_from=333.1007.0.0',
						showConfirm: false
					},
					{
						id: 2,
						title: '使用教程2',
						url: 'www.baidu.com',
						showConfirm: false
					},
					{
						id: 3,
						title: '使用教程3',
						url: 'www.baidu.com',
						showConfirm: false
					},
					{
						id: 4,
						title: '使用教程4',
						url: 'www.baidu.com',
						showConfirm: false
					},
					{
						id: 5,
						title: '使用教程5',
						url: 'www.baidu.com',
						showConfirm: false
					}
				],
				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: {
			// 导航栏编辑按钮
			handleEdit() {
				uni.showToast({
					title: '点击了导航栏编辑',
					icon: 'none'
				});
			},

			// 添加视频
			addvideo() {
				uni.navigateTo({
					url: '/pages/6170/addvideo/index'
				})
			},

			// 处理滑动按钮点击
			handleSwipeClick(e, index) {
				const {
					content
				} = e;
				// 如果是确认删除操作
				if (content.text === '确认删除') {
					this.videoList.splice(index, 1);
					uni.showToast({
						title: '删除成功',
						icon: 'success'
					});
					return;
				}
				// 编辑操作
				if (content.text === '编辑') {
					this.editVideo(this.videoList[index].id);
				}
				// 删除操作
				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);
						}
					});
				}
			},

			// 编辑视频
			editVideo(id) {
				uni.navigateTo({
					url: `/pages/6170/editVideo/index?id=${id}`
				});
			},
			// 打开视频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'
						});
					});
				}
			},
		}
	}
</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>