zhihuixiaoyuan2-ui/mine/components/popup/popup.vue

<template>
	<view>
		<!-- 弹窗 -->
		<view class="bgbox" @click="getClose" v-if="type&&type!=2"></view>
		<view class="bgbox"  v-if="type&&type==2"></view>
		<!-- 录入 -->
		<block v-if="type==1">
			<view class="importbox  sfixed" :class="type==1?'imp_bot':''">
				<view class="list flexc btn1" @click="getEnter(1)">
					<image :src="importimg" class="imgl"></image>
					<view class="flex1">
						<view class="f16 fw5 c16 mb4">导入{{titsta}}</view>
						<view class="f14 coa">已有{{titsta}}单表格，一键导入</view>
					</view>
					<image :src="rimg" class="imgr"></image>
				</view>
				<view class="list flexc btn2" @click="getEnter(2)">
					<image :src="enterimg" class="imgl"></image>
					<view class="flex1">
						<view class="f16 fw5 c16 mb4">录入{{titsta}}</view>
						<view class="f14 coa">在线录入{{titsta}}</view>
					</view>
					<image :src="rimg" class="imgr"></image>
				</view>
			</view>
		</block>
		
		<!-- 科目选择 -->
		<view class="subject sfixed" v-if="type==2">
			<view class="chose_top flexc">
				<!-- <view class="topbtn topl" @click="getClose">取消</view> -->
				<view class="topc">选择科目(可多选)</view>
				<view class="topbtn topr" @click="getsubConfirm">确定</view>
			</view>
			<!-- <view class="chose_box">
				<view class="pr list" v-for="(ite,idx) in subjectlist" :key="idx">
					<view class="lista flexcc" :class="ite.check ?'act':''"  @click="getCheck(idx)" >{{ite.tit}}	</view>
					<view class="listp" @click.stop="btns" v-if="ite.check">
						<input placeholder="总分"  maxlength="6" v-model="ite.manfen" type="digit"/>
					</view>
				</view>
			</view> -->
			<!-- 新样式 -->
			<view class="chose_nbox">
				<view class="list" v-for="(ite,idx) in subjectlist" :key="idx">
					<view class="listl over" :class="ite.check ?'act':''"  @click="getCheck(idx)">{{ite.tit}}</view>
					<view class="listr flexc">
						<view class="ltrtit">总分</view>
						<input  placeholder="请输入总分" :disabled="!ite.check" maxlength="6" v-model="ite.manfen" type="digit" />
					</view>
				</view>
				<view class="txt"><text>*</text>请先选择科目，再输入总分</view>
			</view>
		</view>
		<!-- 录入成绩 -->
		<view class="subject sfixed" v-if="type==3">
			<view class="chose_top flexc">
				<view class="topbtn topl" @click="getClose">取消</view>
				<view class="topc">添加学生成绩</view>
				<view class="topbtn topr" @click="getScore">完成</view>
			</view>
			<view class="chose_box">
				<!-- <view class="lrlist">
					<view class="label">学生姓名</view>
					<input  placeholder="请输入学生姓名" v-model='studentinfo.scoreDataName'/>
				</view> -->
				<view style="width: 100%;">
					<picker range-key="dictLabel" :range="studenlist"  :value="stuidx"  @change="bindDateChange">
						<view class="lrlist">
							<view class="label">学生姓名</view>
							<view class="flex1 f15" :class="studentinfo.scoreDataName?'co16':'coa'">{{studentinfo.scoreDataName||'请选择学生姓名'}}</view>
							<!-- <input  placeholder="请输入学生姓名" v-model='studentinfo.scoreDataName'/> -->
							<image :src="rimg" class="ilrmgr"></image>
						</view>
					</picker>
				</view>
				
				<view class="lrlist"  v-for="(ite,idx) in subList" :key="idx">
					<view class="label">{{ite.xueke}}成绩</view>
					<!-- 选择各个科目成绩 -->
					<block><input type="digit"  maxlength="6"  placeholder="请输入分数" v-model="ite.score"/></block>
					<!-- <block><input  placeholder="请输入分数" v-model="studentinfo[ite.val]"/></block> -->
				</view>
				<!-- params['params[role]'] -->
				<!-- <view class="lrlist">
					<view class="label">成绩总分</view>
					<input  placeholder="请输入分数" v-model="studentinfo.zongfen"/>
					<textarea auto-height="true" v-module='studentinfo.zongfen' placeholder="请输入点评成绩(选填)" class="input"></textarea>
				</view> -->
			</view>
		</view>
		<!-- 删除 -->
		<view class="delbox" v-if="type==4">
			<view class="tit">修改信息</view>
			<view class="tit">删除学生</view>
			<view class="zhan"></view>
			<view class="tit close"  @click="getClose">取消</view>
		</view>
		<!-- 有成绩之后 -->
		<view class="delbox" v-if="type==6">
			<view class="tit" @click="getLook">查看{{titsta}}</view>
			<view class="tit" @click="getDel">删除{{titsta}}</view>
			<view class="zhan"></view>
			<view class="tit close"  @click="getClose">取消</view>
		</view>
		<!-- 档案 -->
		<!-- 隐私提示 -->
		<view class="confirmbox flexdc" v-if="type==5">
			<view class="tit flex0">隐私提示</view>
			<view class="txt">根据学生一对一隐私协议，只能查看自己的成绩</view>
			<view class="cfbtn flex ">
				<view class="cbtn btn2" @click="getClose">我知道了</view>
				<!-- <view class="cbtn btn2" @click="getConfirm">{{confdat.suretxt}}</view> -->
			</view>
		</view>
		<!-- 孩子 -->
		<view class="delbox" v-if="type==7">
			<view class="tit" @click="getChose(ite)" v-for="(ite,idx) in childrens" :key="idx">{{ite.schoolName}}/{{ite.className}}/{{ite.studentName}}</view>
			<view class="zhan"></view>
			<view class="tit close"  @click="getClose">取消</view>
		</view>
		<!-- 防溺水计划 -->
		<view class="fnsbox" v-if="type==8">
			<view class="fns_top">
				<image :src="fziconc" @click="getClose"></image>
				<view>加入防溺水计划</view>
			</view>
			<view class="fns_ma">
				<picker range-key="className" :range="classlist"  :value="classidx"  @change="bindDateChangea">
					<view class="flexc mibox mb16">
						<view class="tit" style="margin-bottom: 0;">选择班级</view>
						<view class="f15 flex1 txr co16" v-if="classname" >{{classname}}</view>
						<view class="f15 flex1 txr coa" v-else>请选择班级</view>
						 <image :src="rimg" class="rimg"></image>
					</view>
				</picker>
				<view class="fns_mab">
					<image :src="fzicond"></image>
					<view class="tip">提示：本防溺水计划仅作为辅助提示作用，我们 将做到尽力推送，请确保学生照片信息清晰准确 无误！确认提交前，请先阅读完安全协议信息！</view>
				</view>
				<view class="rebtn mb16" style="height: 80rpx;" @click="getJoin">确认</view>
				<view class="lread" @click="checkflag=!checkflag">
					<view class="lreadl">
						<image :src="checkimg" v-if="checkflag"></image>
						<image :src="ncheckimg" v-else></image>
					</view>
					<view class="tit">我已阅读并知晓<text @click.stop="handlePrivacy">安全协议</text>信息，选择即为自愿同意</view>
				</view>
			</view>
		</view>
		<!-- 老师新增班级 -->
		<view class="subject sfixed" v-if="type==9">
			<view class="chose_top flexc">
				<view class="topbtn topl" @click="getClose">取消</view>
				<view class="topc">添加班级</view>
				<view class="topbtn topr" @click="getClassSure">完成</view>
			</view>
			<view class="chose_box">
				<view style="width: 100%;">
					<picker range-key="className" :range="classlist"  :value="classvalidx"  @change="bindDateChangeb">
						<view class="lrlist">
							<view class="label">班级</view>
							<view class="flex1 f15" :class="classinfo.className?'co16':'coa'">{{classinfo.className||'请选择班级'}}</view>
							<image :src="rimg" class="ilrmgr"></image>
						</view>
					</picker>
				</view>
				<view style="width: 100%;">
					<picker range-key="dictLabel" :range="subjects"  :value="cstuidx"  @change="bindDateChangec">
						<view class="lrlist">
							<view class="label">学科</view>
							<view class="flex1 f15" :class="classinfo.discipline?'co16':'coa'">{{classinfo.discipline||'请选择学科'}}</view>
							<image :src="rimg" class="ilrmgr"></image>
						</view>
					</picker>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	//subLists 选择的科目
	//subjectlist 字典值 成绩表科目
	//nostudenlist  学生信息表
	export default{
		props:{
			type: {
				type: Number,
				default () {
					return 0
				}
			},
			studentinfos:{
				type: Object,
				default () {
					return {}
				}
			},
			subLists:{},
			subjectlists:{
				type: Array,
				default () {
					return []
				}
			},
			titsta:{
				type: String,
				default () {
					return '成绩'
				}
			},
			nostudenlist:{
				type: Array,
				default () {
					return []
				}
			},
			childrens:{
				type: Array,
				default () {
					return []
				}
			},
			classlist:{
				type: Array,
				default () {
					return []
				}
			},
			subjects:{
				type: Array,
				default () {
					return []
				}
			},
			classinfos:{
				type: Object,
				default () {
					return {}
				}
			}
		},
		watch:{
			subLists(val){
				if(val&&val.length>0){
					this.subList=val
				}
			},
			nostudenlist(val){
				this.studenlist=val
			},
			subjectlists(val){
				this.subjectlist=val
			},
			studentinfos(val){
				this.studentinfo=JSON.parse(JSON.stringify(val))
			},
			classinfos(val){
				this.classinfo=JSON.parse(JSON.stringify(val))
			},
			type(val){
				if(val==0){
					var newobj={
						scoreDataName:'',//姓名
						scoreDataNameId:'',//姓名id
						studentNumber:''
					}
					this.studentinfo=JSON.parse(JSON.stringify(newobj))
					var classinfo={className:'',classId:'',discipline:''};
					this.classinfo=JSON.parse(JSON.stringify(classinfo))
					this.subList=[]
				}else{
					if(this.studentinfos){
						this.studentinfo=JSON.parse(JSON.stringify(this.studentinfos))
					}
					if(this.subLists){
						this.subList=JSON.parse(JSON.stringify(this.subLists))
					}
					
				}
			}
		},
		data(){
			return{
				importimg:require("@/mine/static/score/import.png"),
				enterimg:require("@/mine/static/score/enter.png"),
				rimg:require("@/mine/static/score/rimg.png"),
				fziconc:require("@/mine/static/score/fziconc.png"),
				fzicond:require("@/mine/static/score/fzicond.png"),
				checkimg:require('@/mine/static/score/check.png'),
				ncheckimg:require('@/mine/static/score/ncheck.png'),
				checkval:[],
				subList:[],//选中的课表
				stuidx:0,
				classidx:0,
				checkflag:false,
				classname:'',
				classId:'',
				stuname:'',
				studenlist:[],
				scoreDataName:'',
				subjectlist:[],
				studentinfo:{},
				classinfo:{
					className:'',
					classId:'',
					discipline:'',
				},
				classvalidx:0,
				cstuidx:0,
			}
		},
		mounted() {
			this.subjectlist=this.subjectlists
		},
		methods:{
			inputChange(e){
				var that = this
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				this.$nextTick(() => {
					that.rechargeMoney= e.target.value
				})
			},
			btns(){
				
			},
			getClose(){
				this.$emit("getClose")
			},
			getEnter(e){
				this.$emit("getEnter",e)
			},
			getConfirm(){
				this.$emit("getConfirm")
			},
			getLook(){
				this.$emit("getLook")
			},
			getDel(){
				this.$emit("getDel")
			},
			getChose(e){
				this.$emit("getChose",e)
			},
			getJoin(){
				this.$emit("getJoin")
			},
			getClassSure(){
				this.$emit("getClassSure",this.classinfo)
			},
			bindDateChange(e){
				var idx=e.detail.value;
				// this.scoreDataName=this.studenlist[idx].dictLabel
				this.studentinfo.scoreDataName=this.studenlist[idx].dictLabel
				this.studentinfo.scoreDataNameId=this.studenlist[idx].dictValue
				this.studentinfo.studentNumber=this.studenlist[idx].studentNumber
			},
			bindDateChangea(e){
				var idx=e.detail.value;
				this.classname=this.classlist[idx].className
				this.classId=this.classlist[idx].classId
			},
			bindDateChangeb(e){
				var idx=e.detail.value;
				this.classinfo.className=this.classlist[idx].className
				this.classinfo.classId=this.classlist[idx].classId
			},
			bindDateChangec(e){
				var idx=e.detail.value;
				this.classinfo.discipline=this.subjects[idx].dictLabel
			},
			getScore(){
				var info=JSON.parse(JSON.stringify(this.subList));
				var a=0
				Object.keys(info).some((key) => {
					info[key].score=Number(info[key].score).toFixed(2)
					if (info[key].score.trim()== '') {
						a=1;
						this.$toast("请输入"+info[key].xueke+"成绩")
						return
					}
				})
				// console.log(params)
				if(a==1){
					return
				}
				this.studentinfo.scoreDataDetailBoList=info;
				this.$emit('getScore',this.studentinfo)
			},
			getCheck(idx){
				var newArr=this.subjectlist;
				newArr[idx].check=!newArr[idx].check;
				this.subjectlist=JSON.parse(JSON.stringify(newArr))
			},
			getsubConfirm(){
				var newArr=this.subjectlist;
				var narr=[];
				var mfboList=[];
				var column1=[{ type:'index', fixed:true,width:80,align:'center', },{ name: 'scoreDataName', label: '姓名',fixed:true,width:140,emptyString:'--',align:'center' },];
				var s={ name: 'operation', type:'operation',label: '操作',
				renders:[
					{name:'编辑',func:'edit'}, // func 代表子元素点击的事件 父元素接收的事件 父元素 @edit
					{name:'删除',type:'warn',func:"dele"},
				]}
				var num=0
				Object.keys(newArr).some((key) => {
					if (newArr[key].check) {
						if(newArr[key].manfen){
							var obj={};
							// obj.name=newArr[key].val;
							obj.name=newArr[key].tit;
							obj.label=newArr[key].tit;
							obj.manfen=Number(newArr[key].manfen).toFixed(2);
							obj.sorter=true
							obj.align='center'
							obj.width=190
							column1.push(obj)
							
							var xobj={};
							xobj.xueke=newArr[key].tit;
							xobj.score='';
							narr.push(xobj)
							
							var nobj={}
							nobj.xueke=newArr[key].tit;
							nobj.manfen=Number(newArr[key].manfen).toFixed(2);
							mfboList.push(nobj)
							return ;
						}else{
							num=1
							var str='请填写'+newArr[key].tit+'总分'
							this.$toast(str)
							return true;
						}
						
					}
				})
				// 判断是否填写总分
				if(num==1){
					return
				}
				if(narr.length<1){
					this.$toast("请至少选中一门科目")
					return
				}
				column1.push(s)
				this.subList=JSON.parse(JSON.stringify(narr))
				var newobj={
					narr:narr,
					column1:column1,
					mfboList:mfboList
				}
				this.$emit('getsubConfirm',newobj)
			}
		}
	}
