edu

src/components/upload/index.vue

@@ -42,7 +42,7 @@
       },
       maxs:{
         type: Number,
-        default: 200,
+        default: 1000,
       },
     },
     data() {

src/containers/center/play/components/iMedia.vue

@@ -10,7 +10,23 @@
       @play="onPlayerStart($event)" @ready="playerReadied" @timeupdate="onPlayerTimeupdate($event)" @ended="onPlayerEnded($event)"
       :globalOptions="{controls:true}" :options="options">
     </video-player>
-    
+
+    <el-row style="margin-top:20px;">
+      <el-col :span="12">
+        <el-card class="p20">
+          <h3>我是视频</h3>
+           <video ref="video"  v-show="isnotbtn" width="240" height="210" autoplay></video>
+        </el-card>
+
+      </el-col>
+
+      <el-col :span="12">
+        <el-card class="p20">
+         <h3>采集照片</h3>
+        <canvas ref="canvas" v-show="isnotbtn" width="240" height="210"></canvas>
+        </el-card>
+      </el-col>
+    </el-row>
 
   </div>
 </template>
@@ -36,6 +52,7 @@
         tickNum: 0,
         prevTime: 0,
         isReady: false,
+        isnotbtn: false,
         curTimes: 0,
         onPlay: false
       }
@@ -95,6 +112,54 @@
       this.startMonitor();
     },
     methods: {
+      photograph() {
+        let ctx = this.$refs["canvas"].getContext("2d");
+        // 把当前视频帧内容渲染到canvas上
+        ctx.drawImage(this.$refs["video"], 0, 0, 240, 210);
+        // 转base64格式、图片格式转换、图片质量压缩
+        let imgBase64 = this.$refs["canvas"].toDataURL("image/jpeg", 0.7); // 由字节转换为KB 判断大小
+
+        let str = imgBase64.replace("data:image/jpeg;base64,", "");
+        let param ={id:this.media.id, image: str}
+        httpServer("course.collect", param).then(res => {
+            let {msg, pause} = res.data
+            if (pause) this.doPause();
+            if ( msg )  this.$message.errorMsg(msg, 5);
+        })
+      },
+      callCamera() {
+        // H5调用电脑摄像头API
+        navigator.mediaDevices
+          .getUserMedia({
+            video: true,
+          })
+          .then((success) => {
+            this.isnotbtn=true
+            // 摄像头开启成功
+            this.$refs["video"].srcObject = success;
+            // 实时拍照效果
+            this.$refs["video"].play();
+          })
+          .catch((error) => {
+            this.$message.error(
+              "摄像头开启失败，请检查摄像头是否可用！或者打开摄影头"
+            );
+            console.error("摄像头开启失败，请检查摄像头是否可用！");
+          });
+      },
+      closeCamera() {
+        if (!this.$refs["video"].srcObject) {
+          this.dialogCamera = false;
+          return;
+        }
+        let stream = this.$refs["video"].srcObject;
+        let tracks = stream.getTracks();
+        tracks.forEach((track) => {
+          track.stop();
+        });
+        this.$refs["video"].srcObject = null;
+        this.isnotbtn=false
+      },
       startTick() {
         let tick = this.tryTick;
         if (this.timer) clearInterval(this.timer);
@@ -123,6 +188,7 @@
             this.setposition(position)
           }, 2000)
         }
+        this.callCamera()
         this.isReady = true
       },
       onPlayerTimeupdate(player) {
@@ -156,6 +222,7 @@
         this.reportErr("play", 'close')
         this.doPause()
         this.$emit("close")
+        this.closeCamera()
       },
       doPause() {
         this.stopTick()
@@ -205,6 +272,13 @@
           console.log("finish")
           return;
         }
+        if( !this.isnotbtn ){
+          this.$message.errorMsg("需要安装摄像头才能学习", 2);
+          return;
+        }
+        if( this.tickNum % 10 == 1){
+          this.photograph()
+        }
         // 主动暂停
         let myPlayer = this.$refs.videoPlayer.player;
         let curTimes = parseInt(myPlayer.currentTime());

src/containers/center/setting/index.vue

@@ -17,18 +17,18 @@
             <el-row :gutter="40" class="mt20">
               <el-col :span="6" class="col-normal tc">
                 <img :src="userInfo.headImg" :onerror="errorImg" class="setting-img" @click="showImg(userInfo.headImg)">
-                <do-upload @onFinish="setHeadImg" placeholder="上传头像"> </do-upload>
+                <do-upload @onFinish="setHeadImg" placeholder="上传形象照"> </do-upload>
               </el-col>
 
               <el-col :span="6" class="col-normal tc">
-                <img :src="userInfo.graduateImg" :onerror="errorImg" class="setting-img" @click="showImg(userInfo.graduateImg)">
-                <do-upload @onFinish="setGraduateImg" placeholder="上传毕业证"> </do-upload>
+                <img :src="userInfo.featureImg" :onerror="errorImg" class="setting-img" @click="showImg(userInfo.featureImg)">
+                <do-upload @onFinish="setFeatureImg" placeholder="人脸采集"> </do-upload>
               </el-col>
             </el-row>
 
             <ul class="ul-form">
               <li class="txt-r">
-                <span class="l-t"></span>注：<i></i>只有头像、性别、毕业证可以修改
+                <span class="l-t"></span>注：<i></i>上传人脸，需要管理员审核通过才能开始学习
               </li>
 
               <li>
@@ -291,6 +291,10 @@
         this.userInfo.headImg = imgUrl;
         this.saveBaseInfo(this.userInfo)
       },
