property/user_ui/news/pages/complaint/detail.vue

<template>
	<view class="comdetail">
		<view class="cdbox mb12">
			<image :src="replay" class="replay"></image>
			<view class="cdtop">
				<view class="tit">小区电梯老化</view>
				<view class="txt">2024-11-18 08:16</view>
			</view>
			<view class="cdmain">
				<view class="tit">小区电梯时常发生问题，请物业派维修人员进行安全检 查，若无法排除问题，建议更换小区的电梯设备，避免 后期发生人员伤害！</view>
				<view class="imgs">
					<image :src="replay"></image>
				</view>
			</view>
		</view>
		<!-- 步骤条 -->
		<view class="hfbox mb12">
			<view class="hftop">
				<image :src="hline"></image>
				<view>回复</view>
			</view>
			<!--  -->
			<view class="hfstep">
				<view class="hfslist flex">
					<view class="limg flexccc">
						<image :src="cira" class="imga"></image>
					</view>
					<view class="flex1">
						<view class="hfstit co01">已完成 2024-11-25  12:24</view>
						<view class="hfstxt co27">设备已维修，感谢您的建议！</view>
					</view>
				</view>
				<view class="hfslist flex">
					<view class="limg flexccc">
						<image :src="cirb" class="imgb"></image>
					</view>
					<view class="flex1">
						<view class="hfstit">待作业 2024-11-24  22:17</view>
						<view class="hfstxt">维修零件已送达，明天将会安排人员维修。</view>
					</view>
				</view>
				<view class="hfslist flex">
					<view class="limg flexccc">
						<image :src="cirb" class="imgb"></image>
					</view>
					<view class="flex1">
						<view class="hfstit">已收到 2024-11-19 09:23</view>
						<view class="hfstxt">收到您的建议，物业已高度重视这个问题，维修零件 正在运输中，请耐心等待！</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="cdbtns">
			<view class="btna">不予公开</view>
			<view class="btnb" @click="getReplyFn">回复</view>
		</view> -->
	<pop-up :type="type" @getClose='getClose'  @getSure="getSure"></pop-up>
	<loading></loading>	
	</view>
</template>

<script>
	import config from '@/config'
	const baseUrl = config.baseUrl
	import popUp from "@/work/components/popup/popup.vue"
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	export default{
		components:{popUp},
		data(){
			return{
				replay:require('@/news/static/complaint/replay.png'),
				hline:require('@/news/static/complaint/hline.png'),
				cira:require('@/news/static/complaint/cira.png'),
				cirb:require('@/news/static/complaint/cirb.png'),
				baseUrl:config.baseUrl,
				type:'',
			}
		},
		onLoad: function() {
		},
		methods:{
			checkPermi, checkRole,
			getClose(){
				this.type='';
			},
			getSure(){
				this.type='';
			},
			getReplyFn(){
				this.type='reply'
			},
			getPreviewImage(arr,idx){
				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>
	page{background: #F3F3F0;}
</style>
<style lang="scss" scoped>
.comdetail{padding:20rpx 18rpx  10rpx;
	.cdbox{background: #FFFFFF;border-radius: 20rpx;padding: 0 32rpx;box-sizing: border-box;position: relative;
	.replay{width: 124rpx;height: 124rpx;position: absolute;right: 0;top: 0;}		
	.cdtop{padding:  34rpx 0rpx 24rpx;border-bottom: 2rpx solid #CDCDCD;
			.tit{font-weight: bold;font-size: 30rpx;color: #272727;margin-bottom: 16rpx;}
			.txt{font-weight: 500;font-size: 24rpx;color: #AAAAAA;}
			
		}
		.cdmain{padding: 24rpx 0 24rpx;
			.tit{font-weight: 500;font-size: 26rpx;color: #666666;line-height: 36rpx;margin-bottom: 30rpx;}
			.imgs{display: flex;align-items: center;flex-wrap: wrap;
				image{width: 142rpx;height: 142rpx;border-radius: 20rpx;margin: 0 18rpx 18rpx 0;}
			}
		}
	}
	
	.cdbtns{position: fixed;left: 0;right: 0;height: 98rpx;z-index: 2;display: flex;align-items: center;bottom: 0;
		view{flex: 1;display: flex;align-items: center;justify-content: center;font-weight: bold;font-size: 26rpx;height: 98rpx;
		&.btna{background: #FFFFFF;color: #0156FE;}
		&.btnb{background: #0156FE;color: #FFFFFF;}
		}
	}
}
.hfbox{background: #FFFFFF;border-radius: 20rpx;padding-top: 104rpx;position: relative;
	.hftop{width: 118rpx;height: 46rpx;position: absolute;left: -8rpx;top: 18rpx;
		image{width: 118rpx;height: 46rpx;position: absolute;left: 0;top: 0;}
		view{position: relative;z-index: 1;font-weight: bold;font-size: 26rpx;color: #FFFFFF;padding-top: 6rpx;text-align: center;}
	}
}
.hfstep{padding: 0 32rpx 44rpx 36rpx;
	.hfslist{padding-bottom: 44rpx;position: relative;
		&::before{content: '';position: absolute;left: 14rpx;top:14rpx;height: 100%;width: 2rpx;background: #E6E6E6;}
		.limg{width: 30rpx;height: 30rpx;margin-right: 22rpx;flex: 0 0 auto;margin-top:3rpx;
			.imga{width: 30rpx;height: 30rpx;}
			.imgb{width: 18rpx;height: 18rpx;}
		}
		.hfstit{font-weight: bold;font-size: 26rpx;color: #666666;line-height: 36rpx;margin-bottom: 24rpx;}
		.hfstxt{font-weight: 500;font-size: 26rpx;color: #666666;line-height: 36rpx;}
	}
}
</style>