ResumeAuth.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. <template>
  2. <view>
  3. <u-navbar title="实名认证" :is-back="false"></u-navbar>
  4. <view class="id-input">
  5. <view class="title">
  6. 真实姓名
  7. </view>
  8. <u-input v-model="authData.name" placeholder="请输入您的真实姓名" input-align="right" />
  9. </view>
  10. <view class="id-input">
  11. <view class="title">
  12. 身份证号
  13. </view>
  14. <u-input v-model="authData.idCard" placeholder="请输入18位身份证号" input-align="right" />
  15. </view>
  16. <view class="id-upload">
  17. <view class="title">
  18. 请上传身份证的正反面
  19. </view>
  20. <view class="id-upload-item" @click="uploadPic('positiveUrl')">
  21. <view class="id-upload-left">
  22. <h4>头像面</h4>
  23. <p>上传您的身份证头像面</p>
  24. </view>
  25. <view class="id-upload-right">
  26. <u-image width="100%" height="220rpx" :src="authData.positiveUrl?authData.positiveUrl:require('@/static/img/id2.png')"></u-image>
  27. </view>
  28. </view>
  29. <view class="id-upload-item" @click="uploadPic('reverseUrl')">
  30. <view class="id-upload-left">
  31. <h4>国徽面</h4>
  32. <p>上传您的身份证国徽面</p>
  33. </view>
  34. <view class="id-upload-right">
  35. <u-image width="100%" height="220rpx" :src="authData.reverseUrl?authData.reverseUrl:require('@/static/img/id1.png')"></u-image>
  36. </view>
  37. </view>
  38. </view>
  39. <view class="jp-btn">
  40. <u-button type="primary" @click="authSubmit">提交</u-button>
  41. </view>
  42. </view>
  43. </template>
  44. <script>
  45. import * as API_Common from '@/apis/common.js'
  46. import * as WxJsApi from '@/utils/wxJsApi.js'
  47. import {
  48. checkIdCard
  49. } from '@/utils'
  50. export default {
  51. name:"Common",
  52. props:{
  53. },
  54. data() {
  55. return {
  56. isReady2:false,
  57. authData:{}
  58. };
  59. },methods:{
  60. uploadPic(key){
  61. if(!this.isReady2){
  62. return
  63. }
  64. WxJsApi.chooseImage().then(res=>{
  65. var formData = {
  66. 'photoName': '1.jpg',
  67. 'photoFile': res.localData
  68. }
  69. uni.showLoading({
  70. title:"加载中",mask:true,
  71. })
  72. API_Common.uploadBase64(formData).then(response => {
  73. this.authData[key]=response.data
  74. console.log(this.authData);
  75. uni.showToast({
  76. title:"上传成功",
  77. icon:"none"
  78. })
  79. this.$forceUpdate()
  80. }).catch(error => {
  81. uni.showToast({
  82. title:error,
  83. icon:"none"
  84. })
  85. })
  86. })
  87. },
  88. authSubmit(){
  89. uni.showLoading({
  90. title:"加载中",mask:true,
  91. })
  92. var checkIdCardResult = checkIdCard(this.authData.idCard);
  93. if (checkIdCardResult !== true) {
  94. uni.showToast({
  95. icon:"none",
  96. title:checkIdCardResult
  97. })
  98. } else if (!this.authData.name) {
  99. uni.showToast({
  100. icon:"none",
  101. title:"请填写姓名"
  102. })
  103. }else if (!this.authData.positiveUrl) {
  104. uni.showToast({
  105. icon:"none",
  106. title:"请上传身份证人脸面"
  107. })
  108. }else if (!this.authData.reverseUrl) {
  109. uni.showToast({
  110. icon:"none",
  111. title:"请上传身份证国徽面"
  112. })
  113. }else{
  114. API_Common.submitAuthentication(this.authData).then((response) => {
  115. var obj=this.carhelp.getPersonInfo()
  116. obj.isAuthentication="2";
  117. this.carhelp.setPersonInfo(obj)
  118. this.$emit("authSubmit")
  119. }).catch(error => {
  120. uni.showToast({
  121. title:error,
  122. icon:"none"
  123. })
  124. })
  125. }
  126. },
  127. },onReady(){
  128. WxJsApi.getWxConfig(['chooseImage']).then(()=>{
  129. this.isReady2=true;
  130. });
  131. },mounted(){
  132. WxJsApi.getWxConfig(['chooseImage']).then(()=>{
  133. this.isReady2=true;
  134. });
  135. },destroyed(){
  136. }
  137. }
  138. </script>
  139. <style>
  140. page{
  141. background-color: #f7f7f7;
  142. }
  143. </style>
  144. <style scoped lang="scss">
  145. .id-input{
  146. background-color: #fff;
  147. margin: 20rpx;
  148. padding: 20rpx 30rpx;
  149. border-radius: 20rpx;
  150. display: flex;
  151. align-items: center;
  152. justify-content: space-between;
  153. .title{
  154. font-size: 32rpx;
  155. }
  156. }
  157. .id-upload{
  158. margin:40rpx 20rpx;
  159. .title{
  160. font-size: 32rpx;
  161. }
  162. }
  163. .id-upload-item{
  164. margin-top: 20rpx;
  165. background-color: #fff;
  166. border-radius: 20rpx;
  167. display: flex;
  168. padding: 30rpx;
  169. justify-content: space-between;
  170. .id-upload-left{
  171. h4{
  172. margin-bottom: 10rpx;
  173. font-size: 32rpx;
  174. }
  175. p{
  176. color:#999;
  177. }
  178. }
  179. .id-upload-right{
  180. width: 340rpx;
  181. }
  182. }
  183. .jp-btn{
  184. margin: 20rpx;
  185. }
  186. </style>