APP/pages/common/addvideo/index.vue

<template>
	<view class="device-page">
		<!-- 表单内容 -->
		<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>

</template>
<script>
	export default {
		data() {
			return {
				name: '',
				videoLink: '',
				showModal: false
			};
		},
		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
				}
				this.showModal = true
				uni.navigateBack()
			},
			// 确定提示框
			handleBtn() {
				this.showModal = false
			}
		}
	};
</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>