yuanqu_ui/work/pages/yyorder/meetadd.vue

<template>
	<view>
		<view class="navbox">
			<uni-nav-bar color="#ffffff" left-icon="left" title="会议预订" :background-color="backgroundColor"
				:border="false" statusBar='true' fixed="true" @clickLeft='getBack'>
			</uni-nav-bar>
		</view>
		<image :src="navbg" class="navbg"></image>
		<view class="zxmain" :style="'margin-top:-'+marTop+'rpx;'">
			<view class="ytbox">
				<uni-forms ref="form" class="ytforms" :rules="rules"  :modelValue="datainfo">
					<!-- 预定会议室 -->
					<view v-show="stepval==1">
						<view class="ytsbox">
							<view class="yttit">选择会议室</view>
							<view class="mb12" v-for="(ite,idx) in hyslist" :key="ite.conferenceRoomId">
								<view class="mlists" :class="meetid==ite.conferenceRoomId?'act':''" @click="getMeetId(ite)">
									<!-- 会议图片 -->
									<view class="banbox mb12" v-if="ite.conferenceRoomUrl&&meetid==ite.conferenceRoomId" @click.stop="getStop">
										<hys-banner :bannerlist="ite.conferenceRoomUrl"></hys-banner>
									</view>
									<view class="flexc"  >
										<view class="mtit">{{ite.conferenceRoomName}}</view>
										<view class="mtxt bga" v-if="ite.type=='N'"><text class="cir"></text>当前空闲</view>
										<view class="mtxt bgb" v-if="ite.type=='Y'"><text class="cir"></text>当前占用</view>
									</view>
								</view>
								<!--已经预约的时间段 -->
								<view class="tlist" v-show="meetid==ite.conferenceRoomId">
									<view class="ttips flexc">
										<image :src="tipimg"></image>已被预约时段
									</view>
									<block v-if="ite.conferenceRoomOrderList&&ite.conferenceRoomOrderList.length">
										<view class="ttime flexc" v-for="(tite,tidx) in ite.conferenceRoomOrderList" :key="tite.conferenceRoomOrderId">
											<view class="cir"></view>
											{{tite.startTime}} 至 {{tite.endTime}}
										</view>
									</block>
									<view v-else class="ttime">当前会议室空闲，无预约记录</view>
								</view>
							</view>
							<view class="ybtn flexcc" @click="getNextFn">下一步</view>
							<view class="tips">* 为避免您的重复操作，请避开会议室已被预约时段</view>
						</view>
					</view>
					<view v-show="stepval==2">
						<view class="ytsbox">
							<view class="yttit">填写预订信息</view>
							<view class="pt5">
								<uni-forms-item label="预定人员" class="disable"  name="visitName">
									<view class="intit">{{datainfo.orderUser}}</view>
								</uni-forms-item>
								<uni-forms-item label="会议名称"   name="conferenceName">
									<uni-easyinput :inputBorder="false" type="textarea" autoHeight  v-model="datainfo.conferenceName"
										placeholder="输入会议名称">
									</uni-easyinput>
								</uni-forms-item>
								<uni-forms-item label="开始时间" name="startTime">
									<uni-datetime-picker v-model="datainfo.startTime" @change="getChangeaFn">
										<view class="pickbox flexc">
											<view :class="datainfo.startTime?'txr flex1':'coa txr flex1'">{{datainfo.startTime || "请选择开始时间"}}</view>
											<image :src="hupimg" class="hupimg"></image>
										</view>	
									</uni-datetime-picker>
								</uni-forms-item>
								<uni-forms-item label="结束时间" name="endTime">
									<uni-datetime-picker v-model="datainfo.endTime" @change="getChangebFn" :start="datainfo.startTime">
										<view class="pickbox flexc">
											<view :class="datainfo.endTime?'txr flex1':'coa txr flex1'">{{datainfo.endTime || "请选择结束时间"}}</view>
											<image :src="hupimg" class="hupimg"></image>
										</view>	
									</uni-datetime-picker>
								</uni-forms-item>
								<uni-forms-item label="参会人数"   name="conferenceNumber">
									<uni-easyinput :inputBorder="false"  v-model="datainfo.conferenceNumber"
									type="number"
										placeholder="输入参会人数">
									</uni-easyinput>
								</uni-forms-item>
								<view class="textarea">
									<uni-easyinput :inputBorder="false" type="textarea" autoHeight  v-model="datainfo.remark"
										placeholder="请输入会议要求…">
									</uni-easyinput>
								</view>
								
								<view class="chose" @click="getCkFn">
									<image :src="choseimg" v-if="datainfo.useXk=='Y'"></image>
									<image :src="nchoseimg" v-else></image>
									需要准备席卡
								</view>
								<!-- <uni-forms-item label="会议室"  name="appointmentSite">
									<view class="flex1">
										<w-select
										      :list='hyslist'
											  v-model="chooseValue"
										      valueName='conferenceRoomName' 
										      keyName="conferenceRoomId"
											  :filterable='filterable'
											  width='100%'
											  height="36px"
											  @change='getchangeb'
										    >
										    </w-select>
									</view>
								</uni-forms-item> -->
								
								
								
							</view>
							<view class="flexc">
								<view class="ybtn flexcc ybga mr20" @click="getPreFn">上一步</view>
								<view class="ybtn flexcc" @click="getSubmit">确认提交</view>
							</view>
							
							<view class="tips">* 为避免您的重复操作，请先仔细查看已预约时段。</view>
						</view>
					</view>	
				</uni-forms>	
			</view>
		</view>
	</view>
