SzplatformAPP/components/LieBIaoList/LieBIaoList.vue

<template>
	<view class="LieBIaoListindexcontent">
		<!-- <u-navbar :leftText="'事件逐条审核'+'('+tiaoshu+')'+'条'" :safeAreaInsetTop="false" @rightClick="rightClick"
			:autoBack="true" :placeholder="true" leftIconColor="#ffffff">
		</u-navbar> -->

		<view class="LieBIaoListindexcontent-bottom">
			<view class="LieBIaoListindexcontentbttom-item" v-for="item in contentList" @click="gotoXiangqing(item)">
				<view class="LieBIaoListindexcontentbttom-item-top">
					{{item.caseTitle}}
				</view>
				<!-- <view class="LieBIaoListindexcontentbttom-item-bottom">
					<view class="LieBIaoListindexcontentbttom-item-bottom-left">
						<u-icon name="file-text" size="18" color="#595F66" class="icon"></u-icon>
					</view>
					<view class="LieBIaoListindexcontentbttom-item-bottom-rigth">
						{{item.caseSerial}}
					</view>
				</view> -->
				<view class="LieBIaoListindexcontentbttom-item-bottom">
					<view class="LieBIaoListindexcontentbttom-item-bottom-left">
						<u-icon name="map" size="14" color="#595F66" class="icon"></u-icon>
					</view>
					<view class="LieBIaoListindexcontentbttom-item-bottom-rigth">
						{{item.caseAddress}}
					</view>
				</view>
				<view class="LieBIaoListindexcontentbttom-item-bottom">
					<view class="LieBIaoListindexcontentbttom-item-bottom-left">
						<u-icon name="clock" size="14" color="#595F66" class="icon"></u-icon>
					</view>
					<view class="LieBIaoListindexcontentbttom-item-bottom-rigth">
						{{item.caseDate}}
					</view>
				</view>

				<view class="" v-if="tabscurrent == 0">
					<view class="LieBIaoListindexcontentbttom-item-bottom-bottom " :class="" v-show="!item.isReport">
						<!-- 	<u-icon name="tags" size="24" color="#2baa04" class="" class="icon"
							v-show="item.caseSerialShow">
						</u-icon> -->
						<!-- v-if="item.caseSerialShow" -->
						<view class="fuhe" :class="item.caseSerialShow?'huise':''" @click.stop="nextblack(item,false)">
							符合
						</view>
						<view class="bufuhe" :class="item.caseSerialShow?'hongse':''"
							@click.stop="nextblack(item,true)">
							不符合
						</view>

					</view>
				</view>
				<view class="" v-else>
					<view class="LieBIaoListindexcontentbttom-item-bottom-bottom chengse" v-if="item.isReport">
						<view class="bufuhe">
							不符合
						</view>
					</view>
					<view class="LieBIaoListindexcontentbttom-item-bottom-bottom chengse" :class=""
						v-show="!item.isReport">
						<!-- 	<u-icon name="tags" size="24" color="#2baa04" class="" class="icon"
							v-show="item.caseSerialShow">
						</u-icon> -->
						<!-- v-if="item.caseSerialShow" -->
						<view class="fuhe">
							符合
						</view>

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