</script>

<style lang="scss" scoped>
//录入
.sfixed{position: fixed;bottom: 0;left: 0;right: 0;background: #fff;z-index: 5;}
.importbox{transition: all linear 0.3s;transform: translateY(100%);padding:32rpx 32rpx 20rpx;box-sizing: border-box;
	&.imp_bot{transform: translateY(0);}
	.list{width: 100%;border-radius: 22rpx;padding: 24rpx 48rpx;margin-bottom: 24rpx;position: relative;
		&.btn1{background: #EFF4FF;}
		&.btn2{background: #E7FFF4;}
		.imgl{width: 74rpx;height: 74rpx;flex: 0 0 auto;margin-right: 24rpx;}
		.imgr{width: 18rpx;height: 32rpx;flex: 0 0 auto;margin-left: 24rpx;}
	}	
}

.lrlist{width: 100%;min-height: 100rpx;background: #F2F2F2;border-radius: 10rpx;box-sizing: border-box;display: flex;align-items: center;padding: 0 48rpx;margin-bottom: 20rpx;
	.label{font-size: 28rpx;font-weight: bold;color: #161616;flex: 0 0 auto;margin-right: 48rpx;}
	input{font-size: 30rpx;color: #161616;}
	.input{font-size: 30rpx;color: #161616;}
	.ilrmgr{width: 12rpx;height: 22rpx;}
}

// 删除
.delbox{position: fixed;left:0;right: 0;bottom: 0;z-index: 5;background: #ffffff;
	.tit{font-size: 32rpx;font-weight: 500;color: #000000;height: 100rpx;display: flex;align-items: center;justify-content: center;}
	.zhan{height: 24rpx;background: #f5f5f5;width: 100%;}
	.close{color: #4775EA;}
}
// 科目
.subject{padding: 20rpx 0;max-height: calc(100vh - 200rpx);display: flex;flex-direction: column;
	.chose_top{margin-bottom: 20rpx;flex: 0 0 auto;
		.topbtn{font-weight: 500;font-size: 30rpx;color: #666666;width: 108rpx;height: 88rpx;display: flex;align-items: center;justify-content: center;
			&.topr{color: #4775EA;}
		}
		.topc{font-weight: 500;font-size: 30rpx;color: #161616;flex: 1;margin: 0 24rpx;text-align: center;}
		
	}
	.chose_box{padding: 16rpx 32rpx 2rpx;display: flex;flex-wrap: wrap;flex: 1;overflow: auto;
		.list{margin:0 52rpx 40rpx 0;position: relative;
		&:nth-child(3n){margin-right: 0;}
		.lista{
			width: 190rpx;height:76rpx;background: #F2F2F2;border-radius: 38rpx;font-size: 30rpx;font-weight: 500;
			color: #666666;
			&.act{background: #1f57e6;color: #ffffff;}
		}
		
		.listp{position: absolute;left: 0;top: 90%;padding: 2rpx 2rpx;border-radius: 5px;background-color: #d8e4ff;color: #fff;font-size: 24rpx;height: 50rpx;width: 110rpx;box-sizing: border-box;text-align: center;margin-top: -4rpx;
			&::before{content: '';position: absolute;bottom: 100%;left: 50%;margin-left: -10rpx;border-width: 6rpx;border-style: solid;border-color: transparent  transparent #d8e4ff transparent; }
			input{font-size: 26rpx;line-height: 40rpx;color: #161616;}
		}
}
	}
	// 新样式
	.chose_nbox{
		padding: 16rpx 32rpx 2rpx;display: flex;flex-wrap: wrap;flex: 1;overflow: auto;
		.list{display: flex;align-items: center;width: 100%;margin-bottom: 24rpx;
			.listl{width: 240rpx; height: 76rpx;background: #F2F2F2;border-radius: 10rpx;font-size: 30rpx;font-weight: 500;color: #666666;flex: 0 0 auto;margin-right: 32rpx;text-align: center;line-height: 76rpx;padding: 0 10rpx;box-sizing: border-box;
			&.act{background: #1f57e6;color: #ffffff;}
			}
			.listr{height: 76rpx;width: 280rpx;background: #F2F2F2;border-radius: 10rpx;padding: 0 24rpx;box-sizing: border-box;flex: 1;
				.ltrtit{flex: 0 0 auto;font-size: 28rpx;font-weight: bold;color: #161616;margin-right: 24rpx;}
				input{font-size: 30rpx;line-height: 76rpx;color: #161616;}
			}
		}
		.txt{font-size: 26rpx;color: #AAAAAA;display: flex;align-items: flex-start;line-height: 40rpx;
			text{color: #F7082E;flex: 0 0 auto;}
		}
	}
}
// 隐私
.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: 100%;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;}
		}
	}
}
// 防溺水
.fnsbox{position: fixed;left:56rpx;right: 56rpx;min-height: 600rpx;box-sizing: border-box;padding: 32rpx 48rpx;background-color: #ffffff;border-radius: 10rpx;z-index: 10;top:0;top: 50%;transform: translateY(-50%);max-height: calc(100vh - 100rpx);overflow: auto;
	image{flex: 0 0 auto;}
	.fns_top{font-size: 30rpx;font-weight: bold;color: #161616;text-align: center;margin-bottom: 28rpx;
		image{width: 28rpx;height: 28rpx;position: absolute;left: 48rpx;top: 32rpx;}
	}
	.fns_ma{
		.mibox{padding: 12rpx 0;
			.tit{font-size: 30rpx;font-weight: 500;color: #161616;flex: 0 0 auto;}
			.rimg{width: 14rpx;height: 26rpx;margin-left:18rpx;}
		}
		
		.fns_mab{display: flex;flex-wrap: wrap;margin-bottom: 52rpx;
			image{width: 30rpx;height: 30rpx;margin-right: 14rpx;flex: 0 0 auto;}
			.tip{flex: 1;font-size: 28rpx;font-weight: 500;color: #161616;}
		}
	}
	.lread{display: flex;align-items: flex-start;justify-content: center;
		.lreadl{padding-top: 4rpx;
			image{width: 28rpx;height: 28rpx;margin-right: 14rpx;}
		}
		.tit{font-size: 26rpx;font-weight: 500;color: #666666;line-height: 40rpx;
			text{color: #4775EA;text-decoration: underline;padding: 0 6rpx;}
		}
	}
}

</style>