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>
		
		<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
				}
			},
			topval:{
				type:String,
				default () {
					return ''
				}
			}
		},
		data(){
			return{
				noiconpimg:require("@/work/static/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;}
	}
}
// 无数据
.nodata{display: flex;flex-direction: column;align-items: center;
	image{width: 440rpx;height: 440rpx;}
	view{font-size: 30rpx;color: #666666;font-weight: bold;}
}
</style>