更新ui细节

This commit is contained in:
fengerli
2025-07-25 17:08:23 +08:00
parent 51ab4d0bfa
commit c83a513f86
5 changed files with 94 additions and 71 deletions

View File

@ -56,7 +56,8 @@
</view> --> </view> -->
</view> </view>
<view v-else class="noDATA"> <view v-else class="noDATA">
<view> <uni-icons type="image-filled" size="120" color="rgba(255, 255, 255, 0.9)"></uni-icons> <view>
<uni-icons type="image-filled" size="120" color="rgba(255, 255, 255, 0.9)"></uni-icons>
</view> </view>
暂无数据 暂无数据
</view> </view>
@ -189,7 +190,7 @@
}, },
// tab切换页 // tab切换页
switchTab(tab, index) { switchTab(tab, index) {
console.log(tab, 'tabsss'); //console.log(tab, 'tabsss');
this.deviceList = []; this.deviceList = [];
this.activeTab = index; this.activeTab = index;
this.page = 1; // 重置页 this.page = 1; // 重置页
@ -197,7 +198,7 @@
}, },
// 获取设备列表 // 获取设备列表
getData(tab) { getData(tab) {
console.log(tab.name, 'tab'); //console.log(tab.name, 'tab');
if (this.loading) return; if (this.loading) return;
this.loading = true; this.loading = true;
let data = { let data = {
@ -421,7 +422,7 @@
color: rgba(255, 255, 255, 0.6); color: rgba(255, 255, 255, 0.6);
font-size: 28rpx; font-size: 28rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
margin-top: 20rpx; margin-top: 1rpx;
} }
.edit-btn { .edit-btn {
@ -468,11 +469,11 @@
.agreement-popupC { .agreement-popupC {
width: 65%; width: 65%;
background-color: rgb(42, 42, 42); background: rgba(56, 57, 52, 0.4);
border-radius: 40rpx; border-radius: 40rpx;
padding: 30rpx; padding: 30rpx;
text-align: center; text-align: center;
border: 1px solid rgba(255, 200, 78, 0.3); border: 1px solid rgba(224, 52, 52, 0.3);
} }
.popup-flex { .popup-flex {
@ -511,7 +512,7 @@
/* 同意按钮 */ /* 同意按钮 */
.agreeBtn { .agreeBtn {
background: rgba(224, 52, 52, 1); background: rgba(224, 52, 52, 1);
color: #232323; color: rgba(255, 255, 255, 0.87);
border: none; border: none;
width: 170rpx !important; width: 170rpx !important;
} }

View File

@ -38,7 +38,7 @@
<view class="info-card"> <view class="info-card">
<view class="info-row"> <view class="info-row">
<text class="info-label">IMEI号</text> <text class="info-label">IMEI号</text>
<text class="info-value">{{deviceInfo.deviceImei}}</text> <text class="info-value status-running">{{deviceInfo.deviceImei}}</text>
</view> </view>
<view class="info-row"> <view class="info-row">
<text class="info-label">设备状态</text> <text class="info-label">设备状态</text>
@ -46,7 +46,7 @@
</view> </view>
<view class="info-row"> <view class="info-row">
<text class="info-label">定位信息</text> <text class="info-label">定位信息</text>
<view class="info-value status-running"> <view class="info-value status-running" @click="gpsPosition">
<view class="info-value status-running">114.72 30.28</view> <view class="info-value status-running">114.72 30.28</view>
<view class="info-value status-running">深圳市龙华区富源晟</view> <view class="info-value status-running">深圳市龙华区富源晟</view>
</view> </view>
@ -185,8 +185,12 @@
<view class="popup-title">上传开机画面</view> <view class="popup-title">上传开机画面</view>
<view class="popup-content"> <view class="popup-content">
<view class="example-body"> <view class="example-body">
<uni-file-picker limit="1" class="custom-file-picker"></uni-file-picker> <!-- <uni-file-picker limit="1" class="custom-file-picker"></uni-file-picker> -->
<view class="example_title">点击上传图片</view> <view class="icoContent" @click="checkImgUpload">
<image mode="aspectFit" class="img" src="/static/images/6155/DeviceDetail/add.png">
</image>
</view>
<!-- <view class="example_title">点击上传图片</view> -->
</view> </view>
</view> </view>
<!-- 按钮组 --> <!-- 按钮组 -->
@ -217,9 +221,8 @@
</view> </view>
</view> </view>
<!-- 人员信息成功提示弹框 --> <!-- 人员信息成功提示弹框 -->
<CustomPopup :show="showPopupFlag" :message="popupMessage" <CustomPopup :show="showPopupFlag" :message="popupMessage" icon="/static/images/sendSucc.png"
icon="/static/images/sendSucc.png" :confirm-text="popupConfirmText" :show-cancel="false" :confirm-text="popupConfirmText" :show-cancel="false" @confirm="onPopupConfirm" />
@confirm="onPopupConfirm" />
</view> </view>
</view> </view>
</template> </template>
@ -273,10 +276,9 @@
isSharedDevice: false, // 标记是否来自分享 isSharedDevice: false, // 标记是否来自分享
isRightIconVisible: false, isRightIconVisible: false,
showPopupFlag: false, //是否显示弹框 showPopupFlag: false, //是否显示弹框
popupMessage: '', popupMessage: '',
popupConfirmText: '确认', popupConfirmText: '确认',
showUploadPopup:false showUploadPopup: false
} }
}, },
computed: { computed: {
@ -285,6 +287,13 @@
} }
}, },
methods: { methods: {
// *******定位******
gpsPosition(){
uni.navigateTo({
url:'/pages/common/map/index'
})
},
// ***********进度条***********
onSliderChanging(e) { onSliderChanging(e) {
this.sliderValue = e.detail.value; this.sliderValue = e.detail.value;
}, },
@ -312,7 +321,6 @@
selected: this.currentMainMode === '泛光模式', selected: this.currentMainMode === '泛光模式',
image: '/static/images/settt.png' image: '/static/images/settt.png'
}, },
]; ];
} }
}, },
@ -323,7 +331,6 @@
toggleForm() { toggleForm() {
this.isFormExpanded = !this.isFormExpanded; this.isFormExpanded = !this.isFormExpanded;
}, },
onItemClick(index) { onItemClick(index) {
const selectedItem = this.items[index]; const selectedItem = this.items[index];
if (selectedItem.text === '激光') { if (selectedItem.text === '激光') {
@ -336,7 +343,6 @@
})); }));
this.currentMainMode = selectedItem.text; this.currentMainMode = selectedItem.text;
this.selectedItemIndex = index; this.selectedItemIndex = index;
// 强制更新视图(如果需要) // 强制更新视图(如果需要)
this.$forceUpdate(); this.$forceUpdate();
} }
@ -348,7 +354,6 @@
const instruction = this.modeInstructions[selectedItem.text]; const instruction = this.modeInstructions[selectedItem.text];
console.log(selectedItem, 'selectedItemselectedItem'); console.log(selectedItem, 'selectedItemselectedItem');
this.selectedItemIndex = selectedItem.text; this.selectedItemIndex = selectedItem.text;
if (instruction) { if (instruction) {
const topic = `B/${this.itemInfo.deviceImei}`; const topic = `B/${this.itemInfo.deviceImei}`;
const message = JSON.stringify(instruction); const message = JSON.stringify(instruction);
@ -356,12 +361,44 @@
console.log('已发送指令:', instruction); console.log('已发送指令:', instruction);
} }
this.lightModeA = false; this.lightModeA = false;
// this.lightModeA = false
}, },
// 上传开机画面 // 上传开机画面
uploadStartup() { uploadStartup() {
this.lightModeB = true this.lightModeB = true
}, },
// 上传开机画面
checkImgUpload() {
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], //从相册,相机选择,,
success: function(res) {
uni.navigateTo({
url: "/pages/6155/ImgCrop",
events: {
ImgCutOver: function(data) {
console.log("我收到裁剪后的图片了,感谢老铁," + data)
uni.showLoading({
title: "正在发送..."
});
setTimeout(function() {
processAndSendImageData(data).catch(() => {});
}, 0)
}
},
success(ev) {
ev.eventChannel.emit('checkImg', {
data: res.tempFiles[0].path
})
},
fail(ex) {
console.log("跳转页面失败" + JSON.stringify(ex));
}
});
}
});
},
// 上传开机画面确认按键 // 上传开机画面确认按键
handleupload() { handleupload() {
this.lightModeB = false this.lightModeB = false
@ -741,12 +778,6 @@
font-size: 26rpx; font-size: 26rpx;
} }
.mode-v3 { .mode-v3 {
color: rgba(255, 255, 255, 0.6); color: rgba(255, 255, 255, 0.6);
font-size: 26rpx; font-size: 26rpx;
@ -852,10 +883,23 @@
.example-body { .example-body {
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 70%; top: 65%;
width: 100%; width: 100%;
transform: translate(-10%, -100%); transform: translate(-20%, -100%);
}
.icoContent {
width: 320rpx;
height: 160rpx;
border-radius: 8rpx;
background: rgba(58, 58, 58, 1);
text-align: center;
line-height:200rpx;
}
.img {
width: 62rpx;
height: 62rpx;
} }
.example_title { .example_title {
@ -995,7 +1039,7 @@
.agreement-popupB { .agreement-popupB {
width: 100%; width: 100%;
height: 40%; height: 32%;
background-color: rgb(42, 42, 42); background-color: rgb(42, 42, 42);
border-radius: 60rpx 60rpx 0rpx 0rpx; border-radius: 60rpx 60rpx 0rpx 0rpx;
padding: 40rpx; padding: 40rpx;

View File

@ -278,7 +278,6 @@
padding-top: 10rpx; padding-top: 10rpx;
position: relative; position: relative;
} }
.deviceIMG { .deviceIMG {
width: 100rpx; width: 100rpx;
height: 100rpx; height: 100rpx;
@ -288,90 +287,75 @@
display: flex; display: flex;
align-items: center; align-items: center;
} }
.IMG { .IMG {
width: 68rpx; width: 68rpx;
height: 50rpx; height: 50rpx;
margin-left: 17%; margin-left: 17%;
} }
.title { .title {
font-size: 18px; font-size: 18px;
color: white; color: white;
} }
.device-info { .device-info {
width: 100%; width: 100%;
padding: 10px; padding: 10px;
border-bottom: 1rpx solid rgba(255, 255, 255, 0.06); border-bottom: 1rpx solid rgba(255, 255, 255, 0.06);
} }
.allSelect { .allSelect {
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
float: right; float: right;
} }
.device-icon { .device-icon {
width: 30px; width: 30px;
height: 30px; height: 30px;
} }
.device-id, .device-id,
.device-serial { .device-serial {
color: white; color: white;
} }
.permissions { .permissions {
width: 100%; width: 100%;
margin-top: 20px; margin-top: 20px;
padding: 10px; padding: 10px;
border-bottom: 1rpx solid rgba(255, 255, 255, 0.06); border-bottom: 1rpx solid rgba(255, 255, 255, 0.06);
} }
.permissions-title { .permissions-title {
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
font-size: 30rpx; font-size: 30rpx;
/* padding: 30rpx 0rpx; */ /* padding: 30rpx 0rpx; */
} }
.checkbox { .checkbox {
width: 40rpx; width: 40rpx;
height: 40rpx; height: 40rpx;
border: 2rpx solid rgba(255, 255, 255, 0.5); border: 2rpx solid rgba(255, 255, 255, 0.5);
margin-right: 20rpx; margin-right:30rpx;
border-radius: 4rpx; border-radius: 4rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.checkbox.checked { .checkbox.checked {
background-color: rgb(187, 230, 0); background-color: rgb(187, 230, 0);
border-color: rgb(187, 230, 0); border-color: rgb(187, 230, 0);
} }
.permission-item { .permission-item {
margin-top: 10px; margin-top:35rpx;
display: flex; display: flex;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
line-height: 60rpx; line-height: 60rpx;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
} }
.recipient-info { .recipient-info {
width: 100%; width: 100%;
margin-top: 20px; margin-top: 20px;
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
} }
.recipient-title { .recipient-title {
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
font-size: 30rpx; font-size: 30rpx;
} }
.phone-input { .phone-input {
width: 100%; width: 100%;
margin-top: 20rpx; margin-top: 20rpx;
@ -379,7 +363,6 @@
border-bottom: 1rpx solid rgba(255, 255, 255, 0.06); border-bottom: 1rpx solid rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
} }
.verification-code { .verification-code {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -388,7 +371,6 @@
padding: 40rpx 0; padding: 40rpx 0;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
} }
.get-code-btn { .get-code-btn {
margin-top: 10px; margin-top: 10px;
background-color: transparent; background-color: transparent;
@ -412,7 +394,7 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.8);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -433,18 +415,16 @@
/* 弹窗主体 */ /* 弹窗主体 */
.agreement-popup { .agreement-popup {
width: 60%; width: 60%;
background-color: rgb(42, 42, 42); background: rgba(56, 57, 52, 0.4);
border-radius: 40rpx; border-radius: 40rpx;
padding: 30rpx; padding: 30rpx;
text-align: center; text-align: center;
border: 1px solid rgba(187, 230, 0, 0.3); border: 1px solid rgba(187, 230, 0, 0.3);
} }
.svg { .svg {
width: 58rpx; width: 58rpx;
height: 62rpx; height:58rpx;
} }
/* 通用按钮样式 */ /* 通用按钮样式 */
.btn { .btn {
height: 60rpx; height: 60rpx;

View File

@ -4,12 +4,12 @@
<view class="device-info" v-for="(item, index) in deviceList" :key="index"> <view class="device-info" v-for="(item, index) in deviceList" :key="index">
<view class="device-header" @click.stop="handleFile(item)"> <view class="device-header" @click.stop="handleFile(item)">
<view class="deviceIMG"> <view class="deviceIMG">
<image :src="item.devicePic" mode="" class="IMG"></image> <image src="@/static/images/user.png" mode="" class="IMG"></image>
</view> </view>
<view class="device-name"> <view class="device-name">
<view>{{item.deviceName}}</view> <view>用户名{{item.deviceName}}</view>
<view class="ID"> <view class="ID">
<view class="ID">ID:{{item.id}} <view class="ID">{{item.phonenumber}}
</view> </view>
</view> </view>
</view> </view>
@ -22,7 +22,7 @@
<view class="agreement-mask" v-if="deleteShow" @click="closePopup('delete')"> <view class="agreement-mask" v-if="deleteShow" @click="closePopup('delete')">
<view class="agreement-popup" @click.stop> <view class="agreement-popup" @click.stop>
<view class="popup-content"> <view class="popup-content">
<image src="/static/images/dell.png" mode="" class="svg"></image> <image src="/static/images/delel.png" mode="" class="svg"></image>
<uni-icon class="trash"></uni-icon> <uni-icon class="trash"></uni-icon>
<view> <view>
<view class="popup-Title">确定移除该用户</view> <view class="popup-Title">确定移除该用户</view>
@ -161,11 +161,9 @@
} }
.deviceIMG { .deviceIMG {
width: 100rpx; /* width: 100rpx; */
height: 100rpx; /* height: 100rpx; */
border-radius: 16rpx;
position: relative; position: relative;
background-color: rgba(42, 42, 42, 0.6);
display: flex; display: flex;
align-items: center; align-items: center;
} }
@ -183,13 +181,13 @@
height: 60rpx; height: 60rpx;
text-align: center; text-align: center;
line-height: 60rpx; line-height: 60rpx;
color: rgba(255, 200, 78, 1); color: rgba(224, 52, 52, 1);
cursor: pointer; cursor: pointer;
} }
.IMG { .IMG {
width: 68rpx; width: 120rpx;
height: 50rpx; height: 100rpx;
margin-left: 17%; margin-left: 17%;
} }
@ -233,16 +231,16 @@
/* 弹窗主体 */ /* 弹窗主体 */
.agreement-popup { .agreement-popup {
width: 60%; width: 60%;
background-color: rgb(42, 42, 42); background: rgba(56, 57, 52, 0.4);
border-radius: 40rpx; border-radius: 40rpx;
padding: 30rpx; padding: 30rpx;
text-align: center; text-align: center;
border: 1px solid rgba(255, 200, 78, 0.3); border: 1px solid rgba(224, 52, 52, 0.3);
} }
.svg { .svg {
width: 58rpx; width: 58rpx;
height: 62rpx; height: 58rpx;
} }
/* 通用按钮样式 */ /* 通用按钮样式 */
@ -258,8 +256,8 @@
/* 同意按钮 */ /* 同意按钮 */
.agreeBtn { .agreeBtn {
background: #FFC84E; background: rgba(224, 52, 52, 1);
color: #232323; color: rgba(255, 255, 255, 0.87);
border: none; border: none;
width: 170rpx !important; width: 170rpx !important;
} }

BIN
static/images/user.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 654 B