index.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596
  1. <template>
  2. <view class="main">
  3. <navbar :config="config" backColor="#666"></navbar>
  4. <view class="content">
  5. <view class="public-tip ql-editor-box">
  6. <rich-text :nodes="agreement"></rich-text>
  7. </view>
  8. <view class="title-box">
  9. <view class="line"></view>
  10. <view class="title">上传证件材料</view>
  11. </view>
  12. <view class="upload-tip">
  13. <view>
  14. ① 证件必须是清晰彩色原件电子版,可以是扫描件或数码拍摄照片,仅支持jpg、png、jpeg的图片格式。
  15. </view>
  16. <view>
  17. ② 如果受捐人是儿童,可由监护人代为提交,提供认证儿童的户口本页面及一些认证材料即可。
  18. </view>
  19. <view>
  20. ③ 如果您在认证过程中有什么问题,可以添加绿马客服进行咨询。
  21. </view>
  22. </view>
  23. <view class="upload-box">
  24. <u-upload action="" max-count="1" :file-list="imgFiles1" :show-progress="false" upload-text="" height="350rpx" width="640rpx" custom-btn @on-remove="(index)=>delImg(index,1)" :deletable="form.status === '' || form.status === 2">
  25. <view slot="addBtn" class="card" @click.stop="upload(1)">
  26. <image class="icon" src="/static/authentication/card1.png"></image>
  27. <view class="tip">上传身份证正面</view>
  28. </view>
  29. </u-upload>
  30. <unloadimg ref="unloadimg1" imgCount="1" type="other" url="" @result="(e)=>unloadRes(e,1)" style="display: none;"></unloadimg>
  31. </view>
  32. <view class="upload-box">
  33. <u-upload action=""max-count="1" :file-list="imgFiles2" :show-progress="false" upload-text="" height="350rpx" width="640rpx" custom-btn @on-remove="(index)=>delImg(index,2)" :deletable="form.status === '' || form.status === 2">
  34. <view slot="addBtn" class="card" @click.stop="upload(2)">
  35. <image class="icon" src="/static/authentication/card2.png"></image>
  36. <view class="tip">上传身份证反面</view>
  37. </view>
  38. </u-upload>
  39. <unloadimg ref="unloadimg2" imgCount="1" type="other" url="" @result="(e)=>unloadRes(e,2)" style="display: none;"></unloadimg>
  40. </view>
  41. <view class="upload-box">
  42. <u-upload action=""max-count="1" :file-list="imgFiles3" :show-progress="false" upload-text="" height="350rpx" width="640rpx" custom-btn @on-remove="(index)=>delImg(index,3)" :deletable="form.status === '' || form.status === 2">
  43. <view slot="addBtn" class="card" @click.stop="upload(3)">
  44. <image class="icon" src="/static/authentication/card3.png"></image>
  45. <view class="tip">上传证明材料</view>
  46. </view>
  47. </u-upload>
  48. <unloadimg ref="unloadimg3" imgCount="1" type="other" url="" @result="(e)=>unloadRes(e,3)" style="display: none;"></unloadimg>
  49. </view>
  50. </view>
  51. <view class="common-form">
  52. <view class="form-title required">真实姓名</view>
  53. <view class="form-item">
  54. <input v-model="form.real_name" maxlength="10" :disabled="form.status !== '' && form.status !== 2" placeholder="请输入真实姓名" />
  55. </view>
  56. <view class="form-title required">身份证号</view>
  57. <view class="form-item">
  58. <input v-model="form.id_card" :disabled="form.status !== '' && form.status !== 2" placeholder="请输入身份证号" />
  59. </view>
  60. <view class="form-title required">联系电话</view>
  61. <view class="form-item">
  62. <input v-model="form.mobile" type="number" maxlength="11" :disabled="form.status !== '' && form.status !== 2" placeholder="请输入联系电话" />
  63. </view>
  64. <view class="form-title required">认证标签</view>
  65. <view class="form-item">
  66. <text v-if="form.status !== '' && form.status !== 2">
  67. <text v-if="form.isccc_lable===''" style="font-size: 16px;color: grey;">请选择认证标签</text>
  68. <text v-else style="font-size: 16px;">{{isccc_lable_name}}</text>
  69. </text>
  70. <picker
  71. v-else
  72. class="pickerList"
  73. :range="lableList"
  74. range-key="label"
  75. @change="labelChange"
  76. style="flex: 1;"
  77. >
  78. <text v-if="form.isccc_lable===''" style="font-size: 16px;color: grey;">请选择认证标签</text>
  79. <text v-else style="font-size: 16px;">{{isccc_lable_name}}</text>
  80. </picker>
  81. <text v-if="form.status === '' || form.status === 2" class="iconfont2">&#xe65f;</text>
  82. </view>
  83. <view class="form-title required">认证地区</view>
  84. <view class="form-item">
  85. <text v-if="form.status !== '' && form.status !== 2">
  86. <text v-if="!checkdArea" style="font-size: 16px;color: grey;">请选择认证地区</text>
  87. <text v-else style="font-size: 16px;">{{form.province_name +' '+form.city_name+' '+form.area_name}}</text>
  88. </text>
  89. <picker
  90. v-else
  91. class="pickerList"
  92. mode="multiSelector"
  93. :range="checkAreaList"
  94. range-key="label"
  95. :value="areaIndex"
  96. @change="areaChange"
  97. @columnchange="pickerColumnchange"
  98. style="flex: 1;"
  99. >
  100. <text v-if="!checkdArea" style="font-size: 16px;color: grey;">请选择认证地区</text>
  101. <text v-else style="font-size: 16px;">{{form.province_name +' '+form.city_name+' '+form.area_name}}</text>
  102. </picker>
  103. <text v-if="form.status === '' || form.status === 2" class="iconfont2">&#xe65f;</text>
  104. </view>
  105. </view>
  106. <view v-if="form.status === '' || form.status === 2" class="agreement">
  107. <u-checkbox
  108. v-model="agree"
  109. name=""
  110. active-color="#0099FF"
  111. ></u-checkbox>
  112. <text class="tip">勾选并<text class="link" @click="goAgreement()">同意隐私政策</text></text>
  113. </view>
  114. <view v-if="form.status !== ''" :class="`submit-status ${statusMap[form.status].color}`">{{statusMap[form.status].text}} <text v-if="form.status==2" style="margin-left: 20rpx;">{{form.update_time}}</text></view>
  115. <button v-if="form.status === '' || form.status === 2" class="submit-btn" @click="submit">立即提交</button>
  116. <uni-popup class="submit-popup" ref="submitPopup" type="center" :mask-click="false">
  117. <view class="content-box">
  118. <view class="title">提交完成</view>
  119. <view class="content">
  120. <image class="success-icon" src="/static/common/success-icon.png"></image>
  121. <view class="tip">
  122. 认证资料已提交完成, 请您耐心等待审核!
  123. </view>
  124. <view class="btn-box">
  125. <button @click="closePopup();back()">返回</button>
  126. <button @click="closePopup();detail();">查看</button>
  127. </view>
  128. </view>
  129. </view>
  130. </uni-popup>
  131. </view>
  132. </template>
  133. <script>
  134. import unloadimg from "@/components/uploadImg/imgUpload.vue";
  135. export default {
  136. components: {
  137. unloadimg
  138. },
  139. data() {
  140. return {
  141. config: {
  142. back: true,
  143. title: '公益认证',
  144. color: '#1a1a1a',
  145. backgroundColor: [1, '#fff'],
  146. statusBarFontColor: 'black'
  147. },
  148. agreement: '',
  149. form:{
  150. real_name: '',// 真实姓名
  151. id_card: '',// 身份证号
  152. mobile: '',// 手机号
  153. isccc_lable: '',// 认证标签
  154. id_card_front: '',// 身份证正面
  155. id_card_back: '',// 身份证背面
  156. certificate: [],// 证明材料
  157. province_name: '',// 省名
  158. province_code: '',// 省编号
  159. city_name: '',// 市名
  160. city_code: '',// 市编号
  161. area_name: '',// 区名
  162. area_code: '',// 区编号
  163. status: '' //空值 未提交过 0 审核中 1审核通过,2审核不通过
  164. },
  165. imgFiles1: [],
  166. imgFiles2: [],
  167. imgFiles3: [],
  168. isccc_lable_name: '',//仅显示
  169. lableList: [{
  170. label: '智力残疾'
  171. },{
  172. label: '视力残疾'
  173. },{
  174. label: '听力残疾'
  175. },{
  176. label: '言语残疾'
  177. },{
  178. label: '肢体残疾'
  179. },{
  180. label: '精神残疾'
  181. }],
  182. agree: false,
  183. //提交状态
  184. //【提交状态】对应的颜色和文本
  185. statusMap:[{
  186. color: 'success',
  187. text: '审核中,请耐心等待!'
  188. },
  189. {
  190. color: 'success',
  191. text: '审核通过'
  192. },
  193. {
  194. color: 'error',
  195. text: '资料不清晰,请补充完善后提交'
  196. }],
  197. areaList: [],
  198. areaIndex: [0,0,0],
  199. checkAreaList: [],
  200. checkdArea:false
  201. }
  202. },
  203. async onLoad() {
  204. this.getPrivacyProtocol();
  205. await this.getArea();
  206. this.detail();
  207. },
  208. methods: {
  209. back(){
  210. uni.navigateBack({delta: 1});
  211. },
  212. valForm(){
  213. let error = '';
  214. if(this.imgFiles1.length <= 0){
  215. error = '请上传身份证正面';
  216. return error;
  217. }
  218. if(this.imgFiles2.length <= 0){
  219. error = '请上传身份证反面';
  220. return error;
  221. }
  222. if(this.imgFiles3.length <= 0){
  223. error = '请上传证明材料';
  224. return error;
  225. }
  226. if((this.form.real_name??'') == ''){
  227. error = '请输入真实姓名';
  228. return error;
  229. }
  230. if((this.form.id_card??'') == ''){
  231. error = '请输入身份证号';
  232. return error;
  233. }
  234. if(!/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/.test(this.form.id_card)){
  235. error = '身份证号格式不正确';
  236. return error;
  237. }
  238. if((this.form.mobile??'') == ''){
  239. error = '请输入联系电话';
  240. return error;
  241. }
  242. if(!/^1\d{10}$/.test(this.form.mobile)){
  243. error = '手机号格式不正确';
  244. return error;
  245. }
  246. if((this.isccc_lable_name??'') == ''){
  247. error = '请选择认证标签';
  248. return error;
  249. }
  250. if(!this.checkdArea){
  251. error = '请选择认证地区';
  252. return error;
  253. }
  254. if(!this.agree){
  255. error = '请勾选并同意隐私政策';
  256. return error;
  257. }
  258. return error;
  259. },
  260. submit(){
  261. let that = this;
  262. let error = that.valForm();
  263. if(error==''){
  264. uni.showModal({
  265. title: '提示',
  266. content: '您确认要提交吗',
  267. success: function (res) {
  268. if (res.confirm) {
  269. uni.showLoading({
  270. title: '正在提交中...',
  271. mask: true
  272. });
  273. let isAdd = !that.form.id;
  274. that.$http[isAdd?'post':'put'](isAdd?'/disabilityauth/apply':'/disabilityauth/updateApply',{
  275. ...that.form,
  276. id_card_front: that.imgFiles1[0].url,
  277. id_card_back: that.imgFiles2[0].url,
  278. certificate: [that.imgFiles3[0].url],
  279. status: undefined
  280. })
  281. .then(res => {
  282. if(res.code==200){
  283. that.$refs.submitPopup.open();
  284. }
  285. })
  286. .finally(()=>{
  287. uni.hideLoading();
  288. })
  289. }
  290. }
  291. });
  292. }else{
  293. uni.showToast({
  294. icon: 'none',
  295. title: error
  296. })
  297. }
  298. },
  299. detail(){
  300. uni.showLoading({
  301. title: '努力加载中...',
  302. mask: true
  303. });
  304. this.$http.get('/disabilityauth/my')
  305. .then(res => {
  306. if(res.code==200){
  307. //未提交审核过
  308. if(!res.data){
  309. return ;
  310. }
  311. this.form = res.data;
  312. this.imgFiles1 = [{
  313. url: res.data.id_card_front
  314. }];
  315. this.imgFiles2 = [{
  316. url: res.data.id_card_back
  317. }];
  318. this.imgFiles3 = [{
  319. url: res.data.certificate[0]
  320. }];
  321. this.isccc_lable_name = this.lableList[res.data.isccc_lable].label;
  322. this.checkdArea = true;
  323. this.agree = true;
  324. // 错误状态
  325. if(this.form.status == 2){
  326. this.statusMap[2].text = this.form.reason;
  327. }
  328. }
  329. })
  330. .finally(()=>{
  331. uni.hideLoading();
  332. })
  333. },
  334. closePopup(){
  335. this.$refs.submitPopup.close();
  336. },
  337. getArea(){
  338. return this.$http.get('/cnarea/tree-lbs')
  339. .then(res => {
  340. if(res.code==200){
  341. let areaList = res.tree.children;
  342. let checkAreaList = [
  343. areaList,
  344. areaList[0].children,
  345. areaList[0].children[0].children
  346. ];
  347. this.areaList = areaList;
  348. this.checkAreaList = checkAreaList;
  349. }
  350. })
  351. },
  352. goAgreement(){
  353. uni.navigateTo({
  354. url:'/pages/protocol/index?code=privacy-agreement'
  355. })
  356. },
  357. upload(index){
  358. this.$refs['unloadimg'+index].upPhoto();
  359. },
  360. unloadRes(e,index){
  361. this['imgFiles'+index] = e.map(url=>{
  362. return {
  363. url
  364. }
  365. });
  366. },
  367. delImg(index,listIndex){
  368. this.$refs['unloadimg'+listIndex].imgArray.splice(index, 1);
  369. this['imgFiles'+listIndex].splice(index,1);
  370. },
  371. //认证协议
  372. getPrivacyProtocol(){
  373. return this.$http.get('/protocolConfig/info/certification-instructions')
  374. .then(res => {
  375. if(res.code==200){
  376. this.agreement = res.data.content
  377. }
  378. })
  379. },
  380. areaChange(e){
  381. this.areaIndex = e.detail.value;
  382. this.form = {
  383. ...this.form,
  384. province_name: this.checkAreaList[0][this.areaIndex[0]].label,// 省名
  385. province_code: this.checkAreaList[0][this.areaIndex[0]].value,// 省编号
  386. city_name: this.checkAreaList[1][this.areaIndex[1]].label,// 市名
  387. city_code: this.checkAreaList[1][this.areaIndex[1]].value,// 市编号
  388. area_name: this.checkAreaList[2][this.areaIndex[2]].label,// 区名
  389. area_code: this.checkAreaList[2][this.areaIndex[2]].value,// 区编号
  390. }
  391. this.checkdArea = true;
  392. },
  393. pickerColumnchange(e){
  394. this.areaIndex[e.detail.column] = e.detail.value;
  395. this.checkAreaList = [
  396. this.areaList,
  397. this.areaList[this.areaIndex[0]].children,
  398. this.areaList[this.areaIndex[0]].children[this.areaIndex[1]].children
  399. ]
  400. },
  401. labelChange(e){
  402. this.form.isccc_lable = e.detail.value;
  403. this.isccc_lable_name = this.lableList[this.form.isccc_lable].label;
  404. }
  405. }
  406. };
  407. </script>
  408. <style lang="scss" scoped>
  409. .main{
  410. padding: 1px;
  411. overflow-x: hidden;
  412. .content{
  413. width: 100%;
  414. padding: 0 30rpx;
  415. box-sizing: border-box;
  416. }
  417. .public-tip{
  418. width: 100%;
  419. background: #fff9ef;
  420. border-radius: 10px;
  421. box-sizing: border-box;
  422. padding: 25rpx 34rpx;
  423. // 重写全局的 富文本样式,减去左右内边距(padding)
  424. /deep/ .ql-indent-1 {
  425. margin-left: calc(96rpx - 68rpx);
  426. }
  427. /deep/ .ql-indent-2 {
  428. margin-left: calc(192rpx - 68rpx);
  429. }
  430. /deep/ .ql-indent-3 {
  431. margin-left: calc(288rpx - 68rpx);
  432. }
  433. /deep/ .ql-indent-4 {
  434. margin-left: calc(384rpx - 68rpx);
  435. }
  436. /deep/ .ql-indent-5 {
  437. margin-left: calc(480rpx - 68rpx);
  438. }
  439. /deep/ .ql-indent-6 {
  440. margin-left: calc(576rpx - 68rpx);
  441. }
  442. /deep/ .ql-indent-7 {
  443. margin-left: calc(672rpx - 68rpx);
  444. }
  445. /deep/ .ql-indent-8 {
  446. margin-left: calc(768rpx - 68rpx);
  447. }
  448. /deep/ .ql-indent-1 {
  449. margin-left: calc(60rpx - 68rpx);
  450. }
  451. /deep/ .ql-indent-2 {
  452. margin-left: calc(120rpx - 68rpx);
  453. }
  454. /deep/ .ql-indent-3 {
  455. margin-left: calc(180rpx - 68rpx);
  456. }
  457. /deep/ .ql-indent-4 {
  458. margin-left: calc(240rpx - 68rpx);
  459. }
  460. /deep/ .ql-indent-5 {
  461. margin-left: calc(300rpx - 68rpx);
  462. }
  463. }
  464. .title-box{
  465. margin: 40rpx 0 20rpx 0;
  466. .line{
  467. width: 4rpx;
  468. height: 26rpx;
  469. background: #20a634;
  470. border-radius: 2rpx;
  471. margin-right: 10rpx;
  472. display: inline-block;
  473. vertical-align: middle;
  474. }
  475. .title{
  476. font-size: 30rpx;
  477. font-family: PingFang SC, PingFang SC-Bold;
  478. font-weight: 700;
  479. text-align: left;
  480. display: inline-block;
  481. vertical-align: middle;
  482. }
  483. }
  484. .upload-tip{
  485. ont-size: 28rpx;
  486. font-family: PingFang SC, PingFang SC-Regular;
  487. font-weight: 400;
  488. text-align: left;
  489. color: #666666;
  490. line-height: 45rpx;
  491. margin-bottom: 10rpx;
  492. }
  493. .upload-box{
  494. width: 690rpx;
  495. height: 400rpx;
  496. margin: 30rpx auto;
  497. padding: 15rpx;
  498. box-sizing: border-box;
  499. border: 1px solid #d9d9d9;
  500. border-radius: 10rpx;
  501. .card{
  502. height: 370rpx;
  503. width: 660rpx;
  504. .icon{
  505. display: block;
  506. height: 187rpx;
  507. width: 275rpx;
  508. margin: 47rpx auto 37rpx auto;
  509. }
  510. .tip{
  511. font-size: 30rpx;
  512. font-family: PingFang SC, PingFang SC-Regular;
  513. font-weight: 400;
  514. text-align: center;
  515. color: #666666;
  516. }
  517. }
  518. }
  519. .agreement{
  520. padding: 0 30rpx 17rpx 30rpx;
  521. .u-checkbox{
  522. vertical-align: middle;
  523. }
  524. ::v-deep .u-checkbox__icon-wrap{
  525. border: 1px solid #0099FF;
  526. }
  527. .tip{
  528. vertical-align: middle;
  529. font-size: 26rpx;
  530. font-family: PingFang SC, PingFang SC-Regular;
  531. font-weight: 400;
  532. text-align: left;
  533. line-height: 60rpx;
  534. margin-left: -15rpx;
  535. .link{
  536. color: #0099FF;
  537. }
  538. }
  539. }
  540. .submit-status{
  541. width: 100%;
  542. font-size: 28rpx;
  543. font-family: PingFang SC, PingFang SC-Bold;
  544. font-weight: 700;
  545. text-align: center;
  546. margin: 0 0 30rpx 0;
  547. padding: 25rpx 30rpx;
  548. word-break: break-all;
  549. &.error{
  550. background: #fff2f2;
  551. color: #ff1010;
  552. }
  553. &.success{
  554. background: #d9f9dd;
  555. color: #139145;
  556. }
  557. .status{
  558. margin-right: 26rpx;
  559. }
  560. }
  561. .submit-btn{
  562. width: 690rpx;
  563. height: 90rpx;
  564. background: #0b844a;
  565. color: white;
  566. margin: 0 auto 30rpx auto;
  567. border-radius: 45rpx;
  568. border: 1px solid #0b844a;
  569. font-size: 32rpx;
  570. font-family: PingFang SC, PingFang SC-Regular;
  571. font-weight: 400;
  572. color: #ffffff;
  573. }
  574. .picker-view {
  575. width: 750rpx;
  576. height: 600rpx;
  577. margin-top: 20rpx;
  578. background: white;
  579. .item {
  580. height: 50px;
  581. line-height: 50px;
  582. align-items: center;
  583. justify-content: center;
  584. text-align: center;
  585. }
  586. }
  587. }
  588. </style>