myCard.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623
  1. <template>
  2. <view>
  3. <view>
  4. <u-navbar placeholder
  5. title="我的证件"
  6. @leftClick="leftClick"
  7. >
  8. </u-navbar>
  9. <view class="flex">
  10. <!-- <view :style="{'margin-top':navHeight +'px'}" class="flex"> -->
  11. <view @click='addclick' class="button">新增</view>
  12. <view @click='share' class="button">分享</view>
  13. <!-- <button ref='share' open-type="share" class="button">分享</button> -->
  14. <view @click='imageOCR' class="button">识别号码</view>
  15. </view>
  16. <mescroll-body v-if='!addstatus&&cardList.length==0||cardList.length>0' :up="upOption" ref="mescrollRef" @init="mescrollInit" @up="upCallback" @down="downCallback">
  17. <view v-if='cardList.length>0' class="">
  18. <view v-for='(item,index) in cardList' class="">
  19. <view v-if='!item.editstatus'>
  20. {{item.certificateName}}
  21. <text v-if='item.personNo'>({{item.personNo1}})</text>
  22. <u-icon v-if='item.personNo' @click='clip(0,item)' name="file-text-fill" color="#2979ff" size="28"></u-icon>
  23. <text v-if='item.bankNo'>({{item.bankNo1}})</text>
  24. <u-icon v-if='item.bankNo' @click='clip(1,item)' name="file-text-fill" color="#2979ff" size="28"></u-icon>
  25. </view>
  26. <u--input v-else
  27. v-model="item.certificateName"
  28. placeholder="输入证件名称"
  29. border="none"
  30. ></u--input>
  31. <view @click='edit(item)'>{{!item.editstatus?'编辑':'完成'}}</view>
  32. <u-checkbox-group
  33. v-model="item.checked"
  34. placement="column"
  35. @change="checkboxChange($event,index,item)">
  36. <u-checkbox :name='index+1' :customStyle="{marginBottom: '8px'}" >
  37. </u-checkbox>
  38. </u-checkbox-group>
  39. <image v-if='!item.editstatus' :src="item.certificateImage" mode=""></image>
  40. <u-upload
  41. v-else
  42. @afterRead="afterRead"
  43. :fileList="fileList2"
  44. @delete="deletePic"
  45. name="2"
  46. multiple
  47. :maxCount="1"
  48. ></u-upload>
  49. <u-icon @click="del(item)" name="trash-fill" color="#2979ff" size="28"></u-icon>
  50. </view>
  51. <view></view>
  52. </view>
  53. </mescroll-body>
  54. <view v-if='addstatus' class="">
  55. <view class="">
  56. <u--input
  57. v-model="cardData.certificateName"
  58. placeholder="输入证件名称"
  59. border="none"
  60. ></u--input>
  61. </view>
  62. <view @click='add'>提交</view>
  63. <view>
  64. <u-upload
  65. @afterRead="afterRead"
  66. :fileList="fileList1"
  67. @delete="deletePic"
  68. name="1"
  69. multiple
  70. :maxCount="1"
  71. ></u-upload>
  72. </view>
  73. </view>
  74. </view>
  75. <u-picker @cancel='show=false' @confirm='pickerConfirm' title='识别类型' :show="show" :columns="columns"></u-picker>
  76. <u-popup :show="popupshow" mode="bottom" >
  77. <view>
  78. <view class="share-to">
  79. <text>分享到</text>
  80. </view>
  81. <view class="content">
  82. <view class="block">
  83. <button class="wechat" open-type="share">
  84. <text class="iconfont icon-pengyouquan"></text>
  85. <!-- <image src="/static/img/wechat.png" mode="aspectFill"></image> -->
  86. <text>微信</text>
  87. </button>
  88. </view>
  89. <view class="block" @click="toUrl()">
  90. <button class="moment">
  91. <text class="iconfont icon-weixin"></text>
  92. <!-- <image src="/static/img/moment.png" mode="aspectFill"></image> -->
  93. <text>朋友圈</text>
  94. </button>
  95. </view>
  96. </view>
  97. <view class="cancel" @click.stop="handleHiddenShare">
  98. <text>取消</text>
  99. </view>
  100. </view>
  101. </u-popup>
  102. <u-modal @cancel='modalshow=false' confirmText='删除' showCancelButton='true' @confirm='delConfirm' :show="modalshow" title="提示" content='确定删除证件?'></u-modal>
  103. <u-modal @cancel='credentialscancel' cancelText='重新识别' confirmText='确认号码' showCancelButton='true' @confirm='credentialsConfirm' :show="credentialsShow" title="提示" >
  104. <view class="slot-content">
  105. 证件号码
  106. <u--input
  107. v-if='shibie=="识别身份证号"'
  108. v-model="credentials.recPersonNo"
  109. placeholder="输入证件名称"
  110. border="none"
  111. ></u--input>
  112. <u--input
  113. v-if='shibie=="识别银行卡号"'
  114. v-model="credentials.bankNo"
  115. placeholder="输入证件名称"
  116. border="none"
  117. ></u--input>
  118. </view>
  119. </u-modal>
  120. <u-modal :show="modalstatusshow" confirmText='继续返回' cancelText='取消' @confirm='confirm' @cancel='cancel' showCancelButton='true' title="提示" content='有证件处于编辑状态未提交。'></u-modal>
  121. <u-toast ref="uToast"></u-toast>
  122. </view>
  123. </template>
  124. <script>
  125. import uploadImage from '@/components/ossutil/uploadFile.js';
  126. import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
  127. export default {
  128. mixins: [MescrollMixin],
  129. data() {
  130. return {
  131. show:false,
  132. modalshow:false,
  133. modalstatusshow:false,
  134. popupshow:false,
  135. columns:[['识别身份证号','识别银行卡号']],
  136. userInfo:{},
  137. cardData:{},
  138. cardList:[],
  139. fileList1:[],
  140. fileList2:[],
  141. checkedList:[],
  142. addstatus:false,
  143. id:'',
  144. credentialsShow:false,
  145. credentials:{},
  146. shibie:'',
  147. shibieList:[]
  148. };
  149. },
  150. onLoad() {
  151. // this.getList()
  152. },
  153. onShow() {
  154. this.userInfo = uni.getStorageSync("userInfo")
  155. this.cardData.commonId=uni.getStorageSync("userInfo").id
  156. },
  157. // onShareAppMessage(res) {
  158. // console.log(res,111111111111)
  159. // return {
  160. // title: '页面分享的标题',
  161. // path: '/pages/mySet/lookCard',
  162. // imageUrl: '/static/imgs/mylogo.png'
  163. // }
  164. // },
  165. // onShareTimeline() {
  166. // return {
  167. // title: '商通线上商城',
  168. // path: '/pages/index/index',
  169. // imageUrl: 'https://cdn.uviewui.com/uview/swiper/1.jpg'
  170. // };
  171. // },
  172. methods: {
  173. clip(status,item){
  174. uni.setClipboardData({
  175. data: status==1?item.bankNo:item.personNo, // e是你要保存的内容
  176. success: function () {
  177. uni.showToast({
  178. title:'复制成功',
  179. icon:'none'
  180. })
  181. }
  182. })
  183. },
  184. toUrl() {
  185. uni.navigateTo({
  186. url: '/pages/share/poster?carId=' + this.carInfo.car_id,
  187. })
  188. this.handleHiddenShare()
  189. },
  190. edit(item){
  191. if(item.editstatus){
  192. this.$request.baseRequest('admin.unimall.certificateManagementInfo', 'update',{certificateManagementInfo:JSON.stringify(item)}, failres => {
  193. console.log('res+++++', failres.errmsg)
  194. this.$refs.uToast.show({
  195. type: 'error',
  196. message: failres.errmsg,
  197. })
  198. uni.hideLoading()
  199. }).then(res => {
  200. this.$refs.uToast.show({
  201. type: 'success',
  202. message: '编辑成功',
  203. })
  204. this.modalshow=false
  205. this.checkedList=[]
  206. uni.hideLoading()
  207. this.mescroll.resetUpScroll( )
  208. })
  209. }else{
  210. item.editstatus=true
  211. this.fileList2=[{url:item.certificateImage}]
  212. }
  213. },
  214. delConfirm(){
  215. this.$request.baseRequest('admin.unimall.certificateManagementInfo', 'delete',{id:this.id}, failres => {
  216. console.log('res+++++', failres.errmsg)
  217. this.$refs.uToast.show({
  218. type: 'error',
  219. message: failres.errmsg,
  220. })
  221. uni.hideLoading()
  222. }).then(res => {
  223. this.$refs.uToast.show({
  224. type: 'success',
  225. message: '删除成功',
  226. })
  227. this.modalshow=false
  228. this.checkedList=[]
  229. uni.hideLoading()
  230. this.mescroll.resetUpScroll( )
  231. })
  232. },
  233. pickerConfirm(e){
  234. this.show=false
  235. console.log(e)
  236. uni.showLoading({
  237. title: '数据加载中',
  238. mask:true
  239. })
  240. var type='',type1=''
  241. this.shibie=e.value[0]
  242. this.shibieList=JSON.parse(JSON.stringify(this.cardList[this.checkedList[0]]))
  243. if(e.value[0]=='识别身份证号'){
  244. type='admin.unimall.certificateManagementInfo'
  245. type1='personShibie'
  246. }else if(e.value[0]=='识别银行卡号'){
  247. type='admin.unimall.certificateManagementInfo'
  248. type1='bankShibie'
  249. }
  250. this.$request.baseRequest(type, type1,{certificateImage:this.cardList[this.checkedList[0]].certificateImage}, failres => {
  251. console.log('res+++++', failres.errmsg)
  252. this.$refs.uToast.show({
  253. type: 'error',
  254. message: failres.errmsg,
  255. })
  256. uni.hideLoading()
  257. }).then(res => {
  258. console.log(res.data)
  259. this.$refs.uToast.show({
  260. type: 'success',
  261. message: '识别成功',
  262. })
  263. uni.hideLoading()
  264. this.credentials=res.data
  265. this.credentialsShow=true
  266. })
  267. },
  268. checkboxChange(e,i){
  269. console.log(e[0],i)
  270. if(e[0]){
  271. this.checkedList.push(i)
  272. }else{
  273. var index=this.checkedList.findIndex((item)=>{return item==i})
  274. this.checkedList.splice(index,1)
  275. }
  276. // for(var i=0;i<this.cardList.length;i++){
  277. // console.log(this.cardList[i].checked)
  278. // // if(this.cardList[i].checkedList.length>0){
  279. // // this.checkedList.push(i)
  280. // // }
  281. // }
  282. console.log(this.checkedList)
  283. },
  284. share(){
  285. if(this.checkedList.length==0){
  286. this.$refs.uToast.show({
  287. type: 'error',
  288. message: '请勾选想要识别的证件!',
  289. })
  290. return
  291. }
  292. this.popupshow=true
  293. },
  294. imageOCR(){
  295. console.log(this.cardList,this.checkedList)
  296. if(this.checkedList.length==0){
  297. this.$refs.uToast.show({
  298. type: 'error',
  299. message: '请勾选想要识别的证件!',
  300. })
  301. return
  302. }
  303. if(this.checkedList.length>1){
  304. this.$refs.uToast.show({
  305. type: 'error',
  306. message: '一次只能勾选一张证件!',
  307. })
  308. return
  309. }
  310. this.show=true
  311. },
  312. credentialsConfirm(){
  313. var type='',type1=''
  314. if(this.shibie=='识别身份证号'){
  315. this.shibieList.personNo=this.credentials.recPersonNo
  316. }else if(this.shibie=='识别银行卡号'){
  317. this.shibieList.bankNo=this.credentials.bankNo
  318. }
  319. // if(this.shibie=='识别身份证号'){
  320. // type='admin.unimall.certificateManagementInfo'
  321. // type1='personShibie'
  322. // }else if(this.shibie=='识别银行卡号'){
  323. // type='admin.unimall.certificateManagementInfo'
  324. // type1='bankShibie'
  325. // }
  326. this.$request.baseRequest('admin.unimall.certificateManagementInfo', 'update',{certificateManagementInfo:JSON.stringify(this.shibieList)}, failres => {
  327. console.log('res+++++', failres.errmsg)
  328. this.$refs.uToast.show({
  329. type: 'error',
  330. message: failres.errmsg,
  331. })
  332. uni.hideLoading()
  333. }).then(res => {
  334. this.$refs.uToast.show({
  335. type: 'success',
  336. message: '编辑成功',
  337. })
  338. this.credentialsShow=false
  339. this.checkedList=[]
  340. uni.hideLoading()
  341. this.mescroll.resetUpScroll( )
  342. })
  343. },
  344. confirm(){
  345. uni.navigateBack()
  346. },
  347. cancel(){
  348. this.modalstatusshow=false
  349. },
  350. leftClick(){
  351. if(this.cardData.certificateImage){
  352. console.log(22222)
  353. this.modalstatusshow=true
  354. }else{
  355. uni.navigateBack()
  356. }
  357. },
  358. del(item){
  359. this.modalshow=true
  360. this.id=item.id
  361. },
  362. addclick(){
  363. this.addstatus=true
  364. },
  365. add(){
  366. if(!this.cardData.certificateImage){
  367. this.$refs.uToast.show({
  368. type: 'error',
  369. message: '请上传证件照片!',
  370. })
  371. return
  372. }
  373. uni.showLoading({
  374. title: '数据加载中'
  375. })
  376. this.$request.baseRequest('admin.unimall.certificateManagementInfo', 'add',{
  377. certificateManagementInfo:JSON.stringify(this.cardData)
  378. }, failres => {
  379. console.log('res+++++', failres.errmsg)
  380. this.$refs.uToast.show({
  381. type: 'error',
  382. message: failres.errmsg,
  383. })
  384. uni.hideLoading()
  385. }).then(res => {
  386. this.$refs.uToast.show({
  387. type: 'success',
  388. message: '提交成功',
  389. })
  390. // if (res.errno == 200) {
  391. uni.hideLoading()
  392. this.fileList1=[]
  393. this.addstatus=false
  394. this.cardData={commonId:uni.getStorageSync("userInfo").id}
  395. this.mescroll.resetUpScroll()
  396. // }
  397. })
  398. },
  399. deletePic(event) {
  400. this[`fileList${event.name}`].splice(event.index, 1)
  401. this.cardData.certificateImage =this[`fileList${event.name}`].toString()
  402. },
  403. // 新增图片
  404. async afterRead(event) {
  405. // 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
  406. let lists = [].concat(event.file)
  407. let fileListLen = this[`fileList${event.name}`].length
  408. lists.map((item) => {
  409. this[`fileList${event.name}`].push({
  410. ...item,
  411. status: 'uploading',
  412. message: '上传中'
  413. })
  414. })
  415. // console.log(event,111111,fileListLen)
  416. for (let i = 0; i < lists.length; i++) {
  417. const result = await this.uploadFilePromise(lists[i].url)
  418. this.cardData.certificateImage = result
  419. this[`fileList${event.name}`][fileListLen]={}
  420. let item = this[`fileList${event.name}`][fileListLen]
  421. console.log(item)
  422. this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
  423. status: 'success',
  424. message: '',
  425. url: result
  426. }))
  427. fileListLen++
  428. }
  429. console.log(this[`fileList${event.name}`])
  430. },
  431. uploadFilePromise(url) {
  432. console.log(url)
  433. return new Promise((resolve, reject) => {
  434. uploadImage(url, 'cardImages/',
  435. result => {
  436. console.log(result,22222)
  437. resolve(result)
  438. }
  439. )
  440. })
  441. },
  442. mescrollInit(){
  443. },
  444. downCallback(){
  445. var that = this
  446. this.$nextTick(() => {
  447. // mescroll.endSuccess(data.result);
  448. that.mescroll.resetUpScroll()
  449. });
  450. },
  451. upCallback(page){
  452. var that = this
  453. uni.showLoading({
  454. title: '数据加载中'
  455. })
  456. this.$request.baseRequest('admin.unimall.certificateManagementInfo', 'list',{
  457. page:page.num,
  458. limit:page.size,
  459. commonId:uni.getStorageSync("userInfo").id
  460. }, failres => {
  461. console.log('res+++++', failres.errmsg)
  462. this.$refs.uToast.show({
  463. type: 'error',
  464. message: failres.errmsg,
  465. })
  466. this.mescroll.endBySize(curPageLen, totalPage)
  467. uni.hideLoading()
  468. }).then(res => {
  469. console.log(res)
  470. if(page.num == 1) this.cardList = [];
  471. let curPageLen = res.data.items.length;
  472. let totalPage = res.data.total;
  473. if(res.data.items.length>0){
  474. for(var i=0;i<res.data.items.length;i++){
  475. res.data.items[i].editstatus=false
  476. if(res.data.items[i].personNo) res.data.items[i].personNo1='*'+(res.data.items[i].personNo.substring(res.data.items[i].personNo.length-4))
  477. if(res.data.items[i].bankNo) res.data.items[i].bankNo1='*'+(res.data.items[i].bankNo.substring(res.data.items[i].bankNo.length-4))
  478. }
  479. }
  480. this.cardList=this.cardList.concat(res.data.items)
  481. this.cardData.certificateName='证件'+'-'+(this.cardList.length+1)
  482. this.$nextTick(() => {
  483. console.log(that)
  484. // mescroll.endSuccess(data.result);
  485. that.mescroll.endBySize(curPageLen, totalPage)
  486. });
  487. // if (res.errno == 200) {
  488. uni.hideLoading()
  489. // }
  490. })
  491. },
  492. }
  493. }
  494. </script>
  495. <style lang="scss" scoped>
  496. button::after{border: initial;}
  497. .share {
  498. width: 100%;
  499. height: 100%;
  500. }
  501. .share-box {
  502. width: 100%;
  503. height: 100%;
  504. position: fixed;
  505. top: 0rpx;
  506. left: 0rpx;
  507. bottom: 0rpx;
  508. right: 0rpx;
  509. background-color: rgba(0, 0, 0, 0.4);
  510. transition: .3s;
  511. z-index: 999;
  512. }
  513. .block>button {
  514. display: flex;
  515. flex-direction: column;
  516. justify-content: center;
  517. align-items: center;
  518. background-color: white;
  519. border-style: none;
  520. width: 300rpx;
  521. height: 180rpx;
  522. // outline:none;
  523. // opacity: 0;
  524. }
  525. // 进入分享动画
  526. .share-show {
  527. transition: all 0.3s ease;
  528. transform: translateY(0%) !important;
  529. }
  530. // 离开分享动画
  531. .share-item {
  532. .share-to {
  533. width: 100%;
  534. height: 3rem;
  535. display: flex;
  536. justify-content: center;
  537. align-items: center;
  538. &::after {
  539. content: '';
  540. width: 240rpx;
  541. height: 0rpx;
  542. border-top: 1px solid #E4E7ED;
  543. -webkit-transform: scaleY(0.5);
  544. transform: scaleY(0.5);
  545. margin-left: 30rpx;
  546. }
  547. &::before {
  548. content: '';
  549. width: 240rpx;
  550. height: 0rpx;
  551. border-top: 1px solid #E4E7ED;
  552. -webkit-transform: scaleY(0.5);
  553. transform: scaleY(0.5);
  554. margin-right: 30rpx;
  555. }
  556. }
  557. .content {
  558. width: 100%;
  559. height: auto;
  560. display: flex;
  561. flex-wrap: wrap;
  562. .block {
  563. width: 50%;
  564. display: flex;
  565. flex-direction: column;
  566. justify-content: center;
  567. align-items: center;
  568. height: 180rpx;
  569. image {
  570. width: 80rpx;
  571. height: 80rpx;
  572. }
  573. text {
  574. margin-top: 16rpx;
  575. font-size: 28rpx;
  576. color: #606266;
  577. }
  578. }
  579. }
  580. .cancel {
  581. width: 100%;
  582. height: 3rem;
  583. display: flex;
  584. justify-content: center;
  585. align-items: center;
  586. border-top: 1rpx solid #E4E7ED;
  587. }
  588. }
  589. </style>