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

<template>
	<view class="comdetail">
		<view class="cdbox mb12">
			<image :src="replay" class="replay" v-if="datainfo.status==2"></image>
			<view class="cdtop">
				<view class="tit">{{datainfo.title}}</view>
				<view class="txt">{{datainfo.createTime}}</view>
			</view>
			<view class="cdmain">
				<view class="tit">{{datainfo.content}}</view>
				<view class="imgs">
					<image :src="baseUrl+ite" v-for="(ite,idx) in phofile" :key="idx" @click="getPreviewImage(phofile,idx)"></image>
				</view>
			</view>
		</view>
		<view class="cdbox mb12 hfbox pt40" v-if="datainfo.status==2">
			<view class="hftop">
				<image :src="hline"></image>
				<view>回复</view>
			</view>
			<view class="cdmain">
				<view class="tit">{{datainfo.replyContent}}</view>
				<block v-if="datainfo.suggestionFjList">
					<view class="fjlists"  v-for="(fite,fidx) in datainfo.suggestionFjList" :key='fidx'>
						<view class="flext" @click="getDown(fite.url)">
							<view class="imgl"><image :src="filico" ></image></view>
							<view class="tit">{{fite.name}}</view>
						</view>
					</view>
				</block>	
			</view>
		</view>
		<!-- 步骤条 -->
		<!-- <view class="hfbox mb12" >
			<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> -->
	<loading></loading>	
	</view>
</template>

<script>
	import config from '@/config'
	const baseUrl = config.baseUrl
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	import {suggestionlDet} from "@/api/work/news.js"
	export default{
		components:{},
		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'),
				filico:require('@/news/static/complaint/filico.png'),
				baseUrl:config.baseUrl,
				type:'',
				datainfo:{},
				id:'',
				phofile:[],//图片合集
			}
		},
		onLoad: function(e) {
			if(e.id){
				this.id=e.id;
				this.getDetail()
			}
		},
		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) {
						
					}
				});
			},
			getDetail(){
				var that=this;
				suggestionlDet(this.id).then(res=>{
					if(res.code==200){
						this.datainfo=res.data;
						if(res.data&&res.data.images){
							that.phofile=res.data.images.split(',')
						}
					}
				})
			},
			getDown(path,name){
				console.log(path,name)
				// #ifdef APP-PLUS
				self.getFilePermissions(function(res){
					if(res==1){
						uni.showLoading({
							title: '加载中'
						});
						var url = baseUrl + path;
						let dtask = plus.downloader.createDownload(url, {
							filename: 'file://storage/emulated/0/'+baseName+'/' + name
						}, (d, status) => {
							//d为下载的文件对象
							if (status == 200) {
								uni.hideLoading();
								uni.showToast({
									icon: 'none',
									mask: true,
									title: '已保存到文件夹：/'+baseName+'/'+ name, //保存路径
									duration: 3000,
								});
								
								//下载成功,d.filename是文件在保存在本地的相对路径，使用下面的API可转为平台绝对路径
								let fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename);
								setTimeout(() => {
									plus.runtime.openFile(d.filename); //选择软件打开文件
								}, 1500)
							} else {
								//下载失败
								uni.hideLoading();
								plus.downloader.clear(); //清除下载任务
								uni.showToast({
									icon: 'none',
									mask: true,
									title: '下载失败，请稍后重试',
								});
							}
						})
						dtask.start();
					}else{
						uni.hideLoading();
						uni.showToast({
							title: '无法获取权限，文件下载将出错！',
							icon: 'none',
						})
					}			
				})
				// #endif
				// #ifndef APP-PLUS
				this.getDownloader(path)
				// #endif
			},
			getDownloader(e){
				uni.showLoading({
					title: '加载中'
				});
				var url=baseUrl+e;
				let index1 = e.lastIndexOf("."); // 得到一个索引值
				let index2 = e.length;
				let type = e.substring(index1, index2);
				if ((type.indexOf('jpg') > -1 || type.indexOf('jpeg') > -1 || type.indexOf('png') > -1)) {
					uni.previewImage({
						current: 0,
						urls: [url],
						// background: '#ffffff'
					});
					uni.hideLoading();
				} else {
				uni.downloadFile({
					url: url,//文件的下载路径
					success(result) {
							uni.hideLoading()
						var filePath = result.tempFilePath;
						   uni.openDocument({
						     filePath: filePath,
						     showMenu: true,
						     success: function (res) {
						       // console.log('打开文档成功');
						     }
						   });
					},
					fail(res) {uni.hideLoading()}
				})
				}
			},
		}
	}
</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;}
	}
}
.fjlists {display: flex;align-items: flex-start;justify-content: space-between;margin-bottom: 20rpx;
		&:last-child{margin-bottom: 0;}
		.imgl{width: 40rpx;height: 40rpx;display: flex;align-items: center;flex: 0 0 auto;
			image{width: 26rpx;height: 24rpx;}
		}
		.tit{font-size: 26rpx;color: #222327;font-weight: 500;margin-top: 4rpx;word-break: break-all;}
		.delimg{width: 40rpx;height:40rpx;margin-left: 16rpx;display: flex;align-items: center;justify-content: center;flex: 0 0 auto;
			image{width: 24rpx;height: 24rpx;}
		}
		.txta{color: #28C529;font-weight: 500;line-height: 40rpx;flex: 0 0 auto;margin-left: 18rpx;padding: 0 6rpx;}
	}
</style>