<script>
	import {
		massEventsinfoTow
	} from '@/api/system/ApiList.js'
	export default {
		data() {
			return {
				tiaoshu: 0,
				contentList: [

				],

				massEventsObj: {
					current: 1,
					size: 10000
				},
				shijianList: [],
				innerEventId: "",
				// 判断从哪里来 0 是 待审核 1 是已上报 2是重训练
				tabscurrent: "",

			}
		},
		// props:{
		// 	innerEventId:{
		// 		type:String,
		// 		default:"123"
		// 	},
		// 	tabscurrent:{
		// 		type:String,
		// 		default:"123"
		// 	}
		// },
		methods: {
			open(opent) {
				this.innerEventId = opent.innerEventId
				this.tabscurrent = opent.tabscurrent
				this.getList()
			},
			gotoXiangqing(item) {
				uni.navigateTo({
					url: `/views/Xiangqing/Xiangqing?caseSerial=${item.caseSerial}&innerEventId=${this.innerEventId}`
				})
			},
			nextblack(item, type) {
				if (this.tabscurrent != 0) return

				//判断是否为同人同诉，如果为，那么判断点击时的状态 2 为非同人 ，对应字段caseSerialShowleft
				//3 为 非同诉，对应字段caseSerialShowRight

				item.caseSerialShow = type
				console.log(item.caseSerialShow);
				if (!item.caseSerialShow) {
					this.shijianList = this.shijianList.filter((obj) => {
						return obj != item.caseSerial;
					});
				} else {
					this.shijianList = this.shijianList.filter((obj) => {
						return obj != item.caseSerial;
					});
					this.shijianList.push(item.caseSerial)
				}


				this.$store.dispatch("setstate", this.shijianList)
				console.log(this.shijianList);
				console.log(this.$store.state.tijiaoList.shijianList);

			},
			getList() {
				massEventsinfoTow(this.innerEventId, this.massEventsObj).then(res => {
					let storeList = this.$store.state.tijiaoList.shijianList
					this.shijianList = storeList
					this.tiaoshu = res.data.total
					this.contentList = res.data.records


					this.contentList = this.contentList.map((obj) => {
						const caseSerialShow = storeList.includes(obj.caseSerial);
						return {
							...obj,
							caseSerialShow
						};
					});
					// console.log("到组件中",this.contentList);

				})
			},
		},
		onLoad(opent) {
			// this.innerEventId = opent.innerEventId
			// this.tabscurrent = opent.tabscurrent
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.LieBIaoListindexcontent {
		width: 100%;
		margin: 0rpx 0;
		height: 100%;
		padding-bottom: 80rpx;
		overflow-y: scroll;

		.LieBIaoListindexcontent-bottom {
			width: 100%;
			padding: 10rpx;
			border-radius: 10rpx;

			.LieBIaoListindexcontentbttom-item {
				padding: 15rpx;
				width: 100%;
				background: #f1f1f1fa;
				border-radius: 10rpx;
				margin: 5rpx 0;

				.LieBIaoListindexcontentbttom-item-top {
					text-align: left;
					font-weight: 500;
					font-size: 28rpx;
					font-weight: bold;
					color: #35393D;
					overflow: hidden;
				}



				.LieBIaoListindexcontentbttom-item-bottom {
					margin: 10rpx 0;
					display: grid;
					grid-template-columns: 5% auto;

					view {
						font-size: 25rpx;
						color: #35393D;
						line-height: 25rpx;
					}

					.LieBIaoListindexcontentbttom-item-bottom-left {
						color: #595F66;
						text-align: left;
					}

					.LieBIaoListindexcontentbttom-item-bottom-rigth {
						font-weight: bold;
					}

					.leibie {
						color: #E72C2C;
					}
				}

				.LieBIaoListindexcontentbttom-item-bottom-bottom {
					border-radius: 10rpx;
					width: 100%;
					height: 50rpx;
					text-align: center;
					line-height: 50rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.fuhe {
						width: 49%;
						background: rgba(0, 170, 0, 0.1);
						color: #2baa04;
					}

					.bufuhe {
						width: 49%;
						background: rgba(245, 154, 35, 0.1);
						color: #F59A23;
					}

					.huise {
						width: 49%;
						background: rgba(126, 123, 121, 0.1);
						color: #999999;
					}

					.hongse {
						width: 49%;
						background: rgba(255, 0, 0, 0.1);
						color: red;
					}
				}

				.chengse {
					border-radius: 10rpx;
					width: 100%;
					height: 50rpx;
					text-align: center;
					line-height: 50rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.fuhe {
						width: 100%;
						background: rgba(0, 170, 0, 0.1);
						color: #2baa04;
					}

					.bufuhe {
						width: 100%;
						background: rgba(245, 154, 35, 0.1);
						color: #F59A23;
					}
				}

				.LieBIaoListindexcontentbttom-item-bottom-bottomTRTS {
					background: #ffffff;
					display: grid;
					grid-template-columns: 1fr;
					grid-column-gap: 20rpx;

					view {
						background: rgba(0, 170, 0, .1);
						border-radius: 10rpx;
						text-align: center;
						line-height: 69rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.icon {
							background: rgba(0, 170, 0, 0);
						}

					}

				}

			}
		}

		.dibuaBtn {
			position: sticky;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 120rpx;
			padding: 30rpx;
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-column-gap: 20rpx;
			color: #ffffff;
			background-color: #ffffff;

			view {
				text-align: center;
				line-height: 60rpx;
				height: 60rpx;
				border-radius: 10rpx;
			}

			.dibuaBtn-lanse {
				background-color: #4379D6;
			}

			.dibuaBtn-hongse {
				background-color: #E72C2C;
			}
		}
	}
</style>