qiubinghui
/
zhywpt-sp
關註 1
收藏 0
複製 0
程式碼 問題管理 0 合併請求 0 版本發佈 0 Wiki Activity
瀏覽代碼

实名认证

修改样式逻辑
yangteng 6 天之前
父節點
7d847797e2
當前提交
2684190b28
共有 1 個文件被更改，包括 502 次插入 和 0 次删除
統一視圖 顯示文件統計
  1. 502
    0
      subpackage/personal-center/real-name-authentication.vue

+ 502
- 0
subpackage/personal-center/real-name-authentication.vue 查看文件

<template>
<view class="content-wrap">
<view class="t-card">
<view class="content">
<view class="t-con">
<view class="item-tips">
<view class="title"> 上传后请核对识别信息 </view>
<view class="tip"> 如有错误请及时手动修改 </view>
</view>
<view class="picture-wrapper" @click="takePhotoMode(1)">
<view class="bg">
<view class="">
<view class="name"> 人像面 </view>
<view class="value"> 上传身份证的人像面 </view>
<view class="tip">
<view class="tip-value"> 拍摄规范 </view>
</view>
</view>
<image v-if="!state.form.userIdImgUrl" class="icon" :src="`${$imgUrl}issuance/sfz.png`"
:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
</image>
<image v-else class="icon" :src="strReplace(state.form.userIdImgUrl)"
:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
</view>
</view>
<view class="picture-wrapper" @click="takePhotoMode(2)">
<view class="bg">
<view class="">
<view class="name"> 国徽面 </view>
<view class="value"> 上传身份证的国徽面 </view>
<view class="tip">
<view class="tip-value"> 拍摄规范 </view>
</view>
</view>
<image v-if="!state.form.userIdBackImgUrl" class="icon" :src="`${$imgUrl}issuance/sff.png`"
:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}">
</image>
<image v-else class="icon" :src="strReplace(state.form.userIdBackImgUrl)"
:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
</view>
</view>
</view>
<view class="shibie-wrapper">
<view class="title"> 识别内容如下 </view>
<u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle'>
<u-form-item label="姓名" :left-icon='`${$imgUrl}issuance/point-form.png`'
:left-icon-style='leftIcon'>
<u-input v-model="state.form.userName" placeholder='请输入姓名' maxlength="20"
@input="replaceInput" inputAlign="right" />
</u-form-item>
<u-form-item label="身份证号" :left-icon='`${$imgUrl}issuance/point-form.png`'
:left-icon-style='leftIcon'>
<u-input placeholder='请输入身份证' type="idcard" v-model="state.form.idNum" maxlength="18"
inputAlign="right" />
</u-form-item>
<u-form-item label="地址" :left-icon='`${$imgUrl}issuance/point-form.png`'
:left-icon-style='leftIcon'>
<u-input placeholder='请输入地址' :autoHeight='true' v-model="state.form.address" maxlength="50"
inputAlign="right" />
</u-form-item>
<u-form-item label="证件类型" :left-icon='`${$imgUrl}issuance/point-form.png`'
:left-icon-style='leftIcon' borderBottom>
<u-input v-model="state.form.idTypeStr" type="select" @click="show1 = true"
input-align='right' />
</u-form-item>
</u-form>
</view>
<view class="action">
<view class="btn-tip">
如识别信息有误，请手动修改，确认无误后，点击下一步！
</view>
<button type="default" class="ui-btn" @click="savaHandle()">
下一步
</button>
</view>
</view>

</view>
</view>
<!-- 选择车牌颜色 -->
<u-select v-model="show1" :list="credentialTypeSelect" @confirm="changeIdType"></u-select>
<uploadImg :isTakePhotoModeShow="state.isTakePhotoModeShow" :phoneType="state.choiceIndex" @close="close"
@ocrResult="ocrResult">
</uploadImg>
</template>

<script setup lang="ts">
import uploadImg from '@/components/uploadOcr';
import {
reactive,
ref,
} from "vue";
import {
msg,
checkStr,
strReplace,
uploadFile,
compressImage,
chooseImageCompress,
compareDates,
getFileBase64
} from "@/utils/utils";
import {
onLoad,
onPageScroll,
} from "@dcloudio/uni-app";
import {
getUserMsg,
realNameAuthentication
} from "@/utils/network/api.js";

