YNUtdPlatform/pages/realName/workbench/workPlan/index.vue

<template>
	<view class="page">
	  <u-navbar class="u-navbar" title="作业计划与实名制管控情况" placeholder @leftClick="leftClick" leftIconColor="#fff"  bgColor="#00337A"  :titleStyle="{ color: '#FFF', fontSize: '32rpx' }"/>
	  <scroll-view class="scroll-view" scroll-x="true">
		  <view class="scroll-view-item" :class="hIndex == 1 ? 'active' : ''" @click="hIndex = 1">
			  分公司
			  <view class="activeLine" v-if="hIndex == 1"></view>
		  </view>
		  <view class="scroll-view-item" :class="hIndex == 2 ? 'active' : ''"  >
			  项目
			  <view class="activeLine" v-if="hIndex == 2"></view>
		  </view>
		  <view class="scroll-view-item" :class="hIndex == 3 ? 'active' : ''"  >
			  分包合同
			  <view class="activeLine" v-if="hIndex == 3"></view>
		  </view>
		  <view class="scroll-view-item" :class="hIndex == 4 ? 'active' : ''" @click="hIndex = 4">
			  分包商
			  <view class="activeLine" v-if="hIndex == 4"></view>
		  </view>
	  </scroll-view>
		   <view>
			   <web-view :src="webUrl1" v-if="hIndex==1" :fullscreen="false" :webview-styles="webviewStyles" @message="handleMessage1" style="overflow: auto;margin-top: 400rpx;"></web-view>
			   <web-view :src="webUrl2" v-if="hIndex==2" :fullscreen="false" :webview-styles="webviewStyles" @message="handleMessage2" style="overflow: auto;margin-top: 400rpx;"></web-view>
			   <web-view :src="webUrl3" v-if="hIndex==3" :fullscreen="false" :webview-styles="webviewStyles" style="overflow: auto;margin-top: 400rpx;"></web-view>
			   <web-view :src="webUrl4" v-if="hIndex==4" :fullscreen="false" :webview-styles="webviewStyles" style="overflow: auto;margin-top: 400rpx;"></web-view>
		   </view>
		   
		  <view class="screen-btn" v-if="screenType==2" @click="lockOrientation('landscape-primary')">横屏</view>
		  <view class="screen-btn" v-if="screenType==1" @click="lockOrientation('portrait-primary')">竖屏</view>
	</view>
  </template>
  
  <script>
  import config from '@/config'
  export default {
	data() {
	  return {
		  idNumber:uni.getStorageSync('realNameUser').idNumber, 
		  hIndex:1,
		  webUrl1:"/hybrid/html/planAndRealName/planAndRealName.html",
		  webUrl2:"/hybrid/html/planAndRealName/planAndRealNameTwo.html",
		  webUrl3:"/hybrid/html/planAndRealName/planAndRealNameThree.html",
		  webUrl4:"/hybrid/html/planAndRealName/planAndRealNameFour.html",
		  webviewStyles: {
			  progress: false,
			  width:'90%',
			  height:'240',
			  zIndex:'999',
			  top:'150',
			  left:'10',
			  right:'10',
		  },
		  screenType:2, //1-横屏，2-竖屏
	  }
	},
	watch: {
	  hIndex: function(newVal, oldVal) {
		  this.webviewStyles = {
			  progress: false,
			  width:'90%',
			  height:'240',
			  zIndex:'999',
			  top:'150',
			  left:'10',
			  right:'10',
		  }
		  this.getScal()//开启缩放
	  }
	},
	  onLoad() {
	  },
	  onShow() {
		  //打开横屏
		  // #ifdef APP-PLUS
		  uni.showLoading({
			  title: "加载中..."
		  })
		  setTimeout(() => {
			  plus.screen.unlockOrientation();
			  plus.screen.lockOrientation('default');
			  uni.hideLoading();
		  }, 200)
		  //#endif
		  //开启缩放
		  this.getScal()
		  
	  },
	  onUnload() { 
		  // #ifdef APP-PLUS
			 plus.screen.lockOrientation('portrait-primary');
		  // #endif
	  }, 
	  methods: {
		  handleMessage1(e){
			  console.log(e)
			  this.hIndex=2
		  },
		  handleMessage2(e){ 
			  // console.log(e)
			  this.hIndex=3
		  },
		  // 横屏
		  // this.lockOrientation('landscape')
		  // 竖屏
		  //this.lockOrientation('portrait')
		  lockOrientation(orientation) {
			  if(orientation=='landscape-primary'){
				  this.screenType=1
			  }else if(orientation=='portrait-primary'){
				  this.screenType=2
			  }
			  // if (typeof plus !== 'undefined' && typeof plus.screen !== 'undefined') {
				  plus.screen.lockOrientation(orientation)
			  // }
			  this.webviewStyles = {
				  progress: false,
				  width:'90%',
				  height:'240',
				  zIndex:'999',
				  top:'150',
				  left:'10',
				  right:'10',
			  }
			  this.getScal()//开启缩放 
		  },
		  getScal(){
				  // #ifdef APP-PLUS
				  const currentWebview = this.$scope.$getAppWebview() //获取当前页面的webview对象
				  setTimeout(()=> {
					  let wv = currentWebview.children()[0]
					  wv.setStyle({scalable:true})
				  }, 1000); //如果是页面初始化调用时，需要延时一下
				  // #endif
		  },
		  // 返回
		  leftClick() {
			console.log('返回')
			uni.navigateBack({
			  delta: 1 // 返回
			});
		  }
	  },
  
  }
  </script>
  
  <style lang="scss"> 
  .scroll-view {
	  white-space: nowrap;
	  width: 100%;
	  background: #FFF;
	  position: absolute;
	  top: 160rpx;
  }
   
  .scroll-view-item {
	  display: inline-block;
	  width: 160rpx;
	  height: 100rpx;
	  line-height: 100rpx;
	  text-align: center;
	  
	  .activeLine{
		  background:  #00337A;
		  border-radius: 10upx;
		  width: 160rpx;
		  height: 6upx;
	  }
  }
  .active {
	  color: #333;
	  font-weight: bolder;
	  font-size: 32rpx;
  }
  .page {
	  width: 100vw;
	  height:100vh;
	  background-color: #EFEFEF;
	  box-sizing: border-box;
	  position: relative;
	  
	  .content{
		  width: 100%;
		  height: 80vh;
		  padding-top: 20rpx;
		  background: #EFEFEF;
   
		  .view-box{
			  width: 96%;
			  height: auto;
			  margin: 0rpx auto;
			  background-color: #FFF;
			  border-radius: 10rpx;
			  padding-top: 20rpx;
			  .title-view{
				  font-size: 32rpx;
				  font-weight: 600;
				  margin-left: 20rpx;
			  }
   
		  } 
	  }
	  
	  .screen-btn{
		  width: 100rpx;
		  height: 60rpx;
		  line-height: 60rpx;
		  background:  #00337A;
		  color: #fff;
		  border-radius: 10rpx;
		  text-align: center;
		  position: fixed;
		  bottom: 20rpx;
		  right: 20rpx;
		  z-index: 999999;
	  }
  }
  </style>