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