408 lines
8.4 KiB
Vue
408 lines
8.4 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 使用自定义导航栏 -->
|
||
<custom-navbar :title="navTitle" :showBack="false" backgroundColor="#202020" color="#FFFFFF" right-text="发送信息"
|
||
right-color="rgba(255, 255, 255, 0.87)" @right-click="handleSend"></custom-navbar>
|
||
<view class="device-page" :style="{ paddingTop: navBarHeight + 'px' }">
|
||
<scroll-view class="device-list" scroll-y>
|
||
<uni-swipe-action ref="swipeAction">
|
||
<block v-for="(item, index) in deviceList" :key="index" :ref="'swipeItem_' + index">
|
||
<uni-swipe-action-item :right-options="Options" @click="handleSwipeClick($event, item, index)"
|
||
class="device-card">
|
||
<!-- 设备卡片内容保持不变 -->
|
||
<view @click.stop="handleFile(item)">
|
||
<view class="device-header">
|
||
<view class="deviceIMG">
|
||
<image src="/static/images/device.png" mode="" class="IMG"></image>
|
||
</view>
|
||
<view class="device-name">
|
||
<view>设备:001-00</view>
|
||
<view class="ID">ID:0222222</view>
|
||
</view>
|
||
</view>
|
||
<view class="device-status online">已连接</view>
|
||
<view class="device-info">
|
||
<text class="onlines">在线</text>
|
||
<text class="line"></text>
|
||
<text>电量：90%</text>
|
||
</view>
|
||
</view>
|
||
<image src="/static/images/cires.png" class="circle"></image>
|
||
</uni-swipe-action-item>
|
||
</block>
|
||
</uni-swipe-action>
|
||
<view class="device-uplod" @click="scan">
|
||
<uni-icons type="plusempty" size="60" color="rgba(255, 255, 255, 0.5)"></uni-icons>
|
||
</view>
|
||
</scroll-view>
|
||
</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 closeBtn" @click="sureBtn">取消</button> -->
|
||
<button class="btn agreeBtn" @click="handleBtn">确定</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- =========重命名============== -->
|
||
<view class="agreement-mask" v-if="RenameModel">
|
||
<view class="agreement-popupD">
|
||
<view class="popup-content">
|
||
<view>
|
||
<view class="popup-flex">
|
||
<text>设备名称</text>
|
||
<input type="text" placeholder="请输入设备名称" class="popup-input" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 按钮组 -->
|
||
|
||
<view class="popup-buttons" style="margin-top:50rpx;">
|
||
<button class="btn agreeBtn4" @click="handleBtn">确定</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
navBarHeight: 70 + uni.getSystemInfoSync().statusBarHeight,
|
||
deviceList: Array(5).fill().map((_, i) => ({
|
||
id: `022222${i}`,
|
||
|
||
})),
|
||
Options: [{
|
||
text: '重命名',
|
||
style: {
|
||
backgroundColor: '#E09319',
|
||
borderRadius: '16px',
|
||
width: '240rpx', // 初始宽度
|
||
},
|
||
},
|
||
{
|
||
text: '删除',
|
||
style: {
|
||
backgroundColor: 'rgb(240, 60, 60)',
|
||
borderRadius: '16px',
|
||
width: '240rpx', // 初始宽度
|
||
},
|
||
},
|
||
],
|
||
navTitle: "我的设备",
|
||
deleteShow: false,
|
||
RenameModel: false
|
||
}
|
||
},
|
||
methods: {
|
||
scan() {
|
||
uni.navigateTo({
|
||
url: '/pages/scan/scan'
|
||
})
|
||
},
|
||
// 右滑点击事件处理
|
||
handleSwipeClick(e, item, index) {
|
||
const {
|
||
content
|
||
} = e
|
||
console.log(e, 'eeeee');
|
||
switch (content.text) {
|
||
case '删除':
|
||
this.handleDeleteDevice(item, index)
|
||
break
|
||
case '重命名':
|
||
this.handleRenameDevice(item, index)
|
||
break
|
||
};
|
||
|
||
},
|
||
// 删除设备
|
||
handleDeleteDevice(item, index) {
|
||
this.deleteShow = true
|
||
uni.hideTabBar()
|
||
},
|
||
// 确认删除
|
||
handleBtn() {
|
||
this.deleteShow = false,
|
||
uni.showTabBar()
|
||
},
|
||
|
||
// 重命名设备
|
||
handleRenameDevice(item, index) {
|
||
this.RenameModel = true
|
||
uni.hideTabBar()
|
||
},
|
||
// 发生短信
|
||
handleSend() {
|
||
uni.navigateTo({
|
||
url: '/pages/send/index'
|
||
})
|
||
},
|
||
handleFile() {
|
||
uni.navigateTo({
|
||
url: '/pages/6170/deviceControl/index'
|
||
})
|
||
},
|
||
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
/* 页面整体样式 */
|
||
.device-page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 100vh;
|
||
background-color: rgb(18, 18, 18);
|
||
padding: 30rpx;
|
||
}
|
||
|
||
/* 设备列表 */
|
||
.device-list {
|
||
/* flex: 1; */
|
||
/* padding: 20rpx; */
|
||
}
|
||
|
||
/* 设备卡片 */
|
||
.device-card {
|
||
background-color: rgb(26, 26, 26);
|
||
border-radius: 16rpx;
|
||
/* padding: 30rpx; */
|
||
margin-bottom: 20rpx;
|
||
/* box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); */
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
}
|
||
|
||
.device-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 15rpx;
|
||
padding: 30rpx 0 10rpx 30rpx;
|
||
}
|
||
|
||
.device-name {
|
||
font-size: 32rpx;
|
||
color: rgba(255, 255, 255, 0.87);
|
||
margin-left: 24rpx;
|
||
line-height: 50rpx;
|
||
}
|
||
|
||
.ID {
|
||
color: rgba(255, 255, 255, 0.6);
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.device-status {
|
||
width: 122rpx;
|
||
height: 52rpx;
|
||
font-size: 26rpx;
|
||
border-radius: 0px 8px 0px 8px;
|
||
background-color: rgb(42, 42, 42);
|
||
position: absolute;
|
||
top: 0rpx;
|
||
right: 0rpx;
|
||
text-align: center;
|
||
line-height: 52rpx;
|
||
}
|
||
|
||
.circle {
|
||
width: 10rpx;
|
||
height: 50rpx;
|
||
position: absolute;
|
||
right: 40rpx;
|
||
top: 100rpx;
|
||
}
|
||
|
||
.online {
|
||
color: rgb(187, 230, 0);
|
||
}
|
||
|
||
.device-id {
|
||
font-size: 26rpx;
|
||
color: #999;
|
||
margin-bottom: 20rpx;
|
||
display: block;
|
||
}
|
||
|
||
.device-info {
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
font-size: 28rpx;
|
||
color: rgba(255, 255, 255, 0.87);
|
||
position: relative;
|
||
padding: 0rpx 0rpx 30rpx 30rpx;
|
||
}
|
||
|
||
.deviceIMG {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 16rpx;
|
||
position: relative;
|
||
background-color: rgba(42, 42, 42, 0.6);
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.IMG {
|
||
width: 68rpx;
|
||
height: 50rpx;
|
||
margin-left: 17%;
|
||
}
|
||
|
||
.onlines::before {
|
||
content: '';
|
||
position: absolute;
|
||
width: 15rpx;
|
||
height: 15rpx;
|
||
background: rgb(0, 171, 103);
|
||
border-radius: 50%;
|
||
left: 120rpx;
|
||
top: 15rpx
|
||
}
|
||
|
||
.line {
|
||
width: 2rpx;
|
||
height: 24rpx;
|
||
background: linear-gradient(90deg,
|
||
rgba(0, 0, 0, 0) 0%,
|
||
rgb(255, 255, 255) 50%,
|
||
rgba(255, 255, 255, 0) 100%);
|
||
margin-top: 12rpx;
|
||
}
|
||
|
||
.device-uplod {
|
||
background-color: rgb(26, 26, 26);
|
||
border-radius: 16rpx;
|
||
align-items: center;
|
||
text-align: center;
|
||
height: 202rpx;
|
||
line-height: 200rpx;
|
||
}
|
||
|
||
.uni-swipe-action-item__options {
|
||
transition: width 0.3s ease;
|
||
}
|
||
|
||
/* 遮罩层 */
|
||
.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;
|
||
}
|
||
|
||
.popup-Title {
|
||
color: rgba(255, 255, 255, 0.86);
|
||
text-align: center;
|
||
padding: 30rpx 0rpx;
|
||
}
|
||
|
||
.popup-buttons {
|
||
display: flex;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 弹窗主体 */
|
||
.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;
|
||
}
|
||
|
||
.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);
|
||
}
|
||
|
||
.agreement-popupD {
|
||
width: 70%;
|
||
background-color: rgb(42, 42, 42);
|
||
border-radius: 40rpx;
|
||
padding: 40rpx;
|
||
text-align: center;
|
||
border: 1px solid rgba(187, 230, 0, 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;
|
||
}
|
||
|
||
.agreeBtn4 {
|
||
background: rgba(187, 230, 0, 1);
|
||
color: #232323;
|
||
border: none;
|
||
width: 170rpx !important;
|
||
}
|
||
|
||
.closeBtn {
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
background-color: rgba(35, 35, 35, 0.87);
|
||
color: rgba(255, 255, 255, 1);
|
||
}
|
||
</style> |