property/user_ui/work/components/box/list.vue

<template>
<view>
	<!-- 第一种样式  人员管理-->
	<block v-if="datainfo.length>0">
		<!-- 报修管理 -->
		<block v-if="type=='warranty'">
			<view class="walists" v-for="(ite,idx) in datainfo" :key="idx" @click="getDetail">
				<view class="watop ">
					<view class="watit">
						<view class="tit">一号楼3单元12楼楼梯间灯不亮</view>
						<view class="txt co01" v-if="ite.type==1">待分派</view>
						<view class="txt coa" v-if="ite.type==3">已完成</view>
						<view class="txt co28" v-if="ite.type==2">处理中</view>
					</view>
					<view class="walist"><view class="tit">小区名称</view>：幸福小区</view>
					<view class="walist"><view class="tit">报修门户</view>：3号楼1单元406</view>
					<view class="walist"><view class="tit">报修时间</view>：2024-11-14 17:16:31</view>
					<view class="walist" v-if="ite.type==3"><view class="tit" >完成时间</view>：2024-11-14 18:16:31</view>
				</view>
				<view class="wabtn">
					<view>查看详情</view>
					<image :src="rimg"></image>
				</view>
			</view>
		</block>
		<!-- 访客 -->
		<block v-if="type=='visitor'">
			<view class="vislist" v-for="(ite,idx) in datainfo" :key="idx" @click="getDetail">
				<view class="vistop flexc mb12">
					<view class="tit flex0">王女士</view>
					<view class="btns flex0">驾车</view>
					<view class="flex1"></view>
					<view class="txt flex0 coa">已来访</view>
					<view class="txt flex0 co01">待来访</view>
				</view>
				<view class="vlist flexcw">
					<view>来访人数：1人</view>
					<view>来访事由：亲友</view>
					<view>车牌号码：皖A B8888</view>
					<view >手机号码：18705665588</view>
					<view>来访时间：2024-11-20 10:00</view>
				</view>
			</view>
		</block>
		<view class="shax" v-if="wtdt">{{wtdt}}</view>
	</block>
	<!-- 无数据 -->
	<view class="nodata" v-else>
		<image :src="noiconpimg"></image>
		<view>
			暂无数据
		</view>
	</view>
</view>
</template>

<script>
	import config from '@/config'
	export default{
		props:{
			datainfo: {
				type: Array,
				default () {
					return []
				}
			},
			wtdt:{
				type:String,
				default () {
					return ''
				}
			},
			type:{
				type:String,
				default () {
					return 0
				}
			},
			
		},
		data(){
			return{
				noiconpimg:require("@/static/images/nodata.png"),
				rimg:require('@/static/images/rimg.png'),
				baseUrl:config.baseUrl,
				
			}
		},
		mounted() {
			
		},
		methods:{
			getDetail(e){
				this.$emit('getDetail',e)
			},
			getPreview(idx,arr) {
				var newArr=[];
				arr.forEach(ite=>{
					var ds=this.baseUrl+ite
					newArr.push(ds)
				})
				uni.previewImage({
					urls: newArr,
					current:idx,
					success: function(data) {},
					fail: function(err) {}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
.flex{display: flex;}
.flexc{display: flex;align-items: center;}
.mb10{margin-bottom: 20rpx;}
// 报修
.walists{background: #FFFFFF;border-radius: 20rpx;margin-bottom: 24rpx;    position: relative;
	.watop{
		padding: 0 36rpx 8rpx 38rpx;
		.watit{padding: 24rpx 0;margin-bottom: 4rpx;display: flex;
			.tit{font-weight: bold;font-size: 28rpx;color: #272727;flex: 1;
				.cir{width: 14rpx;margin-left: 8rpx;margin-bottom: 10rpx;height: 14rpx;display: inline-block;background: #FF6969;border-radius: 8rpx;}
			}
			.txt{font-weight: bold;font-size: 26rpx;flex: 0 0 auto;
			}
		}
	}
	.walist{display: flex;font-weight: 500;font-size: 24rpx;color: #666666;margin-bottom: 16rpx;
		.tit{min-width: 100rpx;text-align-last: justify}
	}
	.wabtn{display: flex;align-items: center;justify-content: space-between;border-top: 2rpx solid #E5E5E5;height: 80rpx;padding: 0 38rpx;
		view{font-weight: 500;font-size: 24rpx;color: #666666;}
		image{width: 16rpx;height: 28rpx;}
	}
}
.vislist{background: #FFFFFF;border-radius: 20rpx;margin-bottom: 24rpx;padding: 26rpx 38rpx 12rpx;
	.vistop{
		.tit{font-size: 28rpx;color: #272727;font-weight: bold;}
		.btns{min-width: 70rpx;font-weight: 500;
font-size: 20rpx;padding: 0 8rpx;box-sizing: border-box;text-align: center;margin-left: 18rpx;color: #00B861;border-radius: 16rpx;border: 2rpx solid #0AC86E;}
		.txt{font-weight: bold;font-size: 26rpx;margin-left: 18rpx;}
	}
	.vlist{
		view{font-weight: 500;font-size: 24rpx;color: #666666;margin-bottom: 16rpx;flex: 0 1 auto;min-width: 50%;}
	}
}
// 无数据
.nodata{display: flex;flex-direction: column;align-items: center;
	image{width: 440rpx;height: 440rpx;}
	view{font-size: 30rpx;color: #666666;font-weight: bold;}
}
</style>