如何保存QR码并在网页上显示

时间:2018-02-17 12:18:42

标签: firebase firebase-realtime-database ionic3 qr-code barcode

我正在为学校的老师和学生创建一个出勤申请表。我创建了应用程序的教师方面并且运行良好。我正在使用Ionic 3和Firebase来存储数据。基本上,老师报名,然后他们将他们的学生加入他们的班级。当创建学生时,自动弹出以向学生的父母发送电子邮件,其中包含关于学生姓名,班级,父母姓名,父电子邮件,父母电话号码以及学生的QR码的信息。然后学生使用该QR码登录,以便上课。 Qr代码正在生成并与电子邮件完美配合。扫描完成后,学生将被标记为。

所以我的问题是如何在应用程序的学生页面上显示电子邮件中发送的Q​​R码。因此,如果他们忘记了QR码,他们仍然可以登录。如何检索这QR代码?

如有任何问题,请询问。这是我关于堆栈溢出的第一篇文章之一,如果不清楚我将尝试解释。

newStudent.js

import { Component, Input } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Storage } from '@ionic/storage';
import { EmailComposer } from '@ionic-native/email-composer';


//page
import { StudentsPage } from '../students/students';


import { Student } from '../../model/student';
import { StudentService } from '../../service/student.service';

declare var require: any;
let QRCode = require('qrcode');

@Component({
  selector: 'page-newstudent',
  templateUrl: 'newstudent.html'
})
export class NewStudentPage {
  @Input('qrc-value') value = 'https://www.techiediaries.com';
  @Input('qrc-version') version : '1' | '2' | '3' | '4' | '5' | '6' | '7' |     '8' | '9' | '10' | '11' | '12' | '13' | '14' | '15' | '16' | '17' | '18' | '19'     | '20' | '21' | '22' | '23' | '24' | '25' | '26' | '27' | '28' | '29' | '30' |     '31' | '32' | '33' | '34' | '35' | '36' | '37' | '38' | '39'|'40' | '' = '';

  @Input('qrc-errorCorrectionLevel') errorCorrectionLevel : 'L' | 'M' | 'Q'     | 'H' = 'M';

  student: Student = new Student();
  error: string;
  constructor(public navCtrl: NavController, public storage: Storage,         private studentService: StudentService,
    private emailComposer: EmailComposer ) {
  }
  addstudent() {

    this.storage.get('user_id').then((val) => {
      // this.user=db.list('User').valueChanges();
      // console.log("user id: ",val)
      if (val != null) {
        this.student.add_date = new Date().toDateString();
        this.student.user_id = val;
        console.log(this.student);
        this.value=this.studentService.pushStudent(this.student)
        this.toDataURL().then((v : string)=>{
          var base64parts = v.split(',');
          base64parts[0] = "base64:Qrcode.png//";
          var compatibleAttachment =  base64parts.join("");
          let email = {
            to: this.student.parent_email,
            attachments: [
              compatibleAttachment
            ],
            subject: 'The teacher registed your child information',
            body: 'Name : '+this.student.name+
                  '<Br>Class : '+this.student.class+
                  '<Br>Parent Name : '+this.student.parent_name+
                  '<Br>Parent Tel : '+this.student.parent_tel+
                  '<Br>Parent Email : '+this.student.parent_email,
            isHtml: true
          };
          this.emailComposer.open(email);
          this.navCtrl.setRoot(StudentsPage);
        }).catch((e)=>{
          console.error(e);
        })
      }
    });


  }
  toDataURL(){
    return new Promise((resolve,reject)=>{
      QRCode.toDataURL(this.value, { version : this.version ,     errorCorrectionLevel : this.errorCorrectionLevel } ,function (err, url) {
        if(err){
          console.error(err);
          reject(err);
        }
        else{
          //console.log(url);
          resolve(url);
        }
      })      
    });
  }
}

所有代码都在https://github.com/Farrah1996/Project

0 个答案:

没有答案