You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

220 lines
7.3 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view class="p-root-person-idform g_bg_f_5" style="min-height: 100vh">
<view class="g_h_10"></view>
<!-- 图片区 -->
<view class="g_bg_f g_pl_10 g_pr_10 g_flex_column_center" style="width: calc(100% - 20px); margin: 0px auto; border-radius: 8px; height: 366px">
<view class="g_flex_row_center g_position_rela" @click="uploadImage('face')">
<image :src="submitInfo.idcardImgFront || 'https://matripe-cms.oss-cn-beijing.aliyuncs.com/1shoudan/face.png'" class="g_w_240 g_h_150 g_radius_8"></image>
<view v-if="!submitInfo.idcardImgFront" class="cardText c6" hover-class="none" hover-stop-propagation="false">
<view class="iconfont icon-tianjia g_c_9 g_fw_600 g_h_41" style="line-height: 41px; font-size: 26px"></view>
<text selectable="false" space="false" decode="false" class="g_fs_16 g_c_6">人像面照片</text>
</view>
</view>
<view class="g_mt_16 g_flex_row_center g_position_rela" @click="uploadImage('back')">
<image :src="submitInfo.idcardImgBack || 'https://matripe-cms.oss-cn-beijing.aliyuncs.com/1shoudan/back.png'" class="g_w_240 g_h_150 g_radius_8"></image>
<view v-if="!submitInfo.idcardImgBack" class="cardText c6" hover-class="none" hover-stop-propagation="false">
<view class="iconfont icon-tianjia g_c_9 g_fw_600 g_h_41" style="line-height: 41px; font-size: 26px"></view>
<text selectable="false" space="false" decode="false" class="g_fs_16 g_c_6">国徽面照片</text>
</view>
</view>
</view>
<view class="g_h_10"></view>
<!-- 表单区 -->
<view class="g_bg_f g_pl_10 g_pr_10 g_fs_16" v-if="!idauth" style="width: calc(100% - 20px); margin: 0px auto; border-radius: 8px">
<view class="g_flex_row_between" style="height: 52px; border-bottom: 1px solid #eee">
<view class="g_flex_column_center g_flex_none">姓名</view>
<view class="g_flex_1 g_flex_row_end g_flex_column_center">
<input type="text" v-model="submitInfo.realName" placeholder="输入姓名" style="text-align: right" />
</view>
</view>
<view class="g_flex_row_between flex_center" style="height: 52px; border-bottom: 1px solid #eee">
<view class="g_flex_column_center g_flex_none">性别</view>
<view class="g_flex_1 g_text_r">
<picker mode="selector" :value="submitInfo.sex" @change="changeDateTime" @columnchange="changeDateTimeColumn" :range="sexArr" range-key="text" style>
<view :class="submitInfo.sexStr ? 'g_c_3' : 'g_c_9'" hover-class="none" hover-stop-propagation="false">{{ !!submitInfo.sexStr ? submitInfo.sexStr : "选择性别" }}</view>
</picker>
</view>
</view>
<view class="g_flex_row_between" style="height: 52px">
<view class="g_flex_column_center g_flex_none">身份证号</view>
<view class="g_flex_1 g_flex_row_end g_flex_column_center">
<input type="text" v-model="submitInfo.IDCard" placeholder="输入身份证号" style="text-align: right" />
</view>
</view>
</view>
<!-- 提交区 -->
<!-- -->
<view v-if="!idauth">
<view class="g_flex_row_center g_mt_32 m-submit">
<g-button btnText="确定" :type="submitInfo.idcardImgFront && submitInfo.idcardImgBack && submitInfo.IDCard ? 'primary' : 'infro'" @clickBtn="subNameInfo" />
</view>
<view class="g_fs_12 c045 g_flex_row_center" style="align-items: center; margin-top: 16px">
<radio-group class="dib">
<radio :checked="switchChecked" @click="switchChange" value="0" class="dib" color="#f40" style="transform: scale(0.7)" />
</radio-group>
我已阅读并同意
<navigator url="/root/person/agreeUser" class="aLink">《用户服务协议》</navigator>
<navigator url="/root/person/agreePrive" class="aLink">《隐私政策》</navigator>
</view>
</view>
</view>
</template>
<script>
export default {
onShareAppMessage() {
return this.G.shareFun();
},
onLoad(options) {
if (options.from && options.from == "idauth") {
let user = uni.getStorageSync("apply-userinfo").user;
this.submitInfo = {
idcardImgFront: user.idcardImgFront,
idcardImgBack: user.idcardImgBack,
};
this.idauth = true;
}
},
data() {
return {
submitInfo: {
realName: "",
idCard: "",
sex: "",
idcardImgBack: "",
idcardImgFront: "",
},
sexArr: [
{
text: "男",
id: 1,
},
{
text: "女",
id: 2,
},
],
idauth: false,
switchChecked: false,
};
},
methods: {
subNameInfo(e) {
let that = this;
console.log(e);
console.log(this.submitInfo);
if (!this.switchChecked) {
uni.showToast({
title: "请阅读并同意用户协议",
icon: "none",
});
return false;
}
var username = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/;
if (that.submitInfo.IDCard.length == 18 && username.test(that.submitInfo.realName)) {
that.G.Post(that.api.person_realName, { name: that.submitInfo.realName, cardno: that.submitInfo.IDCard }, (res) => {
var state = res.state;
if (state == 101) {
uni.hideLoading();
that.dialog("已被占用", "你输入的身份证号已经被其他人占用了", "知道了");
} else if (state == 102) {
uni.hideLoading();
that.dialog("次数超限", "你今天已经认证失败3次明天再认证吧", "知道了");
} else if (state == 5 || state == 14 || state == 96) {
uni.hideLoading();
that.dialog("认证失败", "姓名或身份证号错误,认证失败", "知道了");
} else if (state == 0) {
that.saveIDCard(realName, IDCard);
} else {
uni.hideLoading();
that.dialog("认证失败", res.data.msg, "知道了");
}
});
} else {
}
},
dialog(title, content, btxt) {
uni.showModal({
title: title,
content: content,
showCancel: false,
confirmColor: "#1677ff",
confirmText: btxt,
success: function (res) {
if (res.confirm) {
console.log("用户点击确定");
} else if (res.cancel) {
console.log("用户点击取消");
}
},
});
},
switchChange() {
console.log(this.switchChecked);
this.switchChecked = !this.switchChecked;
},
changeDateTime(e) {
console.log(e);
if (e.detail.value == 0) {
this.submitInfo.sexStr = "男";
} else {
this.submitInfo.sexStr = "女";
}
this.submitInfo.sex = e.detail.value;
console.log(this.submitInfo);
},
uploadImage(_type) {
console.log(_type);
let that = this;
if (this.idauth) {
return false;
}
this.G.uploadImg(
(res) => {
console.log(res);
if (_type == "face") {
this.submitInfo.idcardImgFront = res.image;
that.submitInfo["IDCard"] = res.info.num;
that.submitInfo["realName"] = res.info.name;
if (res.info.num) {
if (res.info.num.slice(16, 17) % 2 == 0) {
that.submitInfo.sex = 1;
that.submitInfo.sexStr = "女";
} else {
that.submitInfo.sex = 0;
that.submitInfo.sexStr = "男";
}
}
} else {
this.submitInfo.idcardImgBack = res.image;
}
console.log(this.submitInfo);
},
_type == "face" ? "idcard" : ""
);
},
},
};
</script>
<style lang="less">
.p-root-person-idform {
.m-submit {
.bocai_btn_type_infro {
background: #ccc !important;
color: #fff !important;
font-weight: 600 !important;
font-size: 18px !important;
}
}
.cardText {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
}
</style>