</template>

<script>
	import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
	import {getRoomNoList,getRoomyyAdd,getRoomyyPut,getRoomyyDetail,getRoomtimeNoList} from "@/api/mine/work.js"
	import {getDictionaryFn} from "@/api/mine/register.js"
	import wSelect from "@/work/components/w-select/w-select.vue"
	import hysBanner from "@/work/components/yuyue/hysbanner.vue"
	export default {
		components: {wSelect,hysBanner},
		data() {
			return {
				hupimg:require("@/static/images/order/hup.png"),
				navbg:require("@/static/images/navbg.png"),
				tipimg:require("@/work/static/yuy/tips.png"),
				choseimg:require("@/work/static/yuy/chose.png"),
				nchoseimg:require("@/work/static/yuy/nchose.png"),
				backgroundColor: "transparent",
				nvaHeight: 44,
				marTop: 0, //距离顶部的距离
				stubarHeight: 0, //
				datainfo:{
					"conferenceRoomId": "",//会议室ID
					"conferenceRoomName": "",//会议室名称
					"conferenceRoomAddress": "",//会议室地址
					"orderUser": "",//会议室预约人员名称
					"orderUserId": "",//会议室预约人员id（用户id）
					"conferenceName": "",//会议名称
					"conferenceNumber": "",//会议室人数
					"startTime": "",//会议开始时间
					"endTime": "",//会议结束时间
					'useXk':'N',//是否需要席卡 N：不需要 Y：需要
					'remark':'',//说明
				},
				rules: {
				  startTime: {rules: [{required: true,errorMessage: '请选择开始时间',}]},
				  endTime: {rules: [{required: true,errorMessage: '请选择结束时间' } ]},
				  conferenceRoomName: {rules: [{required: true,errorMessage: '请选择会议室'} ]},
				  conferenceName: {rules: [{required: true,errorMessage: '请输入会议名称'} ]},
				  conferenceNumber: {rules: [{required: true,errorMessage: '请输入会议人数'} ]},
				},
				meetid:0,
				hys:'',
				hysidx:'',
				hyslist:[],
				ptype:'add',
				stepval:1,//
				id:'',
				filterable:true,
				chooseValue:'',
				name:this.$store.state.user.name,
				userId:this.$store.state.user.userId,
				bannerlist:[]
			}
		},
		onPageScroll(e) {
			var scrollTop = Number(e.scrollTop);
			if (scrollTop > 0) {
				this.backgroundColor = '#0491FD'
			} else {
				this.backgroundColor = 'transparent'
			}
		},
		onLoad: function(e) {
			if(e.data){
				var data=JSON.parse(decodeURIComponent(e.data))
				if(data.type){
					this.ptype=data.type;
					this.id=data.id;
					this.getDetail()
				}
			}else{
				this.datainfo.orderUser=this.name;
				this.datainfo.orderUserId=this.userId;
			}
			// this.init()
			this.getRoomNoList()
			uni.getSystemInfo({
				success: (e) => {
					this.stubarHeight = Number(e.statusBarHeight);
					this.nvaHeight = Number(e.statusBarHeight) + 44;
					this.tabscheight = Number(this.nvaHeight) * 2 + 100;
				}
			})
		},

		onShow() {},
		mounted() {
			this.getHeightFn()
		},
		methods: {
			checkPermi,
			checkRole,
			getBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			getStop(){
				
			},
			bindTimeChangea(e){
				var val=e.detail.value;
				// this.day=val
			},
			getHeightFn() {
				let query = uni.createSelectorQuery().in(this);
				//需要给黄色区域设置一个id标识，在这里是demo
				query.select('.navbox').boundingClientRect(data => {
					var top = data.top < 0 ? -data.top : data.top;
					var stubarHeight = Number(this.stubarHeight);
					this.marTop = stubarHeight > 0 ? 692 - Number(data.height) * 2 : 692 - Number(data.height) *
						2 + 40 //赋值，待会要用
					if (top <= this.nvaHeight) {
						const opacity = top / 100 // 计算透明度值
						const color = `rgba(4, 145, 253, ${opacity})`
						this.backgroundColor = color // 更新盒子背景颜色
					} else {
						this.backgroundColor = '#00A9F0'
					}
				}).exec();
			},
			init() {
				// 门卫
				// getDictionaryFn('is_read').then(res=>{
				// 	if(res.code==200){
				// 		this.ydztlist = res.data.map(v => {
				// 			return {
				// 				label: v.dictLabel,
				// 				value: v.dictValue
				// 			}
				// 		})
				// 	}
				// })
			},
			statusFormat(ite,list,type) {
				var aite=selectValueKey(list, ite);
				if(type=='hys'){
					this.hysidx=aite.key
				}
				return aite.actions;
			},
			getChangeaFn(e){
				this.datainfo.startTime=e
				var endTime=this.datainfo.endTime;
				if(endTime){
					var startime=new Date(e).getTime()
					var endtime=new Date(endTime).getTime()
					if(startime>endtime){
						this.$toast('开始时间大于开始时间')
						this.datainfo.endTime=''
					}	
				}
			},
			getChangebFn(e){
				var that=this;
				var startt=this.datainfo.startTime;
				if(!startt){
					this.$toast('请选择开始时间')
					setTimeout(function(){
						that.datainfo.endTime='';
					},200)
					return
				}
				var startime=new Date(startt).getTime()
				var endtime=new Date(e).getTime()
				if(startime>endtime){
					setTimeout(function(){
						that.datainfo.endTime='';
					},200)
					this.$toast('请选择时间大于开始时间')
					return
				}
				this.datainfo.endTime=e
			},
			getMeetId(ite){
				var id=ite.conferenceRoomId;
				var name=ite.conferenceRoomName;
				var adress=ite.conferenceRoomAddress
				this.meetid=id;
				this.datainfo.conferenceRoomId=id;
				this.datainfo.conferenceRoomName=name;
				this.datainfo.conferenceRoomAddress=adress;
			},
			getCkFn(){
				var useXk=this.datainfo.useXk;
				if(useXk=='Y'){
					this.datainfo.useXk='N'
				}else{
					this.datainfo.useXk='Y'
				}
			},
			getPreFn(){
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				})
				this.stepval=Number(this.stepval)-1
			},
			getNextFn(){
				if(!this.datainfo.conferenceRoomId){
					this.$toast("请选择会议室")
					return
				}
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				})
				this.stepval=Number(this.stepval)+1
			},
			getSubmit(){
				var that=this;
				this.$refs.form.validate().then(res => {
					var params = JSON.parse(JSON.stringify(this.datainfo))
					if(this.ptype=='add'){
						getRoomyyAdd(params).then(res => {
							if (res.code == 200) {
								this.$toast("新增成功")
								uni.$emit('refreshmeetlist')
								setTimeout(function(){
									uni.navigateBack({
										delta:1
									})
								},1200)
							} else {
								this.$toast(res.msg)
							}
						})
					}else{
						getRoomyyPut(params).then(res => {
							if (res.code == 200) {
								this.$toast("修改成功")
								uni.$emit('refreshmeetlist')
								setTimeout(function(){
									uni.navigateBack({
										delta:1
									})
								},1200)
							} else {
								this.$toast(res.msg)
							}
						})
					}
					
				})
				
			},
			getchangeb(e){
				this.datainfo.conferenceRoomId=e.conferenceRoomId;
				this.datainfo.conferenceRoomName=e.conferenceRoomName;
				this.datainfo.conferenceRoomAddress=e.conferenceRoomAddress;
			},
			getRoomNoList() {
				getRoomNoList().then(res => {
					if (res.code == 200) {
						var newArr=res.rows;
						newArr.forEach(ite=>{
							if(ite.conferenceRoomUrl){
								ite.conferenceRoomUrl=ite.conferenceRoomUrl.split(',')
							}
						})
						this.hyslist=newArr
					} else {
						this.$toast(res.msg)
					}
				})
			},
			getDetail(){
				getRoomyyDetail(this.id).then(res=>{
					if(res.code==200){
						this.datainfo=res.data;
						this.meetid=res.data.conferenceRoomId;
						// this.chooseValue=res.data.conferenceRoomId
					}
				})
			}
		},

	}