import { credentialTypeSelect } from "@/datas/credentialType.js";
import { requestNew } from "@/utils/network/request.js";

import {
setItem,
getItem,
} from "@/utils/storage";
import {
getCodeName
} from "@/datas/queryKey.js";
import navBar from "@/components/nav-bar/nav-bar2.vue";
const labelStyle = {
color: "#004576",
fontSize: "28rpx",
}
const leftIcon = {
height: '100%',
width: '8rpx',
display: 'flex',
'align-items': 'center',
'margin-right': '4rpx',
}
const scrollTop = ref(0)
const show1 = ref(false)
const state = reactive({
choiceIndex: 1, // 1 身份证正面 2 身份证反面 3行驶证正面 4行驶证反面
isTakePhotoModeShow: false, //选择拍照方式是否出来
form: {
address: "",
idNum: "",
userName: "", //开户人姓名
userIdImgUrl: "",
userIdBackImgUrl: "",
gender: "",
idType: "", //用户证件类型 101//身份证
idTypeStr: "",
userIdBackImgBase64:"",
userIdImgBase64:""
},
userIdImgBase64Old:"",
userIdBackImgBase64Old:""
});

const close = (e) => {
console.log("e", e)
state.isTakePhotoModeShow = e
}

const changeIdType = (item) => {
state.form.idType = item[0].value
state.form.idTypeStr = item[0].label
console.log(item)
}

async function savaHandle(){
if (!state.form.userName) {
msg('请输入姓名');
return;
}
if (!state.form.userIdImgUrl) {
msg('请上传身份证的人像面');
return;
}
if (!state.form.userIdBackImgUrl) {
msg('请上传身份证的国徽面');
return;
}
if (!checkStr(state.form.idNum, 'card')) {
msg('请输入正确身份证号');
return;
}
if (!state.form.idType) {
msg('请选择证件类型');
return;
}
state.form.userIdImgBase64=await getFileBase64(state.userIdImgBase64Old)
state.form.userIdBackImgBase64=await getFileBase64(state.userIdBackImgBase64Old)
// getFileBase64(state.userIdImgBase64Old, (data) => {
// console.log("getFileBase641", data)
// state.form.userIdImgBase64=data
// })
// getFileBase64(state.userIdBackImgBase64Old, (data) => {
// console.log("getFileBase642", data)
// state.form.userIdBackImgBase64=data
// })
const options = {
type: 2,
data: {
...state.form
},
method: "POST",
showLoading: true,
};
requestNew(realNameAuthentication, options).then((res) => {
console.log("提交", res);
});
};

onLoad((option : any) => {

console.log("option", option)
});

//监听页面滚动
onPageScroll((e) => {
scrollTop.value = e.scrollTop;
});
const replaceInput = (event) => {
console.log("event", event)
const screeningStr = /[^\u4E00-\u9FA5]/g; //想禁止什么类型，在这里替换正则就可以了
if (screeningStr.test(event)) {
setTimeout(() => {
state.form.userName = event.replace(screeningStr, '');
}, 100)
} else {
setTimeout(() => {
state.form.userName = event;
}, 100)
}
console.log("event.replace(screeningStr, '')", event.replace(screeningStr, ''), event, state.form.userName)
}
const takePhotoMode = (index) => {
console.log("index", index)
state.isTakePhotoModeShow = true
state.choiceIndex = index
}

const ocrResult =(data) => {
console.log("图片地址val", data)
if (state.choiceIndex == 1) {
state.form.userName = data.name;
if (data.gender == '男') {
state.form.gender = 'MALE'
} else if (data.gender == '女') {
state.form.gender = 'FEMALE'
} else {
state.form.gender = 'UNKOWN'
}
state.form.idNum = data.idno;
state.form.userIdImgUrl = data.imageUrl;
state.form.address = data.address;
state.userIdImgBase64Old=data.tempFilePath;
} else {
state.form.userIdBackImgUrl = data.imageUrl;
state.userIdBackImgBase64Old=data.tempFilePath
compareDates(data.enddate)
}
}
</script>

<style lang="scss" scoped>
.title {
font-size: 35rpx;
font-family: Microsoft YaHei;
font-weight: 400;
color: #01243A;
line-height: 35rpx;
margin-bottom: 20rpx;
}

