tqApp-webView/pagesBase/sysMessage/module/item.vue

<template>
	<view class="box-container">
		<view class="box-head">
			
			<view class="box-head-title">
				<image :src="$getImages(`${boxIcon}`)" class="box-head-img" /> 
				{{renderItem(item,'msgTypeName','--')}} 
			</view>
			<view class="box-head-action">
				
			</view>
			
		</view>
		<view class="box-body" @click="handleDetaisl(item)">
			<u-row>
				<u-col :span="12"> 
					
					<!-- 保险到期 -->
					<template v-if="item.msgType == 1">
						<view class="item">
							<view class="label">
								车辆{{item.objName}}保险到期时间为
								<text :class="{
									'red': item.restDay < 0,
									'orange': item.restDay >= 0,
								}">{{item.dueTime}}</text>
							</view>							
							
						</view>
						<view  class="item">
							<view class="label">
								距离到期时间
								<text :class="{
									'red': item.restDay < 0,
									'orange': item.restDay >= 0,
								}">{{item.distanceDay}}</text>
							</view>
						</view>
						
					</template>
					
					<!-- 年检到期 -->
					<template v-else-if="item.msgType == 2">
						<view class="item">
							<view class="label">
								车辆{{item.objName}}年检到期时间为
								<text :class="{
									'red': item.restDay < 0,
									'orange': item.restDay >= 0,
								}">{{item.dueTime}}</text>
							</view>							
							
						</view>
						<view  class="item">
							<view class="label">
								距离到期时间
								<text :class="{
									'red': item.restDay < 0,
									'orange': item.restDay >= 0,
								}">{{item.distanceDay}}</text>
							</view>
						</view>
						
					</template>
					
					<!-- 保养到期 -->
					<template v-else-if="item.msgType == 3">
						<view class="item">
							<view class="label">
								车辆{{item.objName}}保养到期时间为
								<text :class="{
									'red': item.restDay < 0,
									'orange': item.restDay >= 0,
								}">{{item.dueTime}}</text>
							</view>							
							
						</view>
						<view  class="item">
							<view class="label">
								距离到期时间
								<text :class="{
									'red': item.restDay < 0,
									'orange': item.restDay >= 0,
								}">{{item.distanceDay}}</text>
							</view>
						</view>
						
					</template>
					
					<!-- 驾驶证到期 -->
					<template v-else-if="item.msgType == 4">
						<view class="item">
							<view class="label">
								{{item.objName}}驾驶证到期时间为
								<text :class="{
									'red': item.restDay < 0,
									'orange': item.restDay >= 0,
								}">{{item.dueTime}}</text>
							</view>							
							
						</view>
						<view  class="item">
							<view class="label">
								距离到期时间
								<text :class="{
									'red': item.restDay < 0,
									'orange': item.restDay >= 0,
								}">{{item.distanceDay}}</text>
							</view>
						</view>
						
					</template>
					
					
					
				</u-col>
				
			</u-row>
		</view>
		
		<view class="box-footer">
			<u-row style="justify-content: flex-end;">
				
				<u-col :span="4" style="padding: 20rpx 30rpx;">
					<u-button type="primary"  	
						:custom-style="{
							width: '100%',
							height: '28px',
						}"  
						plain
						shape="circle"
						@click="handleOper(item)">处理
					</u-button>
				</u-col>	
			</u-row>
		</view>
		
		
	</view>
</template>

<script>
import { renderItem } from '@/utils/gdtq'

export default {
	components: {
	},
	props: {
		item: {
			type: Object,
			default: () => {}
		},
	},
	computed: {
		boxIcon() {
			if(this.item && this.item.msgType) {
				if(this.item.msgType == 1) {
					return '/assetsMobile/images/message/insurance.png'
				} else if(this.item.msgType == 2) {
					return '/assetsMobile/images/message/inspection.png'
				} else if(this.item.msgType == 3) {
					return '/assetsMobile/images/message/maintain.png'
				} else if(this.item.msgType == 4) {
					return '/assetsMobile/images/message/license.png'
				}
			} else {
				return ''
			}
		}
	},
	data() {
		return {}
	},
	methods: {
		
		handleOper(item) {
			this.$emit('handleOper',item)
		},
		
		handleDetaisl(item){
			return
		}
		
	},
}
</script>

<style lang="scss" scoped>
	.box-container {
		background: #fff;
		margin: 20rpx 10rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		.box-head {
			border-bottom: 1px solid #ddd;
			padding: 20rpx;
			font-weight: 700;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.box-head-title {
				flex: 1;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				.box-head-img {
					flex-basis: 34rpx;
					flex-shrink: 0;
					width: 32rpx;
					height: 36rpx;
					margin-right: 10rpx;
				}
			}
			.box-head-action {
				flex-basis: 120rpx;
			}
		}
		.box-body {
			padding: 20rpx;
			.item {
				margin: 4rpx;
				display: flex;
				.label {
					
				}
				.value {
					flex: 1;
				}
			}
		}
		.box-footer {
			border-top: 1px solid #ddd;
			// padding: 20rpx;
		}
	}
	
	.primary {
		color: $uni-color-primary;
	}
	.red {
		color: #E44C4C;
	}
	.orange {
		color: #F7A254;
	}
</style>