MingGaoApp_vue/MingGaoApp/pages/my/components/warnCard.vue

<template>
	<view class="warn-card" @click="handleClick">
		<view class="warn-card__title" :class="{active:!dataSource.is_read}">
			{{dataSource.alert_title}}
		</view>
		<view class="warn-card__content">
			<view class="warn-card__item">
				<view class="warn-card__label">预警类型：</view>
				<view class="warn-card__value">{{dataSource.alert_type}}</view>
			</view>
			<view class="warn-card__item">
				<view class="warn-card__label">设备ID：</view>
				<view class="warn-card__value">{{dataSource.device_id || '-'}}</view>
			</view>
			<view class="warn-card__item" @click="handleMapCheck">
				<view class="warn-card__label">设备位置：</view>
				<view class="warn-card__value map">查看位置</view>
			</view>
			<view class="warn-card__item blocked">
				<view class="warn-card__label">预警内容：</view>
				<view class="warn-card__value">{{dataSource.message || '-'}}</view>
			</view>
		</view>
		<view class="warn-card__footer">
			<view><text class="text">{{dataSource.create_time}}</text>
				<uni-icons :type="dataSource.is_read?'mail-open-filled':'email'" size="18"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			dataSource: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {}
		},
		methods:{
			handleClick(){
				if(this.dataSource.is_read){
					return 
				}
				
				this.$emit('click',this.dataSource.record_id);
			},
			handleMapCheck(){
				if(!this.dataSource.lat && !this.dataSource.lng){
					uni.$u.toast('当前位置不存在');
					return 
				}
				
				console.log('map click')
				uni.openLocation({
					latitude:this.dataSource.lat,
					longitude:this.dataSource.lng,
					success() {
						console.log('sucess open location');
					},
					fail(res){
						console.warn(res);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.warn-card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 16rpx;
		margin-bottom: 24rpx;

		&__title {
			position: relative;
			padding: 0 40rpx;
			font-size: 16px;
			color: #333;
			line-height: 40rpx;
			height: 40rpx;
			@include line;
			margin-bottom: 20rpx;

			&::before {
				position: absolute;
				content: '';
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				background-color: #999;
			}

			&.active {
				color: #1B76FF;

				&::before {
					background-color: #1B76FF;
				}
			}
		}

		&__content {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
		}

		&__item {
			width: 50%;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			color: #333;
			font-size: 12px;
			line-height: 28rpx;

			&.blocked {
				width: 100%;
			}
		}
		
		&__value {
			&.map {
				color: #1B76FF;
				text-decoration: underline;
			}
		}

		&__footer {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			font-size: 14px;
			line-height: 32rpx;
			color: #333;

			.text {
				margin-right: 20rpx;
			}
		}
	}
</style>