feat: 优化代码
This commit is contained in:
@@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<view class="authentication_warp">
|
||||
<Header :leftTitle="$t('authentication.title')" left-path-type="switchTab" left-path="/pages/mine/mine">
|
||||
</Header>
|
||||
<view class="data_common_warp">
|
||||
<view class="data_msg">请填写用户本人得相关信息</view>
|
||||
<view class="'add_form_item add_form_item_but'" v-for="item in formList" :key="item.id">
|
||||
<view class="add_form_title">{{ item.title }}</view>
|
||||
<up-input :placeholder="item.placeholder" border="surround" v-model="form[item.formName]"
|
||||
:customStyle="inputCss" :type="item.type"></up-input>
|
||||
</view>
|
||||
<view class="add_form_item">
|
||||
<view class="add_form_title">证件类型</view>
|
||||
<view class="cert_" @click="certShowCheck(true)">
|
||||
<view class="cert_title">{{ form.certName || '请选择' }}</view>
|
||||
<up-image src="/static/common/right.png" width="16" height="16" bgColor="#f1f6ff00"></up-image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 证件照 -->
|
||||
<CommonCard @valueFunc="getValue" />
|
||||
<view class="add_but" @click="addAuthentication">
|
||||
提交
|
||||
</view>
|
||||
<up-picker :show="certShow" :columns="[CERT_OPTION]" keyName="value" itemHeight="34" @confirm="certConfirm"
|
||||
@cancel="certShow = false" @close="certShow = false"></up-picker>
|
||||
<up-toast ref="uToastRef"></up-toast>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CommonCard from '@/components/common_card.vue';
|
||||
import Header from '@/components/header.vue';
|
||||
import { realNameAuthentication } from '@/api/auth.js';
|
||||
import { CERT_OPTION } from '@/utils/enumUtils.js';
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
CERT_OPTION() {
|
||||
return CERT_OPTION;
|
||||
},
|
||||
},
|
||||
components: { CommonCard, Header },
|
||||
data() {
|
||||
return {
|
||||
inputCss: {
|
||||
"height": '80rpx',
|
||||
"border-radius": "30rpx",
|
||||
"border": "0rpx",
|
||||
},
|
||||
form: {
|
||||
name: null,
|
||||
certType: null,// 证状证件类型：1-居民身份证，2-护照
|
||||
certName: null,
|
||||
certNo: null,// 证件号码
|
||||
certFimg: null,// 证件正面照片
|
||||
certBimg: null,// 证件背面照片
|
||||
},
|
||||
formList: [
|
||||
{
|
||||
id: 1,
|
||||
title: "真实姓名",
|
||||
formName: "name",
|
||||
placeholder: "请输入您的真实姓名",
|
||||
type: "text",
|
||||
}, {
|
||||
id: 3,
|
||||
title: "证件号码",
|
||||
formName: "certNo",
|
||||
placeholder: "请输入证件号码",
|
||||
type: "text",
|
||||
}
|
||||
],
|
||||
uploadTemplList: [
|
||||
{
|
||||
id: 1,
|
||||
title: "标准",
|
||||
isOk: true,
|
||||
url: "/static/common/ID_ok.png",
|
||||
}, {
|
||||
id: 2,
|
||||
title: "边框缺失",
|
||||
isOk: false,
|
||||
url: "/static/common/ID_error_1.png",
|
||||
}, {
|
||||
id: 3,
|
||||
title: "照片模糊",
|
||||
isOk: false,
|
||||
url: "/static/common/ID_error_2.png",
|
||||
}, {
|
||||
id: 4,
|
||||
title: "闪光强烈",
|
||||
isOk: false,
|
||||
url: "/static/common/ID_error_3.png",
|
||||
}
|
||||
],
|
||||
certShow: false,
|
||||
certOption: [],
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async addAuthentication() {
|
||||
const params = {
|
||||
...this.form
|
||||
}
|
||||
if (!params.name) {
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: "请输入您的真实姓名",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!params.certType) {
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: "请选择证件类型",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!params.certNo) {
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: "请输入证件号码",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (params.certFimg.length === 0) {
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: "请上传证件正面照片",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (params.certBimg.length === 0) {
|
||||
this.$refs.uToastRef.show({
|
||||
type: 'error',
|
||||
message: "请上传证件背面照片",
|
||||
});
|
||||
return;
|
||||
}
|
||||
console.log("params", params);
|
||||
const resp = await realNameAuthentication(params);
|
||||
if (resp && resp.bizcode === 100) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mine/mine_authentication_ok/mine_authentication_ok',
|
||||
})
|
||||
}
|
||||
},
|
||||
// 提交地址
|
||||
certConfirm(e) {
|
||||
const {
|
||||
columnIndex,
|
||||
value,
|
||||
values,
|
||||
index,
|
||||
} = e;
|
||||
const data = value[0];
|
||||
this.form.certType = data.key;
|
||||
this.form.certName = data.value;
|
||||
this.certShowCheck(false);
|
||||
},
|
||||
// 选择银行的弹框
|
||||
async certShowCheck(status) {
|
||||
this.certShow = status;
|
||||
},
|
||||
getValue(type, value) {
|
||||
if (type === "Z") {
|
||||
this.form.certFimg = value;
|
||||
} else if (type === "F") {
|
||||
this.form.certBimg = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.authentication_warp {
|
||||
height: calc(100vh - 58rpx);
|
||||
background-color: $app-bj;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.cert_ {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: calc(100% - 170rpx);
|
||||
|
||||
.cert_title {
|
||||
margin-left: 30rpx;
|
||||
color: #9e9e9ec7
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user