zj-mobile-oa/pages/information/information.vue

<template>
	<view class="topBtn">
		<u-subsection bg-color="rgb(215,224,233)" button-color="rgb(0,99,208)" active-color="white" :list="list" v-model="current" @change="subChange"></u-subsection>
		<view class="btn">
			<u-button size="medium" type="primary">已阅</u-button>
			<u-button size="medium" type="success">转交</u-button>
			<u-button size="medium" type="error">退件</u-button>
			<u-button size="medium" @click="onClose">关闭</u-button>
		</view>
	</view>
	<scroll-view scroll-y="true" class="content" v-show="current === 0">
		<image v-for="it in 48" src="../../static/666.png" mode="heightFix"></image>
	</scroll-view>
	
	<view class="handleFile" v-show="current === 1">
		
		<!-- 左侧视图 -->
		<scroll-view scroll-y="true" >
			<uni-transition :mode-class="['fade', 'slide-left']" :show="!show">
				<image v-for="it in 48" src="../../static/666.png" mode="heightFix"></image>
			</uni-transition>
			<uni-transition :mode-class="['fade', 'slide-right']" :show="show">
				选择人...
			</uni-transition>
		</scroll-view>
		
		<!-- 右侧视图 -->
		<scroll-view scroll-y="true" >
			<u-form :model="form" ref="form1">
				<view style="text-align: start;">委分管领导审示意见:</view>
				<u-form-item prop="suggest"><u-input type="textarea" v-model="form.suggest" border height="400"/></u-form-item>
			</u-form>
			<button type="primary" @click="confirm" style="margin-bottom: 40rpx;">意见确认</button>
			
			<view class="selected">
				<button @click="choosePeople">转交人选择</button>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {ref, reactive, nextTick} from"vue"
	import {onLoad, onReady} from "@dcloudio/uni-app"
	
	const show = ref(false)
	const form1 = ref(null)
	const rules = ref({
		suggest: [{ required: true, message: '请输入意见', trigger: ['change', 'blur'] }]
	})
	
	const list = ref([
		{
			name: '文件浏览'
		}, 
		{
			name: '办理'
		}, 
		{
			name: '流程图'
		}
	])
	const current = ref(0)
	const urlParams = ref({})
	const form = reactive({
		suggest: ''
	})
	
	function onClose(){
		uni.reLaunch({
			url: urlParams.value.url
		})
	}
	
	function confirm(){
		form1.value.validate((valid) => {
			if (valid) {
				uni.showToast({
					icon: "none",
					title: "表单验证通过"
				})
			}
		})
	}
	function choosePeople(type) {
		show.value = !show.value
	}
	
	function subChange(){
		// show.value = false
	}
	
	onLoad((e)=>{
		urlParams.value = e
		console.log(e);
	})
	
	onReady(()=>{
		form1.value.setRules(rules.value)
	})
</script>

<style lang="scss" scoped>
	body{
		padding: 100rpx 50rpx;
		box-sizing: border-box;
	}
	.topBtn{
		width: calc(100vw - 100rpx);
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 50rpx;
		.u-subsection{
			width: 600rpx;
		}
		.btn{
			display: flex;
			align-items: center;
			justify-content: center;
			uni-button{
				margin-left: 20rpx;
			}
		}
	}
	.content{
		background-color: #ebebeb;
		border-radius: 20rpx;
		width: calc(100vw - 100rpx);;
		height: calc(100vh - 300rpx);
		text-align: center;
	}
	.handleFile{
		background-color: #ebebeb;
		border-radius: 20rpx;
		width: calc(100vw - 100rpx);;
		height: calc(100vh - 300rpx);
		display: flex;
		justify-content: space-around;
		align-items: center;
		uni-scroll-view{
			border-radius: 20rpx;
			width: 45vw;
			height: 80vh;
			background-color: #fff;
			text-align: center;
			padding: 50rpx;
			box-sizing: border-box;
		}
	}
	
	.selected{
		height: 400rpx;
		background-color: #f5f9fc;
		border-radius: 15rpx;
		padding: 40rpx;
		uni-button{
			background-color: rgb(215, 224, 233);
		}
	}
</style>