123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543 |
- <template>
- <view>
- <view>
- <u-navbar placeholder
- title="我的证件"
- @leftClick="leftClick"
- >
- </u-navbar>
- <view class="flex">
- <!-- <view :style="{'margin-top':navHeight +'px'}" class="flex"> -->
- <view @click='addclick' class="button">新增</view>
- <view @click='share' class="button">分享</view>
- <!-- <button ref='share' open-type="share" class="button">分享</button> -->
- <view @click='imageOCR' class="button">识别号码</view>
- </view>
-
-
- <mescroll-body v-if='!addstatus&&cardList.length==0||cardList.length>0' :up="upOption" ref="mescrollRef" @init="mescrollInit" @up="upCallback" @down="downCallback">
- <view v-if='cardList.length>0' class="">
- <view v-for='(item,index) in cardList' class="">
- <view v-if='!item.editstatus'>{{item.certificateName}}</view>
- <u--input v-else
- v-model="item.certificateName"
- placeholder="输入证件名称"
- border="none"
-
- ></u--input>
- <view @click='edit(item)'>{{!item.editstatus?'编辑':'完成'}}</view>
- <u-checkbox-group
- v-model="item.checked"
- placement="column"
- @change="checkboxChange($event,index,item)">
- <u-checkbox :name='index+1' :customStyle="{marginBottom: '8px'}" >
- </u-checkbox>
- </u-checkbox-group>
-
- <image v-if='!item.editstatus' :src="item.certificateImage" mode=""></image>
- <u-upload
- v-else
- @afterRead="afterRead"
- :fileList="fileList2"
- @delete="deletePic"
- name="2"
- multiple
- :maxCount="1"
- ></u-upload>
- <u-icon @click="del(item)" name="trash-fill" color="#2979ff" size="28"></u-icon>
- </view>
- <view></view>
- </view>
- </mescroll-body>
- <view v-if='addstatus' class="">
- <view class="">
- <u--input
- v-model="cardData.certificateName"
- placeholder="输入证件名称"
- border="none"
-
- ></u--input>
- </view>
- <view @click='add'>提交</view>
- <view>
- <u-upload
- @afterRead="afterRead"
- :fileList="fileList1"
- @delete="deletePic"
- name="1"
- multiple
- :maxCount="1"
- ></u-upload>
- </view>
- </view>
- </view>
-
- <u-picker @cancel='show=false' @confirm='pickerConfirm' title='识别类型' :show="show" :columns="columns"></u-picker>
- <u-popup :show="popupshow" mode="bottom" >
- <view>
- <view class="share-to">
- <text>分享到</text>
- </view>
- <view class="content">
- <view class="block">
- <button class="wechat" open-type="share">
- <text class="iconfont icon-pengyouquan"></text>
- <!-- <image src="/static/img/wechat.png" mode="aspectFill"></image> -->
- <text>微信</text>
- </button>
- </view>
- <view class="block" @click="toUrl()">
- <button class="moment">
- <text class="iconfont icon-weixin"></text>
- <!-- <image src="/static/img/moment.png" mode="aspectFill"></image> -->
- <text>朋友圈</text>
- </button>
- </view>
- </view>
- <view class="cancel" @click.stop="handleHiddenShare">
- <text>取消</text>
- </view>
- </view>
- </u-popup>
- <u-modal @cancel='modalshow=false' confirmText='删除' showCancelButton='true' @confirm='delConfirm' :show="modalshow" title="提示" content='确定删除证件?'></u-modal>
- <u-modal @cancel='modalshow=false' confirmText='删除' showCancelButton='true' @confirm='delConfirm' :show="modalshow" title="提示" content='确定删除证件?'></u-modal>
- <u-modal :show="modalstatusshow" confirmText='继续返回' cancelText='取消' @confirm='confirm' @cancel='cancel' showCancelButton='true' title="提示" content='有证件处于编辑状态未提交。'></u-modal>
- <u-toast ref="uToast"></u-toast>
- </view>
- </template>
- <script>
- import uploadImage from '@/components/ossutil/uploadFile.js';
- import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
- export default {
- mixins: [MescrollMixin],
-
- data() {
- return {
- show:false,
- modalshow:false,
- modalstatusshow:false,
- popupshow:false,
- columns:[['识别身份证号','识别银行卡号']],
- userInfo:{},
- cardData:{},
- cardList:[],
- fileList1:[],
- fileList2:[],
- checkedList:[],
- addstatus:false,
- id:'',
- credentialsShow:false
- };
- },
- onLoad() {
-
- // this.getList()
- },
- onShow() {
- this.userInfo = uni.getStorageSync("userInfo")
- this.cardData.commonId=uni.getStorageSync("userInfo").id
- },
- methods: {
- onShareAppMessage(res) {
- return {
- title: '页面分享的标题',
- path: '/pages/my/my',
- imageUrl: '/static/imgs/mylogo.png'
- }
- },
- onShareAppMessage(res) {
- return {
- title: '页面分享的标题',
- path: '/pages/my/my',
- imageUrl: '/static/imgs/mylogo.png'
- }
- },
- onShareTimeline() {
- return {
- title: '商通线上商城',
- path: '/pages/index/index',
- imageUrl: 'https://cdn.uviewui.com/uview/swiper/1.jpg'
- };
- },
- edit(item){
- if(item.editstatus){
- this.$request.baseRequest('admin.unimall.certificateManagementInfo', 'update',{certificateManagementInfo:JSON.stringify(item)}, failres => {
- console.log('res+++++', failres.errmsg)
- this.$refs.uToast.show({
- type: 'error',
- message: failres.errmsg,
- })
- uni.hideLoading()
- }).then(res => {
- this.$refs.uToast.show({
- type: 'success',
- message: '编辑成功',
- })
- this.modalshow=false
- this.checkedList=[]
- uni.hideLoading()
- this.mescroll.resetUpScroll( )
- })
- }else{
- item.editstatus=true
- this.fileList2=[{url:item.certificateImage}]
- }
-
- },
- delConfirm(){
- this.$request.baseRequest('admin.unimall.certificateManagementInfo', 'delete',{id:this.id}, failres => {
- console.log('res+++++', failres.errmsg)
- this.$refs.uToast.show({
- type: 'error',
- message: failres.errmsg,
- })
- uni.hideLoading()
- }).then(res => {
- this.$refs.uToast.show({
- type: 'success',
- message: '删除成功',
- })
- this.modalshow=false
- this.checkedList=[]
- uni.hideLoading()
- this.mescroll.resetUpScroll( )
- })
- },
- pickerConfirm(e){
- this.show=false
- console.log(e)
- var type='',type1=''
- if(e.value[0]=='识别身份证号'){
- type='admin.unimall.certificateManagementInfo'
- type1='personShibie'
- }else if(e.value[0]=='识别银行卡号'){
- type='admin.unimall.certificateManagementInfo'
- type1='bankShibie'
- }
- this.$request.baseRequest(type, type1,{certificateImage:this.cardList[this.checkedList[0]].certificateImage}, failres => {
- console.log('res+++++', failres.errmsg)
- this.$refs.uToast.show({
- type: 'error',
- message: failres.errmsg,
- })
- uni.hideLoading()
- }).then(res => {
- this.$refs.uToast.show({
- type: 'success',
- message: '识别成功',
- })
- uni.hideLoading()
- this.credentialsShow
- })
- },
- checkboxChange(e,i){
- console.log(e[0],i)
- if(e[0]){
- this.checkedList.push(i)
- }else{
- var index=this.checkedList.findIndex((item)=>{return item==i})
- this.checkedList.splice(index,1)
- }
- // for(var i=0;i<this.cardList.length;i++){
- // console.log(this.cardList[i].checked)
- // // if(this.cardList[i].checkedList.length>0){
- // // this.checkedList.push(i)
- // // }
- // }
- console.log(this.checkedList)
- },
- share(){
- if(this.checkedList.length==0){
- this.$refs.uToast.show({
- type: 'error',
- message: '请勾选想要识别的证件!',
- })
- return
- }
- this.popupshow=true
- },
- imageOCR(){
- console.log(this.cardList,this.checkedList)
- if(this.checkedList.length==0){
- this.$refs.uToast.show({
- type: 'error',
- message: '请勾选想要识别的证件!',
- })
- return
- }
- if(this.checkedList.length>1){
- this.$refs.uToast.show({
- type: 'error',
- message: '一次只能勾选一张证件!',
- })
- return
- }
- this.show=true
- },
- confirm(){
- uni.navigateBack()
- },
- cancel(){
- this.modalstatusshow=false
- },
- leftClick(){
- if(this.cardData.certificateImage){
- console.log(22222)
- this.modalstatusshow=true
- }else{
- uni.navigateBack()
- }
- },
- del(item){
- this.modalshow=true
- this.id=item.id
- },
- addclick(){
- this.addstatus=true
- },
- add(){
- if(!this.cardData.certificateImage){
- this.$refs.uToast.show({
- type: 'error',
- message: '请上传证件照片!',
- })
- return
- }
- uni.showLoading({
- title: '数据加载中'
- })
- this.$request.baseRequest('admin.unimall.certificateManagementInfo', 'add',{
- certificateManagementInfo:JSON.stringify(this.cardData)
- }, failres => {
- console.log('res+++++', failres.errmsg)
- this.$refs.uToast.show({
- type: 'error',
- message: failres.errmsg,
- })
- uni.hideLoading()
- }).then(res => {
-
- this.$refs.uToast.show({
- type: 'success',
- message: '提交成功',
- })
- // if (res.errno == 200) {
- uni.hideLoading()
- this.fileList1=[]
- this.addstatus=false
- this.cardData={commonId:uni.getStorageSync("userInfo").id}
- this.mescroll.resetUpScroll()
-
- // }
- })
-
- },
- deletePic(event) {
- this[`fileList${event.name}`].splice(event.index, 1)
- this.cardData.certificateImage =this[`fileList${event.name}`].toString()
- },
- // 新增图片
- async afterRead(event) {
- // 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
- let lists = [].concat(event.file)
- let fileListLen = this[`fileList${event.name}`].length
- lists.map((item) => {
- this[`fileList${event.name}`].push({
- ...item,
- status: 'uploading',
- message: '上传中'
- })
- })
- // console.log(event,111111,fileListLen)
- for (let i = 0; i < lists.length; i++) {
- const result = await this.uploadFilePromise(lists[i].url)
- this.cardData.certificateImage = result
- this[`fileList${event.name}`][fileListLen]={}
- let item = this[`fileList${event.name}`][fileListLen]
- console.log(item)
- this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
- status: 'success',
- message: '',
- url: result
- }))
- fileListLen++
- }
- console.log(this[`fileList${event.name}`])
- },
- uploadFilePromise(url) {
- console.log(url)
- return new Promise((resolve, reject) => {
- uploadImage(url, 'cardImages/',
- result => {
- console.log(result,22222)
-
- resolve(result)
- }
- )
- })
- },
- mescrollInit(){
-
- },
- downCallback(){
- var that = this
- this.$nextTick(() => {
- // mescroll.endSuccess(data.result);
- that.mescroll.resetUpScroll()
- });
-
- },
- upCallback(page){
- var that = this
- uni.showLoading({
- title: '数据加载中'
- })
- this.$request.baseRequest('admin.unimall.certificateManagementInfo', 'list',{
- page:page.num,
- limit:page.size,
- commonId:uni.getStorageSync("userInfo").id
- }, failres => {
- console.log('res+++++', failres.errmsg)
- this.$refs.uToast.show({
- type: 'error',
- message: failres.errmsg,
- })
- this.mescroll.endBySize(curPageLen, totalPage)
- uni.hideLoading()
- }).then(res => {
- console.log(res)
- if(page.num == 1) this.cardList = [];
- let curPageLen = res.data.items.length;
- let totalPage = res.data.total;
- if(res.data.items.length>0){
- for(var i=0;i<res.data.items.length;i++){
- res.data.items[i].editstatus=false
- }
- }
- this.cardList=this.cardList.concat(res.data.items)
- this.cardData.certificateName='证件'+'-'+(this.cardList.length+1)
- this.$nextTick(() => {
- console.log(that)
- // mescroll.endSuccess(data.result);
- that.mescroll.endBySize(curPageLen, totalPage)
- });
-
- // if (res.errno == 200) {
- uni.hideLoading()
-
- // }
- })
- },
- }
- }
- </script>
- <style lang="scss" scoped>
- button::after{border: initial;}
- .share {
- width: 100%;
- height: 100%;
- }
-
- .share-box {
- width: 100%;
- height: 100%;
- position: fixed;
- top: 0rpx;
- left: 0rpx;
- bottom: 0rpx;
- right: 0rpx;
- background-color: rgba(0, 0, 0, 0.4);
- transition: .3s;
- z-index: 999;
- }
-
- .block>button {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- background-color: white;
- border-style: none;
- width: 300rpx;
- height: 180rpx;
- // outline:none;
- // opacity: 0;
- }
-
- // 进入分享动画
- .share-show {
- transition: all 0.3s ease;
- transform: translateY(0%) !important;
- }
-
- // 离开分享动画
- .share-item {
-
- .share-to {
- width: 100%;
- height: 3rem;
- display: flex;
- justify-content: center;
- align-items: center;
-
- &::after {
- content: '';
- width: 240rpx;
- height: 0rpx;
- border-top: 1px solid #E4E7ED;
- -webkit-transform: scaleY(0.5);
- transform: scaleY(0.5);
- margin-left: 30rpx;
- }
-
- &::before {
- content: '';
- width: 240rpx;
- height: 0rpx;
- border-top: 1px solid #E4E7ED;
- -webkit-transform: scaleY(0.5);
- transform: scaleY(0.5);
- margin-right: 30rpx;
- }
- }
-
- .content {
- width: 100%;
- height: auto;
- display: flex;
- flex-wrap: wrap;
-
- .block {
- width: 50%;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- height: 180rpx;
-
- image {
- width: 80rpx;
- height: 80rpx;
- }
-
- text {
- margin-top: 16rpx;
- font-size: 28rpx;
- color: #606266;
- }
- }
- }
-
- .cancel {
- width: 100%;
- height: 3rem;
- display: flex;
- justify-content: center;
- align-items: center;
- border-top: 1rpx solid #E4E7ED;
- }
- }
- </style>
|