APP/pages/common/addvideo/index.vue

<template>
	<view>
		<custom-navbar :title="navTitle" :showBack="true" backgroundColor="#202020" color="#FFFFFF"></custom-navbar>
		<view class="device-page" :style="{ paddingTop: navBarHeight + 'px' }">
			<!-- 表单内容 -->
			<view class="form-content">
				<!-- 名称输入框 -->
				<view class="input-group">
					<text class="label">名称</text>
					<input class="input" type="text" placeholder="请输入名称" v-model="name" />
				</view>

				<!-- 视频链接输入框 -->
				<view class="input-group">
					<text class="label">视频链接</text>
					<input class="input" type="text" placeholder="请输入视频链接" v-model="videoLink" />
				</view>
			</view>

			<!-- 保存按钮 -->
			<button class="save-button" @click="saveData">保 存</button>

			<!--===================== 保存成功提示框================== -->
			<view class="agreement-mask" v-if="showModal">
				<!-- 上传画面弹窗 -->
				<view class="agreement-popupC">
					<view class="popup-content">
						<image src="/static/images/path2.png" mode="" class="path2"></image>
						<view class="popup-Title">
							<view>保存成功！</view>
						</view>
					</view>
					<!-- 按钮组 -->
					<view class="popup-buttons">
						<button class="btn agreeBtn" @click="handleBtn">确定</button>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>
<script>
	import {
		addOperationVideo,
		editOperationVideo
	} from '@/api/common/operationVideo/index.js'
	export default {
		data() {
			return {
				navBarHeight: 70 + uni.getSystemInfoSync().statusBarHeight,
				navTitle: '添加',
				name: '',
				videoLink: '',
				showModal: false,
				deviceID: "",
				id: ''
			};
		},
		methods: {
			// 保存
			saveData() {
				// 这里可以添加保存数据的逻辑，例如发送到服务器等
				console.log('保存数据:', this.name, this.videoLink);
				if (this.name == "") {
					uni.showToast({
						icon: 'none',
						title: '名称不能为空'
					})
					return false
				}
				if (this.videoLink == '') {
					uni.showToast({
						icon: 'none',
						title: '视频链接不为空'
					})
					return false
				}
				let data = {
					videoName: this.name,
					videoUrl: this.videoLink,
					deviceId: this.deviceID,
					id: this.id
				}
				// 添加编辑
				const apiMethod = this.editData ? editOperationVideo : addOperationVideo;
				console.log('apiMethod:', apiMethod);
				apiMethod(data).then(res => {
					if (res.code == 200) {
						this.showModal = true;
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				}).catch(err => {
					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					});
				});

			},
			// 确定提示框
			handleBtn() {
				this.showModal = false
			}
		},
		onLoad(options) {
			if (options.item) {
				// 解析传递过来的item对象
				this.editData = JSON.parse(decodeURIComponent(options.item));
				// 回显数据
				this.name = this.editData.videoName || '';
				this.videoLink = this.editData.videoUrl || '';
				this.deviceID = this.editData.deviceId || '';
				this.id = this.editData.id
				// 修改导航标题
				this.navTitle = '编辑';
			} else if (options.id) {
				this.deviceID = options.id;
				this.navTitle = '添加';
				this.editData = null; // 明确设置为 null
			}
		}
	};
</script>

<style scoped>
	.device-page {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: rgb(18, 18, 18);
		padding: 30rpx;
	}

	.form-content {
		flex: 1;
		/* padding: 20px; */
	}

	.input-group {
		margin-bottom: 20px;
		display: flex;
		align-items: center;
	}

	.label {
		width: 70px;
		color: #fff;
		font-size: 32rpx;
	}

	.input {
		flex: 1;
		height: 96rpx;
		padding: 0 10px;
		background-color: rgb(26, 26, 26);
		color: #fff;
		border-radius: 16rpx;
	}

	/* 当输入框获得焦点时，更改边框颜色 */
	.input:focus {
		border-color: #7AC23C;
		/* 获得焦点时的边框颜色 */
		outline: none;
		/* 移除默认的outline样式 */
	}

	.save-button {
		background-color: rgb(187, 230, 0);
		color: #232323;
		border: none;
		font-size: 24rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		width: 100%;
		position: absolute;
		bottom: 0rpx;
		left: 0rpx
	}

	/* 遮罩层 */
	.agreement-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
	}

	/* 弹窗主体 */
	.agreement-popup {
		width: 100%;
		height: 50%;
		background-color: rgb(42, 42, 42);
		border-radius: 60rpx 60rpx 0rpx 0rpx;
		padding: 40rpx;
		box-sizing: border-box;
		position: absolute;
		bottom: 0rpx;
	}

	.popup-Title {
		color: rgba(255, 255, 255, 0.87);
		padding: 20rpx 0rpx;
		font-size: 32rpx;
	}

	.agreement-popupC {
		width: 60%;
		background-color: rgb(42, 42, 42);
		border-radius: 40rpx;
		padding: 40rpx;
		box-sizing: border-box;
		border: 1rpx solid rgba(187, 230, 0, 0.3);
		text-align: center;
	}

	.path2 {
		width: 64rpx;
		height: 64rpx;
		margin-right: 10px;
	}

	/* 通用按钮样式 */
	.btn {
		flex: 1;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 40rpx;
		font-size: 32rpx;
		margin: 10rpx auto;
		width: 200rpx;
	}

	/* 同意按钮 */
	.agreeBtn {
		background-color: rgb(187, 230, 0);
		color: #232323;
		border: none;
		font-size: 24rpx;
	}
</style>