zhihuixiaoyuan2-ui/components/popup/popup.vue

<template>
	<view>
		<!-- 弹窗 -->
		<view class="bgbox" @click="getClose" v-if="type"></view>
		<!-- 确认弹窗 -->
		<view class="confirmbox flexdc" v-if="type==1">
			<view class="tit flex0">{{confdat.tit}}</view>
			<view class="txt">{{confdat.txt}}</view>
			<view class="cfbtn flex ">
				<view class="cbtn btn1" @click="getClose">{{confdat.closetxt}}</view>
				<view class="cbtn btn2" @click="getConfirm">{{confdat.suretxt}}</view>
			</view>
		</view>
		<!-- 延迟弹窗 -->
		<view class="chec_time yc_time" v-if="type==9">
			<view class="f17 co16 fw">延迟放学</view>
			<view class="time_par">
				<view class="pr che_box flexc">
					<picker-view  :indicator-style="indicatorStyle"  :value="value" @change="bindChange" class="picker-view flex1">
						<picker-view-column>
						    <view class="item" v-for="(item,index) in timelist" :key="index">
								<view :class="[valarr[0]==index?'pickerSelected':'','u-line-1']">{{item.dictLabel}}</view>
							</view>		
						</picker-view-column>	
					</picker-view>
					<text class="f16 co16 fw flex0">分钟</text>	
				</view>
				<!-- <view class="txt"><text>*</text>提前延迟指 在选择的延迟放学时间上提前多久放学。</view> -->
			</view>
			
			<view class="cfbtn flex ">
				<view class="cbtn btn1" @click="getClose">取消</view>
				<view class="cbtn btn2" @click="getyanKeyFn(2)">确认延迟</view>
			</view>
			<image :src="closeimg" class="cloimg" @click="getClose"></image>
		</view>
		<!-- 完善 -->
		<view class="perfect" v-if="type==2">
			<image :src="bgimg" class="bgimg"></image>
			<view class="pbox flexdc">
				<view class="tit mb24">温馨提示</view>
				<view class="txt ptb10 flexc">您还未填写学校信息 请您尽快去完善</view>
				<view class="pbtn btn1">去完善</view>
				<view class="pbtn btn2">稍后完善</view>
				
			</view>
			<image :src="closeimg" class="cloimg" @click="getClose"></image>
		</view>
		<!-- 调整时间 延时放学-->
		<view class="chec_time" v-if="type==3">
			<view class="f17 co16 fw">放学时间</view>
			<view class="pr che_box flexc">
				<picker-view  :indicator-style="indicatorStyle"  :value="value" @change="bindChange" class="picker-view flex1">
					<picker-view-column>
					    <view class="item" v-for="(item,index) in timelist" :key="index">
							<view :class="[valarr[0]==index?'pickerSelected':'','u-line-1']">{{item.dictLabel}}</view>
						</view>		
					</picker-view-column>	
				</picker-view>
				<text class="f16 co16 fw flex0">分钟</text>
			</view>
			<view class="pbtn btn1" @click="getKeyFn">确定</view>
			<view class="txt"><text>*</text>指首页准备放学按钮点击后，根据设置 的放学时间后放学，默认为5分钟。</view>
			<image :src="closeimg" class="cloimg" @click="getClose"></image>
		</view>
		
		<!-- 注册成功 -->
		<view class="perfect" v-if="type==4">
			<image :src="bgimg" class="bgimg"></image>
			<view class="pbox flexdc" style="padding-bottom: 80rpx;">
				<view class="tit mb24">{{regdat.tit}}</view>
				<view class="txt ptb10 flexc">{{regdat.txt}}</view>
				<view class="pbtn btn1" @click="getregfn(regdat.type)">{{regdat.btn}}</view>
				<!-- <view class="pbtn btn2">稍后完善</view> -->
				
			</view>
			<image :src="closeimg" class="cloimg" @click="getClose"></image>
		</view>
		<!-- 选择班级 -->
		<view class="chec_time" v-if="type==5" style="min-height: 416rpx;margin-top: -300rpx;">
			<view class="f17 co16 fw">选择班级</view>
			<picker @change="bindPickerChange" range-key='dictLabel'  :value="classindex" :range="teacherClass">
				<view class="checkpick">
					<view class="f16 co16 fw mr10 flex0">班级</view>
					<view :class="className?'flex1':'coa flex1'">{{className||"请选择班级"}}</view>
					<image :src="upimg"></image>
				</view>
			</picker>
			
			
			<view class="pbtn btn1" @click="getKeyNext">下一步</view>
			<!-- <view class="txt"><text>*</text>指首页准备放学按钮点击后，根据设置 的放学时间后放学，默认为5分钟。</view> -->
			<image :src="closeimg" class="cloimg" @click="getClose"></image>
		</view>
		<!-- 审核弹窗 -->
		<!-- 审核意见 -->
		<view class="chec_shyj" v-if="type==6">
			<view class="f17 co16 fw">拒绝理由</view>
			<view  class="boxs">
				
			</view>
			<view class="shbox ">
				<textarea  style="height: 256rpx;" v-model="shyj" placeholder="请输入反馈意见，限200 字内…" maxlength="200" class="textar"></textarea>
			</view>
			<view class="pbtn btn1" @click="getyjSubmit">提交</view>
			<image :src="closeimg" class="cloimg" @click="getClose"></image>
		</view>
		<!-- 调课弹窗 -->
		<view class="confirmbox flexdc" v-if="type==7" style="margin-top: -40%;">
			<view class="tit flex0">调课信息</view>
			<view class="tkbox">
				<view>调课信息：{{formdata.subjectTime}}{{formdata.subject}}</view>
				<view>被调课信息：{{formdata.beSubjectTime}}{{formdata.beSubject}}</view>
				<view>调课内容：
					<textarea v-model="content" placeholder="请输入调课内容，例：5月16日星期二的英语课与 5月18日周四的语文课调换…" maxlength="200" class="textarea"></textarea>
				</view>
			</view>
			<view class="cfbtn flex ">
				<view class="cbtn btn1" @click="getClose">取消</view>
				<view class="cbtn btn2" @click="getConfirm">确认</view>
			</view>
		</view>
		<!-- 预约码 -->
		<view class="invbox" v-if="type==8">
			<view class="tit">预约码</view>
			<view class="img">
				<image :src="yycode" @click="getPreview(yycode)"></image>
			</view>
			<view class="txt">
				<text>*</text>此预约码为来访者预约登记码，将此码发送给来访者，即可扫码预约
			</view>
			<view class="btn" @click="getSaver">保存至手机</view>
			<image :src="closeimg" class="cloimg" @click="getClose"></image>
		</view>
		<!-- 9已用 延迟放学 -->
		<!-- 视频播放 -->
		<!-- <view class="videobox" v-if="type==4">
			<video id="myVideo" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
			                   @fullscreenchange="fullscreenchange"  controls></video>
		</view> -->
	</view>