.content-wrap {
position: absolute;
top: 30rpx;
width: 100%;
box-sizing: border-box;
padding: 0 30rpx 210rpx;

.t-con {
width: 100%;
background-color: #fff;
border-radius: 12rpx;
padding: 40rpx 30rpx 30rpx;
box-sizing: border-box;
}

.t-select {
display: flex;
padding-bottom: 30rpx;
justify-content: center;
align-items: center;

.item-select {
width: 200rpx;
height: 68rpx;
font-family: SourceHanSansSC, SourceHanSansSC;
font-weight: 400;
font-size: 28rpx;
color: #CCB375;
text-align: center;
line-height: 68rpx;
border: 1rpx solid #CCB375;

&.l-item {
border-radius: 34rpx 0 0 34rpx;
}

&.r-item {
border-radius: 0 34rpx 34rpx 0;
}

&.active {
color: #fff;
background: #CCB375;
}
}
}

.big {
font-size: 30rpx;
font-family: Microsoft YaHei;
font-weight: 400;
color: #333333;
line-height: 24rpx;
}

.nomal {
font-size: 26rpx;
font-family: Microsoft YaHei;
font-weight: 400;
color: #666666;
line-height: 24rpx;
}


}

.content {

.action {
position: absolute;
bottom: 0rpx;
left: 0;
height: 188rpx;
background-color: #fff;
border-radius: 30rpx 30rpx 0 0;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;

.btn-tip {
font-family: SourceHanSansSC, SourceHanSansSC;
font-weight: 400;
font-size: 24rpx;
color: #CCB375;
margin-bottom: 14rpx;
}

.button {
height: 88rpx;
background: radial-gradient(at 0% 0%, #01243A 0%, #004576 100%);
border-radius: 40rpx;
font-size: 32rpx;
font-weight: 400;
color: #ffffff;
line-height: 88rpx;
width: 660rpx;
margin: 0 auto;
}
}

.item-tips {
.title {
font-size: 30rpx;
font-family: Microsoft YaHei;
font-weight: 500;
color: #01243A;
line-height: 30rpx;
}

.tip {
margin-top: 16rpx;
font-size: 24rpx;
font-family: Microsoft YaHei;
font-weight: 400;
color: #999999;
line-height: 24rpx;
}
}

.picture-wrapper {
margin-top: 30rpx;

.bg {
background: #F5F9FB;
border-radius: 10rpx;
padding: 40rpx 30rpx;
display: flex;
justify-content: space-between;

.name {
padding-top: 30rpx;
font-size: 32rpx;
font-family: SourceHanSansSC, SourceHanSansSC;
font-weight: 500;
color: #111;
line-height: 34rpx;
}

.value {
margin-top: 20rpx;
font-size: 22rpx;
font-family: SourceHanSansSC, SourceHanSansSC;
font-weight: 400;
color: #999999;
line-height: 24rpx;
}

.tip {
margin-top: 20rpx;
text-align: center;
width: 100rpx;
height: 30rpx;
border-radius: 6rpx;
border: 1rpx solid #CCB375;

.tip-value {
font-size: 20rpx;
font-family: Microsoft YaHei;
font-weight: 400;
color: #CCB375;
line-height: 30rpx;
opacity: 1;
}
}
}

.icon {
width: 304rpx;
height: 190rpx;
background-image: var(--bgimg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
}

.shibie-wrapper,
.card-box {
margin-top: 30rpx;
border-radius: 12rpx;
background-color: #fff;
width: 100%;
padding: 30rpx 30rpx 0;
box-sizing: border-box;

.title {
font-size: 30rpx;
font-family: SourceHanSansSC, SourceHanSansSC;
font-weight: 500;
color: #01243A;
line-height: 30rpx;
}
}

.buchong-wrapper {
margin-top: 60rpx;

.title {
font-size: 30rpx;
font-family: Microsoft YaHei;
font-weight: 400;
color: #000000;
line-height: 30rpx;
}
}

.green-tip {
margin-top: 50rpx;
font-size: 24rpx;
font-family: Microsoft YaHei;
font-weight: 400;
color: #999;
line-height: 24rpx;
margin-bottom: 60rpx;
}
}

.down {
background: #CCB375;
color: #fff;
border-radius: 5rpx;
font-size: 20rpx;
margin-top: 10rpx;
width: 100rpx;
height: 30rpx;
text-align: center;
line-height: 30rpx;
}
</style>

Write Preview
Loading…
取消
儲存