lanan-repair-app/pages-internal/deviceManagement/deviceManage.vue

<template>
	<view class="">
		<!-- <view class="top-rail"></view>
		<view class="page-top" :style='{ justifyContent: "center" }'>

			<view class='go-back-page' @click='pageBack'>返回</view>

			<view class="other-title-class">
				设备管理
			</view>
		</view> -->

		<VNavigationBar style="position: relative;z-index: 99;" homeHeaderPaddingTop="0" backgroundColor="#fff"
			title-color="#000" title="设备管理"></VNavigationBar>
		<view class="content">

			<view class="box_">
				<view class="box_list" v-for="(item, index) in tabList">
					<view class="" @click="gettap(item)">
						<image :src=defaultIcon mode=""></image>
						<!-- <image :src=iconArr[index] mode=""></image> -->
						<view class="name_">{{ item.categoryName }}</view>
						<view class="">{{ item.count }}</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		getDictDataByType
	} from "@/utils/utils";
	import request from "@/utils/request";

	import VNavigationBar from "@/components/VNavigationBar.vue";

	export default {
		data() {
			return {
				titles: "设备管理",
				List: [],
				show: false,
				status: 'loading',
				tabList: [],
				/* iconArr: ["../../static/internal/s1.png", "../../static/internal/s2.png", "../../static/internal/s3.png",
					"../../static/internal/s4.png"
				] */
				defaultIcon: "../../static/icons/internal/s1.png"
			}
		},
		components: {
			VNavigationBar
		},
		onLoad() {
			// this.getTab()
			this.getCount()
		},
		methods: {
			gettap(value) {
				uni.navigateTo({
					url: `/pages-internal/deviceManagement/informationManage?value=${value.categoryId}`
				})
			},
			async getTab() {
				const data = await getDictDataByType("repair_equ_type");
				this.tabList = [...this.tabList, ...data];
			},
			pageBack() {
				uni.navigateBack({
					delta: 1 // delta值为1时表示返回的页面层数
				});
			},
			getCount() {
				const data = request({
					url: '/admin-api/system/equInfo/queryEquipmentCountByPackageId',
					method: 'get',
					params: {
						servicePackageId: 'weixiu',
						dictType: 'repair_equ_type'
					}
				});
				this.tabList = data.then(res => {
					this.tabList = res.data
				})
			},
		},
	}
</script>


<style scoped lang="scss">
	.content {
		/* background: #F7F8FC;
		width: 100%;
		height: calc(100vh - 220rpx);
		box-sizing: border-box;
		padding: 30rpx; */
		// padding-top: 200rpx;
		background: #F7F8FC;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 30rpx;
	}

	.box_ {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 40rpx;
	}

	.box_list {
		width: 328rpx;
		height: 396rpx;
		background: #fff;
		border-radius: 18px;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		margin-bottom: 30rpx;

		image {
			width: 130rpx;
			height: 130rpx;
		}
	}

	.name_ {
		font-size: 28rpx;
		color: #000000;
	}

	.num_ {
		font-size: 36rpx;
		color: #000000;
	}



	/* .content {
		width: 100%;
		box-sizing: border-box;
		background: #f4f5f6;
		// background: #55aaff;
		// height: 100vh;
	} */

	.top-rail {
		height: 60rpx;
		width: 100%;
		background-color: #054DF3;
	}
</style>