ps: 最近有点忙。今天抽时间记录下， 项目中应用到： 身份认证， 使用 lrz 插件上传图片。
写的不好，欢迎各位指点，谢谢。
效果图
引入lrz文件
/*
引入外部上传压缩图片js
第一：在webpack.base.conf.js的module.exports中resolve中进行引用：
第二：在 alias中加入 'lrz':resolve('src/assets/uploadjs/lrz.bundle.js'), 加别名
第三：在需要组件中引入lrz
*/
resolve: {
extensions: ['.vue', '.js', '.json', '.scss' ,'*'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'lrz':resolve('src/assets/uploadjs/lrz.all.bundle.js')
}
},
# 注意： 引入 all的文件兼容性好
初始化
<script>
import lrz from 'lrz' //引入别名
export default {
name: 'identityCard',
data() {
return {
name: '',
identity: '',
config: { //压缩图片控制(自定义)
width: 720,
height: 320,
quality: 0.6
},
/**
* file: 文件流
* urlinfo： 上传后图片
* urlshow： 是否显示上传后图片
*/
img1: {"file": "", "urlinfo": "", "urlshow": false}, //身份证头像面
img2: {"file": "", "urlinfo": "", "urlshow": false},//身份证国徽面
img3: {"file": "", "urlinfo": "", "urlshow": false}, //手持身份证
identityStatus: false,//审核状态
status_txt: '',//状态文字信息
status_reason: '',//状态原因
auditBtnstatus: true, //提交按钮是否显示
files: '', //文件流
infos: {}, //保存用户信息
identityInfo: {}, //身份证信息
}
},
}
</script>
判断展示审核未通过原因及重选
created(){
//获取用户信息（是否有认证的信息）
this.infos = JSON.parse(getStore('userInfo')) || {};
let identityObj = this.infos.extends;
this.identityInfo = identityObj;
//需求： 展示审核未通过的原因，及可重新选择上传
if(this.identityInfo != {}) {
if(this.infos.isauth == 2) {
this.identityStatus = true;
this.status_txt ='未通过';
this.status_reason = this.identityInfo.remark;
this.anew_one = true;
this.anew_two = true;
//展示已上传过的信息
this.name = this.identityInfo.name;
this.identity = this.identityInfo.card_id;
this.img1.urlshow = true;
this.img2.urlshow = true;
this.img1.urlinfo = this.identityInfo.card_front;
this.img2.urlinfo = this.identityInfo.card_behind;
//未通过，直接点击提交按钮，文件流赋值上次值，否则为空后台不通过
this.img1.file = this.identityInfo.card_front;
this.img2.file = this.identityInfo.card_behind;
}
}
},
解决上传图片安卓与IOS兼容问题
mounted() {
//解决上传图片时capture="camera"在安卓与IOS的兼容性问题（在IOS只能拍照，不能选相册）
var ua = navigator.userAgent.toLowerCase();//获取浏览器的userAgent,并转化为小写——注：userAgent是用户可以修改的
var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);//判断是否是苹果手机，是则是true
if (isIos) {
$("input:file").removeAttr("capture");
};
},
选择身份证图片
chooseFile (index,e) {
// console.log(index); console.log(e);
var self = this
var file = e.target.files[0];
lrz(file, self.config)
.then(function (rst) {
// console.log(file.name)
if(Number(index) == 1){
self.img1.urlinfo = rst.base64;
self.img1.urlshow = true;
self.img1.file = file;
self.anew_one = true;
}else if(Number(index) == 2){
self.img2.urlinfo = rst.base64;
self.img2.urlshow = true;
self.img2.file = file;
self.anew_two = true;
}
})
.catch(function (err) {
this.$toast('上传失败，请重新上传');
})
.always(function () {
// 清空文件上传控件的值
e.target.value = null
})
},
上传图片
doUpload: function () {
//非空判断省略
let regEn = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]\s+=]/im,
regCn = /[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im;
if(regEn.test(this.name) || regCn.test(this.name)) {
this.$toast("名称不能包含特殊字符.");
return;
}
if (!this.isIdentity(this.identity)) {
this.$toast('身份证输入不合法');
return;
}
let param = new FormData() // 创建form对象
param.append('name', this.name) // 添加form表单中其他数据
param.append('card_id', this.identity)
param.append('card_front', this.img1.file) // 通过append向form对象添加数据
param.append('card_behind', this.img2.file) // 通过append向form对象添加数据
//提交身份认证
this.loading('提交中...');
this.axios.identityAuthentication(param).then((response) => {
this.$toast.clear()
let datas = response.data;
if(parseInt(datas.code) == 200){
this.showAudit = true;
}else {
this.$toast(datas.msg);
}
})
},
isIdentity(card) {
// 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
if(!reg.test(card)){
return false;
}else {
return true;
}
},
template
<template>
<section class="identityCardWrap">
<section>
<section class="fillInfoBox" v-show="fillInfo">
<div class="items" v-show="shenhestatus">
<label>审核状态：</label>
<div class="checkStatus">
<span style=" color: #ed235c;" >{{status_txt}}</span> <span>{{status_reason}}</span>
</div>
</div>
<div class="items">
<label for="">证件姓名：</label>
<van-cell-group>
<van-field v-model.trim="name" maxlength="10" />
</van-cell-group>
</div>
<div class="items">
<label for="">身份证号：</label>
<van-cell-group>
<van-field
v-model.trim="identity"
clearable
maxlength="18"
minlength="15"
οnkeyup="this.value=this.value.replace(/\s+/g,'')"
/>
</van-cell-group>
</div>
</section>
<section class="tipBox">
<span>注：</span>1·头部与身份证无重叠。2·本人头像清晰。3·身份证信息清晰。4·图片不能超过3M
</section>
<section class="identityCardBox">
<ul>
<li>
<div class="items">
<div class="lefts">
<img src="../../assets/images/card/bg_1.png" alt="">
<div class="box" >
<img src="../../assets/images/card/bg_4.png" alt="">
<!-- accept="image/*" capture="camera" accept="image/jpg,image/jpeg,image/png"-->
<input class="form-control input1" type="file" ref="removeFile" accept="image/*" @change="chooseFile('1',$event)">
<div>
点击上传
</div>
</div>
<!-- 上传图片样式 -->
<div class="uploadImg" v-show="img1.urlshow">
<img :src="img1.urlinfo" alt="">
</div>
</div>
<div class="rights">
<div class="txt">
身份证头像面
</div>
<div class="updateBtn" v-show="anew_one">
<div>
重新上传
<input class="form-control input1" type="file" ref="removeFile" accept="image/*" @change="chooseFile('1',$event)">
</div>
</div>
</div>
</div>
</li>
<li>
<div class="items">
<div class="lefts">
<img src="../../assets/images/card/bg_2.png" alt="">
<div class="box">
<img src="../../assets/images/card/bg_4.png" alt="">
<input class="form-control input1" type="file" ref="removeFile" accept="image/*" @change="chooseFile('2',$event)">
<div>
点击上传
</div>
</div>
<!-- 上传图片样式 -->
<div class="uploadImg" v-show="img2.urlshow">
<img :src="img2.urlinfo" alt="">
</div>
</div>
<div class="rights">
<div class="txt">
身份证国徽面
</div>
<div class="updateBtn" v-show="anew_two">
<div>
重新上传
<input class="form-control input1" type="file" ref="removeFile" accept="image/*" @change="chooseFile('2',$event)">
</div>
</div>
</div>
</div>
</li>
</ul>
<div class="commBtn" @click="doUpload" v-show="auditBtnstatus">
<div>
{{auditBtn}}
</div>
</div>
</section>
<!-- 弹窗 -->
<section class="alertPrompt" v-show="showAudit">
<div class="bg"></div>
<div class="boxs">
<div class="title">
等待审核
</div>
<div class="text">
<p>资料已成功上传，</p>
<p>我们会尽快完成审核！</p>
</div>
<div class="knowBtn" @click="knowBtn">
<p>知道并进入首页</p>
</div>
</div>
</section>
</section>
</section>
</template>
scss样式
<style lang="scss" scoped>
@import "../../assets/style/mixin";
.identityCardWrap {
background: #fff;
@include sc(0.3rem, #212121);
.fillInfoBox {
padding: 0.2rem 0.3rem 0 0.32rem;
.items {
@include fc;
padding-top: 0.31rem;
}
}
.checkingBox {
padding-left: 0.32rem;
padding-top: 0.07rem;
ul {
li {
padding: 0.23rem 0;
.items {
@include fc;
line-height: 24px;
label {
padding-right: 0.1rem;
}
.checkStatus {
@include fc;
span {
color: #ed235c;
}
.no {
color: #666;
padding-left: 0.2rem;
}
}
}
}
}
}
.tipBox {
@include sc(0.24rem, #666);
line-height: 1.8;
padding: 0.45rem 0.3rem 0 0.37rem;
span {
color: #ed235c;
}
}
.identityCardBox {
ul {
padding-left: 0.32rem;
padding-right: 0.28rem;
li {
padding-top: 0.43rem;
.items {
@include wh(100%, 3rem);
@include fc;
.lefts {
@include wh(4.7rem, 100%);
position: relative;
img {
@include wh(100%, 100%);
}
.box {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
img {
@include wh(0.64rem, 0.64rem);
margin: 0 auto;
display: block;
}
}
.uploadImg {
position: absolute;
top: 0;
left: 0;
@include wh(100%, 101%);
img {
@include borderRadius(0.04rem);
@include wh(100%, 100%);
}
}
}
.rights {
flex: 1;
@include fc;
flex-direction: column;
margin-top: 0.6rem;
.txt {
// padding-left: 0.2rem;
padding-bottom: 0.25rem;
}
.updateBtn {
margin: 0 auto;
@include wh(1.73rem, 0.7rem);
@include sc(0.3rem, #333);
@include borderRadius(0.35rem);
background-color: #f5f5f5;
@include fcc;
position: relative;
>div {
width: 100%;
text-align: center;
}
}
}
.input1 {
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 100%;
opacity: 0;
}
}
}
}
.commBtn {
@include wh(55%, 0.86rem);
margin: 0 auto;
@include sc(0.36rem, #fff);
background-color: $main;
@include borderRadius(0.43rem);
@include fcc;
margin-top: 0.83rem;
margin-bottom: 0.53rem;
>div {
width: 100%;
text-align: center;
}
}
}
//部分公共样式未上传
.alertPrompt {
.boxs {
@include wh(82%, 5.5rem);
.title {
@include sc(0.36rem, #212121);
font-weight: 500;
padding-top: 0.99rem;
}
.text {
p {
@include sc(0.3rem, #666);
}
}
.knowBtn {
margin: 0 auto;
@include wh(60%, 0.8rem);
@include borderRadius(0.4rem);
border: 1px solid #94a8fc;
@include fcc;
@include sc(0.34rem, #94a8fc);
margin-top: 0.4rem;
p {
width: 100%;
}
}
}
}
}
</style>
522
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
