subject_gxj/xj_project_app/pages/process/index.vue

<script setup>
	import {
		ref,
		reactive
	} from "vue";

	import {
		onLoad,
	} from "@dcloudio/uni-app";

	import {
		getProcessList,
		getVideoAddress,
		getProcessContact
	} from "@/api/work/preFlow.js";

	import config from '@/config.js';

	const videoPoster = ref(null);

	let orginalList = [];
	let processList = ref([]);

	let lastItem = ref([]);

	let videoUrl = ref(null);

	let imageUrl = ref(null);
	const preViewImage = () => {
		uni.previewImage({
			current: 0,
			urls: [imageUrl.value],
			longPressActions: true,
		});
	}

	let contactValue = reactive({
		namePt: null,
		telPt: null,
		nameZrr: null,
		tel: null,
		nameLead: null,
		simCode: null
	})

	const getContact = id => {
		getProcessContact({
			id
		}).then(res => {
			contactValue.nameLead = res.data.nameLead;
			contactValue.namePt = res.data.namePt;
			contactValue.nameZrr = res.data.nameZrr;
			contactValue.simCode = res.data.simCode;
			contactValue.tel = res.data.tel;
			contactValue.telPt = res.data.telPt;
		})
	}

	// 弹窗显隐
	let dialogFlag = ref(false);
	const dialogShow = id => {
		dialogFlag.value = true;
		getContact(id);
	}
	const dialogHide = () => {
		dialogFlag.value = false;
	}

	onLoad(() => {
		getProcessList().then(res => {
			orginalList = [...res.data.list];
			if (res.data.list.length === 0) return;
			if (res.data.list.length > 1) {
				res.data.list.length = res.data.list.length - 1;
				let tempArr = [];
				for (let i in res.data.list) {
					tempArr.push(res.data.list[i].list)
				}
				processList.value = tempArr;
				lastItem.value = orginalList[orginalList.length - 1].list;
			} else {
				lastItem.value = res.data.list[0].list;
			}
		})
		const serverAddress = uni.getStorageSync('serverAddress');
		const baseUrlIp = serverAddress ? serverAddress : config.baseUrl;
		videoUrl.value = baseUrlIp + '/projects/outApi/preFlow/vedio';
		videoPoster.value = baseUrlIp + '/projects/asset/css/images/video_main.png';
		imageUrl.value = baseUrlIp + '/projects/outApi/preFlow/img';
	})
</script>

