ParkApp/pages/test/test1.vue

<template>
	<view class="safe-area-inset-bottom">
		<view  class="card" v-for="(item,index) in 8" :key="index">
			<view class="item">
				<view class="left">
					<view class="tag bg-red">
						<text>麦</text>
					</view>
					<view class="content">
						<text class="text-cut-1">麦草方格（宁夏）文化传媒有限公司</text>
						<text class="text-cut-1">德锐斯园区A区</text>
					</view>
				</view>
				<view class="right">
					<image  src="../../static/index/call.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
			this.test()
		},
		methods: {
           test(){
			   let arr=[]
			   
			   let result= arr.filter(item=>{
				   return item.checkinType==0 || item.checkinType==1
			   })
			   console.log(result);
			   return
			   let outPunchRecords=[]
			   arr.forEach(item=>{
				   if (item.checkinType==0) {
						console.log("我打上班卡啦");
				   }else if (item.checkinType==1) {
						console.log("我打下班卡啦");
				   }else if (item.checkinType==2) {
						outPunchRecords.push(item)
				   }else{
					   console.log("我什么都没打");
				   }
				   
			   })
			   console.log(outPunchRecords);
			   
		   }
		}
	}
</script>

<style lang="scss">
  .card{
  	position: relative;
  	background-color: #FFFFFF;
  	padding: 35rpx;
  	margin: 20rpx;
	
	.item{
		display: flex;
		justify-content: space-between;
	}
	
	.left{
		display: flex;
		width: 88%;
		
		.tag{
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80rpx;
			width: 80rpx;
			font-size: 32rpx;
		}
		
		.content{
			padding-left: 30rpx;
			display: flex;
			flex-direction: column;
			
			text:first-child{
				font-size: 32rpx;
			}
			
			text:last-child{
				font-size: 28rpx;
				color: #9f9f9f;
				padding-top: 15rpx;
			}
		}
	}
	
	.right{
		display: flex;
		justify-content: center;
		align-items: center;
		
		image{
			width: 50rpx;
			height: 50rpx;
		}
	}

  	
  }
</style>