v3-lab-xcx/pages/views/pages_patrolInspector/courseQRcode.vue

<!-- 课程-扫码 -->
<template>
  <view class="course">
	<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
		<view  class="basics">
			<view class="basics_li">
				<view class="basics_li_l">课程名称：</view>
				<view class="basics_li_r"><text>{{infoData.courseName}}</text></view>
			</view>
			<view class="basics_li">
				<view class="basics_li_l">主讲老师：</view>
				<view class="basics_li_r">{{infoData.lecturerName}}</view>
			</view>
			<view class="basics_li">
				<view class="basics_li_l">上课日期：</view>
				<view class="basics_li_r">{{infoData.coStartDate}}</view>
			</view>
			<view class="basics_li">
				<view class="basics_li_l">上课时间：</view>
				<view class="basics_li_r">{{infoData.coStartTime}}-{{infoData.coEndTime}}</view>
			</view>
			<view class="basics_li">
				<view class="basics_li_l">上课地点：</view>
				<view class="basics_li_r">{{(infoData.subId && infoData.subId !=-1)?infoData.subName+'-'+infoData.subRoom:infoData.position}}</view>
			</view>
			<view class="basics_li" style="border: none;">
				<view class="basics_li_l">课程内容：</view>
				<view class="basics_li_r2"><text>{{infoData.content?infoData.content:''}}</text></view>
			</view>
		</view>
		<view class="statistics">
			<view class="statistics_li">
				<text>预约人数：</text>
				<text>{{infoData.peopleCount}}人</text>
			</view>
			<view class="statistics_li" style="background: #0183FA;">
				<text>签到人数：</text>
				<text>{{signPeople}}人</text>
			</view>
		</view>
	</scroll-view>
	<!-- 遮罩 -->
	<view class="shade" v-if="dialogVisible">
		<view class="null-box" @click="dialogOutfire()"></view>
		<view class="shade_n" v-if="shadeStatus==0">
			<view class="shade_n_t" v-if="isCourse"><text>是否确认签到</text></view>
			<view class="shade_n_t" v-if="!isCourse"><img src="@/pages/images/icon_kcxq_ts.png"><text>您不在当前课程名单中，是否确定签到</text></view>
			<view class="shade_n_b">
				<text @click="dialogOutfire()">取消</text>
				<text @click="handleClick('signSubmit')">确认</text>
			</view>
		</view>
		<view class="shade_n_tow" v-if="shadeStatus==1">
			<view class="shade_n_tow_t" v-if="isSucceed"><img src="@/pages/images/icon_kcxq_cg.png"><text>签到成功</text></view>
			<view class="shade_n_tow_t" v-if="!isSucceed"><img src="@/pages/images/icon_kcxq_sb.png"><text>签到失败</text></view>
			<view class="shade_n_tow_b" @click="dialogOutfire()">确认</view>
		</view>
	</view>
	<view class="btn">
		<view class="btn_l" @click="handleClick('cancel')">取消</view>
		<view v-if="isSign" class="forbidden">签到</view>
		<view v-if="!isSign" class="btn_r" @click="handleClick('sign')">签到</view>
	</view>
  </view>

</template>

<script>
import { config } from '@/api/request/config.js'
import {courseQRcodeDetail,courseQRcodeSignCount,courseQRcodeIsSign,courseQRcodeIsPlanSign,courseQRcodeSign} from '@/api/apiDemo/index.js'
export default {
  name: "rectifyList",
  components: {

  },
  data() {
    return {
		baseUrl:config.base_url,
		pageType:0,
		form:{
		},
		infoData:{},
		dialogVisible:false,
		isSign:false,//是否签到
		isCourse:false,//是否在当前课程名单中
		isSucceed:false,//签到成功失败
		shadeStatus:0,//遮罩层状态 0是否确认签到 1签到成功或失败
		courseId:'',//课程id
		signPeople:0,//签到人数
		userId:uni.getStorageSync('userId'),//用户id
	}
  },
  onLoad(option) {
	 this.courseId=option.code;
  },
  onShow() {
	  wx.hideHomeButton()
  },
  mounted(){
	  this.courseQRcodeIsSign();//是否签到
	  this.courseQRcodeIsPlanSign();//是否计划内签到
	  this.courseQRcodeSignCount();//签到人数
	  this.courseQRcodeDetail();//签到详情
  },
  methods: {

		//滚动事件
		scrollGet(){},
	    handleClick(doType){
		  let self=this;
		  if(doType=='sign'){//签到遮罩层
			 this.dialogVisible=true;
		  }else if(doType=='signSubmit'){//确认签到

			  this.submitForm()

		  }else if(doType=='cancel'){//取消返回小程序首页
		        let data=uni.getStorageSync('gentleIdentifierData')
				if(!data.adminGentle && !data.applyGentle && !data.rectifyGentle){
					uni.redirectTo({
						url: '/pages/mine',
					});
				}else{
					uni.redirectTo({
						url: '/pages/home',
					});
				}
		  }

	    },
		//关闭弹窗
		dialogOutfire() {
		  this.dialogVisible = !this.dialogVisible
		},
		//是否签到
		async courseQRcodeIsSign(){
			let _this = this;
			const {data} = await courseQRcodeIsSign({courseId:this.courseId,userId:this.userId});
			if(data.code == 200){
				this.isSign=data.data;
			}
		},
		//是否计划内签到
		async courseQRcodeIsPlanSign(){
			let _this = this;
			const {data} = await courseQRcodeIsPlanSign({courseId:this.courseId,userId:this.userId});
			if(data.code == 200){
				this.isCourse=data.data;
			}
		},

		//详情
		async courseQRcodeDetail(){
			let _this = this;
			const {data} = await courseQRcodeDetail(this.courseId);
			if(data.code == 200){
				this.infoData=data.data;
				if(data.data.subId){
					this.infoData.site=data.data.subName+data.data.subRoom
				}else{
					this.infoData.site=data.data.position
				}
			}
		},
		//获取签到人数
		async courseQRcodeSignCount(){
			let _this = this;
			const {data} = await courseQRcodeSignCount({courseId:this.courseId,isSing:1});
			if(data.code == 200){
				this.signPeople=data.total
			}
		},

		//提交
		async submitForm(){
			let _this = this;
			let obj={
				courseId:this.courseId,
				userId:this.userId,
				singType:this.isCourse?'0':'1',//0计划内 1计划外
			}
			const {data} = await courseQRcodeSign(obj);
			if(data.code == 200){
				 if(data.data==1){//签到成功
					 this.isSucceed=true;
				 }else{//签到失败
					 this.isSucceed=false;
				 }
				 _this.shadeStatus=1;
				 _this.courseQRcodeSignCount();//签到人数
				 setTimeout(function () {
				    _this.dialogVisible=false;
				    _this.isSign=true;
				 }, 3000);
			}else{
				_this.shadeStatus=1;
				this.isSucceed=false;
				setTimeout(function () {
				   _this.dialogVisible=false;
				}, 3000);
			}
		},



  }
}
</script>

