自助注册

src/api/faceRecognition/index.js

@@ -67,6 +67,22 @@ export function FetchSnapshotOperation(params) {
   })
 }
 
+// 自助注册初始化数据
+export function FetchInitReaderCheck(params) {
+  return request({
+    url: 'api/person/initReaderCheck' + '?' + qs.stringify(params, { indices: false }),
+    method: 'get'
+  })
+}
+
+// 验证人员信息
+export function FetchCheckReader(params) {
+  return request({
+    url: 'api/person/checkReader' + '?' + qs.stringify(params, { indices: false }),
+    method: 'get'
+  })
+}
+
 export default {
   add,
   edit,
@@ -75,5 +91,7 @@ export default {
   FetchChangePersonInfo,
   FetchFindPersonFace,
   FetchBatchSavePersonInfos,
-  FetchSnapshotOperation
+  FetchSnapshotOperation,
+  FetchInitReaderCheck,
+  FetchCheckReader
 }

src/assets/styles/faceMobile.scss

@@ -0,0 +1,168 @@
+.face-mobile{
+  width: 100%;
+  height: 100%;
+  background: #F4F4F4;
+  overflow: hidden;
+  // overflow-y: scroll;
+}
+.face-mobile-bg{
+  width: 100%;
+  height: 220px;
+  text-align: center;
+  color: #fff;
+  font-size: 18px;
+  line-height: 40px;
+  position: relative;
+  z-index: 99;
+  &::after{
+    content: '';
+    width: 120%;
+    height: 220px;
+    position: absolute;
+    left: -10%;
+    top: 0;
+    background: url("~@/assets/images/faceH5/top.jpg") no-repeat center center;
+    background-size: cover;
+    border-radius: 0 0 17% 17%;
+
+  }
+}
+
+.face-mobile-content{
+  position: relative;
+  width: 92%;
+  margin: -20px auto 0 auto;
+  padding: 40px 3% 40px 0;
+  background: #fff;
+  border-radius: 15px;
+  text-align: left;
+  z-index: 999;
+  box-shadow: 0px 3px 60px 1px rgba(0,0,0,0.08);
+  ::v-deep .el-form-item {
+    display: flex !important;
+    justify-content: flex-start;
+    align-items: center;
+    .el-form-item__label{
+      color: #0c0e1e;
+    }
+    .el-form-item__content{
+      flex: 1;
+      .el-input__inner{
+        height: 40px;
+        line-height: 40px;
+      }
+    }
+  }
+}
+
+.submit-btn{
+  width: 200px;
+  height: 80px;
+  margin: 60px auto 0 auto;
+  padding-top: 20px;
+  color: #fff;
+  font-size: 16px;
+  background: url("~@/assets/images/faceH5/btnok.png") no-repeat center center;
+  background-size: 100% 100%;
+  text-align: center;
+}
+
+
+.face-valid{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 92%;
+  margin: 20px auto;
+  padding: 40px 0;
+  text-align: center;
+  background: #fff;
+  border-radius: 15px;
+  box-shadow: 0px 3px 60px 1px rgba(0,0,0,0.08);
+  overflow: hidden;
+  img{
+    display: block;
+    width: 250px;
+  }
+  P{
+    color: #909399;
+  }
+}
+
+.return-btn{
+  width: 120px;
+  height: 40px;
+  line-height: 40px;
+  margin-top: 20px;
+  font-size: 14px;
+  color: #fff;
+  background: #0348f3;
+  border-radius: 50px;
+  border: 1px solid #0348f3;
+}
+.reg-btn-group{
+  display: flex;
+  justify-content: space-around;
+  margin-top: 20px;
+  & div{
+    margin: 0 10px;
+  }
+  .other-return{
+    color: #0348f3;
+    background-color: #fff;
+    border: 1px solid #0348f3;
+  }
+}
+
+.register-valid{
+  padding: 20px 3% 10px 0;
+  margin: 0 auto;
+}
+
+.photo-container {
+  display: flex;
+  justify-content: space-between;
+  padding: 20px 6%;
+}
+.photo-preview{
+  position: relative;
+}
+.photo-preview img {
+  width: 150px;
+  height: 200px;
+  object-fit: cover;
+  border-radius: 4px;
+}
+
+
+.photo-tips{
+  padding-left: 4%;
+  p{
+    margin: 5px 0;
+  }
+  span{
+    display: block;
+    font-size: 12px;
+    line-height: 18px;
+    color: #909399;
+  }
+}
+
+.clear-img-btn{
+  display: inline-block;
+  padding: 4px 8px;
+  margin-top: 2px;
+  font-size: 12px;
+  color: #fff;
+  background: #0348f3;
+  border-radius: 5px;
+  border: 1px solid #0348f3;
+}
+
+
+
+.register-mobile{
+  .submit-btn{
+    margin: 20px auto 0 auto;
+  }
+}

src/router/index.js

@@ -9,7 +9,7 @@ import { filterAsyncRouter } from '@/store/modules/permission'
 
 NProgress.configure({ showSpinner: false })// NProgress Configuration
 
-const whiteList = ['/login']// no redirect whitelist
+const whiteList = ['/login', '/faceRegisterH5', '/faceError', '/faceSuccess', '/faceRegistered', '/faceSelfRegister']// no redirect whitelist
 
 router.beforeEach((to, from, next) => {
   if (to.meta.title) {

src/router/routers.js

@@ -97,6 +97,31 @@ export const constantRouterMap = [
         meta: { title: '架位总览', noCache: true, activeMenu: '/check/check/dataScreening' }
       }
     ]
+  },
+  { path: '/faceRegisterH5',
+    meta: { title: '人脸信息自助采集', noCache: true },
+    component: (resolve) => require(['@/views/faceRegisterH5/index'], resolve),
+    hidden: true
+  },
+  { path: '/faceError',
+    meta: { title: '人脸信息自助采集', noCache: true },
+    component: (resolve) => require(['@/views/faceRegisterH5/error'], resolve),
+    hidden: true
+  },
+  { path: '/faceSuccess',
+    meta: { title: '人脸信息自助采集', noCache: true },
+    component: (resolve) => require(['@/views/faceRegisterH5/success'], resolve),
+    hidden: true
+  },
+  { path: '/faceRegistered',
+    meta: { title: '人脸信息自助采集', noCache: true },
+    component: (resolve) => require(['@/views/faceRegisterH5/registered'], resolve),
+    hidden: true
+  },
+  { path: '/faceSelfRegister',
+    meta: { title: '人脸信息自助采集', noCache: true },
+    component: (resolve) => require(['@/views/faceRegisterH5/selfRegister'], resolve),
+    hidden: true
   }
 ]
 

src/views/faceRecognition/module/selfRegister.vue

@@ -15,6 +15,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import Qrcode from 'qrcodejs2'
 export default {
   props: {
@@ -22,12 +23,24 @@ export default {
   },
   data() {
     return {
-      link: 'http://192.168.99.72:8080/selfhelp/initReaderCheck.do?strLibcode=FTZN'
+      link: ''
     }
   },
+  computed: {
+    ...mapGetters([
+      'baseApi',
+      'user'
+    ])
+  },
   mounted() {
-    this.generateQrcode()
+    // http://192.168.99.72:8080/faceRegisterH5?strLibcode=FTZN
+    // 加上协议头 http:// 或 https://
+    this.link = `${window.location.protocol}//${window.location.host}/#/faceRegisterH5?strLibcode=${this.user.fonds.fondsNo}`
+    if (this.link) {
+      this.generateQrcode()
+    }
   },
+
   methods: {
     generateQrcode() {
       const qrcodeRef = this.$refs.qrcode

src/views/faceRegisterH5/error.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="face-mobile">
+    <!-- 查不到用户信息得情况下 -->
+    <div class="face-valid">
+      <img src="@/assets/images/faceH5/img1.png" alt="">
+      <p>读者信息验证失败！</p>
+      <div class="return-btn" @click="returnValid">重新验证</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Error',
+  data() {
+    return {
+    }
+  },
+  watch: {
+  },
+  methods: {
+    returnValid() {
+      this.$router.push({ path: '/faceRegisterH5' })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/faceMobile.scss";
+</style>
+

src/views/faceRegisterH5/index.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="face-mobile">
+    <div class="face-mobile-bg" />
+    <div class="face-mobile-content">
+      <!-- <h4>读者信息验证</h4> -->
+      <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="110px">
+        <el-form-item label="读者证号" prop="readNo">
+          <el-input v-model="form.readNo" placeholder="请输入" />
+        </el-form-item>
+        <el-form-item v-if="checkReaderInfo && checkReaderInfo.checkReaderType===1" label="身份证号" prop="readIdCard">
+          <el-input v-model="form.readIdCard" placeholder="请输入" />
+        </el-form-item>
+        <el-form-item v-if="checkReaderInfo && checkReaderInfo.checkReaderType===2" label="读者证密码" prop="password">
+          <el-input v-model="form.password" placeholder="请输入" />
+        </el-form-item>
+        <el-form-item v-if="checkReaderInfo && checkReaderInfo.checkReaderType===3" label="读者姓名" prop="readName">
+          <el-input v-model="form.readName" placeholder="请输入" />
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="submit-btn" @click="submitForm('form')">下一步</div>
+  </div>
+</template>
+
+<script>
+import { FetchInitReaderCheck, FetchCheckReader } from '@/api/faceRecognition/index'
+import { mapGetters } from 'vuex'
+export default {
+  name: 'FaceRegisterH5',
+  data() {
+    return {
+      form: {
+        readNo: '',
+        readIdCard: '',
+        password: '',
+        readName: ''
+      },
+      checkReaderInfo: {},
+      rules: {
+        readNo: [
+          { required: true, message: '请输入读者证号', trigger: 'blur' }
+        ],
+        readIdCard: [
+          { required: true, message: '请输入身份证号', trigger: 'blur' }
+        ],
+        password: [
+          { required: true, message: '请输入读者证密码', trigger: 'blur' }
+        ],
+        readName: [
+          { required: true, message: '请输入读者姓名', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'baseApi',
+      'user'
+    ])
+  },
+  watch: {
+  },
+  mounted() {
+    this.getInitReaderCheck()
+  },
+  methods: {
+    getInitReaderCheck() {
+      // { id: 1, name: '身份证读者证验证' },
+      // { id: 2, name: '读者证密码验证' },
+      // { id: 3, name: '读者证读者名称验证' }
+      FetchInitReaderCheck({ 'libcode': this.user.fonds.fondsNo }).then(res => {
+        console.log('res', res)
+        this.checkReaderInfo = res
+        // {
+        // "libraryIp": null,
+        // "strLibcode": "1201",
+        // "strFTZNCode": null,
+        // "checkReaderType": 1,
+        // "checkReaderIp": null
+        // }
+      }).catch(err => {
+        console.log(err)
+      })
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          // alert('submit!')
+          // this.$router.push({ path: '/faceError' })
+          // this.$router.push({ path: '/faceSuccess' })
+          // this.$router.push({ path: '/faceRegistered' })
+          this.$router.push({ path: '/faceSelfRegister' })
+          const params = {
+            'strLibcode': this.checkReaderInfo.strLibcode
+          }
+          console.log('params', params)
+          // FetchCheckReader(params).then(res => {
+          //   console.log('res', res)
+          // }).catch(err => {
+          //   console.log(err)
+          // })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/faceMobile.scss";
+</style>

src/views/faceRegisterH5/registered.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="face-mobile">
+    <!-- 查到用户信息，并且已经绑定过人脸 -->
+    <div class="face-valid">
+      <img src="@/assets/images/faceH5/img3.png" alt="">
+      <p>读者您好，您已注册过人脸信息！</p>
+      <div class="reg-btn-group">
+        <div class="return-btn other-return" @click="returnValid">返回首页</div>
+        <div class="return-btn" @click="toSelfRegister">重新注册</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Registered',
+  data() {
+    return {
+    }
+  },
+  watch: {
+  },
+  methods: {
+    returnValid() {
+      this.$router.push({ path: '/faceRegisterH5' })
+    },
+    toSelfRegister() {
+      this.$router.push({ path: '/faceSelfRegister' })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/faceMobile.scss";
+</style>
+

src/views/faceRegisterH5/selfRegister.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="face-mobile register-mobile">
+    <div class="photo-container">
+      <div class="photo-preview" @click="openPhotoOptions">
+        <img v-if="imageUrl !== '' || imageUrl !== null" :src="imageUrl || require('@/assets/images/user.jpg')" alt="人员照片">
+        <img v-else src="require('@/assets/images/user.jpg')" alt="人员照片">
+        <!-- <i class="iconfont icon-cuowu1 clear-img-btn" @click.stop="clearImage" /> -->
+      </div>
+      <div class="photo-tips">
+        <p>注意事项：</p>
+        <span>1.请提供正面清晰照，不要佩戴眼镜，头部位于照片中央，五官无遮挡。</span>
+        <span>2.照片背景干净，照片中只有注册者一人</span>
+        <span>3.不要使用美图类软件做过修饰的照片</span>
+        <span>4.照片像素 > 600x600</span>
+        <div v-if="imageUrl" class="clear-img-btn" @click="clearImage">删除照片</div>
+      </div>
+    </div>
+    <div class="face-mobile-content register-valid">
+      <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="100px">
+        <el-form-item label="读者证号" prop="barcode">
+          <el-input v-model="form.barcode" disabled />
+        </el-form-item>
+        <el-form-item label="姓名" prop="name">
+          <el-input v-model="form.idCard" disabled />
+        </el-form-item>
+        <el-form-item label="身份证号" prop="idCard">
+          <el-input v-model="form.idCard" disabled />
+        </el-form-item>
+        <el-form-item label="联系方式" prop="phone">
+          <el-input v-model="form.phone" disabled />
+        </el-form-item>
+        <el-form-item label="性别" prop="sex">
+          <el-input v-model="form.sex" disabled />
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="submit-btn" @click="submitForm">提交</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SelfRegister',
+  data() {
+    return {
+      form: {
+        barcode: '',
+        idCard: '',
+        phone: '',
+        name: '',
+        sex: ''
+      },
+      imageUrl: '',
+      rules: {
+        // barcode: [
+        //   { required: true, message: '请输入读者证号', trigger: 'blur' }
+        // ],
+        // idCard: [
+        //   { required: true, message: '请输入身份证号', trigger: 'blur' }
+        // ],
+        // password: [
+        //   { required: true, message: '请输入读者证密码', trigger: 'blur' }
+        // ],
+        // name: [
+        //   { required: true, message: '请输入读者姓名', trigger: 'blur' }
+        // ]
+      }
+    }
+  },
+  watch: {
+  },
+  methods: {
+    submitForm(formName) {
+      this.$router.push({ path: '/faceSuccess' })
+      // this.$refs[formName].validate((valid) => {
+      //   if (valid) {
+      //     // alert('submit!')
+      //     // this.$router.push({ path: '/faceError' })
+      //     // this.$router.push({ path: '/faceSuccess' })
+      //     this.$router.push({ path: '/faceRegistered' })
+      //   } else {
+      //     console.log('error submit!!')
+      //     return false
+      //   }
+      // })
+    },
+    openPhotoOptions() {
+      const input = document.createElement('input')
+      input.type = 'file'
+      input.accept = 'image/*'
+      // input.capture = 'camera'
+      input.onchange = (e) => {
+        const file = e.target.files[0]
+        if (file) {
+          this.imageUrl = URL.createObjectURL(file)
+        }
+      }
+      input.click()
+    },
+    clearImage() {
+      this.imageUrl = ''
+    }
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/faceMobile.scss";
+</style>
+

src/views/faceRegisterH5/success.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="face-mobile">
+    <div class="face-valid">
+      <img src="@/assets/images/faceH5/img2.png" alt="">
+      <p>人脸注册成功！</p>
+      <div class="return-btn" @click="returnValid">返回首页</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Success',
+  data() {
+    return {
+    }
+  },
+  watch: {
+  },
+  methods: {
+    returnValid() {
+      this.$router.push({ path: '/faceRegisterH5' })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/faceMobile.scss";
+</style>
+