H5/threeSide.git

			@@ -1,33 +1,35 @@
			<template>
			<view class="px-31 pt-38">
			<view class="br-19 bs-1 pt-21 pb-35 px-27 bgcolor2">
			<view v-if="Object.keys(info) != 0" class="px-31 pt-38">
			<view v-if="type" class="br-19 bs-1 pt-21 pb-35 px-27 bgcolor2">
			<view class="flex a-center j-between fs-23 lh-33 font-bold">
			<view>诉求号：7843523454</view>
			<view class="color1">正在办理</view>
			<view>诉求号：{{ info.serialNumber }}</view>
			<view class="color1">{{ ["正在办理", "延期办理", "超时办理", "已办结", "群众撤销", "上报待审核", "上级驳回"][info.status] }}</view>
			</view>
			<view class="mx-13 mt-33 pt-35 pb-33 px-27 br-19 flex a-center j-between bgcolor1">
			<view class="fs-27 lh-38 color2">江苏省常州市溧阳市牛顿大道172号</view>
			<view class="fs-27 lh-38 color2">{{ info.detailedAddress }}</view>
			<image src="@/static/detailImg/dwei.png" class="w-31 h-31 shrink0" />
			</view>
			<view class="flex a-center j-between mt-31 mx-13">
			<view class="flex-column a-center">
			<view class="fs-27 lh-38 font-bold">问题类型</view>
			<view class="mt-8 fs-23 lh-42 txt-center px-31 font-w400 color3 bgcolor3 border1">教育</view>
			<view class="mt-8 fs-23 lh-42 txt-center px-31 font-w400 color3 bgcolor3 border1">
			{{ info.problemType }}
			</view>
			</view>
			<view class="flex-column a-center">
			<view class="fs-27 lh-38 font-bold">群众</view>
			<view class="fs-27 lh-38 mt-10">沙振</view>
			<view class="fs-27 lh-38 mt-10">{{ info.name }}</view>
			</view>
			<view class="flex-column a-center">
			<view class="fs-27 lh-38 font-bold">联系电话</view>
			<view class="fs-27 lh-38 mt-10">14225874426</view>
			<view class="fs-27 lh-38 mt-10">{{ info.contactNumber }}</view>
			</view>
			</view>
			</view>

			<view class="progress">
			<view v-if="info.complaintProgresses.length != 0" class="progress">
			<view class="proCard">
			<view class="proItem" v-for="(item,index) in 3" :key="index">
			<view class="proItem" v-for="(item, index) in info.complaintProgresses" :key="item.id">
			<view class="mr-31 flex flex-column a-center">
			<view class="dot">
			<view class="box"></view>
			@@ -35,62 +37,83 @@
			<view class="proLine">
			</view>
			</view>
			<view>
			<view class="flex1">
			<view class="flex a-center j-between mb-10">
			<view class="name">李雷</view>
			<view class="time">2024年9月29日11:09:09</view>
			<view class="name">{{ item.createByName }}</view>
			<view class="time">{{ item.createTime }}</view>
			</view>
			<view class="context">处理进度说明处理进度说明处理进度说明处理进
			度说明处理进度说明处理进度说明处理进度说明处理进度说明</view>
			<view class="context">{{ item.describe }}</view>
			<view class="proImg">
			<view class="imgOrVedio" v-for="(item,index) in 4" :key="index">
			<image
			src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
			class="img shrink0" mode="aspectFill">
			</image>
			<view class="openVideo" v-if="item==4">
			<view class="imgOrVedio" v-for="(item, index) in item.imgUrl.split(',')" :key="index">
			<image :src="item" class="img shrink0" mode="aspectFill" />
			<view
			class="absolute mt-19 w-140 h-140 bgcolor5 top0 left0 br-8 flex a-center j-center">
			<image @tap="viewImage(item)" src="@/static/Appeal/amplify.png" class="w-19 h-19" />
			</view>
			</view>
			<view class="imgOrVedio" v-for="(item, index) in item.video.split(',')" :key="index">
			<video id="myVideo" class="w-140 h-140 mt-19 shrink0" disabled :controls="false"
			:show-center-play-btn="false" :src="item" />
			<view class="videoOpen" @click.stop="openVideo(item)">
			<image src="../../static/detailImg/open.png" class="video shrink0"
			mode="aspectFill">
			</image>
			</view>

			</view>
			</view>
			</view>
			</view>
			</view>
			</view>
			<view @tap="toAdd" class="mt-38 fs-35 lh-96 br-48 txt-center font-bold bgcolor6 color4">添加办理进度</view>
			<view v-if="type" @tap="toAdd" class="mt-38 fs-35 lh-96 br-48 txt-center font-bold bgcolor6 color4">添加办理进度
			</view>
			<view class="safe-box"></view>
			</view>
			</template>

			<script>
			import {
			getList,
			getComplaintDetail
			} from './service'
			export default {
			data() {
			return {
			id: ''
			id: '',
			info: {},
			type: true,
			}
			},
			onLoad(params) {
			this.id = params.id
			getList({
			"pageNum": 1,
			"pageSize": 10
			if (params.type) {
			this.type = false
			uni.setNavigationBarTitle({
			title: '办理进度'
			})
			}
			getComplaintDetail({
			id: params.id
			}).then(res => {

			this.info = res.data
			})
			},
			methods: {
			toAdd() {
			uni.navigateTo({
			url: `/pages/add-progress/index`
			url: `/pages/add-progress/index?id=${this.id}`
			})
			}
			},
			viewImage(item) {
			uni.previewImage({
			urls: [item]
			})
			},
			// 去大屏播放视频
			openVideo(url) {
			uni.navigateTo({
			url: `/pages/work-detail/maxVideo?url=${url}`
			})
			},
			}
			}
			</script>
			@@ -234,22 +257,25 @@
			border-radius: 8rpx;
			margin-top: 19rpx;
			}
			}

			.openVideo {
			.videoOpen {
			position: absolute;
			top: 19rpx;
			top: 10rpx;
			left: 0;
			z-index: 99;
			width: 140rpx;
			height: 140rpx;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 19rpx;

			.video {
			z-index: 999;
			width: 140rpx;
			height: 140rpx;
			}
			}
			}
			}
			@@ -262,4 +288,15 @@
			}
			}
			}

			.videoImg {
			width: 140.38rpx;
			height: 140.38rpx;
			border-radius: 7.69rpx;
			position: relative;
			}

			#myVideo {
			z-index: 1;
			}
			</style>