dyf/APP
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

6155前端功能完成

Browse Source
This commit is contained in:
liub
2025-07-14 09:46:58 +08:00
parent 3dfdd5d4c1
commit 89464f3696
15 changed files with 1128 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

256
pages/common/addvideo/index.vue Normal file
View File

@ -0,0 +1,256 @@
<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>

2
pages/common/index/index.vue
View File

@ -376,7 +376,7 @@
});
return;
}
if (item.typeName == '6155') {
uni.navigateTo({
url: "/pages/6155/deviceDetail",

3
pages/common/login/index.vue
View File

@ -23,7 +23,6 @@
class="agreeT">《隐私政策》</a></text>
</view>
</view>
<!-- 登录按钮 -->
<button class="login-btn" @click="handleLogin">
登录
@ -114,7 +113,6 @@
},
// 登录
async handleLogin() {
console.log('33333');
if (this.phone == '') {
uni.showToast({
title: '手机号不能为空',
@ -146,7 +144,6 @@
smsCode: this.code,
tenantId: '894078' //租户ID
})
console.log(res, 'res44444');
if (res.code == 200) {
uni.hideLoading()
uni.setStorageSync('token', res.data.access_token) // 缓存token

404
pages/common/operatingInstruct/index.vue Normal file
View File

@ -0,0 +1,404 @@
<template>
<!-- 使用自定义导航栏 -->
<view>
<custom-navbar title="操作说明" :showBack="true" backgroundColor="#202020" color="#FFFFFF"
:right-text="isDeleteMode ? '完成' : '删除'" right-color="rgba(255, 255, 255, 0.87)"
@right-click="toggleDeleteMode">
</custom-navbar>
<view class="device-page" :style="{ paddingTop: navBarHeight + 'px' }">
<view class="example-body">
<!-- 图片列表 -->
<view class="image-list">
<view class="image-item" v-for="(image, index) in instructionImages" :key="index"
@click="handleImageClick(index,image)">
<image :src="image.fileUrl" mode="aspectFit" class="instruction-image"
:class="{ 'image-selected': isDeleteMode && selectedImages.includes(index) }"></image>
<!-- 多选模式下的选中标记 -->
<view class="checkmark" v-if="isDeleteMode && selectedImages.includes(index)">
<image src="/static/images/delete-icon.png" mode="aspectFill"></image>
</view>
</view>
<!-- 上传按钮（非删除模式显示） -->
<view class="upload-btn" v-if="!isDeleteMode">
<uni-file-picker ref="filePicker" v-model="fileList" @select="selectFile" limit="9"
class="custom-file-picker"></uni-file-picker>
</view>
</view>
</view>
</view>
<!-- 底部删除按钮（多选模式显示） -->
<view class="delete-footer" v-if="isDeleteMode && selectedImages.length > 0">
<button @click="deleteSelectedImages">删除({{selectedImages.length}})</button>
</view>
<!-- 删除弹框 -->
<view class="agreement-mask" v-if="deleteShow">
<view class="agreement-popupC">
<view class="popup-content">
<image src="/static/images/dell.png" mode="" class="svg"></image>
<uni-icon class="trash"></uni-icon>
<view>
<view class="popup-Title">确定删除所选设备！</view>
</view>
</view>
<!-- 按钮组 -->
<view class="popup-buttons">
<button class="btn agreeBtn" @click="handleBtn">确定</button>
</view>
</view>
</view>
</view>
</template>
<script>
import {
baseURL,
getToken,
clientid
} from '@/utils/request'
import {
fileInfo,
fileDelete
} from '@/api/common/operatingInstruct/index.js'
export default {
data() {
return {
navBarHeight: 70 + uni.getSystemInfoSync().statusBarHeight,
fileList: [],
deviceID: "",
instructionImages: [],
isDeleteMode: false, // 是否删除模式
selectedImages: [], // 选中的图片索引
deleteShow: false,
ImageData: [],
filePicker: ''
}
},
methods: {
// 选择文件
selectFile(e) {
console.log('选择文件：', e)
// const file = e.tempFiles[0].file
const files = e.tempFiles.map(item => item.file)
console.log('files', files);
this.uploadFile(files)
},
// 上传图片
uploadFile(files) {
this.$refs.filePicker.clearFiles() // 通过ref操作uni-file-picker组件
uni.showLoading({
title: '上传中...'
})
files.forEach(file => {
uni.uploadFile({
url: baseURL + '/app/file/upload',
filePath: file.path || file.url,
name: 'files',
formData: {
deviceId: this.deviceID,
fileType: '1' //文件类型(1:操作说明，2:产品参数)
},
header: {
'Authorization': 'Bearer ' + getToken(),
'clientid': clientid(),
},
complete: (res) => {
console.log(res, 'resss');
try {
const responseData = JSON.parse(res.data);
if (responseData.code === 200) {
uni.showToast({
title: responseData.msg,
icon: 'success'
});
this.$refs.filePicker.clearFiles(); // 清空已选文件
this.callOtherApi();
} else {
uni.showToast({
title: responseData.msg,
icon: 'none'
});
}
} catch (e) {
uni.showToast({
title: '上传失败',
icon: 'none'
});
} finally {
uni.hideLoading();
}
}
})
})
},
// 获取图片列表
callOtherApi() {
let data = {
deviceId: this.deviceID,
fileType: '1' //文件类型(1:操作说明，2:产品参数)
}
fileInfo(data).then((res) => {
if (res.code == 200) {
this.instructionImages = res.data
}
})
},
// 切换删除模式
toggleDeleteMode() {
this.isDeleteMode = !this.isDeleteMode
if (!this.isDeleteMode) {
this.selectedImages = []
}
},
// 图片点击处理
handleImageClick(index, item) {
if (this.isDeleteMode) {
// 删除模式下处理多选
const selectedIndex = this.selectedImages.indexOf(index)
if (selectedIndex > -1) {
this.selectedImages.splice(selectedIndex, 1)
this.ImageData.splice(selectedIndex, 1) // 保持同步删除
} else {
this.selectedImages.push(
index
)
this.ImageData.push(item) // 保持同步添加
}
} else {
// 正常模式下预览图片
uni.previewImage({
current: this.instructionImages[index].fileUrl,
urls: this.instructionImages.map(item => item.fileUrl)
})
}
},
// 删除选中的图片
deleteSelectedImages() {
if (this.selectedImages.length === 0) return
this.deleteShow = true
},
async handleBtn() {
try {
uni.showLoading({
title: '删除中...',
mask: true
})
// 构造删除请求数据
const ids = this.ImageData.map(item => item.id).join(',')
// 调用删除接口
const res = await fileDelete(ids)
if (res.code === 200) {
uni.showToast({
title: '删除成功',
icon: 'success'
})
// 从后往前删除，避免索引变化
this.selectedImages
.sort((a, b) => b.index - a.index)
.forEach(item => {
this.instructionImages.splice(item.index, 1)
})
this.callOtherApi()
// 重置状态
this.selectedImages = []
this.isDeleteMode = false
this.deleteShow = false
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
this.deleteShow = false
}
} catch (error) {} finally {
uni.hideLoading()
}
}
},
onLoad(options) {
this.deviceID = options.id
this.callOtherApi()
}
}
</script>
<style scoped>
.device-page {
display: flex;
flex-direction: column;
min-height: 100vh;
background-color: rgb(18, 18, 18);
padding: 30rpx;
}
.example-body {
margin-top: 20rpx;
}
/* 图片列表 */
.image-list {
display: flex;
flex-wrap: wrap;
margin: -10rpx;
}
/* 图片项 */
.image-item {
width: 33.33%;
padding: 10rpx;
position: relative;
}
/* 图片样式 */
.instruction-image {
width: 180rpx;
height: 180rpx;
border-radius: 10rpx;
background-color: #2a2a2a;
}
/* 选中效果 */
.image-selected {
opacity: 0.7;
}
/* 选中标记 */
.checkmark {
position: absolute;
bottom: 20rpx;
right: 40rpx;
width: 60rpx;
height: 60rpx;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.checkmark image {
width: 24rpx;
height: 24rpx;
}
/* 上传按钮 */
.upload-btn {
width: 33.33%;
padding: 10rpx;
}
/* 底部删除按钮 */
.delete-footer {
position: fixed;
bottom: 20rpx;
left: 0;
right: 0;
height: 100rpx;
display: flex;
justify-content: center;
align-items: center;
}
.delete-footer button {
width: 90%;
height: 88rpx;
line-height: 88rpx;
background: rgba(187, 230, 0, 1);
background: rgba(187, 230, 0, 1);
border-radius: 90px;
}
/* 遮罩层 */
.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.86);
text-align: center;
padding: 30rpx 0rpx;
}
.popup-buttons {
display: flex;
text-align: center;
}
.agreement-popupC {
width: 60%;
background-color: rgb(42, 42, 42);
border-radius: 40rpx;
padding: 30rpx;
text-align: center;
border: 1px solid rgba(255, 200, 78, 0.3);
}
.popup-flex {
display: flex;
white-space: nowrap;
color: rgba(255, 255, 255, 0.87);
height: 50rpx;
padding: 30rpx;
}
.popup-input {
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 12rpx;
margin-left: 15rpx;
padding: 10rpx 0rpx;
font-size: 28rpx;
}
.svg {
width: 58rpx;
height: 62rpx;
}
/* 通用按钮样式 */
.btn {
height: 60rpx;
line-height: 60rpx;
border-radius: 40rpx;
font-size: 24rpx;
margin: 10rpx auto;
text-align: center;
}
/* 同意按钮 */
.agreeBtn {
background: #FFC84E;
color: #232323;
border: none;
width: 170rpx !important;
}
</style>

235
pages/common/operationVideo/index.vue Normal file
View File

@ -0,0 +1,235 @@
<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>

404
pages/common/productDes/index.vue Normal file
View File

@ -0,0 +1,404 @@
<template>
<!-- 使用自定义导航栏 -->
<view>
<custom-navbar title="产品说明" :showBack="true" backgroundColor="#202020" color="#FFFFFF"
:right-text="isDeleteMode ? '完成' : '删除'" right-color="rgba(255, 255, 255, 0.87)"
@right-click="toggleDeleteMode">
</custom-navbar>
<view class="device-page" :style="{ paddingTop: navBarHeight + 'px' }">
<view class="example-body">
<!-- 图片列表 -->
<view class="image-list">
<view class="image-item" v-for="(image, index) in instructionImages" :key="index"
@click="handleImageClick(index,image)">
<image :src="image.fileUrl" mode="aspectFit" class="instruction-image"
:class="{ 'image-selected': isDeleteMode && selectedImages.includes(index) }"></image>
<!-- 多选模式下的选中标记 -->
<view class="checkmark" v-if="isDeleteMode && selectedImages.includes(index)">
<image src="/static/images/delete-icon.png" mode="aspectFill"></image>
</view>
</view>
<!-- 上传按钮（非删除模式显示） -->
<view class="upload-btn" v-if="!isDeleteMode">
<uni-file-picker ref="filePicker" v-model="fileList" @select="selectFile" limit="9"
class="custom-file-picker"></uni-file-picker>
</view>
</view>
</view>
</view>
<!-- 底部删除按钮（多选模式显示） -->
<view class="delete-footer" v-if="isDeleteMode && selectedImages.length > 0">
<button @click="deleteSelectedImages">删除({{selectedImages.length}})</button>
</view>
<!-- 删除弹框 -->
<view class="agreement-mask" v-if="deleteShow">
<view class="agreement-popupC">
<view class="popup-content">
<image src="/static/images/dell.png" mode="" class="svg"></image>
<uni-icon class="trash"></uni-icon>
<view>
<view class="popup-Title">确定删除所选设备！</view>
</view>
</view>
<!-- 按钮组 -->
<view class="popup-buttons">
<button class="btn agreeBtn" @click="handleBtn">确定</button>
</view>
</view>
</view>
</view>
</template>
<script>
import {
baseURL,
getToken,
clientid
} from '@/utils/request'
import {
fileInfo,
fileDelete
} from '@/api/common/operatingInstruct/index.js'
export default {
data() {
return {
navBarHeight: 70 + uni.getSystemInfoSync().statusBarHeight,
fileList: [],
deviceID: "",
instructionImages: [],
isDeleteMode: false, // 是否删除模式
selectedImages: [], // 选中的图片索引
deleteShow: false,
ImageData: [],
filePicker: ''
}
},
methods: {
// 选择文件
selectFile(e) {
console.log('选择文件：', e)
// const file = e.tempFiles[0].file
const files = e.tempFiles.map(item => item.file)
console.log('files', files);
this.uploadFile(files)
},
// 上传图片
uploadFile(files) {
this.$refs.filePicker.clearFiles() // 通过ref操作uni-file-picker组件
uni.showLoading({
title: '上传中...'
})
files.forEach(file => {
uni.uploadFile({
url: baseURL + '/app/file/upload',
filePath: file.path || file.url,
name: 'files',
formData: {
deviceId: this.deviceID,
fileType: '2' //文件类型(1:操作说明，2:产品参数)
},
header: {
'Authorization': 'Bearer ' + getToken(),
'clientid': clientid(),
},
complete: (res) => {
console.log(res, 'resss');
try {
const responseData = JSON.parse(res.data);
if (responseData.code === 200) {
uni.showToast({
title: responseData.msg,
icon: 'success'
});
this.$refs.filePicker.clearFiles(); // 清空已选文件
this.callOtherApi();
} else {
uni.showToast({
title: responseData.msg,
icon: 'none'
});
}
} catch (e) {
uni.showToast({
title: '上传失败',
icon: 'none'
});
} finally {
uni.hideLoading();
}
}
})
})
},
// 获取图片列表
callOtherApi() {
let data = {
deviceId: this.deviceID,
fileType: '2' //文件类型(1:操作说明，2:产品参数)
}
fileInfo(data).then((res) => {
if (res.code == 200) {
this.instructionImages = res.data
}
})
},
// 切换删除模式
toggleDeleteMode() {
this.isDeleteMode = !this.isDeleteMode
if (!this.isDeleteMode) {
this.selectedImages = []
}
},
// 图片点击处理
handleImageClick(index, item) {
if (this.isDeleteMode) {
// 删除模式下处理多选
const selectedIndex = this.selectedImages.indexOf(index)
if (selectedIndex > -1) {
this.selectedImages.splice(selectedIndex, 1)
this.ImageData.splice(selectedIndex, 1) // 保持同步删除
} else {
this.selectedImages.push(
index
)
this.ImageData.push(item) // 保持同步添加
}
} else {
// 正常模式下预览图片
uni.previewImage({
current: this.instructionImages[index].fileUrl,
urls: this.instructionImages.map(item => item.fileUrl)
})
}
},
// 删除选中的图片
deleteSelectedImages() {
if (this.selectedImages.length === 0) return
this.deleteShow = true
},
async handleBtn() {
try {
uni.showLoading({
title: '删除中...',
mask: true
})
// 构造删除请求数据
const ids = this.ImageData.map(item => item.id).join(',')
// 调用删除接口
const res = await fileDelete(ids)
if (res.code === 200) {
uni.showToast({
title: '删除成功',
icon: 'success'
})
// 从后往前删除，避免索引变化
this.selectedImages
.sort((a, b) => b.index - a.index)
.forEach(item => {
this.instructionImages.splice(item.index, 1)
})
this.callOtherApi()
// 重置状态
this.selectedImages = []
this.isDeleteMode = false
this.deleteShow = false
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
this.deleteShow = false
}
} catch (error) {} finally {
uni.hideLoading()
}
}
},
onLoad(options) {
this.deviceID = options.id
this.callOtherApi()
}
}
</script>
<style scoped>
.device-page {
display: flex;
flex-direction: column;
min-height: 100vh;
background-color: rgb(18, 18, 18);
padding: 30rpx;
}
.example-body {
margin-top: 20rpx;
}
/* 图片列表 */
.image-list {
display: flex;
flex-wrap: wrap;
margin: -10rpx;
}
/* 图片项 */
.image-item {
width: 33.33%;
padding: 10rpx;
position: relative;
}
/* 图片样式 */
.instruction-image {
width: 180rpx;
height: 180rpx;
border-radius: 10rpx;
background-color: #2a2a2a;
}
/* 选中效果 */
.image-selected {
opacity: 0.7;
}
/* 选中标记 */
.checkmark {
position: absolute;
bottom: 20rpx;
right: 40rpx;
width: 60rpx;
height: 60rpx;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.checkmark image {
width: 24rpx;
height: 24rpx;
}
/* 上传按钮 */
.upload-btn {
width: 33.33%;
padding: 10rpx;
}
/* 底部删除按钮 */
.delete-footer {
position: fixed;
bottom: 20rpx;
left: 0;
right: 0;
height: 100rpx;
display: flex;
justify-content: center;
align-items: center;
}
.delete-footer button {
width: 90%;
height: 88rpx;
line-height: 88rpx;
background: rgba(187, 230, 0, 1);
background: rgba(187, 230, 0, 1);
border-radius: 90px;
}
/* 遮罩层 */
.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.86);
text-align: center;
padding: 30rpx 0rpx;
}
.popup-buttons {
display: flex;
text-align: center;
}
.agreement-popupC {
width: 60%;
background-color: rgb(42, 42, 42);
border-radius: 40rpx;
padding: 30rpx;
text-align: center;
border: 1px solid rgba(255, 200, 78, 0.3);
}
.popup-flex {
display: flex;
white-space: nowrap;
color: rgba(255, 255, 255, 0.87);
height: 50rpx;
padding: 30rpx;
}
.popup-input {
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 12rpx;
margin-left: 15rpx;
padding: 10rpx 0rpx;
font-size: 28rpx;
}
.svg {
width: 58rpx;
height: 62rpx;
}
/* 通用按钮样式 */
.btn {
height: 60rpx;
line-height: 60rpx;
border-radius: 40rpx;
font-size: 24rpx;
margin: 10rpx auto;
text-align: center;
}
/* 同意按钮 */
.agreeBtn {
background: #FFC84E;
color: #232323;
border: none;
width: 170rpx !important;
}
</style>