H5/pages/map/matterDetails.vue

<template>
	<view class="matter-page">
		<template v-if="info">
			<view class="matter-item" v-if="info.handleMethod">
				<view class="matter-label">办理方式</view>
				<view class="matter-val">{{info.handleMethod}}</view>
			</view>
			<view class="matter-item" v-if="info.serviceObject">
				<view class="matter-label">服务对象</view>
				<view class="matter-val">{{info.serviceObject}}</view>
			</view>
			<view class="matter-item" v-if="info.processingConditions">
				<view class="matter-label">办理条件</view>
				<view class="matter-val" v-html="info.processingConditions"></view>
			</view>
			<view class="matter-item" v-if="info.processingMaterial">
				<view class="matter-label">办理材料</view>
				<view class="matter-val" v-html="info.processingMaterial"></view>
			</view>
			<view class="matter-item" v-if="info.processingDays">
				<view class="matter-label">承诺办结</view>
				<view class="matter-val">{{info.processingDays}}天（工作日）</view>
			</view>
		</template>
		<view class="distance-btn" @click.stop="goTransact()">
			<text>去办理</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					// "deleteFlag": "NOT_DELETE",
					// "createTime": "2024-12-17 17:38:09",
					// "createUser": "1543837863788879871",
					// "updateTime": null,
					// "updateUser": null,
					// "id": "1868953821385449474",
					// "category": "交通",
					// "name": "message",
					// "code": "test---11",
					// "businessType": "SECURITY",
					// "appId": "1851541103046574082",
					// "bizAppName": null,
					// "sort": 1,
					// "active": "ENABLE",
					// "processingDays": 2,
					// "matterType": "COMPREHENSIVE",
					// "handleMethod": "ONLINE_PROCESSING,WINDOW_PROCESSING",
					// "serviceObject": "PERSON,ENTERPRISE",
					// "processingConditions": "<p><img src=\"http://192.168.0.78:8282/dev/file/download?id=1868953714309062658\" alt=\"\" width=\"152\" height=\"152\"></p>",
					// "processingMaterial": "<p>大萨达撒<a href=\"https://www.baidu.com\">www.baidu.com</a></p>",
					// "transMap": {}
				}
			}
		},
		onLoad() {
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('acceptDataFromOpenerPage', data => {
				this.info = data
				uni.setNavigationBarTitle({
					title: data.name
				});
			})
		},
		methods:{
			goTransact(){
				window.location = 'https://wsgaj.chutianyun.gov.cn/weixin/#/'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.matter-page {
		width: 100%;
		min-height: 100vh;
		background-color: #F2F2F2;
		padding: 30rpx;

		.matter-item {
			width: 100%;
			border: 1rpx solid #E0DDDD;
			display: flex;
			justify-content: space-between;
			align-items: stretch;
			margin-bottom: 30rpx;

			>view {
				flex-shrink: 0;
				padding: 20rpx;
			}

			.matter-label {
				width: 30%;
				background-color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.matter-val {
				// display: flex;
				// justify-content: center;
				// align-items: center;
				// flex-wrap: wrap;
				border-left: 1rpx solid #E0DDDD;
				width: 70%;
				background-color: #F4FAFF;
				white-space: pre-wrap;
				overflow-wrap: break-word;
			}
		}
	}

	::v-deep img,
	::v-deep video,
	::v-deep audio {
		max-width: 100%;
	}

	.distance-btn {
		margin: 50rpx auto 0;
		width: 150rpx;
		height: 60rpx;
		border-radius: 10rpx;
		background-color: #61A8FF;
		display: flex;
		justify-content: center;
		align-items: center; 
		font-size: 22rpx;
		font-weight: 700;
		color: #ffffff;
	}
</style>