1
0
forked from dyf/APP
Files
APP/pages/common/addvideo/index.vue
2025-07-14 09:46:58 +08:00

256 lines
5.4 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>