APP/pages/210/onlineDevice/index.vue

<template>
	<view>
		<view class="device-page">
			<view class="sendFlex">
				<view class="Sendmessage" @click="location">呼叫</view>
				<view class="Sendmessage" @click="handleSend">发送信息</view>
			</view>
			<scroll-view class="device-list" scroll-y @scrolltolower="onScrollToLower" :lower-threshold="100"
				style="height:80vh;">
				<view v-if="deviceList.length>0">
						<block v-for="(item, index) in deviceList" :key="index" :ref="'swipeItem_' + index" class="device-card">
								<view @click.stop="handleFile(item)">
									<view class="device-header">
										<view class="deviceIMG">
											<image :src="item.devicePic" class="IMG" mode="aspectFit"></image>
										</view>
										<view class="device-name">
											<view>设备:{{item.deviceName}}</view>
											<view class="ID">
												<view class="ID">ID:{{item.deviceImei}}
												</view>
												<!-- 在线状态 -->
												<view class="onlines">在线</view>
												<!-- 离线状态 -->
												<view class="offlines" v-if="item.onlineStatus==0">离线</view>
												<view>电量：{{item.battery || '0'}}%</view>
											</view>
										</view>
									</view>
									<view>
										<view class="device-status">1</view>
									</view>
								</view>							
						</block>
				</view>
				<view  class="content1" @click="addvideo">
					<image src="/static/images/common/path1.png" class="path1"></image>
				</view>
			</scroll-view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				deviceID: '',
				deviceList:[],
				loading:false
			}
		},
		methods: {
			// 添加视频
			addvideo() {
				uni.navigateTo({
					url: `/pages/common/addvideo/index??id=${this.deviceID}`
				})
			},
			getData() {
				let data = {
					deviceId: this.deviceID
				}
			},
			// 发生短信
			handleSend() {
				console.log(`跳转到发送信息页面\n当前设备类型: ${deviceType}\n设备类型名称: ${currentTab.typeName}`);
				uni.navigateTo({
					url: '/pages/common/send/index',
					events: {
						ack: function(data) {}
					},
					success: (res) => {
						res.eventChannel.emit('deviceSend', {
							
						});
					}
				})
			},
		},
		onShow() {
			this.getData()
		},
		onLoad(options) {
			this.deviceID = options.id

		}
	}
</script>

<style scoped>
	/* 页面整体样式 */
	.device-page {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: rgb(18, 18, 18);
		padding: 30rpx;
	}
	.sendFlex {
		display: flex;
		color: rgba(255, 255, 255, 0.87);
		justify-content: flex-end;
		cursor: pointer;
		margin-bottom: 30rpx;
		font-size: 28rpx;
	}
	/* 设备卡片 */
	.device-card {
		background-color: rgb(26, 26, 26);
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		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;
		width: 75%;
		white-space: nowrap;
	}
	
	.ID {
		color: rgba(255, 255, 255, 0.6);
		font-size: 26rpx;
		display: flex;
		justify-content: space-between;
		position: relative;
	
	}
	
	.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;
		color: rgba(255, 255, 255, 0.8)
	}
	
	.circle {
		width: 8rpx;
		height: 40rpx;
		position: absolute;
		right: 25rpx;
		top: 60rpx;
	}
	.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%;
		object-fit: contain;
	}
	
	.onlines {
		position: relative;
	}
	
	.onlines::before {
		content: '';
		position: absolute;
		width: 15rpx;
		height: 15rpx;
		background: rgb(0, 171, 103);
		border-radius: 50%;
		top: 20rpx;
		left: -20rpx
	}
	.offlines{
		position: relative;
	}
	.offlines::before {
		content: '';
		position: absolute;
		width: 15rpx;
		height: 15rpx;
		background: rgba(255, 255, 255, 0.4);
		border-radius: 50%;
		top: 20rpx;
		left: -20rpx
	}
	
	.content1 {
		height: 160rpx;
		background: rgb(26, 26, 26);
		border-radius: 16rpx;
		text-align: center;
		line-height: 200rpx;
	}
	.Sendmessage {
		margin-left: 50rpx;
		color: rgba(255, 255, 255, 0.87);
	}

	.path1 {
		width: 62rpx;
		height: 62rpx;
	}

</style>