businessCard/xiaochengxu/pages/mySet/myCard.vue

<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>