586 lines
20 KiB
Plaintext
586 lines
20 KiB
Plaintext
<template>
|
||
<view class="cu-custom">
|
||
<view class="cu-bar fixed ba" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;z-index: 999;background-color: white;border: 0 !important;">
|
||
<block v-if="is_real_approved == 0">
|
||
<view @tap="gotoBack">
|
||
<image class="returnIcon_1" src="https://images.ufutx.com/202104/09/91c42ff8b2da0c0ac0576fbc4dc163f6.png" mode="widthFix"></image>
|
||
</view>
|
||
</block>
|
||
<block v-else>
|
||
<view @tap="redirectTo('/pages/users/myCertification')">
|
||
<image class="returnIcon_1" src="https://images.ufutx.com/202104/09/91c42ff8b2da0c0ac0576fbc4dc163f6.png" mode="widthFix"></image>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
<view style="height: {{navHeight}}px"></view>
|
||
<view v-if="is_real_approved == 0" style="height: 112rpx"></view>
|
||
<view class="artificialBox">
|
||
<view class="shootingText font_30 bold">请拍摄上传手持身份证照</view>
|
||
<view>
|
||
<view class="shootingPhoto" style="{{'background-image:url(' + photo[0] + ');'}}" @tap="chooseimage()">
|
||
<block v-if="audit && !holdShow && is_real_approved != 1">
|
||
<view class="{{audit?'auditPhoto':''}}"></view>
|
||
<view class="auditIconBox">
|
||
<image class="auditIcon" src="https://images.ufutx.com/202104/12/c8a405728facde60462c5530fc9813a9.png" mode="widthFix"></image>
|
||
<view class="font_30" v-if="is_real_approved == 2">正在审核中</view>
|
||
<view class="font_30" v-if="is_real_approved == 0">审核失败，请重新上传</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
<view class="m_jub">
|
||
<view class="font_30 bold">请拍摄身份证正/反面</view>
|
||
<view class="f-fcc m_img">
|
||
<view>
|
||
<view class="m_lt" style="{{'background-image:url(' + photo[1] + ');'}}" @tap="chooseimage('just')">
|
||
<view class="m_mte f-fcc" v-if="audit && !justShow && is_real_approved != 1">
|
||
<view class="auditIconBox">
|
||
<image class="auditIcon" src="https://images.ufutx.com/202104/12/c8a405728facde60462c5530fc9813a9.png" mode="widthFix"></image>
|
||
<view class="font_24" v-if="is_real_approved == 2">正在审核中</view>
|
||
<view class="font_24" v-if="is_real_approved == 0">审核失败，请重新上传</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="font_24 color666 f-fcc">拍摄人像面</view>
|
||
</view>
|
||
<view>
|
||
<view class="m_rt" style="{{'background-image:url(' + photo[2] + ');'}}" @tap="chooseimage('back')">
|
||
<view class="m_mte f-fcc" v-if="audit && !backShow && is_real_approved != 1">
|
||
<view class="auditIconBox">
|
||
<image class="auditIcon" src="https://images.ufutx.com/202104/12/c8a405728facde60462c5530fc9813a9.png" mode="widthFix"></image>
|
||
<view class="font_24" v-if="is_real_approved == 2">正在审核中</view>
|
||
<view class="font_24" v-if="is_real_approved == 0">审核失败，请重新上传</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="font_24 color666 f-fcc">拍摄国徽面</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="shootingRequirements">
|
||
<view class="requirementsTitle bold font_30">拍摄手持身份证要求</view>
|
||
<view class="font_26 color-666">
|
||
<view class="requirements">请手持本人有效身份证件正面拍照;</view>
|
||
<view class="requirements">拍摄时确保照片的内容完整并清晰可见，仅支持jpg、png格式；</view>
|
||
<view class="requirements">请上传彩色图像。</view>
|
||
</view>
|
||
</view>
|
||
<view class="submitButton font_30 {{showSubmit?'actionSubmit':''}}" @tap="request" v-if="!audit">提交认证</view>
|
||
<view class="submitButton font_30 {{againShow?'actionSubmit':''}}" @tap="request" v-if="audit && is_real_approved != 1">重新提交</view>
|
||
<view class="font_30 text-center" style="color: #f33b6c;padding-top: 30rpx;padding-bottom: 40rpx;" @tap="redirectTo('/pages/users/realName')" v-if="audit && is_real_approved == 0">人脸识别</view>
|
||
<view :class="{'show':modalName=='showAudit' }" class="cu-modal ">
|
||
<view class="audit_box">
|
||
<image class="audit_icon" src="https://images.ufutx.com/202101/21/be17739e07f9bb0de1c629dc0b84a505.png" mode="widthFix"></image>
|
||
<view class="font_36 color-333 bold">提交成功，等待审核</view>
|
||
<view class="audit_prompt font_28 color-333">审核结果将在1～3个工作日内通知，请耐心等待；如有需要，请直接联系</view>
|
||
<view class="font_28 color-333">客服<span class="color-theme" @tap.stop="clickPhone">18922809346</span></view>
|
||
<view class="know_that" @tap="redirectTo('/pages/users/myCertification')">我知道了</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="is_real_approved == 0" class="m_top_tips" style="margin-top: {{navHeight}}px;">{{approve_history_body_reason}}</view>
|
||
</template>
|
||
|
||
<script>
|
||
import wepy from '@wepy/core'
|
||
import https from '../../mixins/https'
|
||
import base from '../../mixins/base'
|
||
import {service} from '../../config'
|
||
|
||
const app = getApp().$wepy.$options
|
||
|
||
wepy.page({
|
||
mixins: [base, https],
|
||
data: {
|
||
photo: [
|
||
'https://images.ufutx.com/202105/24/c31d4fcdbb7c54e0d7e30ee8a86ad880.png',
|
||
'https://images.ufutx.com/202105/24/3c35a0abe55577445d54761a3f05d596.png',
|
||
'https://images.ufutx.com/202105/24/154245e9f9aca0c5e4281aa2fd0f4b85.png'
|
||
],
|
||
StatusBar: app.globalData.StatusBar,
|
||
CustomBar: app.globalData.CustomBar,
|
||
Custom: app.globalData.Custom,
|
||
navHeight: '84',
|
||
nodata: false,
|
||
audit: false,
|
||
actionSubmit: false,
|
||
loading: false,
|
||
is_real_approved: '',
|
||
chat_user_id: '',
|
||
modalName: '',
|
||
showSubmit: false,
|
||
imgIndex: 0,
|
||
setImgArr: [],
|
||
backShow: false,
|
||
justShow: false,
|
||
holdShow: false,
|
||
againShow: false,
|
||
approve_history_body_reason: '',
|
||
uploadData: null
|
||
},
|
||
onShow() {
|
||
},
|
||
onLoad(e) {
|
||
if (e.chat_user_id) {
|
||
this.chat_user_id = e.chat_user_id
|
||
}
|
||
let menuButtonObject = wx.getMenuButtonBoundingClientRect()
|
||
this.initPageData()
|
||
wx.getSystemInfo({
|
||
success: res => {
|
||
let statusBarHeight = res.statusBarHeight,
|
||
navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2 // 导航高度
|
||
this.navHeight = navHeight
|
||
}
|
||
})
|
||
},
|
||
onPullDownRefresh() {},
|
||
|
||
methods: {
|
||
|
||
uploadFile(filePaths, text) {
|
||
let vm = this
|
||
console.log(filePaths, 'filePath')
|
||
console.log(vm.uploadData, 'vm.uploadData')
|
||
if (vm.uploadData) {
|
||
vm.$showLoading(`上传中...`)
|
||
let fileName = new Date().getTime() + Math.floor(Math.random() * 150) + '.' + filePaths.split('.').pop().toLowerCase()
|
||
let filePathUrl = vm.uploadData.host + '/' + vm.uploadData.dir + fileName
|
||
wx.uploadFile({
|
||
url: vm.uploadData.host,
|
||
filePath: filePaths,
|
||
name: 'file', // 必须填file。
|
||
formData: {
|
||
key: vm.uploadData.dir + fileName,
|
||
policy: vm.uploadData.policy,
|
||
OSSAccessKeyId: vm.uploadData.access_id,
|
||
signature: vm.uploadData.signature
|
||
},
|
||
header: {
|
||
'Authorization': 'Bearer ' + wx.getStorageSync('token'),
|
||
'X-Requested-With': 'XMLHttpRequest'
|
||
},
|
||
success: (res) => {
|
||
if (filePathUrl && !vm.audit) {
|
||
vm.nodata = true
|
||
if (text) {
|
||
if (text == 'back') {
|
||
vm.photo.splice(2, 1, filePathUrl)
|
||
} else if (text == 'just') {
|
||
vm.photo.splice(1, 1, filePathUrl)
|
||
}
|
||
} else {
|
||
vm.photo.splice(0, 1, filePathUrl)
|
||
}
|
||
setTimeout(() => {
|
||
vm.loading = false
|
||
}, 500)
|
||
} else if (filePathUrl && vm.audit) {
|
||
// vm.showSubmit = true
|
||
vm.nodata = true
|
||
if (text) {
|
||
if (text == 'back') {
|
||
vm.photo.splice(2, 1, filePathUrl)
|
||
vm.backShow = true
|
||
} else if (text == 'just') {
|
||
vm.photo.splice(1, 1, filePathUrl)
|
||
vm.justShow = true
|
||
}
|
||
} else {
|
||
vm.photo.splice(0, 1, filePathUrl)
|
||
vm.holdShow = true
|
||
}
|
||
setTimeout(() => {
|
||
vm.loading = false
|
||
}, 500)
|
||
}
|
||
wx.hideLoading()
|
||
console.log(vm.photo)
|
||
console.log(vm.setImgArr)
|
||
if (vm.photo[0] != vm.setImgArr[0] && vm.photo[1] != vm.setImgArr[1] && vm.photo[2] != vm.setImgArr[2]) {
|
||
vm.showSubmit = true
|
||
}
|
||
if (vm.audit) {
|
||
vm.againShow = true
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
wx.showModal({ // 使用模态框提示用户进行操作
|
||
title: `温馨提示：`,
|
||
content: `很抱歉` + err,
|
||
showCancel: false,
|
||
confirmText: `确定`,
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
vm.$gotoBack(1)
|
||
vm.$emit('changeVal', '')
|
||
}
|
||
}
|
||
})
|
||
}
|
||
})
|
||
} else {
|
||
let vm = this
|
||
vm.$showToast(`网络环境异常，请稍后重试`)
|
||
wx.request({
|
||
url: `${service.host}/ali/upload/signature`,
|
||
header: {
|
||
'Authorization': 'Bearer ' + wx.getStorageSync('token'),
|
||
'X-Requested-With': 'XMLHttpRequest'
|
||
},
|
||
method: 'get',
|
||
data: {},
|
||
success: ({code, data}) => {
|
||
console.log(filePaths, data, 'd=====')
|
||
vm.uploadData = data.data
|
||
vm.$app.$options.globalData.uploadData = data.data
|
||
vm.uploadFile(filePaths)
|
||
}
|
||
})
|
||
console.log('1111111111')
|
||
}
|
||
},
|
||
|
||
chooseimage(type) {
|
||
let vm = this
|
||
wx.chooseMedia({
|
||
count: 1,
|
||
// sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
||
sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
||
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
|
||
success: (res) => {
|
||
vm.loading = true
|
||
console.log(res, 'res====')
|
||
vm.uploadFile(res.tempFiles[0].tempFilePath, type)
|
||
},
|
||
fail: () => {
|
||
vm.loading = false
|
||
}
|
||
})
|
||
},
|
||
request() {
|
||
let that = this,
|
||
data = {
|
||
photos: that.photo
|
||
}
|
||
if (wx.getStorageSync('from_user_id')) {
|
||
data.from_user_id = wx.getStorageSync('from_user_id')
|
||
}
|
||
if (that.chat_user_id) {
|
||
data.chat_user_id = that.chat_user_id
|
||
}
|
||
if (that.showSubmit || that.againShow) {
|
||
if (!that.nodata) {
|
||
return that.$showToast('请上传手持身份证照')
|
||
}
|
||
that.$showLoading('提交中...')
|
||
that.$post({url: `${service.host}/user/manual/approve`, data}).then(({code, res}) => {
|
||
that.loading = false
|
||
that.modalName = 'showAudit'
|
||
that.againShow = false
|
||
that.backShow = false
|
||
that.justShow = false
|
||
that.holdShow = false
|
||
// }
|
||
that.is_real_approved = 2
|
||
that.initPageData()
|
||
})
|
||
} else {
|
||
if (that.is_real_approved == 1) {
|
||
that.$showToast('已通过真人认证')
|
||
return
|
||
}
|
||
if (that.audit && this.is_real_approved == 2) {
|
||
that.$showToast('正在审核中...')
|
||
return
|
||
}
|
||
that.$showToast('请重新上传身份证照')
|
||
}
|
||
},
|
||
|
||
// 初始化页面数据
|
||
initPageData() {
|
||
this.$get({url: `${service.host}/user/approve/profile`}, {
|
||
success: ({code, data}) => {
|
||
this.is_real_approved = data.is_real_approved
|
||
if (data.identification_photos.length != 0) {
|
||
this.nodata = true
|
||
this.audit = true
|
||
this.againShow = true
|
||
this.photo = data.identification_photos
|
||
}
|
||
wx.setStorageSync('authenticationImg', this.photo)
|
||
this.approve_history_body_reason = data.approve_history_body_reason
|
||
}
|
||
})
|
||
},
|
||
gotoBack() {
|
||
wx.navigateBack({
|
||
delta: 1
|
||
})
|
||
},
|
||
goto(url) {
|
||
wx.navigateTo({url: url})
|
||
},
|
||
clickPhone() {
|
||
wx.makePhoneCall({
|
||
phoneNumber: '18922809346'
|
||
})
|
||
},
|
||
redirectTo(url) {
|
||
console.log(url)
|
||
if (wx.getStorageSync('type') == 'marriage') {
|
||
wx.navigateBack({
|
||
delta: 1
|
||
})
|
||
return
|
||
}
|
||
if (wx.getStorageSync('realNameUrl')) {
|
||
wx.navigateBack({
|
||
delta: 1
|
||
})
|
||
} else {
|
||
this.$redirectTo(url)
|
||
}
|
||
}
|
||
}
|
||
|
||
})
|
||
</script>
|
||
|
||
<style lang="less">
|
||
|
||
page{
|
||
background: #ffffff;
|
||
}
|
||
.returnIcon_1{
|
||
width: 14rpx;
|
||
height: 28rpx;
|
||
margin-left: 30rpx;
|
||
margin-right: 22rpx;
|
||
vertical-align: middle;
|
||
}
|
||
.artificialBox{
|
||
margin: 0 30rpx;
|
||
padding-bottom: 30rpx;
|
||
.shootingText{
|
||
padding: 40rpx 0;
|
||
color: #212121;
|
||
}
|
||
.shootingPhoto{
|
||
position: relative;
|
||
width: 628rpx;
|
||
height: 398rpx;
|
||
border: 1rpx solid #fff4f7;
|
||
display: block;
|
||
margin: 0 auto;
|
||
border-radius: 16rpx;
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
background-position: center;
|
||
box-shadow: 0 0 26rpx rgba(0, 0, 0, .1);
|
||
.auditPhoto{
|
||
width: 628rpx;
|
||
height: 398rpx;
|
||
border: 1rpx solid #fff4f7;
|
||
background: rgba(0, 0, 0, 0.3);
|
||
z-index: 1;
|
||
border-radius: 16rpx;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
.auditIconBox{
|
||
position: absolute;
|
||
z-index: 2;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
text-align: center;
|
||
color: #ffffff;
|
||
.auditIcon{
|
||
width: 56rpx;
|
||
height: 60rpx;
|
||
margin-bottom: 6rpx;
|
||
}
|
||
}
|
||
}
|
||
.shootingRequirements{
|
||
margin: 80rpx 60rpx 80rpx 0;
|
||
.requirementsTitle{
|
||
color: #212121;
|
||
margin-bottom: 14rpx;
|
||
}
|
||
.requirements{
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
.submitButton{
|
||
width: 400rpx;
|
||
height: 80rpx;
|
||
background: linear-gradient(270deg, #FF85A5 0%, #FF5380 100%);
|
||
border-radius: 40rpx;
|
||
opacity: 0.6;
|
||
color: #fff;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.actionSubmit{
|
||
opacity: 1;
|
||
}
|
||
.m_jub {
|
||
padding-top: 60rpx;
|
||
.m_img {
|
||
padding-top: 40rpx;
|
||
.m_lt,
|
||
.m_rt {
|
||
width: 300rpx;
|
||
height: 190rpx;
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
background-position: center;
|
||
box-shadow: 0 0 26rpx rgba(0, 0, 0, .1);
|
||
border-radius: 8rpx;
|
||
margin-bottom: 20rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
.m_mte {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
z-index: 2;
|
||
background-color: rgba(0,0,0,.3);
|
||
.auditIconBox{
|
||
position: absolute;
|
||
z-index: 2;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
text-align: center;
|
||
color: #ffffff;
|
||
line-height: 28rpx;
|
||
.auditIcon{
|
||
width: 48rpx;
|
||
height: 52rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.m_lt {
|
||
margin-right: 15rpx;
|
||
}
|
||
.m_rt {
|
||
margin-left: 15rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.z_auditMask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100vw;
|
||
height: 123vh;
|
||
background: rgba(0, 0, 0, .7);
|
||
z-index: 999;
|
||
.z_auditAnimation {
|
||
position: relative;
|
||
top: 16vh;
|
||
animation: img-gradient 500ms linear;
|
||
animation-fill-mode: forwards;
|
||
@keyframes img-gradient {
|
||
from {
|
||
margin-top: -50%;
|
||
}
|
||
to {
|
||
margin-top: 0;
|
||
}
|
||
}
|
||
}
|
||
.z_auditBounced{
|
||
width: 80%;
|
||
padding: 60px 0;
|
||
margin: 0 auto;
|
||
border-radius: 30px;
|
||
text-align: center;
|
||
background-color: #ffffff;
|
||
.successfulIcon{
|
||
width: 192px;
|
||
height: 180px;
|
||
}
|
||
.auditPrompt{
|
||
margin: 62px 30px;
|
||
}
|
||
.KnowThe{
|
||
margin: 0 auto;
|
||
width: fit-content;
|
||
padding: 20px 76px 20px 82px;
|
||
letter-spacing: 1px;
|
||
background: linear-gradient(180deg, #E2597C 0%, #D92553 100%);
|
||
border-radius: 40px;
|
||
}
|
||
}
|
||
}
|
||
.audit_box{
|
||
position: relative;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
width: 600rpx;
|
||
max-width: 100%;
|
||
background-color: #ffffff;
|
||
border-radius: 24rpx;
|
||
overflow: hidden;
|
||
margin-top: -70rpx;
|
||
.audit_icon{
|
||
width: 192rpx;
|
||
height: 180rpx;
|
||
display: block;
|
||
margin: 60rpx auto 20rpx auto;
|
||
}
|
||
.audit_prompt{
|
||
padding-top: 40rpx;
|
||
margin: 0 36rpx;
|
||
}
|
||
.know_that{
|
||
width: 280rpx;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
background: #ff5380;
|
||
border-radius: 40rpx;
|
||
color: #fff;
|
||
margin: 36rpx auto 46rpx auto;
|
||
}
|
||
}
|
||
.m_top_tips {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
//height: 112rpx;
|
||
background-color: #FFF4F7;
|
||
padding: 20rpx 30rpx;
|
||
font-size: 26rpx;
|
||
font-weight: 400;
|
||
color: #F33B6C;
|
||
line-height: 36rpx;
|
||
}
|
||
</style>
|
||
<config>
|
||
{
|
||
navigationBarTitleText: '人工认证',
|
||
navigationStyle: 'custom',
|
||
enablePullDownRefresh: true,
|
||
backgroundColorTop: '#ffffff',
|
||
backgroundColorBottom: '#ffffff',
|
||
usingComponents: {
|
||
cuCustom: '~@/components/cuCustom'
|
||
}
|
||
}
|
||
</config>
|