| | |
| | | <u-form labelPosition="left" :model="info" :rules="rules" ref="form" labelWidth="100" |
| | | :labelStyle="{fontSize:'30rpx'}"> |
| | | <view class="content bgc-ff mb-20"> |
| | | <u-form-item label="当事人1姓名" prop="nameOne" borderBottom required> |
| | | <u-input v-model="info.nameOne" border="none" placeholder="请输入当事人1姓名" placeholderClass="f-28 c-99" |
| | | inputAlign="right"></u-input> |
| | | </u-form-item> |
| | | <u-form-item label="当事人1手机号" prop="phoneOne" borderBottom required> |
| | | <u-input v-model="info.phoneOne" type="number" border="none" placeholder="请输入当事人1手机号" |
| | | placeholderClass="f-28 c-99" inputAlign="right"></u-input> |
| | | </u-form-item> |
| | | <u-form-item label="当事人1性别" prop="genderOne" borderBottom @click="showGenderPicker = true"> |
| | | <u-input v-model="genderValue" border="none" placeholder="请选择当事人1性别" placeholderClass="f-28 c-99" |
| | | inputAlign="right" disabled disabledColor="#ffffff"></u-input> |
| | | <u-icon slot="right" name="arrow-right"></u-icon> |
| | | </u-form-item> |
| | | <u-form-item label="当事人1身份证号码" prop="idCardOne" borderBottom required> |
| | | <u-input v-model="info.idCardOne" type="idcard" border="none" placeholder="请输入当事人1身份证号码" |
| | | placeholderClass="f-28 c-99" inputAlign="right"></u-input> |
| | | </u-form-item> |
| | | <u-form-item label="当事人2姓名" prop="nameTwo" borderBottom required> |
| | | <u-input v-model="info.nameTwo" border="none" placeholder="请输入当事人2姓名" placeholderClass="f-28 c-99" |
| | | inputAlign="right"></u-input> |
| | | </u-form-item> |
| | | <u-form-item label="当事人2性别" prop="genderTwo" borderBottom @click="showGender2Picker = true"> |
| | | <u-input v-model="genderValue2" border="none" placeholder="请选择当事人2性别" placeholderClass="f-28 c-99" |
| | | inputAlign="right" disabled disabledColor="#ffffff"></u-input> |
| | | <u-icon slot="right" name="arrow-right"></u-icon> |
| | | </u-form-item> |
| | | <u-form-item label="当事人2手机号" prop="phoneTwo" borderBottom ref="phoneTwo" required> |
| | | <u-input v-model="info.phoneTwo" type="number" border="none" placeholder="请输入当事人2手机号" |
| | | placeholderClass="f-28 c-99" inputAlign="right"></u-input> |
| | | </u-form-item> |
| | | <u-form-item label="当事人2身份证号码" prop="idCardTwo" required> |
| | | <u-input v-model="info.idCardTwo" type="idcard" border="none" placeholder="请输入当事人2身份证号码" |
| | | placeholderClass="f-28 c-99" inputAlign="right"></u-input> |
| | | </u-form-item> |
| | | <view class=""> |
| | | |
| | | <view class="form-caption flex j-c-s-b a-i-c"> |
| | | <text class="f-32 fw">当事人1信息</text> |
| | | <ocr-navigator @onSuccess="recognizeSuccess($event,'one')" certificateType="idCard" |
| | | :opposite="false"> |
| | | <view class="recognize-btn flex a-i-c"> |
| | | <u-icon name="scan" color="#fff" size="24"></u-icon> |
| | | <text class="f-26 c-ff" style="margin-left: 10rpx;">身份证信息识别</text> |
| | | </view> |
| | | </ocr-navigator> |
| | | </view> |
| | | <u-form-item label="姓名" prop="nameOne" borderBottom required> |
| | | <u-input v-model="info.nameOne" border="none" placeholder="请输入当事人1姓名" |
| | | placeholderClass="f-28 c-99" inputAlign="right"></u-input> |
| | | </u-form-item> |
| | | <u-form-item label="手机号" prop="phoneOne" borderBottom required> |
| | | <u-input v-model="info.phoneOne" type="number" border="none" placeholder="请输入当事人1手机号" |
| | | placeholderClass="f-28 c-99" inputAlign="right"></u-input> |
| | | </u-form-item> |
| | | <u-form-item label="性别" prop="genderOne" borderBottom @click="showGenderPicker = true"> |
| | | <u-input v-model="genderValue" border="none" placeholder="请选择当事人1性别" |
| | | placeholderClass="f-28 c-99" inputAlign="right" disabled disabledColor="#ffffff"></u-input> |
| | | <u-icon slot="right" name="arrow-right"></u-icon> |
| | | </u-form-item> |
| | | <u-form-item label="身份证号码" prop="idCardOne" borderBottom required> |
| | | <u-input v-model="info.idCardOne" type="idcard" border="none" placeholder="请输入当事人1身份证号码" |
| | | placeholderClass="f-28 c-99" inputAlign="right"></u-input> |
| | | </u-form-item> |
| | | |
| | | </view> |
| | | |
| | | <view class=""> |
| | | <view class="form-caption flex j-c-s-b a-i-c"> |
| | | <text class="f-32 fw">当事人2信息</text> |
| | | <ocr-navigator @onSuccess="recognizeSuccess($event,'two')" certificateType="idCard" |
| | | :opposite="false"> |
| | | <view class="recognize-btn flex a-i-c"> |
| | | <u-icon name="scan" color="#fff" size="24"></u-icon> |
| | | <text class="f-26 c-ff" style="margin-left: 10rpx;">身份证信息识别</text> |
| | | </view> |
| | | </ocr-navigator> |
| | | </view> |
| | | |
| | | <u-form-item label="姓名" prop="nameTwo" borderBottom required> |
| | | <u-input v-model="info.nameTwo" border="none" placeholder="请输入当事人2姓名" |
| | | placeholderClass="f-28 c-99" inputAlign="right"></u-input> |
| | | </u-form-item> |
| | | <u-form-item label="性别" prop="genderTwo" borderBottom @click="showGender2Picker = true"> |
| | | <u-input v-model="genderValue2" border="none" placeholder="请选择当事人2性别" |
| | | placeholderClass="f-28 c-99" inputAlign="right" disabled disabledColor="#ffffff"></u-input> |
| | | <u-icon slot="right" name="arrow-right"></u-icon> |
| | | </u-form-item> |
| | | <u-form-item label="手机号" prop="phoneTwo" borderBottom ref="phoneTwo" required> |
| | | <u-input v-model="info.phoneTwo" type="number" border="none" placeholder="请输入当事人2手机号" |
| | | placeholderClass="f-28 c-99" inputAlign="right"></u-input> |
| | | </u-form-item> |
| | | <u-form-item label="身份证号码" prop="idCardTwo" required> |
| | | <u-input v-model="info.idCardTwo" type="idcard" border="none" placeholder="请输入当事人2身份证号码" |
| | | placeholderClass="f-28 c-99" inputAlign="right"></u-input> |
| | | </u-form-item> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="content bgc-ff"> |
| | |
| | | this.info.eventTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss') |
| | | }, |
| | | |
| | | |
| | | //识别成功 |
| | | recognizeSuccess(e, key) { |
| | | let { |
| | | detail: { |
| | | name, |
| | | id, |
| | | address, |
| | | gender, |
| | | nationality |
| | | } |
| | | } = e; |
| | | |
| | | if (key == "one") { |
| | | this.info.nameOne = name.text; |
| | | this.info.idCardOne = id.text; |
| | | this.genderValue = gender.text; |
| | | this.genderIndex = [this.getValue(this.genderList, gender.text).index]; |
| | | this.info.genderOne = this.getValue(this.genderList, gender.text).value; |
| | | } else { |
| | | this.info.nameTwo = name.text; |
| | | this.info.idCardTwo = id.text; |
| | | this.genderValue2 = gender.text; |
| | | this.genderIndex2 = [this.getValue(this.genderList, gender.text).index]; |
| | | this.info.genderTwo = this.getValue(this.genderList, gender.text).value; |
| | | } |
| | | }, |
| | | |
| | | getValue(arr, name) { |
| | | for (let i = 0, ii = arr.length; i < ii; i++) { |
| | | if (arr[i].name == name) { |
| | | return { |
| | | index: i, |
| | | value: arr[i].value |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | } |
| | | } |
| | | </script> |
| | |
| | | /deep/ .u-textarea__field { |
| | | text-align: right; |
| | | } |
| | | |
| | | .form-caption { |
| | | padding: 20rpx 0; |
| | | } |
| | | |
| | | .recognize-btn { |
| | | padding: 12rpx; |
| | | border-radius: 6rpx; |
| | | background-color: #3c9cff; |
| | | margin-left: 30rpx; |
| | | } |
| | | </style> |