ybxf-security-uniapp/pagesA/fire/inspection_active/inspection_hislist/inspection_hislist.vue

<template>
	<view class="container uni-container uni-container-bg">
		<view class="">
			<u-list @scrolltolower="scrolltolower">
				<u-list-item v-for="(item, index) in tableData" :key="index"   link
					:style="[{'border-left':(item.status==='0'||item.status==='3'?'10px solid red':item.status==='1'?'10px solid green':'10px solid blue')},{'border-radius': '10px'}]">
					<uni-row class="demo-uni-row padding-tb-sm" :gutter="20" width="100%">
						<uni-col :span="24">
							<text class="text-xl font-weight-700">
								{{item.name}}
							</text>
							<text class="text-cut padding-sm"
								:style="{color:(item.status==='0'||item.status==='3'?'red':item.status==='1'?'green':'blue'),}">
								{{statusListTran(item.status)}}</text>
						</uni-col>
					</uni-row>
					<uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
						<uni-col :span="24" class="text-xl font-weight-700">
							<u-line></u-line>
						</uni-col>
					</uni-row>
					<view class="box2">
						<image :src="`${urls}/success.jpg`" style="width: 50rpx;height: 72rpx;">
						</image>
					</view>
					<u-scroll-list>
						<view v-for="(item, index) in list" :key="index">
							<image :src="item.thumb" style="width: 160rpx;height: 160rpx;"></image>
						</view>
					</u-scroll-list>
				</u-list-item>
			</u-list>
		</view>
		<!-- 卡片 -->
		<!-- <view class="uni-pagination-box">
			<uni-list @scrolltolower="scrolltolower">
				<uni-list-item v-for="(item, index) in tableData" :key="index" @click.native="onClick(item)" link>
					<uni-row class="demo-uni-row padding-tb-sm" :gutter="20" width="100%">
						<uni-col :span="24">
							<text class="text-xl font-weight-700">
								{{item.name}}
							</text>
						</uni-col>
					</uni-row> 
					<view class="box2">
						<image src="../../../../static/images/success.jpg" style="width: 25rpx;height: 37rpx;">
						</image>
					</view>
					<u-scroll-list>
						<view v-for="(item, index) in list" :key="index">
							<image :src="item.thumb" style="width: 80rpx;height: 80rpx;"></image>
						</view>
					</u-scroll-list>
				</uni-list-item>
			</uni-list> -->
		<!-- <u--image :showLoading="true" :src="src" width="80rpx" height="80rpx" @click=""></u--image> -->
		<!-- 分页 -->
		<!-- 		<page-pagination :total="total" :pageSize="pageSize" :showAround="true" :btnText="true" :showGoPage="true"
				showPageInfo trigger="click" @change="change"></page-pagination> -->
	</view>
	</view>
</template>
<script>
	import {
		getDailyInspectionUndoneList, // 每日巡查已完成详情
		addDailyInspectionUndoneNormal, // 未完成正常提交
	} from "@/api/daily_inspection";
	import config from '@/config'
	const baseUrlImg=config.baseUrlImg
	export default {
		data() {
			return {
				urls:baseUrlImg,
				// 图片链接
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				list: [{
					thumb: "https://cdn.uviewui.com/uview/goods/1.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/2.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/3.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/4.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/5.jpg"
				}],
				// 人员数据
				tableData: [],
				// 每页数据量
				pageSize: 20,
				// 当前页
				pageNo: 1,
				// 数据总量
				total: 0,
				// tableData数据加载中
				loading: false,
				// 基本案列数据
				radiolist1: [{
					name: '已完成',
					disabled: false,
					value: '1'
				}, {
					name: '有问题',
					disabled: false,
					value: '0'
				}],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: '已完成',
				statusList: {
					0: "未完成",
					1: "已完成",
					2: "审核中",
					3: "审核未通过"
				},
			}
		},
		//目的页面接收
		//这里用onshow()也可以
		onLoad(options) {
			this.selectedIndexs = []
			var id = options.id;
			this.getData(1, options.id)
		},
		methods: {
			// =================数据转换==================
			statusListTran(val) { //status状态转换
				return this.statusList[val]
			},
			// ================================
			groupChange(n) {
			},
			radioChange(n) {
			},
			// 分页触发
			change(e) {
				this.$refs.table.clearSelection()
				this.selectedIndexs.length = 0
				this.getData(e.current)
			},
			// 获取数据
			getData(pageNo, id) {
				this.loading = true
				this.pageNo = pageNo
				getDailyInspectionUndoneList({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					id: id,
				}).then(response => {
					this.tableData = response.data.list;
					this.total = response.data.total;
					this.loading = false;
				});
			},
			// 触底的事件
			scrolltolower() {
				// 判断是否还有下一页数据
				if (this.pageNo * this.pageSize >= this.total) return uni.showToast({
					title: `数据加载完毕`
				})
				// 判断是否正在请求其它数据，如果是，则不发起额外的请求
				if (this.loading) return
				this.pageNo += 1
				this.getData(this.pageNo)
			},
		}
	}
</script>
<style lang="scss" scoped>
	// --------------------
	::v-deep .u-list-item {
		position: relative;
	}

	.box2 {
		position: absolute;
		right: 20rpx;
		top: 0rpx;
	}
</style>