parts_shop_ui_LT/pages/device/EquipmentArchives/EquipmentArchives.vue

<template>
	<view>
		<view style="height:170rpx">
			<u-navbar title="设备档案" bgColor="#fd4b09" leftIconColor="#fff" leftIconSize="27px"
			:titleStyle="{'color':'#fff'}" :autoBack="true" >
				<view class="u-nav-slot" slot="right" >
					<view style="color: #fff;font-size: 30rpx;" @click="Jumpfun()">添加档案</view>
				</view>
			</u-navbar>
		</view>
		<view class="searchforBox">
			<view style="display: flex;align-items: center;">
				<u-search v-model="page.retrieval" :showAction="true" actionText="搜索"
				clearabled :animation="false" 
				@search="searchfun" @custom="searchfun" @clear="clearfun"></u-search>
				<!-- <view class="addbox" @click="Jumpfun()">添加档案</view> -->
			</view>
<!-- 			<view class="screenflex">
				<view>数量排序</view>
				<view>维保次数</view>
				<view>客户名称</view>
			</view> -->
		</view>
		<view class="listbox">
			<view class="cardBox" v-for="(item,index) in listData" :key="index" @click="Jumpfun(item.id)">
				<view class="listbox_title">
					<view class="listbox_titleLeft">
						<!-- <u-icon name="bookmark-fill" color="#215476" size="22"></u-icon> -->
						<view style="width: 10rpx;height: 35rpx;background-color: #fd4b09; margin-right: 8rpx;"></view>
						<text>{{item.sysNo}}</text>
					</view>
					<!-- <view class="listbox_titleRight" @click="Jumpfun(item.id)">详情</view> -->
				</view>
				<!-- style="margin-left: 40rpx;" -->
				<view class="title">{{item.corpName}}</view>
				<view class="countBox">
					<view class="countBox_Left">
						<text>设备数量:{{item.equipmentNumber}}</text>
					</view>
					<view class="countBox_Right">
						<text>维修次数:{{item.maintenanceSecond?item.maintenanceSecond:0}}</text>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore v-if="total !== 0" :status="status" />
		
		<u-loading-page style="z-index: 999;" bgColor="rgba(0,0,0,.5)"  :loading="loading"></u-loading-page>
	</view>
</template>

<script>
	import { corpequipmentarchivesList } from '@/api/device/index.js'
	export default {
		data() {
			return {
				// 页面配置
				page:{
					current: 1,
					size: 10,
				},
				// 列表数据
				listData:[],
				status: 'loadmore',
				total:0,
				loading:false,
				
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.listData = []
			this.corpequipmentarchivesListfun()
		},
		onReachBottom() {
			this.status = 'loading'
			if (this.page.current * this.page.size < this.total) {
				this.page.current++
				this.corpequipmentarchivesListfun()
			} else {
				this.status = 'nomore'
			}
		},
		methods: {
			// 跳转详情页面
			Jumpfun(id){
				if (id) {
					uni.$u.route('/pages/device/FileDetails/FileDetails?id=' + id);
				}else {
					uni.$u.route('/pages/device/FileDetails/FileDetails');
				}
				
			},
			// 搜索
			searchfun(value)	{
				this.listData = []
				this.page.current = 1
				this.page.size = 10
				this.page.retrieval = value
				this.corpequipmentarchivesListfun()
			},
			// 搜索清空
			clearfun(){
				this.listData = []
				this.page.current = 1
				this.page.size = 10
				this.page.retrieval = ''
				this.corpequipmentarchivesListfun()
			},
			// 获取设备档案列表
			corpequipmentarchivesListfun(){
				this.loading = true
				corpequipmentarchivesList(this.page).then(res=>{
					let list = res.data.records
					this.listData = [...this.listData,...list]
					this.total = res.data.total
					this.loading = false
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.searchforBox {
		width: 100%;
		background: #fff;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		.addbox {
			margin-left: 20rpx;
			border: 2rpx solid #dd451b;
			border-radius: 12rpx;
			color: #fff;
			padding: 5rpx 10rpx;
			font-size: 28rpx;
			background: #dd451b;
		}
	}
	.screenflex {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
		font-size: 30rpx;
	}
	.listbox {
		padding: 20rpx 16rpx;
		box-sizing: border-box;
		.cardBox {
			background: #fff;
			border-radius: 12rpx;
			width: 100%;
			padding: 30rpx;
			padding-bottom: 0;
			box-sizing: border-box;
			margin-bottom: 30rpx;
			.listbox_title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;
				.listbox_titleLeft {
					display: flex;
					align-content: center;
					font-size: 30rpx;
					// color: #215476;
					font-weight: 500;
				}
				.listbox_titleRight {
					font-size: 30rpx;
					// color: #215476;
				}
			}
			.countBox {
				margin-top: 20rpx;
				border-top: 2rpx solid #F6F6F6;
				padding: 20rpx 0;
				display: flex;
				align-items: center;
				text-align: center;
				font-size: 30rpx;
				.countBox_Left {
					flex: 1;
					border-right: 2rpx solid #F6F6F6;
				}
				.countBox_Right {
					flex: 1;
				}
			}
		}
	}
	.title {
		// font-size: 34rpx;
		font-size: 32rpx;
		// color: #215476;
		// font-weight: bold;
	}
</style>