subject_gxj/xj_project_app_2024_2_18/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 funcCurrut = ref(0)
	let funcList = [{
			name: '前期决策阶段',
		},
		{
			name: '开工准备阶段',
		},
		{
			name: '投产运营阶段',
		}
	]

	function onChangeFunc(index) {
		funcCurrut.value = index
	}


	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;
	}


	let videoContext = ref()

	function onPlayVideo() {
		console.log('播放');
		videoContext.value = uni.createVideoContext('videoId')
		videoContext.value.requestFullScreen()
		videoContext.value.play()
	}
	//关闭视频播放
	function onOffVideo(e) {
		console.log(e,'打开关闭');
		if (!e.detail.fullScreen) {
			videoContext.value.pause()
		}
	}


	let fristData = ref([])
	let twoData = ref([])
	let threeData = ref([])

	onLoad(() => {
		getProcessList().then(res => {
			orginalList = [...res.data.list];
			console.log(orginalList, 'sss');
			orginalList.forEach(item => {
				if (item.numStage == 1) {
					fristData.value = item.list
				} else if (item.numStage == 2) {
					twoData.value = item.list
				} else if (item.numStage == 4) {
					threeData.value = item.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="top-btn-box">
				<view class="item" @click="onPlayVideo()">
					<text>培训视频</text>
					<image src="../../static/process-video-icon.png" mode=""></image>
				</view>
				<view class="item" @click="preViewImage()">
					<text>流程图表</text>
					<image src="../../static/process-image-icon.png" mode=""></image>
				</view>
			</view>
			<view class="func-list">
				<view class="list-item" v-for="(item,index) in funcList" :key="index"
					:class="index === funcCurrut ? 'func-boxShadow' : ''" @click="onChangeFunc(index)">
					<text class="item-index">{{index + 1}}</text>
					<view class="item-text">
						{{item.name}}
					</view>
					<view class="delta" v-if="index === funcCurrut">

					</view>
				</view>
			</view>
			<view class="process-box" v-if="funcCurrut == 0">
				<view class="process-item" v-for="(item,index) in fristData" :key="index">
					<view class="process-title">
						<view class="title">
							{{item.title}}
						</view>
						<view class="process-item-btn" @click="dialogShow(item.id)">查看</view>
					</view>
					<view class="process-item-info">
						<view class="process-item-key">审核用时</view>
						<view class="process-item-value">{{item.num1}}天-{{item.num2}}天
						</view>
					</view>

					<view class="process-item-info">
						<view class="process-item-key">审核单位</view>
						<view class="process-item-value">{{item.spUnitDesc??"--"}}</view>
					</view>

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

					<view class="process-item-info">
						<view class="process-item-key">备注</view>
						<view class="process-item-value">{{item.remark??"--"}}</view>
					</view>
				</view>
			</view>
			<view class="process-box" v-if="funcCurrut == 1">
				<view class="process-item" v-for="(item,index) in twoData" :key="index">
					<view class="process-title">
						<view class="title">
							{{item.title}}
						</view>
						<view class="process-item-btn" @click="dialogShow()">查看</view>
					</view>
					<view class="process-item-info">
						<view class="process-item-key">审核用时</view>
						<view class="process-item-value">{{item.num1}}天-{{item.num2}}天
						</view>
					</view>

					<view class="process-item-info">
						<view class="process-item-key">审核单位</view>
						<view class="process-item-value">{{item.spUnitDesc??"--"}}</view>
					</view>

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

					<view class="process-item-info">
						<view class="process-item-key">备注</view>
						<view class="process-item-value">{{item.remark??"--"}}</view>
					</view>
				</view>
			</view>
			<view class="process-box" v-if="funcCurrut == 2">
				<view class="process-item" v-for="(item,index) in threeData" :key="index">
					<view class="process-title">
						<view class="title">
							{{item.title}}
						</view>
						<view class="process-item-btn" @click="dialogShow()">查看</view>
					</view>
					<view class="process-item-info">
						<view class="process-item-key">审核用时</view>
						<view class="process-item-value">{{item.num1}}天-{{item.num2}}天
						</view>
					</view>

					<view class="process-item-info">
						<view class="process-item-key">审核单位</view>
						<view class="process-item-value">{{item.spUnitDesc??"--"}}</view>
					</view>

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

					<view class="process-item-info">
						<view class="process-item-key">备注</view>
						<view class="process-item-value">{{item.remark??"--"}}</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>

		<video :src="videoUrl" id="videoId" :poster="videoPoster" style="width: 0 ;height: 0;"
			@fullscreenchange='onOffVideo'></video>
	</view>
</template>

<style lang="scss" scoped>
	.func-boxShadow {
		filter: drop-shadow(0rpx 2rpx 2rpx #9EBCFF) !important;
		border: 2rpx solid #9EBCFF !important;
		background: #FFFFFF;
	}

	.main {
		position: absolute;
		top: 8%;
		left: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		min-height: 92%;
		padding-top: calc(var(--status-bar-height) + 65px);
		background-color: #F2F7FF;

		.top-btn-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 95%;
			gap: 4%;

			.item {
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 20rpx;
				width: 48%;
				height: 120rpx;
				box-shadow: 0rpx 0rpx 8rpx 0rpx #D8EEFF, inset 0rpx 0rpx 6rpx 0rpx #D8EEFF, inset 2rpx 2rpx 0rpx 0rpx #FFFFFF;
				border: 2rpx solid rgba(255, 255, 255, 0.8);
				border-radius: 12rpx;
				background: #FBFDFF;

				text {
					font-size: 28rpx;
					font-weight: 500;
					color: #222222;
				}

				image {
					width: 88rpx;
					height: 88rpx;
				}

			}

		}

		.func-list {
			margin-top: 36rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 95%;

			.list-item {
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				gap: 5rpx;
				width: 220rpx;
				height: 127.06rpx;
				border: 2rpx solid #EBEBEB;
				border-radius: 12rpx;
				transition: all .3s;

				.item-index {
					font-weight: bold;
					font-size: 42rpx;
					color: #3F90FF;
				}

				.delta {
					position: absolute;
					bottom: -10rpx;
					content: '';
					width: 20rpx;
					height: 20rpx;
					border-radius: 3rpx;
					background-color: #FFFFFF;
					transform: rotateZ(45deg)skew(10deg, 10deg);

				}

				image {
					width: 80rpx;
					height: 80rpx;
				}

				.item-text {
					font-size: 24rpx;
					font-weight: 500;
					color: #999999;
				}

			}
		}

	}


	.process-box {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		margin-top: 32rpx;
		gap: 32rpx;
		width: 95%;

		.process-item {
			width: 100%;
			border-radius: 10rpx;
			box-shadow: 0rpx 0rpx 8rpx 0rpx #EEEEEE;
			padding: 40rpx 24rpx;
			background: #FFFFFF;

			.process-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 30rpx;

				.title {
					width: 500rpx;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}

				.process-item-btn {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 128rpx;
					height: 56rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #002F69;
					background: #D6ECFF;
					border-radius: 30rpx;
				}

			}

			.process-item-info {
				margin-top: 3rpx;
				display: flex;
				justify-content: flex-start;
				gap: 20rpx;
				width: 100%;
				height: 34rpx;
				font-weight: 400;
				font-size: 24rpx;

				.process-item-key {
					display: flex;
					justify-content: space-between;
					width: 100rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #999999;
				}

				.process-item-value {
					display: flex;
					align-items: center;
					color: #333333;
					font-size: 24rpx;
					font-weight: 500;
				}

			}
		}

	}



	.video-play {
		width: 683rpx;
		height: 384rpx;
		margin: 100rpx 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>