15 changed files with 557 additions and 4 deletions
-
20src/api/faceRecognition/index.js
-
BINsrc/assets/images/faceH5/btnok.png
-
BINsrc/assets/images/faceH5/img1.png
-
BINsrc/assets/images/faceH5/img2.png
-
BINsrc/assets/images/faceH5/img3.png
-
BINsrc/assets/images/faceH5/top.jpg
-
168src/assets/styles/faceMobile.scss
-
2src/router/index.js
-
25src/router/routers.js
-
17src/views/faceRecognition/module/selfRegister.vue
-
32src/views/faceRegisterH5/error.vue
-
117src/views/faceRegisterH5/index.vue
-
38src/views/faceRegisterH5/registered.vue
-
111src/views/faceRegisterH5/selfRegister.vue
-
31src/views/faceRegisterH5/success.vue
|
After Width: 277 | Height: 120 | Size: 5.8 KiB |
|
After Width: 300 | Height: 300 | Size: 41 KiB |
|
After Width: 300 | Height: 300 | Size: 51 KiB |
|
After Width: 1024 | Height: 1024 | Size: 113 KiB |
|
After Width: 750 | Height: 390 | Size: 148 KiB |
@ -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; |
|||
} |
|||
} |
|||
@ -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> |
|||
|
|||
@ -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> |
|||
@ -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> |
|||
|
|||
@ -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> |
|||
|
|||
@ -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> |
|||
|
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue