1
0
forked from dyf/APP
Files
APP/pages/send/index.vue
2025-07-05 14:49:26 +08:00

220 lines
4.5 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>