ajy/code/ajyApp/pages/device/list/list.nvue

<template>
	<view class="page">
		<image class="content-bg" src="/static/device/devicebg.png" mode="scaleToFill"></image>
		<view class="status-bar" :style="{height: statusBarHeight + 'px'}"></view>
		<view class="custom-head">
			<text class="head-placeholder"> </text>
			<text class="head-title">我的设备</text>
			<text class="head-add" @click="goAddDevice">+</text>
		</view>
		<text class="section-title">已添加设备</text>
		<view class="device-list">
			<!-- 设备卡片 -->
			<view class="device-card" v-for="(item, index) in list" :key="index" @click="goDeviceInfo(item)">
				<image class="device-icon" src="/static/device/device1.png" mode="heightFix"></image>
				<text class="device-name">{{item.name}}</text>
				<text class="device-status"></text>
			</view>
			<!-- 添加设备卡片 -->
			<view class="device-card add-card" @click="goAddDevice">
				<text class="add-title">添加设备</text>
				<view class="add-icon-wrap">
					<view class="add-icon-circle">
						<text class="add-icon-text">+</text>
					</view>
					<text class="add-tip">去添加</text>
				</view>
			</view>
		</view>
		<ay-toast ref="ayToast" />
	</view>
</template>

<script>
import ayToast from '@/components/ay-toast/ay-toast.nvue'

export default {
	components: {
		ayToast
	},
	data() {
		return {
			statusBarHeight: 44,
			list: []
		}
	},
	onShow() {
		const sysInfo = uni.getSystemInfoSync()
		this.statusBarHeight = sysInfo.statusBarHeight || 44
		this.init()
	},
	onPullDownRefresh() {
		uni.stopPullDownRefresh()
		this.init()
	},
	methods: {
		init() {
			// 从本地存储读取设备列表
			try {
				const data = uni.getStorageSync('deviceList')
				if (data && data.length > 0) {
					this.list = data
				} else {
					this.list = []
				}
			} catch (e) {
				this.list = []
			}
		},
		goAddDevice() {
			// TODO: 跳转添加设备页面
			this.$toastRef.text('添加设备')
		},
		goDeviceInfo(item) {
			// TODO: 跳转设备详情
			this.$toastRef.text('设备: ' + item.name)
		}
	}
}
</script>

<style>
.page {
	flex: 1;
	position: relative;
}
.content-bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 750rpx;
	height: 1400rpx;
}
.status-bar {
	background-color: rgba(0,0,0,0);
}
.custom-head {
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height: 88rpx;
	padding-left: 54rpx;
	padding-right: 54rpx;
}
.head-placeholder {
	width: 36rpx;
}
.head-title {
	font-weight: bold;
	font-size: 32rpx;
	color: #545F71;
}
.head-add {
	width: 36rpx;
	height: 36rpx;
	border-width: 2px;
	border-style: solid;
	border-color: #545F71;
	border-radius: 36rpx;
	text-align: center;
	line-height: 32rpx;
	font-size: 26rpx;
	font-weight: bold;
	color: #545F71;
}
.section-title {
	font-size: 32rpx;
	color: #545F71;
	margin-left: 38rpx;
	margin-bottom: 38rpx;
	margin-top: 20rpx;
}
.device-list {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-left: 38rpx;
	padding-right: 38rpx;
}
.device-card {
	width: 324rpx;
	height: 300rpx;
	background-color: #FFFFFF;
	border-radius: 24rpx;
	margin-bottom: 26rpx;
	align-items: center;
	padding-top: 40rpx;
}
.device-icon {
	width: 156rpx;
	height: 156rpx;
}
.device-name {
	margin-top: 36rpx;
	font-weight: bold;
	font-size: 28rpx;
	color: #545F71;
}
.device-status {
	font-size: 24rpx;
	color: #999999;
	margin-top: 10rpx;
}
.add-card {
	align-items: flex-start;
	padding-left: 40rpx;
	padding-top: 40rpx;
}
.add-title {
	font-weight: bold;
	font-size: 28rpx;
	color: #545F71;
	margin-bottom: 48rpx;
}
.add-icon-wrap {
	align-items: center;
	width: 244rpx;
}
.add-icon-circle {
	width: 60rpx;
	height: 60rpx;
	background-color: #C3DFDB;
	border-radius: 60rpx;
	justify-content: center;
	align-items: center;
}
.add-icon-text {
	font-size: 42rpx;
	color: #389588;
	font-weight: bold;
	margin-top: -4rpx;
}
.add-tip {
	text-align: center;
	margin-top: 8rpx;
	font-size: 24rpx;
	color: #999999;
}
</style>