payy-app/views/warning/detail/detail.vue

<template>
	<view class="detail-wrap warning">
		<view class="handle-wrap">
			<button v-if="item.status==0 || item.status==1"
					class="custom-button primary" 
					@click="handleWarn">处理</button>				
			<button v-if="item.isFixed!=1" 
					class="custom-button warn"   
					@click="delWarn(item.alertId)">删除</button>						
		</view>	
		<view class="detail-list">
			<view class="head">
				<text>基本信息</text>
			</view>		
			<view class="table-cont" >
			　　<view class="row">
					<text>标题：{{item.alertTitle}}</text>
				</view>		
			　　<view class="row">
					<text>风险点：{{item.riskPointTitle}}</text>
				</view>	
			　　<view class="row">
					<text>发生时间：{{item.alertTime}}</text>
				</view>						
			　　<view class="row">
					<text>等级：{{item.alertLevel|alertLevelFilter}}</text>
				</view>									
				<uni-collapse accordion>
					<uni-collapse-item title="详情">		
					　　<view class="row">
							<text>当前处理部门：{{item.taskInsGroupName}}</text>
						</view>							
					　　<view class="row" v-if="item.taskInsAccountId">
							<text>当前处理人员：{{item.taskInsAccountName}}</text>
						</view>	
					　　<view class="row">
							<text>状态：{{item.status | alertStatusFilter}}</text>
						</view>													
					　　<view class="row">
							<text>描述：{{item.alertDesc}}</text>
						</view>	
					</uni-collapse-item>
				</uni-collapse>										
			</view>
		</view>
	</view>
</template>

<script>
	import { alertLevel ,alertStatus} from '@/libs/enum';
	export default {
		data() {
			return {
				item:{}			
			}
		},
		filters:{
			alertLevelFilter(value){
				return alertLevel(value);
			},
			alertStatusFilter(value){
				return alertStatus(value);
			}					
		},
		methods: {
			init(){
				let warnInfo=uni.getStorageSync('warnInfo');
				this.item={...warnInfo};				
			},						
			handleWarn(){
				uni.navigateTo({
					url:'/views/warning/manage/manage'
				})
			},
			delWarn(id){
				uni.showModal({
					title:"提示!",
					content:"是否要删除？！",
					success: (res) => {
						if (res.confirm) {
							deleteAlertById(id).then((res)=>{
								uni.showToast({
									title:'删除成功',
									icon:"none",
									duration:2000,
									complete:()=>{
										uni.hideToast();
										uni.navigateBack()
									}
								})							
							})
						}
					}
				})
			}
		},
		onShow(){
			this.init();	
		},
		destroyed() {
			uni.removeStorageSync("warnInfo");
		}
	}
</script>

<style lang="scss" scoped>
	.detail-wrap{
		&.warning{
			padding: 20upx 0 120upx 0;
			background-color: #fff;
		}
		.detail-list{
			.head{
				width: 300upx;
				height: 58upx;
				line-height: 58upx;	
				color: #FFFFFF;
				background: #00A0FF;
				border-radius:0 16upx 16upx 0;
				padding: 0 20upx;										
			}
			.table-cont {
				padding: 0 26upx;
				.row {
					height: 78upx;
					line-height: 78upx;
					border-bottom: 2upx solid #EDE1D9;
					padding-left: 10upx;
					&.desc{
						height: auto;
						line-height: 1.5;
						min-height: 78upx;
						border-bottom: none;
						padding-top: 16upx;
						display: flex;
						justify-content: flex-start;
						.desc-txt{
							width: 600upx;
							word-break: break-word;
						}
					}
				}				
			}			
		}
		.handle-wrap{
			width:710upx;
			display: flex;
			justify-content: space-around;	
			padding: 20upx;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 99;
			background-color: rgba(255,255,255,0.6);
			.custom-button{
				width: 200upx;
				line-height: 2;
				margin: 0;
				margin-right: 20upx;
				padding: 15upx 0;		
				&.warn{
					background: #ff4949 ;
					color: #fff;
				}	
				&.success{
					background:#1aad19;
					color: #fff;
				}
				&.primary{
					background: #1890ff;
					color: #fff;
				}
			}
		}
	}
</style>