yky-wx-components1
Version:
Taro实现微信小程序红包雨效果
630 lines (596 loc) • 21.8 kB
JavaScript
import Taro, { PureComponent } from '@tarojs/taro'
import { View,Camera } from '@tarojs/components'
import { AtButton,AtIcon,AtFloatLayout} from 'taro-ui'
// import api from '../../../api/api'
import {toast} from '../../global_data'
import {imgUrl} from '../utils/utils'
import IdFront from '../assets/images/electronicContract/id-front.png'
const TAKE_PHOTO = '$_takephoto'
const TAKE_FACE = '$_takeface'
export default class VideoVerify extends PureComponent{
static options = {
addGlobalClass: true
}
config = {
navigationStyle: 'custom'
}
constructor () {
super(...arguments)
this.state = {
title: '场景存证',
faceBtnfonts:'开始人脸检测',
idcardBtnfonts:'识别身份证',
loadingMsg: '正在保存中...',
ctx: '',
faceLoadingDisabled: false,
idcardLoadingDisabled:false,
faceDisabled:false,
idcardDisabled:true,
flag: true,
flag1:false,
flag2:false,
dis: false,
times: false,
showTakeMode:false,//切换照相和上传开关
isphotoOrCamera:'0',//'0':拍照，'1':照相
showIdTake:false,//显示身份上传模块
showFaceCamera:true,//显示人脸识别模块
idBtnDisabled:true,//提交身份信息按钮的禁用标识
idPicUrl:'',//上传人脸正面照
backPicUrl:'',//国徽照
idCardUUID:'',//身份验证图片上传后的id
}
}
componentWillMount(){
let userInfo = Taro.getStorageSync('userInfo');
let publicsecurityCheck = userInfo.publicsecurityCheck;
if(publicsecurityCheck==='true'){
this.setState({
showFaceCamera:true,
showIdTake:false
})
}else if(publicsecurityCheck==='false'){
this.setState({
showFaceCamera:false,
showIdTake:true
})
}
}
componentDidMount(){
this.setNavSize()
}
//点击弹窗
handleChangeHide (e){
// e.stopPropagation()
this.setState({
showTakeMode:true
})
}
componentDidShow(){
const that = this
Taro.getSetting({
success: (res) => {
console.log(res)
if (!res.authSetting['scope.camera']) {
Taro.authorize({
scope: 'scope.camera',
success: (r) => {
if (r.errMsg == 'authorize:ok') {
that.setState({
flag: true,
dis: false
})
}
},
fail: (r1) => {
//第一次进来拒绝授权
if (r1.errMsg == 'authorize:fail auth deny') {
Taro.navigateBack({ delta: 1})
}else if(r1.errCode == '0') {
//拒绝之后再进入
that.setState({
dis: true,
flag: false
})
}
}
})
} else {
that.setState({
flag: true,
dis: false
})
}
}
})
this.setState({
ctx:Taro.createCameraContext()
})
}
//返回上一级页面
goBack() {
Taro.navigateBack()
}
// nav-bar高度
setNavSize () {
let sysinfo = Taro.getSystemInfoSync()
let statusHeight = sysinfo.statusBarHeight
let isiOS = sysinfo.system.indexOf('iOS') > -1
let navHeight
if (!isiOS) {
navHeight = 48
} else {
navHeight = 44
}
this.setState({
status: statusHeight,
navHeight: navHeight
})
}
//返回上一步
turnBack(){
const { showFaceCamera,showIdTake,flag1 } = this.state
Taro.hideLoading()
this.setState({
showFaceCamera:false,
showIdTake:true,
flag1:false
})
}
//上传正面照片
handleUploadFrontPic(){
const {baseURL}=this.props
const that = this
Taro.chooseImage({
count:1,
success: (res) =>{
console.log(res)
Taro.showLoading({title:"图片上传中..."})
if(res.errMsg==='chooseImage:ok'){
that.setState({
idPicUrl:res.tempFiles[0].path
})
Taro.uploadFile({
url:`${baseURL}${this.props.basicBusiness}`,
filePath:res.tempFiles[0].path,
name:'multipartFile',
formData:{
token:Taro.getStorageSync('token') ? Taro.getStorageSync('token') : '',
userFlag:Taro.getStorageSync('userFlag') ? Taro.getStorageSync('userFlag') : '',
fileType:'0'
},
success(r){
Taro.hideLoading()
if(JSON.parse(r.data).success===true){
toast(JSON.parse(r.data).msg,'none',2000)
let idCardUUID = JSON.parse(r.data).obj
that.setState({
idCardUUID,
idBtnDisabled:false
})
// let params = {
// token:Taro.getStorageSync('token') ? Taro.getStorageSync('token') : '',
// userFlag:Taro.getStorageSync('userFlag') ? Taro.getStorageSync('userFlag') : '',
// idCardUUID,
// }
// api.getBaiduFaceNucleus(params).then(result =>{
// if(result.success===true){
// Taro.hideLoading()
// toast(result.msg,'none',2000).then(()=>{
// that.setState({
// idBtnDisabled:false,
// })
// })
// }else{
// Taro.hideLoading()
// toast(result.msg,'none',2000).then(()=>{
// that.setState({
// idBtnDisabled:true,
// })
// })
// }
// })
}else{
toast(JSON.parse(r.data).msg,'none',2000)
}
}
})
}
}
})
}
//提交身份证图片
handleSubmitIdInfo(){
const { showFaceCamera,showIdTake,idBtnDisabled } = this.state
this.setState({
showFaceCamera:true,
showIdTake:false,
idcardDisabled:true
})
}
//关闭拍照/拍摄弹窗
handleCloseTakeMode(){
this.setState({
showTakeMode:false
})
}
//拍摄
handleTakeCamera(){
this.setState({
isphotoOrCamera:'1',
flag2:true,
showTakeMode:false
})
}
//拍照
handleTakePhoto(){
const that = this
that.setState({
isphotoOrCamera:'0',
showTakeMode:false
},()=>{
that.handleUploadFrontPic()
})
}
//点击拍照按钮
handleCameraClick(){
const {baseURL}=this.props
const {ctx,loadingMsg} = this.state
const that = this
Taro.showLoading({ title: loadingMsg })
setTimeout(()=>{
ctx.takePhoto({
quality: "normal",
success:(res)=>{
console.log(res)
if(res.errMsg==='takePhoto:ok'){
Taro.uploadFile({
url:`${baseURL}${this.props.basicBusiness}`,
filePath:res.tempImagePath,
name:'multipartFile',
formData:{
token:Taro.getStorageSync('token') ? Taro.getStorageSync('token') : '',
userFlag:Taro.getStorageSync('userFlag') ? Taro.getStorageSync('userFlag') : '',
fileType:'0'
},
success(r){
if(JSON.parse(r.data).success===true){
Taro.hideLoading()
toast(JSON.parse(r.data).msg,'none',2000)
let idCardUUID = JSON.parse(r.data).obj
that.setState({
idCardUUID,
showFaceCamera:true,
showIdTake:false,
idcardDisabled:true,
flag2:false
})
}else{
Taro.hideLoading()
toast(JSON.parse(r.data).msg,'none',2000)
}
}
})
}
}
})
},2000)
}
takePhote = (type) => {
const {baseURL}=this.props
const { ctx, faceLoadingDisabled, idcardLoadingDisabled,loadingMsg,idCardUUID } = this.state
const userInfo = Taro.getStorageSync('userInfo')
const publicsecurityCheck = userInfo.publicsecurityCheck || 'false'
const receivablesId=this.$router.params.receivablesId || ''
const backUrl=this.props.backUrl||'pages/approvel/index'
console.log(backUrl,'zzz')
const that = this
if(type===TAKE_PHOTO){//人脸识别
// Taro.showLoading({ title: loadingMsg })
if (!faceLoadingDisabled) {
that.setState({
faceLoadingDisabled: true,
flag1:true
}, () => {
setTimeout(()=>{
ctx.takePhoto({
quality: "normal",
success: (res) => {
Taro.uploadFile({
url:`${baseURL}${this.props.basicBusiness}`,
filePath:res.tempImagePath,
name:'multipartFile',
formData:{
token:Taro.getStorageSync('token') ? Taro.getStorageSync('token') : '',
userFlag:Taro.getStorageSync('userFlag') ? Taro.getStorageSync('userFlag') : '',
fileType:'1'
},
success(r){
console.log('第二次请求'+ r)
if(JSON.parse(r.data).success===true){
let faceImageUUID = JSON.parse(r.data).obj
let params = {
token:Taro.getStorageSync('token') ? Taro.getStorageSync('token') : '',
userFlag:Taro.getStorageSync('userFlag') ? Taro.getStorageSync('userFlag') : '',
idCardUUID,
faceImageUUID,
receivablesId
}
console.log("ddd")
Taro.navigateBack({
url:`${backUrl}?testFace=true`
})
// api.getBaiduFaceNucleus(params).then(result =>{
// if(result.success===true){
// // Taro.hideLoading()
// if(publicsecurityCheck){//如果只有人脸识别
// toast('人脸验证成功！','none',2000).then(()=>{
// that.setState({
// faceLoadingDisabled:false,
// flag:false,
// flag1:false
// })
// Taro.navigateTo({
// url:`${backUrl}?testFace=true`
// })
// })
// }else{//如果人脸+身份验证
// toast(result.msg,'none',5000).then(()=>{
// that.setState({
// faceLoadingDisabled:false,
// idcardDisabled:false,
// faceDisabled:true,
// flag1:false
// })
// })
// }
// }else{
// // Taro.hideLoading()
// toast(result.msg,'none',5000).then(()=>{
// that.setState({
// faceLoadingDisabled:false,
// flag1:false
// })
// })
// }
// })
}
}
})
}
})
},2000)
})
}
}else if(type===TAKE_FACE){
Taro.showLoading({ title: loadingMsg })
if (!idcardLoadingDisabled) {
that.setState({
idcardLoadingDisabled: true
}, () => {
ctx.takePhoto({
quality: "normal",
success: (res) => {
Taro.uploadFile({
url:`${baseURL}${this.props.basicBusiness}`,
filePath:res.tempImagePath,
name:'multipartFile',
formData:{
token:Taro.getStorageSync('token') ? Taro.getStorageSync('token') : '',
userFlag:Taro.getStorageSync('userFlag') ? Taro.getStorageSync('userFlag') : '',
fileType:'0'
},
success(r){
console.log(r)
if(JSON.parse(r.data).success===true){
let idCardUUID = JSON.parse(r.data).obj
let params = {
token:Taro.getStorageSync('token') ? Taro.getStorageSync('token') : '',
userFlag:Taro.getStorageSync('userFlag') ? Taro.getStorageSync('userFlag') : '',
idCardUUID,
}
// api.getBaiduFaceNucleus(params).then(result =>{
// if(result.success===true){
// Taro.hideLoading()
// that.setState({
// idcardLoadingDisabled:false,
// flag:false,
// flag1:false
// },()=>{
// Taro.navigateTo({
// url:`${backUrl}?testFace=true`
// })
// })
// }else{
// Taro.hideLoading()
// that.setState({
// idcardLoadingDisabled:false,
// flag1:false
// })
// }
// })
}
}
})
}
})
})
}
}
}
openSet () {
Taro.openSetting()
}
render(){
const {flag,flag1,flag2,dis,idPicUrl,backPicUrl,
faceLoadingDisabled,idcardLoadingDisabled,
faceDisabled,idcardDisabled, showTakeMode,
faceBtnfonts,idcardBtnfonts,showFaceCamera,
idBtnDisabled,showIdTake,isphotoOrCamera
} = this.state;
const userInfo = Taro.getStorageSync('userInfo')
const publicsecurityCheck = userInfo.publicsecurityCheck || 'false'
return (
<View className='faceDetection'>
<View className="nav-box-white">
<View className='nav' style='height: {{status + navHeight}}px'>
<View className='status' style={{'height': this.state.status + 'px'}}></View>
<View className='navbar' style={{'height': this.state.navHeight + 'px'}}>
{/* 返回按钮 */}
<View className='back-icon' onClick={this.goBack.bind(this)}>
<AtIcon value='chevron-left' size='24' color='#333'></AtIcon>
</View>
<View className='nav-title'>
<Text>人脸检测</Text>
</View>
</View>
</View>
</View>
{
showFaceCamera && <View style='margin-top: {{status + navHeight}}px' className='conent-bg' hidden={false}>
<View className='user-face-bg'>
<View className='user-face'>
<View className='camera'>
{
(flag && flag1) ? <View className="cam">
<Camera
device-position='front'
style="width:480rpx;height:480rpx;border-radius:50%;"
frame-size='medium'
flash='off'
binderror='error'
className='camera1'
/>
</View> : null
}
</View>
</View>
</View>
</View>
}
{/*身份证上传模块*/}
{
(showIdTake && isphotoOrCamera==='0') && <View style='padding-top: {{status + navHeight+1}}px;margin:30rpx'>
<View className='header-text'>
<View>上传并提交您的证件照片</View>
<View>为配合国家监督要求，请上传身份证正面照片</View>
</View>
<View className='id-camera'>
<View className="pic-container"
onClick = {this.handleChangeHide.bind(this)}
// onClick={this.handleUploadFrontPic.bind(this)}
>
{
!idPicUrl && <View className='empty'>
<Image src={IdFront}/>
<View ><Text className='p-icon' />点击上传身份证人像面照片</View>
</View>
}
<View className='already'>
{
idPicUrl && <Image src={idPicUrl}/>
}
{/* <Image src={IdFrontImage}/> */}
<View onClick={this.handleChangeHide.bind(this)}><Text className='edit-icon' />重新上传</View>
</View>
</View>
{/* <View className="pic-container" onClick={this.handleUploadBackPic.bind(this)}>
{
!backPicUrl && <View className='empty'>
<Image src={IdSide}/>
<View ><Text className='p-icon' />点击上传身份证国徽面照片</View>
</View>
}
<View className='already'>
{
backPicUrl && <Image src={backPicUrl}/>
}
<Image src={IdFrontImage}/>
<View onClick={this.handleChangeHide.bind(this)}><Text className='edit-icon' />重新上传</View>
</View>
</View> */}
</View>
<View className='btn'><AtButton type='primary' disabled={idBtnDisabled} onClick={this.handleSubmitIdInfo.bind(this)} >提交身份信息</AtButton></View>
</View>
}
{/*切换到后置相机拍照（身份证）*/}
{
(showIdTake && isphotoOrCamera==='1') && <View className="takePic_camera">
{
flag2 && <Camera
// mode="scanCode"
device-position='back'
style="position:absolute;top:0;right:0;bottom:0;left:0;"
frame-size='medium'
flash='off'
binderror='error'
className='camera_takepic'
/>
}
<View className="takepic-btn-container" onClick={this.handleCameraClick.bind(this)}>
<View className="takepic-btn"></View>
</View>
</View>
}
<AtFloatLayout isOpened={showTakeMode} onClose={this.handleCloseTakeMode.bind(this)} className='model-list'>
<View className='list' onClick={this.handleTakeCamera.bind(this)}>
拍摄
{
isphotoOrCamera === '1' && <Image src={`${imgUrl}check.svg`} width='40' height='40'/>
}
</View>
<View className='list' onClick={this.handleTakePhoto.bind(this)}>
相册
{
isphotoOrCamera === '0' && <Image src={`${imgUrl}check.svg`} width='40' height='40'/>
}
</View>
</AtFloatLayout>
{/*人脸识别按钮*/}
{
showFaceCamera && <View className="faceCamera_test">
<View className='text'>请识别人脸</View>
<View className='btn'>
<AtButton
onClick={this.takePhote.bind(this,'$_takephoto')}
type='primary'
disabled={faceDisabled}
loading={faceLoadingDisabled}
>
{ "开始人脸检测" }
</AtButton>
</View>
{
publicsecurityCheck === 'false' && showFaceCamera && <View className='btn'>
<AtButton
onClick={this.turnBack.bind(this)}
// type='primary'
>
上一步
</AtButton>
</View>
}
</View>
}
{/* {
!publicsecurityCheck &&
<View className='btn'>
<AtButton
onClick={this.takePhote.bind(this,'$_takeface')}
type='primary'
disabled={idcardDisabled}
loading={idcardLoadingDisabled}
>
{ idcardBtnfonts }
</AtButton>
</View>
} */}
{
dis && <View className="btn">
<AtButton type='primary' onClick={this.openSet.bind(this)}>打开权限设置</AtButton>
</View>
}
</View>
)
}
}