设备分享模块页面功能开发

This commit is contained in:
fengerli
2025-07-16 16:43:22 +08:00
parent 9b3be8c7d7
commit bc3bea6df0
9 changed files with 752 additions and 48 deletions

View File

@ -1,8 +1,8 @@
<template>
<view>
<!-- 使用自定义导航栏 -->
<custom-navbar :title="navTitle" :showBack="true" color="#FFFFFF" rightIcon="/static/images/path.png"
@right-click="uploadStartup"></custom-navbar>
<custom-navbar :title="navTitle" :showBack="true" color="#FFFFFF" rightIcon="/static/images/shape.png"
@right-click="shareUp"></custom-navbar>
<view class="device-detail-container" :style="{ paddingTop: navBarHeight + 'px' }">
<!-- 设备电量信息 -->
<view class="battery-section">
@ -176,12 +176,12 @@
<!-- 上传开机画面弹框 -->
<view class="agreement-mask" v-if="lightModeB">
<!-- 上传画面弹窗 -->
<view class="agreement-popup">
<view class="agreement-popupB">
<!-- 标题 -->
<view class="popup-title">上传开机画面</view>
<view class="popup-content">
<view class="example-body">
<uni-file-picker limit="1"></uni-file-picker>
<uni-file-picker limit="1" class="custom-file-picker"></uni-file-picker>
<view class="example_title">点击上传图片</view>
</view>
</view>
@ -324,6 +324,12 @@
handleupload() {
this.lightModeB = false
},
// 分享
shareUp(){
uni.navigateTo({
url: '/pages/6170/share/index'
})
},
// 操作说明
operatingInst() {
@ -357,27 +363,42 @@
// 发送人员信息
sendPersonnelInfo() {
if (!this.mqttClient || !this.mqttClient.client.isConnected()) {
uni.showToast({ title: 'MQTT未连接', icon: 'none' });
uni.showToast({
title: 'MQTT未连接',
icon: 'none'
});
return;
}
const topic = `device/command/${this.deviceID}/personnel`;
const message = JSON.stringify(this.personnelInfo);
this.mqttClient.publish(topic, message);
uni.showToast({ title: '人员信息已发送', icon: 'success' });
uni.showToast({
title: '人员信息已发送',
icon: 'success'
});
},
// 发送文本消息
sendTextMessage() {
if (!this.mqttClient || !this.mqttClient.client.isConnected()) {
uni.showToast({ title: 'MQTT未连接', icon: 'none' });
uni.showToast({
title: 'MQTT未连接',
icon: 'none'
});
return;
}
if (!this.messageToSend) {
uni.showToast({ title: '请输入要发送的文字', icon: 'none' });
uni.showToast({
title: '请输入要发送的文字',
icon: 'none'
});
return;
}
const topic = `device/command/${this.deviceID}/message`;
this.mqttClient.publish(topic, this.messageToSend);
uni.showToast({ title: '消息已发送', icon: 'success' });
uni.showToast({
title: '消息已发送',
icon: 'success'
});
}
},
onLoad(options) {
@ -418,7 +439,7 @@
}
</script>
<style>
<style scoped>
.device-detail-container {
padding: 30rpx;
background: #121212;
@ -625,23 +646,13 @@
.example-body {
position: absolute;
left: 50%;
top: 70%;
top: 60%;
width: 100%;
transform: translate(-17%, -100%);
transform: translate(-10%, -100%);
}
.uni-file-picker__container {
width: 200rpx !important;
border: 1px solid rgb(58, 58, 58);
}
:deep .file-picker__box {
width: 40% !important;
}
.example_title {
padding-top: 20rpx;
color: rgba(255, 255, 255, 0.87);
}
@ -776,6 +787,17 @@
bottom: 0rpx;
}
.agreement-popupB {
width: 100%;
height: 40%;
background-color: rgb(42, 42, 42);
border-radius: 60rpx 60rpx 0rpx 0rpx;
padding: 40rpx;
box-sizing: border-box;
position: absolute;
bottom: 0rpx;
}
.agreement-popupC {
width: 80%;
background-color: rgb(42, 42, 42);