Huanyuyuehui/pages/users/real_name_authentication/index.vue

288 lines
6.3 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="content" :style="viewColor">
<view class="title">
身份证信息
</view>
<view class="input-items">
<view class="item">
<text class="input-name">姓名</text>
<input type="text" v-model="name" placeholder="请输入姓名"/>
</view>
<view class="item">
<text class="input-name">身份证号码</text>
<input type="text" v-model="number" placeholder="请输入身份证号码"/>
</view>
</view>
<view class="title">
证件
</view>
<view class="photo-items">
<view class="photo-top">
<view class="real-left" v-if="image1.length==0" @click="uploadpic(image1)">
<image src="@/static/images/sfz1.png" mode=""></image>
<text>拍摄正面</text>
</view>
<view class="real-left" v-else>
<image :src="image1[0]" mode="" @click="getPhotoClickIdx(image1,0)"></image>
<text class='iconfont icon-guanbi1' @click.stop='DelPic(image1,0)'></text>
</view>
<view class="real-right" v-if="image2.length==0" @click.stop="uploadpic(image2)">
<image src="@/static/images/sfz2.png" mode=""></image>
<text>拍摄反面</text>
</view>
<view class="real-right" v-else>
<image :src="image2[0]" mode="" @click="getPhotoClickIdx(image2,0)"></image>
<text class='iconfont icon-guanbi1' @click='DelPic(image2,0)'></text>
</view>
</view>
<view class="tips-title">
拍摄须知
</view>
<view class="photo-bottom">
<view class="photo-item">
<image src="@/static/images/sfz3.png" mode=""></image>
<view class="text"><image src="@/static/images/success.png" mode=""></image> 拍摄标准</view>
</view>
<view class="photo-item">
<image src="@/static/images/sfz5.png" mode=""></image>
<view class="text"><image src="@/static/images/close.png" mode=""></image> 边框缺失</view>
</view>
<view class="photo-item">
<image src="@/static/images/sfz4.png" mode="" style="opacity: 0.7;"></image>
<view class="text"><image src="@/static/images/close.png" mode=""></image> 照片模糊</view>
</view>
<view class="photo-item">
<image src="@/static/images/sfz6.png" mode="" ></image>
<view class="text"><image src="@/static/images/close.png" mode=""></image> 闪光强烈</view>
</view>
</view>
</view>
<view class="btn" @click="submitReal">
提交认证
</view>
</view>
</template>
<script>
import {userReal} from '@/api/api.js'
import { mapGetters } from "vuex";
export default {
computed: mapGetters(['viewColor']),
data(){
return{
name:'',
number:'',
image1:[],
image2:[],
}
},
methods:{
async submitReal(){
let data1={
real_name:this.name,
card_id:this.number,
card_front:this.image1[0],
card_back:this.image2[0],
}
await userReal(data1).then((res)=>{
uni.showToast({
icon:'success',
title: res
});
uni.redirectTo({
url: '/pages/user/index',
success: res => {},
fail: () => {},
complete: () => {}
});
}).catch((err)=>{
uni.showToast({
icon:'none',
title: err
});
})
},
/**
* 上传文件
*
*/
uploadpic(item) {
let that = this;
that.$util.uploadImageOne('upload/image', function(res) {
item.push(res.data.path);
});
},
/**
* 删除图片
*
*/
DelPic(item,index) {
let that = this,
pic = item[index];
item.splice(index, 1);
},
// 图片预览
// 获得相册 idx
getPhotoClickIdx(item,index) {
let _this = this;
let idx = index;
_this.imgPreview(item, idx);
},
// 图片预览
imgPreview(list, idx) {
// list图片 url 数组
if (list && list.length > 0) {
uni.previewImage({
current: list[idx], // 传 Number H5端出现不兼容
urls: list
});
}
},
}
}
</script>
<style lang="scss" scoped>
.content{
width: 100%;
height: 100vh;
background: #f2f2f7;
.title{
padding-top: 40rpx;
padding-left: 28rpx;
}
.photo-items{
width: 100%;
background: white;
margin: 20rpx auto;
display: flex;
flex-direction: column;
grid-gap: 40rpx;
padding: 40rpx 28rpx;
.photo-top{
display: flex;
flex-direction: row;
grid-column-gap: 88rpx;
padding: 0 32rpx;
.real-left{
flex: 1;
width: 276rpx;
height: 240rpx;
position: relative;
image{
width: 100%;
height: 100%;
}
text{
color: white;
text-align: center;
position: relative;
bottom: 50rpx;
left: 80rpx;
}
.icon-guanbi1{
width: 40rpx;
height:40rpx;
font-size: 40rpx;
position: absolute;
top: 0rpx;
// right: -170rpx;
left: 236rpx;
}
}
.real-right{
flex: 1;
width: 276rpx;
height: 240rpx;
position: relative;
image{
width: 100%;
height: 100%;
}
text{
color: white;
text-align: center;
position: relative;
bottom: 50rpx;
left: 80rpx;
}
.icon-guanbi1{
width: 40rpx;
height:40rpx;
position: absolute;
top: 0rpx;
// right: -170rpx;
left: 236rpx;
}
}
}
.photo-bottom{
width: 100%;
background:#edf3ff;
padding: 26rpx 16rpx;
display: flex;
flex-direction: row;
grid-gap: 16rpx;
border-radius: 10rpx;
.photo-item{
width: 100%;
display: flex;
flex-direction: column;
image{
width: 140rpx;
height:88rpx;
}
.text{
margin-top: 20rpx;
image{
width: 20rpx;
height:20rpx;
margin:0 4rpx;
}
}
}
}
.tips-title{
margin-top: 60rpx;
}
}
.input-items{
width: 100%;
background: white;
margin: 20rpx auto;
display: flex;
flex-direction: column;
grid-gap: 40rpx;
padding: 40rpx 28rpx;
.item{
display: flex;
flex-direction: row;
.input-name{
flex: 1;
}
input{
flex: 2;
}
}
}
.btn{
width: 660rpx;
height: 100rpx;
background-color: var(--view-theme);
border-radius: 60rpx;
// background-color: red;
color: white;
font-size: 48rpx;
text-align: center;
line-height: 100rpx;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
margin-top: 100rpx;
}
}
</style>