JiangShan-app/pagesB/home/device/log/order.vue

<template>
	<page-meta>
		<navigation-bar :title="$tt('navBar.orderLog')" title-align="center" background-color="#F1F3F9"
			front-color="#000000">
		</navigation-bar>
	</page-meta>

	<view class="device-log-order">
		<u-sticky>
			<view class="tabs-wrap">
				<u-tabs :list="tabsList" :scrollable="true" lineWidth="60" lineHeight="2" :duration="100"
					:activeStyle="{ fontSize: '30rpx', color: '#486ff2', fontWeight: 'bold' }" lineColor="transparent"
					@click="handleTabsClick">
				</u-tabs>
			</view>
		</u-sticky>

		<view class="order-content">
			<view class="item-wrap" v-for="(item, index) in datas" :key="index">
				<view class="title">
					<view class="name">{{item.deviceName}}</view>
					<view class="status"
						:class="{'success': item.funType === 1, 'warning': item.funType === 2, 'error': item.funType === 3}">
						{{ getStatusDisplay(item) }}
					</view>
				</view>
				<view class="describe">
					<view class="top-line">
						<view class="item">{{$tt('deviceDetail.modelName')}}：{{item.modelName || '--'}}</view>
						<view style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
							{{$tt('deviceDetail.identifier')}}：{{item.identify || '--'}}
						</view>
					</view>
					<view v-if="item.dataType === 'bool'" class="item">
						{{$tt('deviceDetail.value')}}：{{item.funValue === '1' ? $tt('deviceDetail.open') : $tt('deviceDetail.close') }}
					</view>
					<view v-else class="item">{{$tt('deviceDetail.value')}}：{{item.funValue || ''}}</view>
					<view class="item">{{$tt('deviceDetail.result')}}：{{item.remark || ''}}</view>
					<view class="item">{{$tt('deviceDetail.issueTime')}}：{{item.createTime || '--'}}</view>
				</view>
				<view class="tools">
					<view v-if="item.status === 2" class="btn"><u-button type="primary" size="mini"
							:text="$tt('alert.process')"></u-button>
					</view>
				</view>
			</view>
		</view>

		<u-empty mode="list" :show="total === 0" marginTop="30"></u-empty>
		<u-loadmore :status="loadmoreStatus" v-if="total > 0" marginTop="20" />
		<u-loading-page :loading="loading" bg-color="#eef3f7" loadingText="FastBee.cn"></u-loading-page>
	</view>
</template>

<script>
	import { getOrderLogList } from '@/apis/modules/log.js';

	export default {
		data() {
			return {
				tabsList: [{
						id: '0',
						name: this.$tt('log.all')
					},
					{
						id: '1',
						name: this.$tt('log.service')
					},
					{
						id: '2',
						name: this.$tt('log.acquisition')
					},
					{
						id: '3',
						name: this.$tt('log.ota')
					},
				],
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					serialNumber: '',
					deviceId: 0,
					funType: null
				},
				loading: true,
				datas: [], // log列表数据
				total: 0, // 总条数
				loadmoreStatus: 'loadmore',
			};
		},
		onLoad: function(option) {
			this.queryParams.serialNumber = String(option.serialNumber);
			this.queryParams.deviceId = Number(option.deviceId);
			this.getDatas();
		},
		methods: {
			// 获取列表数据
			getDatas() {
				this.loading = true;
				getOrderLogList(this.queryParams).then(res => {
					if (this.queryParams.pageNum == 1) {
						this.datas = res.rows;
					} else {
						this.datas = this.datas.concat(res.rows);
					}
					this.total = res.total;
					this.loading = false;
					uni.stopPullDownRefresh();
				});
			},
			// 单击查询
			handleTabsClick(e) {
				if (e.id == '0') {
					this.queryParams.funType = null;
				} else {
					this.queryParams.funType = e.id;
				}
				this.datas = [];
				this.queryParams.pageNum = 1;
				this.getDatas();
			},
			// 获取状态显示
			getStatusDisplay(item) {
				const { funType } = item;
				if (funType === 1) {
					return this.$tt('log.service')
				} else if (funType === 2) {
					return this.$tt('log.acquisition')
				} else if (funType === 3) {
					return this.$tt('log.ota')
				}
			},
			// 上拉加载
			onReachBottom() {
				this.loadmoreStatus = 'loading';
				this.queryParams.pageNum = this.queryParams.pageNum + 1;
				if ((this.queryParams.pageNum - 1) * this.queryParams.pageSize > this.total) {
					this.loadmoreStatus = 'nomore';
				} else {
					this.getDatas();
					this.loadmoreStatus = 'loadmore';
				}
			},
			// 下拉刷新
			onPullDownRefresh() {
				this.datas = [];
				this.queryParams.pageNum = 1;
				this.getDatas();
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: $uni-bg-color-grey;
	}

	.device-log-order {
		width: 100%;
		padding-bottom: 30rpx;

		.tabs-wrap {
			background: $uni-bg-color-grey;
			padding: 16rpx 10rpx 10rpx;
		}

		.order-content {
			width: 100%;

			.item-wrap {
				border-radius: 20rpx;
				padding: 0 34rpx;
				background-color: #ffffff;
				margin: 0 26rpx 20rpx;

				.title {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1px solid #eaecef;
					position: relative;
					height: 100rpx;

					.name {
						flex: 1;
						font-size: 32rpx;
						margin-right: 20rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.status {
						position: absolute;
						right: -34rpx;
						top: 0rpx;
						font-size: 20rpx;
						width: 128rpx;
						height: 48rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 0 20rpx 0 20rpx;
					}
				}

				.describe {
					font-size: 28rpx;

					.top-line {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 24rpx;

						.item {
							line-height: 40rpx;
							font-size: 26rpx;
							width: 63%;
							margin: 0;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}

					.item {
						display: flex;
						line-height: 40rpx;
						margin-top: 24rpx;
						font-size: 26rpx;
						width: 100%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}

				.tools {
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
					padding-bottom: 36rpx;
				}
			}
		}

		.success {
			color: #fff;
			background-color: #3378FE;
		}

		.warning {
			color: #fff;
			background-color: #f9ae3d;
		}

		.error {
			color: #fff;
			background-color: #f56c6c;
		}
	}
</style>