</template>

<script>
	export default{
		props:{
			type: {
				type: Number,
				default () {
					return 0
				}
			},
			teacherClass:{
				type: Array,
				default () {
					return []
				}
			},
			timetit:{},
			timelist:{
				type: Array,
				default () {
					return []
				}
			},
			yycode:{
				type: String,
				default () {
					return ''
				}
			},
			shyjflag:{
				type: Boolean,
				default () {
					return true
				}
			},
			confdat:{tit:'确认放学',txt:"是否确认准备放学？",closetxt:'我点错啦',suretxt:'确认放学'},
			regdat:{tit:'',txt:'',btn:"",type:''},
			formdata:{"subjectClassId": "","subjectClass": "","subject": "","isNum":"","subjectTime":"","subjectWeek":"","beSubject": "","beIsNum": "","beSubjectTime":"","week": "","content":''},
			// status:{
			// 	type: String,
			// 	default () {
			// 		return 'add'
			// 	}
			// },
			// iteminfo:{},
			// xmjzinfo:{},
		},
		watch:{
			timetit(val){
				var newArr=this.timelist;
				var newsArr=[]
				Object.keys(newArr).some((key) => {
					if (newArr[key].dictLabel == ('' + val)) {
						newsArr[0]=Number(key)
						this.value=newsArr;
						this.valarr=newsArr;
						return true;
					}
				})
				
			},
			type(val){
				this.shyj='';
				this.content='';
				this.valarr=[0];
				if((val==3||val==9)&&this.timetit){
					var newArr=this.timelist;
					var newsArr=[]
					Object.keys(newArr).some((key) => {
						if (newArr[key].dictLabel == ('' + this.timetit)) {
							newsArr[0]=Number(key)
							this.value=newsArr;
							this.valarr=newsArr;
							return true;
						}
					})
				}
				
			}
		},
		data(){
			return{
				// type:0,
				bgimg:require("@/static/images/popbg.png"),
				closeimg:require("@/static/images/close.png"),
				upimg:require("@/static/images/upicon.png"),
				
				// confdat:{tit:'确认放学',txt:"是否确认准备放学？",closetxt:'我点错啦',suretxt:'确认放学'},
				videoContext:'',
				value:[0],
				valarr:[0],
				visible: true,
				indicatorStyle: `height: 90rpx;color:#4775EA;`,
				classindex:0,
				className:'',
				classId:'',
				shyj:'',
				content:'',
			}
		},
		mounted() {
			// this.valarr=this.timetit
			// #ifndef MP-ALIPAY
			// this.videoContext = uni.createVideoContext('myVideo')
			// this.videoContext.requestFullScreen();
			// #endif
		},
		methods:{
			getClose(){
				this.$emit("getClose")
				// console.log(1)
				// this.type=0;
			},
			getPreview(url) {
				var newArr=[];
				newArr.push(url)
				uni.previewImage({
					urls: newArr,
					current:0,
					success: function(data) {
						
					},
					fail: function(err) {
						
					}
				});
			},
			getSaver(){
				// #ifdef H5
				// 将base64格式的图片转换成Blob对象
				  var arr = this.yycode.split(","),
				    mime = arr[0].match(/:(.*?);/)[1],
				    bstr = atob(arr[1]),
				    n = bstr.length,
				    u8arr = new Uint8Array(n);
				  while (n--) {
				    u8arr[n] = bstr.charCodeAt(n);
				  }
				  // 将Blob对象转换成文件并下载到本地
				  var blob = new Blob([u8arr], {
				    type: mime
				  });
				  var a = document.createElement('a');
				  a.download = 'qrcode';
				  a.href = URL.createObjectURL(blob);
				  a.click();
				// #endif
				// #ifndef H5
				uni.getSetting({//获取用户的当前设置
				    success:(res)=> {
				        if(res.authSetting['scope.writePhotosAlbum']){//验证用户是否授权可以访问相册
				            this.saveImageToPhotosAlbum();
				        }else{
				            uni.authorize({//如果没有授权，向用户发起请求
				                scope: 'scope.writePhotosAlbum',
				                success:()=> {
				                    this.saveImageToPhotosAlbum();
				                },
				                fail:()=>{
				                    uni.showToast({
				                        title:"请打开保存相册权限，再点击保存相册分享",
				                        icon:"none",
				                        duration:3000
				                    });
				                    setTimeout(()=>{
				                        uni.openSetting({//调起客户端小程序设置界面,让用户开启访问相册
				                            success:(res2)=> {
				                                // console.log(res2.authSetting)
				                            }
				                        });
				                    },3000);
				                }
				            })
				        }
				    }
				})
				// #endif
				
			},
			saveImageToPhotosAlbum(){
                let base64=this.yycode.replace(/^data:image\/\w+;base64,/, "");//去掉data:image/png;base64,
                let filePath=wx.env.USER_DATA_PATH + '/qrcode.png';
                uni.getFileSystemManager().writeFile({
                    filePath:filePath ,  //创建一个临时文件名
                    data: base64,    //写入的文本或二进制数据
                    encoding: 'base64',  //写入当前文件的字符编码
                    success: res => {
                        uni.saveImageToPhotosAlbum({
                            filePath: filePath,
                            success: function(res2) {
                                uni.showToast({
                                    title: '保存成功，请从相册选择再分享',
                                    icon:"none",
                                    duration:5000
                                })
                            },
                            fail: function(err) {
                                // console.log(err.errMsg);
                            }
                        })
                    },
                    fail: err => {
                        //console.log(err)
                    }
                })
            },
			getyjSubmit(){
				if(!this.shyj&&this.shyjflag){
					this.$toast("请输入审核意见")
					return
				}
				this.$emit("getyjSubmit",this.shyj)
			},
			getregfn(e){
				this.$emit("getregfn",e)
			},
			getConfirm(){
					this.$emit("getConfirm",this.content)
				  // this.$tab.navigateTo(`/mine/pages/login/register`)
				  // this.$tab.navigateTo(`/pages/logines`)
			},
			bindPickerChange(e){
				var val=e.detail.value;
				this.className=this.teacherClass[val].dictLabel
				this.classId=this.teacherClass[val].dictValue
			},
			getyanKeyFn(id){
				var value=this.valarr[0];
				var str=this.timelist[value].dictLabel;
				this.$emit('getyanKeyFn',str)
			},
			getKeyFn(){
				var value=this.valarr[0];
				var str=this.timelist[value].dictLabel;
				if(str==this.timetit){
					this.$emit('getClose')
				}else{
					this.$emit('getKeyFn',str)
				}
				
			},
			getKeyNext(){
				this.$emit('getKeyNext',this.classId)
			},
			bindChange(e){
				this.valarr=e.detail.value;
				// console.log(e)
                // const val = e.detail.value
                // this.year = this.years[val[0]]
                // this.month = this.months[val[1]]
                // this.day = this.days[val[2]]
            },
			fullscreenchange (e){
				if(!e.detail.fullScreen){
					this.videoContext.stop()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 公共
		.pbtn{text-align: center;font-size: 30rpx;font-weight: 500;flex:0 0 auto;
			&.btn1{background: #1f57e6;color: #ffffff;height: 70rpx;border-radius: 35rpx;line-height: 70rpx;width: 100%;}
			&.btn2{color: #aaa;margin-top: 14rpx;padding:10rpx;}
		}
		.cloimg{width: 56rpx;height: 56rpx;position: absolute;bottom: -80rpx;left: 50%;margin-left: -28rpx;}
	// end
.perfect{
	position: fixed;left: 82rpx;right: 82rpx;height: 550rpx;top: 50%;margin-top: -340rpx;border-radius: 24rpx;z-index: 10;
	.bgimg{width: 100%;height: 100%;}
	
	.pbox{position: absolute;left: 0;top: 0;right: 0;bottom: 0;padding: 32rpx 68rpx;box-sizing: border-box;z-index: 5;
		.tit{font-size: 34rpx;font-weight: bold;
color: #FFFFFF;text-align: center;flex: 0 0 auto;}
		.txt{font-size: 32rpx;font-weight: 500;color: #161616;flex: 1;text-align: center;}	
	}	
}
.confirmbox{
	position: fixed;left: 82rpx;right: 82rpx;min-height: 300rpx;top: 50%;margin-top: -30%;border-radius: 24rpx;z-index: 10;background-color: #ffffff;padding-top: 30rpx;box-sizing: border-box;text-align: center;
	.tit{font-size: 34rpx;font-weight: bold;
color: #161616;line-height: 48rpx;}
	.txt{font-size: 32rpx;color: #161616;flex: 1;padding: 28rpx;display: flex;align-items: center;justify-content: center;line-height: 48rpx;}
	.cfbtn{border-top: 2rpx solid #DDDDDD;flex: 0 0 auto;
		.cbtn{width: 50%;height: 88rpx;line-height: 88rpx;
			&.btn1{font-size: 32rpx;font-weight: 500;
color: #AAAAAA;position: relative;
			&::after{position: absolute;right: 1rpx;top: 0;bottom: 0;content: "";width: 2rpx;background-color: #DDDDDD;;}

}
			&.btn2{font-size: 32rpx;font-weight: 500;
			color: #4775EA;}
		}
	}
}
// 时间选择
.chec_time{position: fixed;left: 126rpx;right: 126rpx;min-height: 660rpx;top: 50%;margin-top: -400rpx;border-radius: 14rpx;z-index: 10;background-color: #ffffff;padding: 48rpx 46rpx 54rpx;box-sizing: border-box;text-align: center;
// .chec_over{max-height: calc(100% - 400rpx) ;overflow: auto;}
	.che_box{padding-left: 80rpx;
			.picker-view {height: 300rpx;margin: 20rpx 0rpx;width: 100%;flex: 1;
				.item {line-height: 90rpx;text-align: center;
					.pickerSelected{font-size: 40rpx;font-weight: bold;color: #4775EA;}
				}
			}	
		}
	.txt{margin-top: 32rpx;
		font-size: 24rpx;color: #666666;
		text{font-size: 32rpx;color: #DF0024;margin-right: 6rpx;}
	}
	// 延迟提前
	&.yc_time{
		padding:48rpx 0 0rpx;min-height:auto;
		.time_par{padding:0 46rpx;
			.txt{text-align:left;margin:0 0 24rpx;}
		}
		.cfbtn{border-top: 2rpx solid #DDDDDD;flex: 0 0 auto;
			.cbtn{width: 50%;height: 88rpx;line-height: 88rpx;
				&.btn1{font-size: 32rpx;font-weight: 500;color: #AAAAAA;position: relative;
					&::after{position: absolute;right: 1rpx;top: 0;bottom: 0;content: "";width: 2rpx;background-color: #DDDDDD;;}
				}
				&.btn2{font-size: 32rpx;font-weight: 500;color: #4775EA;}
			}
		}
	}
}

.checkpick{display: flex;align-items: center;border-bottom: 2rpx solid #FFB132;flex-direction: row;margin: 40rpx auto 76rpx;width: 100%;padding: 32rpx 0;
	
	image{width: 22rpx;height: 12rpx;flex: 0 0 auto;margin-left: 16rpx;}
}
.chec_shyj{position: fixed;left: 82rpx;right: 82rpx;height: 560rpx;top: 50%;margin-top: -380rpx;border-radius: 14rpx;z-index: 10;background-color: #ffffff;padding: 48rpx 46rpx 54rpx;box-sizing: border-box;text-align: center;
	.shbox{
		.textar{width: 100%;border: 2rpx solid #FF6400;border-radius: 10rpx;padding: 26rpx 30rpx;font-size: 30rpx;color: #343434;height: 376rpx;margin: 40rpx 0;text-align: left;}
	}
}
//调课
.tkbox{flex: 1;text-align: left;display: flex;flex-direction: column;padding:20rpx;
	view{font-size: 32rpx;color: #161616;padding: 6rpx 0;}
}
.textarea{width: 100%;border: 2rpx solid #FF6400;border-radius: 10rpx;padding: 26rpx 30rpx;font-size: 30rpx;color: #343434;height: 200rpx;margin: 20rpx 0;text-align: left;}
// 预约码
.invbox{
	position: fixed;left: 126rpx;right: 126rpx;background: #ffffff;border-radius: 14rpx;min-height: 640rpx;padding: 44rpx 46rpx 48rpx;box-sizing: border-box;top: 50%;z-index: 10;transform: translateY(-50%);margin-top: -60rpx;
	.tit{font-size: 34rpx;font-weight: bold;color: #161616;margin-bottom: 16rpx;text-align: center;line-height: 48rpx;}
	.img{width: 280rpx;height: 280rpx;margin: 0 auto 16rpx;
		image{width: 100%;height: 100%;}
	}
	.txt{font-size: 28rpx;color: #AAAAAA;display: flex;align-items: flex-start;line-height: 40rpx;
		text{color: #F7082E;flex: 0 0 auto;}
	}
	.btn{width:100%;height: 72rpx;background: #4775EA;border-radius: 36rpx;text-align: center;line-height: 72rpx;font-size: 30rpx;font-weight: 500;margin-top:36rpx;
color: #FFFFFF;
}
}

// 全屏的视频播放
.videobox /deep/ uni-video{width: 100% !important;}
</style>