jq_miniApp/subPackWork/myReport/reportDetail.vue

<template>
	<view class="v-page">
		<view class="v-page-bg" style="height: 300rpx;"></view>
		<view class="v-card contain">
			<view class="v-card-item">
				<view class="status-top">					
					<button class="v-btn v-btn-primary-b" size="mini" @click="goList">处理记录</button>
				</view>
				<view class="status-bottom">
					<evan-steps :active="datas.status-1" direction="horizontal">
						<evan-step class="step-items" v-for="item in processState" :title="item.dictLabel"></evan-step>
						<!-- 						<evan-step title="处警"></evan-step>
						<evan-step title="结警"></evan-step>
						<evan-step title="归档"></evan-step> -->
					</evan-steps>
				</view>
			</view>
			<!--   警情信息   -->
			<view class="v-card-item">
				<view class="v-card-box">
					<common-title :title="'警情信息'"></common-title>
					<view class="content-detail">
						<uni-list>
							<uni-list-item title="上报时间" :rightText="datas.reportTime || '/'" />
							<uni-list-item title="警情分类" :rightText="datas.classificationDataName || '/'" />
							<uni-list-item title="联系人" :rightText="datas.contactUser|| '/'" />
							<uni-list-item title="联系人手机" :rightText="datas.phone || '/'" />
							<uni-list-item title="标题" :rightText="datas.title" />
							<uni-list-item title="事件位置" :rightText="'经度：'+datas.longitude+',纬度：'+datas.latitude " />
							<map class="map" :markers="covers" :longitude="datas.longitude" :latitude="datas.latitude"
								name=""></map>
							<uni-list-item title="描述" :rightText="datas.description" />
							<uni-list-item>
								<template v-slot:body>
									<text class="slot-box slot-text">现场照片</text>
								</template>
								<template v-slot:footer>
									<view class="" v-if="datas.pathList">
										<view class="v-card-image">
											<image :mode="'widthFix'" v-for="(item, index) in datas.pathList"
												:key="index" :src="requestUrl+item" @click="preview(item)"></image>
										</view>
										<q-previewImage ref="previewImage" :urls="datas.pathList" @open="open"
											@close="close"></q-previewImage>
									</view>
								</template>
							</uni-list-item>
						</uni-list>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import EvanSteps from '@/components/evan-steps/evan-steps.vue';
	import EvanStep from '@/components/evan-steps/evan-step.vue';

	import UniIcons from '@/components/uni-icons/uni-icons.vue';
	import {
		getEventReportDetail
	} from '@/api/word/myReport.js'
	import {
		getDicts
	} from '@/api/system/dict/data.js'
	import config from '@/config.js';
	const baseUrl = config.baseUrl;
	export default {
		components: {
			EvanSteps,
			EvanStep,
			UniIcons,
		},
		data() {
			return {
				datas: {
					id: 62,
					status: '1',
					reportTime: '2023-04-17 16:39',
					classificationDataName: '咨询',
					contactUser: '张三',
					phone: '15845978656',
					title: '咨询演练',
					longitude: '114.465666',
					latitude: '38.065909',
					description: '应急演练',
					pathList: null
				},
				processState: [], // 处理状态
				id: 0,
				covers: [],
				videoShow: true, //video组件是否显示
				requestUrl: baseUrl,
				imgs: ['https://web-assets.dcloud.net.cn/unidoc/zh/multiport-20210812.png',
					'https://web-assets.dcloud.net.cn/unidoc/zh/uni-function-diagram.png'
				]
			};
		},
		onLoad(option) {
			this.id = option.id
			this.getEventReportDetail(option.id)
		},
		mounted() {
			this.getReportType();
		},
		watch: {
			datas: function(val) {
				console.log(this.datas)
				if (!val.longitude) {
					this.datas.longitude = '/'
				}
				if (!val.latitude) {
					this.datas.latitude = '/'
				}
			},

		},
		methods: {
			goList() {
				uni.navigateTo({
					url: 'processingRecord?id=' + this.id
				})
			},
			preview(url) {
				this.imgs = ['https://web-assets.dcloud.net.cn/unidoc/zh/multiport-20210812.png',
					'https://web-assets.dcloud.net.cn/unidoc/zh/uni-function-diagram.png'
				]; //设置图片数组
				this.$nextTick(() => {
					this.$refs.previewImage.open(url); // 传入当前选中的图片地址
				});
			},
			onLongpress(e) {
				//长按事件
				console.log('当前长按的图片是' + e);
				uni.showActionSheet({
					itemList: ['转发给朋友', '保存到手机'],
					success: function(res) {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			open() {
				//监听组件显示 （隐藏TabBar和NavigationBar，隐藏video原生组件）
				uni.hideTabBar();
				uni.setNavigationBarColor({
					frontColor: '#000000', // 设置前景色为黑色
					backgroundColor: '#000000' // 设置背景色为黑色
				});
				this.videoShow = false;
			},
			close() {
				//监听组件隐藏 （显示TabBar和NavigationBar，显示video原生组件）
				uni.showTabBar();

				uni.setNavigationBarColor({
					frontColor: '#000000', // 设置前景色为白色
					backgroundColor: '#ffffff' // 设置背景色为黑色
				});

				this.videoShow = true;
			},
			// 获取上报分类
			getReportType() {
				getDicts("alarm_status").then(res => {
					if (res.code === 200) {
						let arr = []
						res.data.forEach(item => {
							arr.push(item)
						})
						this.processState = arr
						console.log(this.processState)
					}
				})
			},
			// 获取数据详情
			getEventReportDetail(id) {
				getEventReportDetail(id).then(res => {
					if (res.code === 200) {
						this.datas = res.data
						let obj = {
							longitude: Number(this.datas.longitude),
							latitude: Number(this.datas.latitude)
						}

						this.covers.push(obj);
					}
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.status-top {
		display: flex;
		align-items: center;
		margin: 0 32rpx 20rpx;
		position: relative;
		height: fit-content;
		padding-top: 20rpx;
		justify-content: space-between;

		.rignt-button {
			margin: 0;
		}
	}

	.status-bottom {
		::v-deep .evan-steps--horizontal {
			justify-content: space-evenly;

			.evan-step__content__title {
				font-size: 24rpx;
			}
		}
	}

	.content-detail {
		.map {
			width: 100%;
		}

		::v-deep .slot-text {
			width: 35%;
			font-size: 28rpx;
		}

		.image-box {
			display: flex;
			flex: 1;
			height: 120rpx;

			.iamges-list {
				width: 120rpx;
				height: 120rpx;
			}
		}
	}

	
</style>