<style lang="stylus" scoped>
.course{
	height:100%;
	display flex;
	box-sizing: border-box;
	.info-max-box{
		flex: 1;
		overflow: scroll;
		padding-bottom: 128rpx;
		box-sizing: border-box;
	}
	/* 遮罩 */
	.shade{
	  height: 100%;
	  width: 100%;
	  position: fixed;
	  display: flex;
	  flex-direction: column;
	  z-index: 10;
	  background: rgba(0, 0, 0, 0.2);

	  .null-box {
	    flex: 1;
	  }
	  .shade_n{
	    width: 550rpx;
	    height: 350rpx;
	    background: #FFFFFF;
	    border-radius: 20rpx;
	    position: absolute;
	    top: 490rpx;
	    left: 100rpx;
		.shade_n_t{
			width: 100%;
			position: absolute;
			top: 80rpx;
			padding:0 48rpx 0 58rpx;
			box-sizing: border-box;
			display: flex;
			text-align: center;
			>img{
				width: 48rpx;
				height: 48rpx;
				margin-right:22rpx;
			}
			>text{
				flex: 1;
				font-size: 34rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 48rpx;
				display:inline-block;
				text-align: justify;
			}
		}
		.shade_n_b{
			position: absolute;
			top: 220rpx;
			>text{
				display: inline-block;
				width: 230rpx;
				height: 90rpx;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
			}
		    >text:nth-of-type(1){
				border: 2rpx solid #E0E0E0;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 90rpx;
				text-align: center;
				margin-right: 20rpx;
				margin-left: 34rpx;
			}
			>text:nth-of-type(2){
				background: #0183FA;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 90rpx;
				text-align: center;
			}
		}
	  }
	  .shade_n_tow{
		 width: 550rpx;
		 height: 528rpx;
		 background: #FFFFFF;
		  border-radius: 20rpx;
		  position: absolute;
		  top: 310rpx;
		  left: 100rpx;
		  .shade_n_tow_t{
			  >img{
				width: 230rpx;
				height: 230rpx;
				margin: 60rpx 0 0 160rpx;
			  }
			  >text{
				display: block;
				width: 100%;
				font-size: 34rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 48rpx;
				text-align: center;
				margin-top:46rpx;
			  }
		  }
		  .shade_n_tow_b{
			  width: 100%;
			  height: 100rpx;
			  border-top: 1px solid #E0E0E0;
			  font-size: 30rpx;
			  font-family: PingFang SC-Medium, PingFang SC;
			  font-weight: 400;
			  color: #0183FA;
			  line-height: 100rpx;
			  text-align: center;
			  margin-top: 42rpx;
		  }
	  }
	}
	.basics{
		width: 750rpx;
		background: #FFFFFF;
		padding: 30rpx 30rpx 0rpx;
		box-sizing: border-box;
		.basics_li{
			width: 690rpx;
			height: auto;
			border-bottom: 1rpx solid #D8D8D8;
			padding: 20rpx 0;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			.basics_li_l{
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 40rpx;
			}
			.basics_li_r{
				flex: 1;
				text-align: right;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
			}
			.basics_li_r2{
				flex: 1;
				text-align: right;
				>text{
					display:inline-block;
					text-align: justify;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 40rpx;
				}
			}
		}

	}
	.statistics{
		display: flex;
		justify-content: space-between;
		margin: 70rpx 30rpx 0;
		.statistics_li{
			width: 330rpx;
			height: 150rpx;
			background: #FFBD4C;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			>text:nth-of-type(1){
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 28rpx;
				margin-right: 32rpx;
			}
			>text:nth-of-type(2){
				font-size: 42rpx;
				font-family: PingFang SC-Heavy, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 42rpx;
			}
		}
	}
	.btn{
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		.btn_l{
			width: 375rpx;
			height: 90rpx;
			background: #FFFFFF;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 90rpx;
			text-align: center;
		}
		.btn_r{
			width: 375rpx;
			height: 90rpx;
			background: #0183FA;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color:#FFFFFF;
			line-height: 90rpx;
			text-align: center;
		}
		.forbidden{
			width: 375rpx;
			height: 90rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			line-height: 90rpx;
			text-align: center;
			background: #E0E0E0;
			color: #FFFFFF;
		}
	}
}

</style>