<template>
	<view class="container">
		<page-title>办事流程</page-title>

		<view class="main">
			<view class="video-play">
				<video :src="videoUrl" :poster="videoPoster"></video>
			</view>

			<view class="image-show" @click="preViewImage()">
				<image :src="imageUrl"></image>
			</view>

			<view class="process-main" v-if="processList.length > 1">
				<view class="process-border"></view>

				<view class="process-list-line">
					<view class="process-list" v-for="(item,index) in processList" :key="index">
						<view class="process-box">
							<view class="process-title">
								<view class="process-title-icon">
									<view class="process-title-inner">{{index + 1}}</view>
								</view>
								并行审核
							</view>

							<view class="process-items">
								<view class="process-item" v-for="(items,indexs) in item" :key="indexs">
									<view class="process-item-info">
										<view class="process-item-key">文件：</view>
										<view class="process-item-value">{{items.title ??"--"}}</view>
									</view>

									<view class="process-item-info">
										<view class="process-item-key">用时：</view>
										<view class="process-item-value">{{items.num1??"--"}}天至{{items.num2??"--"}}天</view>
									</view>

									<view class="process-item-info">
										<view class="process-item-key">审核单位 ：</view>
										<view class="process-item-value">
											{{items.spUnitDesc??"--"}}
											<view class="process-item-btn" @click="dialogShow(items.id)">查看</view>
										</view>
									</view>

									<view class="process-item-info">
										<view class="process-item-key">科室：</view>
										<view class="process-item-value">{{items.departDesc??"--"}}</view>
									</view>

									<view class="process-item-info">
										<view class="process-item-key">备注：</view>
										<view class="process-item-value">{{items.remark??"--"}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="process-main" v-if="processList.length > 0">
				<view class="process-box">
					<view class="process-title">
						<view class="process-title-icon">
							<view class="process-title-inner">{{processList.length + 1}}</view>
						</view>
						并行审核
					</view>

					<view class="process-items">
						<view class="process-item" v-for="(items,indexs) in lastItem" :key="indexs">
							<view class="process-item-info">
								<view class="process-item-key">文件：</view>
								<view class="process-item-value">{{items.title ??"--"}}</view>
							</view>

							<view class="process-item-info">
								<view class="process-item-key">用时：</view>
								<view class="process-item-value">{{items.num1??"--"}}天至{{items.num2??"--"}}天</view>
							</view>

							<view class="process-item-info">
								<view class="process-item-key">审核单位 ：</view>
								<view class="process-item-value">
									{{items.spUnitDesc??"--"}}
									<view class="process-item-btn" @click="dialogShow(items.id)">查看</view>
								</view>
							</view>

							<view class="process-item-info">
								<view class="process-item-key">科室：</view>
								<view class="process-item-value">{{items.departDesc??"--"}}</view>
							</view>

							<view class="process-item-info">
								<view class="process-item-key">备注：</view>
								<view class="process-item-value">{{items.remark??"--"}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 联系人弹窗 -->
		<u-popup :show="dialogFlag" :round="20" @close="dialogHide()" mode="center">
			<view class="remind-box">
				<view class="remind-title">
					<view class="remind-title-text">联系人信息</view>
				</view>

				<view class="remind-content">
					<view class="card no-padding">
						<view class="card-item first-card-item">
							<view class="card-item-name">项目负责人</view>
							<view class="card-item-content">{{contactValue.nameZrr ?? "--"}}</view>
						</view>

						<view class="card-item">
							<view class="card-item-name">项目负责电话</view>
							<view class="card-item-content">{{contactValue.tel ?? "--"}}</view>
						</view>

						<view class="card-item">
							<view class="card-item-name">项目分管领导</view>
							<view class="card-item-content">{{contactValue.nameLead ?? "--"}}</view>
						</view>

						<view class="card-item">
							<view class="card-item-name">项目分管领导电话</view>
							<view class="card-item-content">{{contactValue.simCode ?? "--"}}</view>
						</view>

						<view class="card-item">
							<view class="card-item-name">项目管理平台联系人</view>
							<view class="card-item-content">{{contactValue.namePt ?? "--"}}</view>
						</view>

						<view class="card-item">
							<view class="card-item-name">项目管理平台电话</view>
							<view class="card-item-content">{{contactValue.telPt ?? "--"}}</view>
						</view>
					</view>
				</view>

				<view class="remind-btns">
					<view class="remind-btn" @click="dialogHide()">关闭</view>
				</view>
			</view>
		</u-popup>

		<!-- 图片预览 -->
		<!-- 	<u-popup :show="dialogFlag" :round="20" @close="dialogHide()" mode="center">
			<view class="remind-box">
				<web-view src="http://192.168.0.143:8080/projects/outApi/preFlow/img"></web-view>
			</view>
		</u-popup> -->
	</view>
</template>

<style lang="scss" scoped>
	.main {
		position: absolute;
		top: 8%;
		left: 0;
		width: 100%;
		min-height: 92%;
		padding-top: 68rpx;
		background-color: #FFF;
	}

	.process-main {
		position: relative;
		display: flex;
		width: calc(100% - 68rpx);
		margin-left: 68rpx;
		min-height: 500rpx;

		.process-border {
			width: 4rpx;
			background-image: linear-gradient(to bottom, #1763E7 0%, #1763E7 60%, transparent 50%);
			background-size: 4rpx 40rpx;
			background-repeat: y-repeat;
		}

		.process-box {
			position: relative;
			display: flex;
			justify-content: flex-end;
			width: 642rpx;
			margin-bottom: 62rpx;

			.process-items {
				margin-top: 24rpx;
			}
		}
	}

	.process-title {
		position: absolute;
		top: -28rpx;
		left: -28rpx;
		display: flex;
		align-items: center;
		font-weight: 500;
		color: #1763E7;
		font-size: 32rpx;

		.process-title-icon {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 56rpx;
			height: 56rpx;
			margin-right: 30rpx;
			border: 3rpx solid #1763E7;
			border-radius: 50%;
			background-color: #fff;

			.process-title-inner {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 40rpx;
				height: 40rpx;
				font-weight: 500;
				color: #FFFFFF;
				font-size: 32rpx;
				border-radius: 50%;
				background-color: #1763E7;
				text-align: center;
			}
		}
	}

	.process-item {
		width: 590rpx;
		height: 262rpx;
		border-radius: 16rpx;
		border: 2rpx solid #E2E2E2;
		margin-top: 24rpx;
		padding: 0 32rpx;

		.process-item-info {
			display: flex;
			justify-content: space-between;
			width: 100%;
			height: 34rpx;
			margin: 16rpx 0;
			font-weight: 400;
			font-size: 24rpx;

			.process-item-key {
				color: #6B768A;
			}

			.process-item-value {
				display: flex;
				align-items: center;
				color: #002C78;
			}

			.process-item-btn {
				width: 100rpx;
				height: 50rpx;
				margin-left: 16rpx;
				color: #fff;
				background-color: #1763E7;
				line-height: 50rpx;
				text-align: center;
				border-radius: 12rpx;
			}
		}
	}

	.video-play {
		width: 683rpx;
		height: 384rpx;
		margin: 0 auto 50rpx;
		border-radius: 16rpx;
		overflow: hidden;

		video {
			width: 100%;
			height: 100%;
		}
	}

	.image-show {
		width: 683rpx;
		height: 512rpx;
		margin: 0 auto 50rpx;
		border-radius: 16rpx;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.remind-box {
		width: 618rpx;
		// height: 810rpx;
		padding: 0 20rpx;
		overflow: hidden;

		.remind-title {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100rpx;

			.remind-title-text {
				font-size: 38rpx;
				font-weight: 500;
				color: #3A3333;
			}
		}

		.remind-content {
			width: 100%;
			box-sizing: border-box;
			border-radius: 16rpx;

			.no-padding {
				padding: 20rpx 0;
			}

			.test {
				width: 100%;
				height: 1000rpx;
				background-color: green;
			}
		}

		.remind-btns {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 92rpx;
			margin-top: 20rpx;
			font-size: 30rpx;

			.remind-btn {
				width: 100%;
				height: 64rpx;
				text-align: center;
				line-height: 64rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #FFFFFF;
				background: #1763E7;
				border-radius: 39rpx;
			}
		}
	}

	::v-deep .u-popup__content {
		overflow: hidden;
	}
</style>