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

<template>
	<page-meta>
		<navigation-bar :title="$tt('navBar.orderLog')" title-align="center" background-color="#007AFF" />
	</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: '36rpx', color: '#3c9cff', 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="{'primary': item.funType === 1, 'success': item.funType === 2, 'warning': item.funType === 3}">
						{{getStatusDisplay(item)}}
					</view>
				</view>
				<view class="describe">
					<view class="item">标识符：{{item.identify}}</view>
					<view class="item">
						值：<text :class="{'primary': item.funType === 1, 'success' : item.funType === 2, 'warning' :
							item.funType === 3}">
							{{item.funValue}}</text>
					</view>
					<view class="item">结果描述：{{item.resultMsg}}</view>
					<view class="item">下发时间：{{item.createTime}}</view>
				</view>
			</view>
		</view>

		<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" :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="XCWL.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: #eef3f7;
	}

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

		.tabs-wrap {
			background: #eef3f7;
			padding: 16rpx 10rpx 10rpx;
		}

		.order-content {
			width: 100%;

			.item-wrap {
				box-shadow: 0 2rpx 0px 0 rgba(0, 0, 0, 0.1);
				border-radius: 10rpx;
				margin: 20rpx;
				padding: 10rpx 20rpx;
				background-color: #ffffff;

				&:first-child {
					margin-top: 0;
				}

				.title {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1px solid #eaecef;
					padding: 20rpx 0;

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

					.status {
						font-size: 24rpx;
					}
				}

				.describe {
					font-size: 28rpx;

					.item {
						margin: 16rpx 0;
						width: 100%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}
		}

		.primary {
			color: #3c9cff;
		}

		.success {
			color: #5ac725;
		}

		.warning {
			color: #f9ae3d;
		}
	}
</style>