</script>
<style>
/* 	page {
		background: #ffffff;
	} */
</style>
<style lang="scss" scoped>
.ytbox /deep/ .uni-forms .uni-forms-item{padding: 10rpx 26rpx 10rpx;border: 2rpx solid #0391FD;margin-bottom: 24rpx;border-radius: 12rpx;min-height: 90rpx;}
.ytbox /deep/ .uni-forms-item__label{flex: 0 0 auto;width: 144rpx !important;font-size: 28rpx;font-weight: bold;position: relative;color: #161616;text-align-last: justify;height: 66rpx;}
.ytbox /deep/ .uni-forms-item__label text{flex: 1;}
.ytbox /deep/ .uni-forms-item__label .is-required{position: absolute;right: 0;color: #F10C31;margin-top: 16rpx;}
.ytbox /deep/ uni-textarea{flex: 1;width: auto;text-align: right;}
.ytbox .textarea /deep/ uni-textarea{flex: 1;width: auto;text-align: left;padding: 26rpx;font-size: 28rpx;min-height: 192rpx;box-sizing: border-box;border-radius: 3px;
border: 2rpx solid #0391FD;margin: 0;}
.ytbox /deep/ .uni-textarea-placeholder{font-size: 28rpx;color: #aaaaaa !important;}
.ytbox /deep/ .uni-easyinput__placeholder-class{font-size: 28rpx;color: #aaaaaa;}
.ytbox /deep/ .uni-forms-item__content{display: flex;align-items: center;flex-direction: row;}
.ytbox /deep/ .uni-easyinput{flex: 1;text-align: right;}
.ytbox /deep/ .uni-easyinput__content-input{font-size: 28rpx;}
 .ytbox /deep/ .uni-forms-item__error{margin-top:0rpx;left: auto;right: 0;}
.ytbox /deep/ .uni-easyinput__content-textarea{min-height: 42rpx;} 
 .disable{background: #EFF0F2;border: none !important;}
 .ytbox{width: 684rpx;margin: 0 auto;padding-top: 24rpx;position: relative;flex: 1;overflow: auto;background-color: #ffffff;padding-bottom: 4rpx;border-radius: 14rpx;}
.ytforms{
	.yttit{font-size: 28rpx;font-weight: bold;margin-bottom: 56rpx;
color: #161616;display: flex;align-items: center;padding: 0rpx 26rpx;box-sizing: border-box;position: relative;
		&::before{content: '';width: 6rpx;height: 34rpx;background: $com-cd3;border-radius: 4rpx;position: absolute;top: 50%;transform: translateY(-50%);left: 0rpx;}
	}
	.ytsbox{background-color: #ffffff;padding: 32rpx 28rpx 0;border-radius: 14rpx;margin-bottom: 24rpx;
		.intit{font-weight: 500;flex: 1;font-size: 26rpx;text-align: right;color: #666666;}
		.pickbox{flex: 1;text-align: right;font-weight: 500;font-size: 28rpx;color: #161616;
			.hupimg{width: 18rpx;height: 14rpx;margin-left: 12rpx;flex: 0 0 auto;}
		}
		.chose{display: flex;align-items: center;font-weight: 500;font-size: 28rpx;color: #161616;margin-top: 34rpx;
			image{width: 26rpx;height: 24rpx;margin-right: 18rpx;flex: 0 0 auto;}
		}
	}
}
// 按钮
	.ybtn{width: 100%;height: 90rpx;background: $com-cd3;border-radius: 14rpx;margin: 100rpx auto 0;font-size: 28rpx;font-weight: 500;color: #FFFFFF;
		&.btn1{background-color: #9a9c9e;}
		&.ybga{background-color: #e6efff;color:#0391fd ;}
	}
	.tips{font-weight: bold;margin-top: 28rpx;
font-size: 22rpx;line-height: 34rpx;
color: #FF0000;}

.navbox{position: fixed;left: 0;right: 0;top: 0;z-index: 4;	}
.navbg{width: 100%;height: 692rpx;}	
.zxmain{position: relative;padding: 20rpx 32rpx 40rpx;box-sizing: border-box;display: flex;
	min-height: calc(100vh - 44px);		
}
// 会议室列表
.mlists{border-radius: 6rpx;border: 2rpx solid #C1C1C1;min-height: 90rpx;box-sizing: border-box;
padding: 24rpx 26rpx;
	&.act{border: 2rpx solid #0391FD;
		.mtit{font-weight: bold;color: #0391FD;}
	}
	.mtit{font-weight: 500;font-size: 28rpx;color: #161616;flex: 1;margin-right: 16rpx;}
	.mtxt{font-weight: 500;font-size: 26rpx;flex: 0 0 auto;
		&.bga{color: #0AC86E;
			.cir{background: #0AC86E;}
		}
		&.bgb{color: #FF6969;
			.cir{background: #FF6969;}
		}
		.cir{width: 12rpx;height: 12rpx;margin-right: 16rpx;border-radius: 50%;display: inline-block;}	
	}
}
.tlist{padding-top: 30rpx;
	.ttips{font-weight: bold;font-size: 28rpx;color: #161616;
		image{width: 26rpx;height: 28rpx;margin-right: 16rpx;flex: 0 0 auto;}
	}
	// padding: 24rpx 0 36rpx 38rpx;
	.ttime{font-weight: 500;font-size: 26rpx;color: #161616;padding-left: 38rpx;padding-top: 24rpx;margin-bottom: 8rpx;
		&:last-child{margin-bottom: 0;}
		
		.cir{width: 12rpx;height: 12rpx;background: #FFB132;border-radius: 50%;flex: 0 0 auto;margin-right: 22rpx;
			
		}
	}
}
</style>