+      setFeatureImg( imgUrl ){
+        this.userInfo.featureImg = imgUrl;
+        this.saveBaseInfo(this.userInfo)
+      },
       setCardImg( url ){
         httpServer("User.addCardImg", {url}).then( res=>{
           if( res.code == 200){

src/containers/login/components/unLogin.vue

@@ -56,7 +56,7 @@
 
 
       <div class="mt10 ng-scope" style="font-size: 10px; text-align: center;">没有学员/单位管理员帐号？
-        <!-- <a @click="goRegist()" class="ao b">立即注册</a> -->
+        <a @click="goRegist()" class="ao b">立即注册</a>
         </div>
     </div>
   </div>
@@ -152,10 +152,10 @@
         })
       },
       goRegist(){
-        // this.$router.push({
-        //    path: `/register`
-        // })
-        this.$message.info("暂时不支持用户注册");
+        this.$router.push({
+           path: `/register`
+        })
+        // this.$message.info("暂时不支持用户注册");
       },
       goReset(){
         this.$message.info("暂时不支持重置密码");

src/containers/register/register.vue

@@ -10,7 +10,7 @@
       <form ref="regForm" style="margin: 50px auto;">
         <!-- active0 -->
         <ul class="fhlist" style="width: 600px;margin:0 auto">
-          <li class="mt10">
+          <li class="mt20">
             <span class="title">
               <em class="fvx">*</em>手机号</span>
 
@@ -22,7 +22,7 @@
             </span>
           </li>
 
-          <li class="mt10">
+          <li class="mt20">
             <span class="title"><em class="fvx">*</em>校验码</span>
             <input type="text" name="code" v-model="code" class="ui-ipt iptform2" placeholder="输入校验码">
 
@@ -36,12 +36,12 @@
                   </span> -->
           </li>
 
-          <li class="mt10">
+          <li class="mt20">
             <span class="title"><em class="fvx">*</em>姓名</span>
             <input type="text" name="name" v-model="name" class="ui-ipt iptform" placeholder="输入真实姓名" clearable>
           </li>
 
-          <li class="mt10">
+          <li class="mt20">
             <span class="title"><em class="fvx">*</em>身份证</span>
             <input type="text" name="cardId" v-model="cardId" class="ui-ipt iptform" placeholder="输入证件号" clearable>
 
@@ -51,13 +51,13 @@
             </span>
           </li>
 
-          <li class="mt10">
+          <li class="mt20">
             <span class="title"><em class="fvx">*</em>学历</span>
             <input type="text" name="education" v-model="education" class="ui-ipt iptform" placeholder="输入学历" clearable>
           </li>
 
 
-          <li class="mt10">
+          <li class="mt20">
             <span class="title"><em class="fvx">*</em>工作单位</span>
             <input type="text" name="company" v-model="company" class="ui-ipt iptform" placeholder="输入工作单位" clearable>
           </li>
@@ -71,7 +71,7 @@
 
 
 
-          <li class="mb5">
+          <!-- <li class="mb5">
             <span class="title">
               <em class="fvx">*</em>账户密码</span>
             <input type="password" v-model="password" autocomplete="new-password" class="ui-ipt iptform ng-pristine ng-valid-pattern ng-invalid ng-invalid-required"
@@ -102,7 +102,7 @@
               <span class="p-ico ico-formver"></span>
               <span class="p-ico ico-worm"></span>前后密码不一致！
             </span>
-          </li>
+          </li> -->
 
           <li class="mb5">
             <span class="title">&nbsp;</span>
@@ -149,26 +149,26 @@
         rules: data.rulesData(this.validatePass)
       };
     },
-    watch: {
-      password(val) {
-        if (val.length < 6) {
-          this.passwordLevel = 'sick';
-          return
-        }
-        let pattern = [/[^0-9a-zA-Z]/, /[0-9a-z]/, /[A-Z]/];
-        let patnum = 0
-        for (let i = 0; i < pattern.length; i++) {
-          if (pattern[i].test(val)) patnum++
-        }
-        if (patnum == 3) {
-          this.passwordLevel = 'strong';
-        } else if (patnum == 2) {
-          this.passwordLevel = 'middle';
-        } else {
-          this.passwordLevel = 'sick';
-        }
-      }
-    },
+    // watch: {
+    //   password(val) {
+    //     if (val.length < 6) {
+    //       this.passwordLevel = 'sick';
+    //       return
+    //     }
+    //     let pattern = [/[^0-9a-zA-Z]/, /[0-9a-z]/, /[A-Z]/];
+    //     let patnum = 0
+    //     for (let i = 0; i < pattern.length; i++) {
+    //       if (pattern[i].test(val)) patnum++
+    //     }
+    //     if (patnum == 3) {
+    //       this.passwordLevel = 'strong';
+    //     } else if (patnum == 2) {
+    //       this.passwordLevel = 'middle';
+    //     } else {
+    //       this.passwordLevel = 'sick';
+    //     }
+    //   }
+    // },
     methods: {
       submitData() {
         let that = this
@@ -179,7 +179,7 @@
           company: this.company,
           education: this.education,
           cardId: this.cardId,
-          password: md5(this.password)
+          // password: md5(this.password)
         }
         httpServer("Auth.register", param).then(res => {
           if (res.code == 200) {
@@ -253,8 +253,8 @@
         if (this.isPhoneErr()) return false;
         if (!this.is_ok_card(this.cardId)) return false;
         if (!this.name) return false;
-        if (!this.password || this.password != this.confirmPassword) return false;
-        if (this.password.length < 6) return false;
+        // if (!this.password || this.password != this.confirmPassword) return false;
+        // if (this.password.length < 6) return false;
         if (this.code.length < 4) return false;
         return true;
       },