|
|
@@ -1,144 +1,148 @@
|
|
|
<template>
|
|
|
- <uni-section title="实名认证" type="line">
|
|
|
- <view class="example">
|
|
|
- <!-- 自定义表单校验 -->
|
|
|
- <uni-forms ref="customForm" :rules="customRules" :modelValue="form" class="form">
|
|
|
- <uni-forms-item label="姓名" required name="name">
|
|
|
- <uni-easyinput v-model="form.name" placeholder="请输入姓名" maxlength="20"/>
|
|
|
- </uni-forms-item>
|
|
|
- <uni-forms-item label="电话" required name="phone">
|
|
|
- <uni-easyinput v-model="form.phone" placeholder="请输入电话" maxlength="13"/>
|
|
|
- </uni-forms-item>
|
|
|
- <uni-forms-item label="身份证号" required name="idCard">
|
|
|
- <uni-easyinput v-model="form.idCard" placeholder="请输入身份证号" maxlength="18"/>
|
|
|
- </uni-forms-item>
|
|
|
- <uni-forms-item label="身份证正反面" required class="onePic" v-if="form.id != null">
|
|
|
- <image :src="loadImgSrc(item)" v-for="(item, index1) in imageList" :key="index1">
|
|
|
- </image>
|
|
|
- </uni-forms-item>
|
|
|
- <uni-forms-item label="身份证正反面" required name="path" v-if="form.id == null" label-width="320">
|
|
|
- <upload :imgArr="imageList" name="path" v-model="form.path" :fileSize="1" :limit="2"
|
|
|
- style="position: relative;left: -5%;top: -10%;"
|
|
|
- @updateImg="updateImg"></upload>
|
|
|
- </uni-forms-item>
|
|
|
- </uni-forms>
|
|
|
- <button type="primary" @click="submitForm('customForm')" v-if="form.id==null">提交</button>
|
|
|
- </view>
|
|
|
- </uni-section>
|
|
|
+ <uni-section title="实名认证" type="line">
|
|
|
+ <view class="example">
|
|
|
+ <!-- 自定义表单校验 -->
|
|
|
+ <uni-forms ref="customForm" :rules="customRules" :modelValue="form" class="form">
|
|
|
+ <uni-forms-item label="姓名" required name="name">
|
|
|
+ <uni-easyinput v-model="form.name" placeholder="请输入姓名" maxlength="20"/>
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item label="电话" required name="phone">
|
|
|
+ <uni-easyinput v-model="form.phone" placeholder="请输入电话" maxlength="13"/>
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item label="身份证号" required name="idCard">
|
|
|
+ <uni-easyinput v-model="form.idCard" placeholder="请输入身份证号" maxlength="18"/>
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item label="身份证正反面" required class="onePic" v-if="form.id != null">
|
|
|
+ <image :src="loadImgSrcLocalhost(item)" v-for="(item, index1) in imageList" :key="index1">
|
|
|
+ </image>
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item label="身份证正反面" required name="path" v-if="form.id == null" label-width="320">
|
|
|
+ <upload :imgArr="imageList" name="path" v-model="form.path" :fileSize="1" :limit="2"
|
|
|
+ style="position: relative;left: -5%;top: -10%;"
|
|
|
+ @updateImg="updateImg"></upload>
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-forms>
|
|
|
+ <button type="primary" @click="submitForm('customForm')" v-if="form.id==null">提交</button>
|
|
|
+ </view>
|
|
|
+ </uni-section>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import upload from '@/components/upload/index.vue'
|
|
|
- import {appletAdd,getUserInfo} from '@/api/me/nameAuthentication.js'
|
|
|
+import upload from '@/components/upload/index.vue'
|
|
|
+import {appletAdd, getUserInfo} from '@/api/me/nameAuthentication.js'
|
|
|
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- upload
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ upload
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ // 设置自定义表单校验规则，必须在节点渲染完毕后执行
|
|
|
+ this.$refs.customForm.setRules(this.customRules)
|
|
|
+ this.userId = getApp().globalData.userId
|
|
|
+ this.getUserInfoByUserId(this.userId)
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ form: {},
|
|
|
+ // 表单校验
|
|
|
+ customRules: {
|
|
|
+ name: {
|
|
|
+ rules: [{
|
|
|
+ required: true,
|
|
|
+ errorMessage: '姓名不能为空'
|
|
|
+ }]
|
|
|
},
|
|
|
- onReady() {
|
|
|
- // 设置自定义表单校验规则，必须在节点渲染完毕后执行
|
|
|
- this.$refs.customForm.setRules(this.customRules)
|
|
|
- this.userId = getApp().globalData.userId
|
|
|
- this.getUserInfoByUserId(this.userId)
|
|
|
+ phone: {
|
|
|
+ rules: [{
|
|
|
+ required: true,
|
|
|
+ errorMessage: '电话不能为空'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ pattern: '^1[3456789]\\d{9}$',
|
|
|
+ errorMessage: '请填写正确的手机号'
|
|
|
+ }]
|
|
|
},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- form: {},
|
|
|
- // 表单校验
|
|
|
- customRules: {
|
|
|
- name: {
|
|
|
- rules: [{
|
|
|
- required: true,
|
|
|
- errorMessage: '姓名不能为空'
|
|
|
- }]
|
|
|
- },
|
|
|
- phone: {
|
|
|
- rules: [{
|
|
|
- required: true,
|
|
|
- errorMessage: '电话不能为空'
|
|
|
- },
|
|
|
- {
|
|
|
- pattern:'^1[3456789]\\d{9}$',
|
|
|
- errorMessage: '请填写正确的手机号'
|
|
|
- }]
|
|
|
- },
|
|
|
- idCard: {
|
|
|
- rules: [{
|
|
|
- required: true,
|
|
|
- errorMessage: '身份证号不能为空'
|
|
|
- },
|
|
|
- {
|
|
|
- pattern: '/(^\\d{15}$)|(^\\d{18}$)|(^\\d{17}(\\d|X|x)$)/',
|
|
|
- errorMessage: '请填写正确的身份号'
|
|
|
- }]
|
|
|
- },
|
|
|
- path: {
|
|
|
- rules: [{
|
|
|
- required: true,
|
|
|
- errorMessage: '身份证正反面不能为空'
|
|
|
- }]
|
|
|
- },
|
|
|
- },
|
|
|
- imageList: []
|
|
|
- }
|
|
|
+ idCard: {
|
|
|
+ rules: [{
|
|
|
+ required: true,
|
|
|
+ errorMessage: '身份证号不能为空'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ pattern: '/(^\\d{15}$)|(^\\d{18}$)|(^\\d{17}(\\d|X|x)$)/',
|
|
|
+ errorMessage: '请填写正确的身份号'
|
|
|
+ }]
|
|
|
},
|
|
|
- methods: {
|
|
|
- // 取消按钮
|
|
|
- cancel() {
|
|
|
- this.open = false;
|
|
|
- this.reset();
|
|
|
- },
|
|
|
- /** 提交按钮 */
|
|
|
- submitForm(e) {
|
|
|
- this.$refs[e].validate().then(res => {
|
|
|
- if(this.imageList.length!=2){
|
|
|
- uni.showToast({
|
|
|
- title: "身份证正反面照片为两张！",
|
|
|
- icon: "none"
|
|
|
- })
|
|
|
- }else{
|
|
|
- appletAdd(this.form).then(res => {
|
|
|
- uni.navigateBack();
|
|
|
- });
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
+ path: {
|
|
|
+ rules: [{
|
|
|
+ required: true,
|
|
|
+ errorMessage: '身份证正反面不能为空'
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ },
|
|
|
+ imageList: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 取消按钮
|
|
|
+ cancel() {
|
|
|
+ this.open = false;
|
|
|
+ this.reset();
|
|
|
+ },
|
|
|
+ /** 提交按钮 */
|
|
|
+ submitForm(e) {
|
|
|
+ this.$refs[e].validate().then(res => {
|
|
|
+ if (this.imageList.length != 2) {
|
|
|
+ uni.showToast({
|
|
|
+ title: "身份证正反面照片为两张！",
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ appletAdd(this.form).then(res => {
|
|
|
+ uni.navigateBack();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
|
|
|
- //图片上传
|
|
|
- updateImg(imgList) {
|
|
|
- this.imageList = imgList;
|
|
|
- this.form.path = this.imageList.join(',');
|
|
|
- },
|
|
|
-
|
|
|
- //按userId查询实名认证信息
|
|
|
- getUserInfoByUserId(userId){
|
|
|
- getUserInfo(userId).then(res =>{
|
|
|
- if(res.data!=null){
|
|
|
- this.form = res.data;
|
|
|
- this.imageList = res.data.path.split(",")
|
|
|
- }
|
|
|
-
|
|
|
- })
|
|
|
- }
|
|
|
+ //图片上传
|
|
|
+ updateImg(imgList) {
|
|
|
+ this.imageList = imgList;
|
|
|
+ this.form.path = this.imageList.join(',');
|
|
|
+ },
|
|
|
+
|
|
|
+ //按userId查询实名认证信息
|
|
|
+ getUserInfoByUserId(userId) {
|
|
|
+ getUserInfo(userId).then(res => {
|
|
|
+ if (res.data != null) {
|
|
|
+ this.form = res.data;
|
|
|
+ this.imageList = res.data.path.split(",")
|
|
|
}
|
|
|
- };
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
- .form{
|
|
|
- width: 100%;
|
|
|
- padding-left: 3%;
|
|
|
- }
|
|
|
- ::v-deep .item--uni-forms-item__label{
|
|
|
- width: 19% !important;
|
|
|
- }
|
|
|
- ::v-deep .uni-section-content{
|
|
|
- padding: 0 2%;
|
|
|
- }
|
|
|
- ::v-deep .uni-forms .uni-forms-item__label:nth-child(4){
|
|
|
- width: 26% !important;
|
|
|
- }
|
|
|
- /* ::v-deep .easyinput--uni-easyinput{
|
|
|
- margin-left: 10%;
|
|
|
- } */
|
|
|
-</style>
|
|
|
+.form {
|
|
|
+ width: 100%;
|
|
|
+ padding-left: 3%;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .item--uni-forms-item__label {
|
|
|
+ width: 19% !important;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .uni-section-content {
|
|
|
+ padding: 0 2%;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .uni-forms .uni-forms-item__label:nth-child(4) {
|
|
|
+ width: 26% !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* ::v-deep .easyinput--uni-easyinput{
|
|
|
+ margin-left: 10%;
|
|
|
+} */
|
|
|
+</style>
|
刘浩男