NN2022060801/addons/otcapp/pages/setting/device.vue

<template>
	<view class="main">
		<view class="devices" v-if="devices.length<=0">
			<view class="no-data">
				<image class="icon" src="/static/icons/no-data.png" mode=""></image>
				<view class="text">
					-- {{lang.no_data}} --
				</view>
			</view>
		</view>
		<view class="devices" v-else>
			<view class="device-item" v-for="(v,k) in devices" :key="k">
				<view class="info">
					<text class="text device">{{v.device}}</text>
					<text class="text ip">{{v.ip}}</text>
				</view>
				<view class="time">
					{{v.time_text}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				devices: [],
			}
		},
		created() {
			this.getData();

			uni.setNavigationBarTitle({
				title: this.lang.device_title
			})
		},
		methods: {
			//获取用户常用设备
			getData() {
				this.$request.sendToken('/api/user/devices', {}, 'POST').then(res => {
					if (res.success == true) {
						this.devices = res.data;
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.devices {
		padding-top: 60rpx;
		margin: 0rpx 19rpx;

		.device-item {
			border-radius: 10rpx;
			background-color: #2c2b2b;
			padding: 19rpx;
			margin-bottom: 19rpx;
			color: #6e6c6b;

			.text.ip {
				float: right;
			}

			.info {
				margin-bottom: 19rpx;
			}
		}
	}

	.no-data {
		text-align: center;
		margin-top: 40%;
		color: #6e6c6b;

		.icon {
			width: 120rpx;
			height: 120rpx;
			margin: 0 auto;
		}
	}
</style>