H5/threeSide.git

			@@ -1,41 +1,285 @@
			<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).length != 0" 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>
			<image src="../../static/public/gps.png" class="w-31 h-31 shrink0" />
			<view class="fs-27 lh-38 color2">{{ info.location }}</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 font-bold">群众姓名</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="br-19 mt-38 bs-1 pt-35 pb-33 px-31">
			<view class="fs-27 lh-38 font-bold">办理进度描述</view>
			<textarea v-model="describe" class="pt-25 pl-31 mt-27 fs-27 br-8 bgcolor4"
			:class="(rulsFlag && !describe) && 'bgcolor-border'" style="height: 365rpx;width: calc(100% - 31rpx);"
			placeholder="请输入办理进度描述" />
			<view v-if="rulsFlag && !describe" class="flex a-center mt-19">
			<image src="@/static/noNull.png" class="w-35 h-35 mr-13 shrink0" />
			<view class="fs-23 color99">办理进度描述不能为空</view>
			</view>
			<view class="fs-27 mt-38 lh-38 font-bold">上传图片</view>
			<view class="flex wrap mt-27">
			<view class="relative mr-15" v-for="(item, index) in localImageUrls" :key="index">
			<image v-if="item != 'loading'" :src="item" class="w-140 h-140 shrink0 br-8" />
			<view v-if="item != 'loading'" class="absolute w-140 h-140 bgcolor5 top0 left0 br-8">
			<view class="absolute flex a-center j-between px-34"
			style="top: 50%;left: 50%;transform: translate(-50%,-50%);width: calc(100% - 68rpx);">
			<image @tap="viewImage(item)" src="@/static/Appeal/amplify.png" class="w-19 h-19" />
			<image @tap="delImg(item)" src="@/static/Appeal/trash.png" class="w-19 h-19" />
			</view>
			</view>
			</view>
			<view v-if="imgUrls.includes('loading')" class="w-140 h-140 flex a-center j-center mr-15 border2 br-8">
			<u-loading-icon></u-loading-icon>
			</view>
			<image @tap="uploadImg(1)" src="/static/Appeal/add.png" class="w-140 h-140 shrink0" />
			</view>
			<view class="fs-27 mt-37 lh-38 font-bold">上传视频</view>
			<view class="flex wrap mt-27">
			<view class="imgOrVedio" v-for="(ite, ind) in video" :key="ind">
			<video v-if="ite != 'loading'" id="myVideo" class="videoImg shrink0" disabled :controls="false"
			:show-center-play-btn="false" :src="ite">
			</video>
			<view v-if="ite != 'loading'" class="absolute w-140 h-140 bgcolor5 top0 left0 br-8 zIndex999">
			<view class="absolute flex a-center j-between"
			style="top: 50%;left: 50%;transform: translate(-50%,-50%);">
			<image @tap="openVideo(ite)" src="@/static/detailImg/open.png" class="w-140 h-140" />
			</view>
			<image @tap="delVideo(ite)" src="@/static/Appeal/trash.png" class="absolute w-19 h-19 zIndex999"
			style="top: 8rpx;right: 8rpx;" />
			</view>
			</view>
			<view v-if="video.includes('loading')" class="w-140 h-140 flex a-center j-center mr-15 border2 br-8">
			<u-loading-icon></u-loading-icon>
			</view>
			<image @tap="uploadImg(2)" src="@/static/Appeal/add.png" class="w-140 h-140 shrink0" />
			</view>
			</view>
			<view @click.stop="submit" class="mt-38 fs-35 lh-96 br-48 txt-center font-bold bgcolor6 color4 fixed"
			style="width: calc(100% - 62rpx);bottom: calc(env(safe-area-inset-bottom) + 10rpx);">确认添加</view>
			<view class="btn-box"></view>
			<view class="safe-box"></view>
			</view>
			</template>

			<script>
			import {
			saveProcess,
			getComplaintDetail
			} from './service'
			import config from '@/config/index.js'
			export default {
			data() {
			return {

			complaintId: '', //诉求id
			info: {}, //工单详情
			describe: '', //办理进度描述
			localImageUrls: [], //本地回显的图片
			imgUrls: [], //传给后端的url
			video: [],
			againCklicFlag: true,
			rulsFlag: false,
			}
			},
			onLoad(params) {
			this.complaintId = params.id
			getComplaintDetail({
			id: params.id
			}).then(res => {
			this.info = res.data
			})
			},
			methods: {

			back() {
			uni.navigateBack({
			delta: 2
			})
			},
			submit() {
			if (!this.describe) {
			this.rulsFlag = true
			return uni.showToast({
			icon: 'none',
			title: '请输入办理进度描述'
			})
			}
			let obj = {
			complaintId: this.complaintId,
			describe: this.describe,
			imgUrl: this.imgUrls.join(','),
			video: this.video.join(',')
			}
			saveProcess(obj).then(res => {
			if (res.code == 200) {
			uni.showToast({
			title: '提交成功',
			icon: 'success',
			mask: true
			})
			setTimeout(() => {
			uni.navigateBack()
			}, 1500)
			} else {
			uni.showToast({
			title: res.msg,
			icon: 'none',
			mask: true
			})
			}
			})
			},
			delImg(item) {
			this.localImageUrls = this.localImageUrls.filter(i => i != item)
			this.imgUrls = this.imgUrls.filter(i => i != item)
			},
			delVideo(item) {
			this.video = this.video.filter(i => i != item)
			},
			viewImage(item) {
			uni.previewImage({
			urls: [item]
			})
			},
			uploadImg(type) {
			// if (!this.againCklicFlag) return
			this.againCklicFlag = false
			if (type == 1) {
			uni.chooseImage({
			count: 1,
			success: (chooseImageRes) => {
			this.imgUrls.push('loading')
			this.againCklicFlag = true
			let imgPathList = chooseImageRes.tempFilePaths;
			if (imgPathList.length > 0) {
			uni.uploadFile({
			url: config.imageUrl,
			filePath: imgPathList[0],
			timeout: 1000 * 45,
			name: 'file',
			header: {
			Authorization: uni.getStorageSync('token')
			},
			success: (res) => {
			if (JSON.parse(res.data).code == 200) {
			this.imgUrls = this.imgUrls.filter(item => item !=
			'loading')
			this.$nextTick(() => {
			this.imgUrls.push(JSON.parse(res.data)
			.data)
			this.localImageUrls.push(imgPathList[0])
			})
			} else {
			this.againCklicFlag = true
			this.imgUrls = this.imgUrls.filter(
			item => item != 'loading')
			uni.showToast({
			title: '上传失败，请重新上传',
			icon: 'none',
			mask: true
			})
			}
			},
			fail: (err) => {
			this.againCklicFlag = true
			this.imgUrls = this.imgUrls.filter(
			item => item != 'loading')
			uni.showToast({
			title: '上传失败，请重新上传',
			icon: 'none',
			mask: true
			})
			}
			})
			}
			},
			fail: () => {
			this.againCklicFlag = true
			}
			})
			} else {
			uni.chooseVideo({
			camera: 'back',
			success: (res) => {
			const videoExtensions = /\.(mp4\|avi\|rmvb)$/i;
			if (!videoExtensions.test(res.name)) {
			uni.showToast({
			title: '请上传mp4, avi, rmvb格式的视频',
			icon: 'none',
			duration: 3000
			})
			return
			}
			this.video.push('loading')
			this.againCklicFlag = true
			const tempFilePath = res.tempFilePath;
			uni.uploadFile({
			url: config.imageUrl,
			filePath: tempFilePath,
			timeout: 1000 * 45,
			name: 'file',
			header: {
			Authorization: uni.getStorageSync('token')
			},
			success: (res) => {
			if (JSON.parse(res.data).code == 200) {
			this.video = this.video.filter(item => item !=
			'loading')
			this.$nextTick(() => {
			this.video.push(JSON.parse(res.data).data)
			})
			} else {
			this.againCklicFlag = true
			this.video = this.video.filter(
			item => item != 'loading')
			uni.showToast({
			title: '上传失败，请重新上传',
			icon: 'none',
			mask: true
			})
			}
			},
			fail: (err) => {
			this.againCklicFlag = true
			this.video = this.video.filter(
			item => item != 'loading')
			uni.showToast({
			title: '上传失败，请重新上传',
			icon: 'none',
			mask: true
			})
			}
			})
			},
			fail: () => {
			this.againCklicFlag = true
			}
			})
			}
			},
			// 去大屏播放视频
			openVideo(url) {
			uni.navigateTo({
			url: `/pages/work-detail/maxVideo?url=${url}`
			})
			},
			}
			}
			</script>
			@@ -57,8 +301,21 @@
			color: #FAAD14;
			}

			.color4 {
			color: #FFFFFF;
			}

			.color99 {
			color: #FB9A0E;
			}

			.bgcolor-border {
			background: rgba(255, 253, 241, 1) !important;
			border: 2rpx solid #FFE58F;
			}

			.bgcolor1 {
			background: linear-gradient(270deg, rgba(255, 241, 0, 0.5) 0%, rgba(255, 249, 172, 0.25) 48%, rgba(255, 255, 255, 0.2) 100%, #FFFFFF 100%);
			background: linear-gradient( 270deg, rgba(255,241,0,0.5) 0%, rgba(255,249,172,0.25) 48%, rgba(255,255,255,0.2) 100%, #FFFFFF 100%);
			}

			.bgcolor2 {
			@@ -69,7 +326,77 @@
			background: #FFFBE6;
			}

			.bgcolor4 {
			background: #F8F8F8;
			}

			.bgcolor5 {
			background: rgba(0, 0, 0, .23);
			}

			.bgcolor6 {
			background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
			}

			.border1 {
			border: 2rpx solid #FFF1B8;
			}

			.border2 {
			border: 2rpx solid #F8F8F8;
			}

			.safe-box {
			height: env(safe-area-inset-bottom);
			}

			.imgOrVedio {
			margin-right: 17rpx;
			position: relative;

			.img {
			width: 140rpx;
			height: 140rpx;
			border-radius: 8rpx;
			margin-top: 19rpx;
			}

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

			.video {
			z-index: 999;
			width: 140rpx;
			height: 140rpx;
			}
			}
			}

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

			#myVideo {
			z-index: 1;
			}

			.zIndex999 {
			z-index: 999;
			}

			.btn-box {
			height: 120rpx;
			}
			</style>