safetyHome_wxapp/pages/mine/message.vue

<!-- 我的消息 -->
<template>
	<view class="">
		<view class="item" v-for="(item,index) in data" :key="index">
			<view class="top">
				<view class="left" v-if="item.status==1">
					<view class="icon">审核</view>
					<view class="title">审核信息</view>
				</view>
				<view class="left" v-else-if="item.status==2">
					<view class="icon" style="background:rgba(248,195,72,1);">报修</view>
					<view class="title">报修信息</view>
				</view>
				<view class="left" v-else-if="item.status==3">
					<view class="icon" style="background:rgba(96,139,233,1);">投诉</view>
					<view class="title">投诉信息</view>
				</view>
				<view class="left" v-else>
					<view class="icon" style="background:rgba(87,224,135,1);">访问</view>
					<view class="title">访问信息</view>
				</view>
				<view class="right">{{item.date}}</view>
			</view>
			<view class="content" @tap="seeMore(index)">
				<view class="info" :class="{active:item.show}">{{item.info}}</view>
				<image src="../../static/icon_combo_nor@2x.png" style="width:29rpx;height: 15rpx;margin-left: 28rpx;margin-top: 15rpx;" v-show="!item.show" ></image>
				<image src="../../static/icon_combo_set@2x.png" style="width:29rpx;height: 15rpx;margin-left: 28rpx;margin-top: 15rpx;" v-show="item.show"></image>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				isShow:true,//
				status:4,
				data:[{status:1,date:'07-21 10:24',info:'恭喜您！您在花园小区1单元101室的审核已经通过！安全现已接收到您提交的报修信息',show:false},{status:2,date:'07-21 10:24',show:false,info:'恭喜您！您在花园小区1单元101室的审核已经通过！安全现已接收到您提交的报修信息'},{status:3,date:'07-21 10:24',show:false,info:'恭喜您！您在花园小区1单元101室的审核已经通过！安全现已接收到您提交的报修信息'}]
			}
		},
		methods:{
			// 查看更多
			seeMore(index){
				this.data[index].show=!this.data[index].show
			}
		}
	}
</script>

<style>
	.content{
		width: 100%;
	display: flex;
	margin-top:14rpx ;
	padding-bottom: 40rpx;
	}
	.info{
		width: 644rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size:26rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(102,102,102,1);
	}
	.title{
		width:116rpx;
		height:40rpx;
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(51,51,51,1);
		margin-left: 10rpx;
	}
		
	.icon{
		width:56rpx;
		height:28rpx;
		background:rgba(84,162,255,1);
		opacity:1;
		border-radius:6rpx;
		font-size:20rpx;
		font-family:PingFang SC;
		/* line-height:28rpx; */
		text-align: center;
		color:rgba(255,255,255,1);
		margin-top: 7rpx;
	}
	.item{
		width: 700rpx;
		margin: 0 auto;
		border-bottom:2px solid rgba(247,247,247,1) ;
	}
	.top{
		width: 100%;
		height: 40rpx;
		display: flex;
		justify-content: space-between;
		padding-top: 40rpx;
	}
	.left{
		width:184rpx ;
		height: 40rpx;
		display: flex;
	}
	.right{
		width:166rpx ;
		margin-top: 3rpx;
		height: 36rpx;
		font-size:26rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(153,153,153,1);
		text-align: right;
	}
	.active{
		width: 644rpx;
		height: auto;
		overflow: inherit;
		text-overflow: inherit;
		white-space: inherit;
	}
</style>