aircraft-pilot/aircraft/server/equipment/equipment.vue

<template>
	<view class="aircraft-equipment" :style="{backgroundImage: `url(${fileUrl+banner})`}">
		<view class="equipment-content">
			<view class="top-abs" :style="{marginTop: CustomBar+'px'}">
				我的设备
			</view>
			<view class="device-item" v-for="(item, index) in deviceList" :key="index">
				<u-image class="device-image" :src="item.image||(ordFileUrl+defaultIcon)" 
				mode="widthFix" @click="preview(item.image||(ordFileUrl+defaultIcon))" />
				<view class="device-info">
					<text class="device-name">{{ item.name }}</text>
					<text class="device-model">{{ item.model }}</text>
				</view>
				<button class="detail-btn" @click="goToDetail(item.id)">
					查看详情
				</button>
			</view>
			<u-loadmore v-if="deviceList.length>0" @loadmore="getMore" :status="form.isFinish" color="#333333" marginTop="30" marginBottom="20" />
			<view class="device-empty" :style="{marginTop: CustomBar+100+'px'}" v-else>
				<u-empty text="暂无设备" mode="list"
				src="/static/empty.png" icon-size="300" font-size="40"
				margin-top="250"></u-empty>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import configService from '@/common/config.service.js';
	export default {
		// #ifdef MP
		options: {
			styleIsolation: "shared"
		},
		// #endif
		data() {
			return {
				// #ifdef MP
				// 微信小程序自定义导航栏参数
				StatusBar: this.StatusBar || 0,
				CustomBar: this.CustomBar || 0,
				// #endif
				fileUrl: configService.fileUrl + 'aerocraft/equipment/', //静态资源基础路径
				ordFileUrl: configService.fileUrl + 'aerocraft/order/',
				// 飞行任务默认图片
				defaultIcon: 'default.png',
				banner: "devicebg.png",
				deviceList: [],
				// 翻页参数
				form:{
					current: 1,
					size: 10,
					// 是否结束——loadmore加载更多，loading加载中，nomore无更多
					isFinish: 'nomore',
				},
			};
		},
		methods: {
			// 初始化
			async init() {
				this.form = {size: 10,current: 1,isFinish: 'nomore'};
				await this.getDeviceList();
			},
			async getDeviceList(){
				this.form.isFinish = 'loading';
				let deviceRes = await this.$api.getDevices(this.form);
				if(deviceRes){
					const { records, size, total, current } = deviceRes;
					if(current == 1) this.deviceList = records || [];
					else this.deviceList.push(...records);
					this.form.isFinish = size*current >= total ? 'nomore' : 'loadmore';
				}else{
					this.$refs.uToast.show({type:'error',title: "设备列表获取失败!"});
					this.form.isFinish = 'loadmore';
				}
			},
			// 加载更多
			getMore(){
				if(this.form.isFinish === 'nomore') return;
				this.form.current++;
				this.getDeviceList();
			},
			// 预览
			preview(url){
				console.log(url);
				this.$util.tools.methods.lookImage(0,[url]);
			},
			// 跳转到设备详情 
			goToDetail(id) {
				uni.navigateTo({
					url: `/aircraft/server/equipment/equipmentDetail?id=${id}`,
				});
			},
		},
	};
</script>

<style scoped lang="scss">
.aircraft-equipment {
	height: 100%;
	background-color: #f5f5f5;
	display: flex;
	flex-direction: column;
	background-size: contain;
	background-repeat: no-repeat;
	padding-bottom: 30rpx;

	.equipment-content {
		width: 100%;
		position: relative;
		padding: 0 24rpx 0;

		.top-abs {
			// position: absolute;
			display: flex;
			align-items: center;
			font-family: Source Han Sans SC;
			font-weight: 800;
			font-size: 44rpx;
			color: #333333;
			margin-bottom: 40rpx;
		}

		.device-item {
			margin-top: 26rpx;
			background: #ffffff;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			padding: 30rpx;

			.device-image {
				width: 142rpx;
				height: 142rpx;
				background: #f3f3f3;
				border-radius: 12rpx;
				border: 2rpx solid #cccccc;
			}

			.device-info {
				flex: 1;
				margin-left: 24rpx;
				margin-bottom: 32rpx;

				.device-name {
					font-family: Source Han Sans SC;
					font-weight: bold;
					font-size: 36rpx;
					color: #333333;
					display: block;
					margin-bottom: 16rpx;
				}

				.device-model {
					font-family: Source Han Sans SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #666666;
					display: block;
				}
				
			}
			.detail-btn {
			  border: none;
			  background: #fee547;
			  border-radius: 12rpx;
			  font-family: Source Han Sans SC;
			  font-weight: bold;
			  font-size: 30rpx;
			  color: #333333;
			}
		}
		
		.device-empty{
			width: 100%;
			&::v-deep .u-icon__label{
				margin-top: 24rpx !important;
				font-weight: 500;
				font-family: Source Han Sans SC;
			}
		}
	}
}
</style>