APP/pages/common/index/index.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/common/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/common/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>