APP/pages/common/send/index.vue

<template>
	<view class="container">
		<!-- 设备列表 -->
		<scroll-view class="device-list" scroll-y>
			<view class="device-card" v-for="(item, index) in deviceList" :key="index" @click="toggleSelect(index)">
				<!-- 复选框 -->
				<view class="checkbox" :class="{ checked: item.checked }">
					<uni-icons v-if="item.checked" type="checkmarkempty" size="18" color="rgb(0, 0, 0)"></uni-icons>
				</view>
				<!-- 设备信息 -->
				<view class="device-content">
					<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:{{ item.id }}</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>
			</view>
			<view style="padding:20rpx;">
				<view class="ql-editor">编辑信息</view>
				<view class="ql-input">
					<textarea placeholder-style="color:rgba(255, 255, 255, 0.4)" placeholder="请输入内容"  class="textarea"/>
				</view>
				<button class="login-btn">发送</button>
			</view>

		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				deviceList: Array(6).fill().map((_, i) => ({
					id: `1321615${i}`,
					checked: false,
					showConfirm: false
				})),
			}
		},
		methods: {
			toggleSelect(index) {
				this.deviceList[index].checked = !this.deviceList[index].checked
				this.$forceUpdate()
			},
			sendMessage() {
				const selectedDevices = this.deviceList.filter(item => item.checked)
				console.log('选中的设备:', selectedDevices)
				uni.showToast({
					title: `已发送到${selectedDevices.length}台设备`,
					icon: 'success'
				})
			}
		}
	}
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: rgb(18, 18, 18);
	}
	.header {
		padding: 30rpx;
		text-align: center;
	}
	.title {
		font-size: 36rpx;
		color: rgba(255, 255, 255, 0.87);
	}
	.device-list {
		flex: 1;
		padding: 0 20rpx;
	}
	.device-card {
		position: relative;
		display: flex;
		align-items: center;
		width: 94%;
	}
	.checkbox {
		width: 40rpx;
		height: 40rpx;
		border: 2rpx solid rgba(255, 255, 255, 0.5);
		margin-right: 20rpx;
		border-radius: 4rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.checkbox.checked {
		background-color: rgb(187, 230, 0);
		border-color: rgb(187, 230, 0);
	}
	.device-content {
		background-color: rgb(26, 26, 26);
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		position: relative;
		/* display: flex; */
		align-items: center;
		padding: 20rpx;
		width: 93%;
	}
	.device-header {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}
	.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;
	}

	.online {
		color: rgb(187, 230, 0);
	}

	.device-info {
		display: flex;
		justify-content: space-evenly;
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.87);
		padding-top: 10rpx;
	}

	.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: 98rpx;
		bottom: 32rpx
	}

	.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;
	}

	.ql-editor {
		color: rgba(255, 255, 255, 0.6);
		font-size:30rpx;
	}

	.ql-input {
		width:95.9%;
		height: 200rpx;
		margin-top: 30rpx;
		box-sizing: border-box;
		padding: 30rpx;
		border-radius:16rpx;
		background: rgb(26, 26, 26);
	}
	.textarea{
		color: rgba(255, 255, 255, 0.8);
	}
	.login-btn {
		margin-top:30rpx;
		background-color: rgb(187, 230, 0);
		color: rgb(35, 35, 35);
		border-radius: 50rpx;
		width:90%;
		margin-left: 10rpx;
	}
</style>