APP/pages/210/onlineDevice/index.vue

<template>
	<view>
		<view class="device-page">
			<view class="sendFlex">
				<view class="Sendmessage" @click="call">呼叫</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,
				deviceType:''
			}
		},
		methods: {
			// 添加视频
			addvideo() {
				uni.navigateTo({
					url: `/pages/210/addDevice/index??id=${this.deviceID}`
				})
			},
			getData() {
				let data = {
					deviceId: this.deviceID
				}
			},
			// 发生短信
			handleSend() {
				uni.navigateTo({
					url: '/pages/common/send/index',
					events: {
						ack: function(data) {}
					},
					success: (res) => {
						res.eventChannel.emit('deviceSend', {
                           data:this.deviceType
						});
					}
				})
			},
			// 呼叫功能
			call(){
				uni.navigateTo({
					url: '/pages/210/call/index',
					events: {
						ack: function(data) {}
					},
					success: (res) => {
						res.eventChannel.emit('deviceCall', {
				           data:this.deviceType
						});
					}
				})
			}
		},
		onShow() {
			this.getData()
		},
		// onLoad(options) {
		// 	this.deviceID = options.id

		// }
		onLoad(options) {
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('onlineDevice', (data) => {
				this.deviceType=data.data
			})
		}
	}
</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>