mianxueyoupin/pages/user/gongyingshang.vue

<template>
<view class="gongyingshang">
	<view class="reson">
		审核不通过，原因：身份证不对
	</view>
	<view class="item">
		<view class="itemTitle">
			<text>供应商名称</text>
			<view class="more">
				<text>请填写</text>
				<image src="../../static/images/img/jiantou.png" mode=""></image>
			</view>
		</view>
		<view class="upload">
			<view class="topic">
				上传营业执照
			</view>
			<u-upload
				:fileList="finishImageList"
				:previewFullImage="true" 
				@afterRead="afterRead"
				:maxCount="6" width="80" height="80"
				@delete="deletePic"
				name="1"
				multiple
			></u-upload>
		</view>
	</view>
	<view class="item">
		<view class="itemTitle">
			<text>法人身份证</text>
			<view class="more">
				<text>请填写</text>
				<image src="../../static/images/img/jiantou.png" mode=""></image>
			</view>
		</view>
		<view class="upload">
			<view class="topic">
				经营场所照片
			</view>
			<u-upload
				:fileList="finishImageList"
				:previewFullImage="true" 
				@afterRead="afterRead"
				:maxCount="6" width="80" height="80"
				@delete="deletePic"
				name="1"
				multiple
			></u-upload>
		</view>
	</view>
	<view class="checkOption">
		<u-checkbox v-model="checked" activeColor="#EB6100" shape="circle"></u-checkbox>
		<text>提交信息后，需进行审核，审核通过后短信通知您，注意查收！</text>
	</view>
	<view class="submit">
		提交
	</view>
</view>
</template>

<script>
export default{
	data(){
		return{
			finishImageList:[],
			checked:false,
		}
	},
	methods:{
		// 新增图片
		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: '上传中'
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url)
				
				if(JSON.parse(result).code==1){
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}else{
					this[`fileList${event.name}`].splice(fileListLen, 1)
				}
				
			}
			
		},
		//上传照片
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: this.baseUrl+'/api/common/upload', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						user: 'test',
						token:getToken()
					},
					success: (res) => {
						if(JSON.parse(res.data).code==1){
							setTimeout(() => {
								this.finishImageList.push({url:JSON.parse(res.data).data.fullurl,path:JSON.parse(res.data).data.url})
								resolve(res.data)
							}, 1000)
						}else{
							uni.$u.toast(JSON.parse(res.data).msg)
							
							resolve(res.data)
						}
					},
					fail: (res) => {
						console.log(res,"rrr")
					}
				});
			})
		},
		//删除图片
		deletePic(event) {
			console.log(event)
			// this[`fileList${event.name}`].splice(event.index, 1)
			this.finishImageList.splice(event.index, 1)
		},
	}
}
</script>

<style lang="scss" scoped>
.gongyingshang{
	min-height: calc(100vh);
	background-color: #F2F3F4;
	
	.reson{
		padding:23rpx 26rpx;
		background: #F7EFE9;
		border-radius: 1px;
		font-family: Source Han Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #EB6100;
	}
	.item{
		
		margin:20rpx 24rpx;
		padding:0 30rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		.itemTitle{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding:40rpx 0;
			border-bottom: 1px solid #EAEAEA;
			&>text{
				
				font-family: Source Han Sans SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #222222;
			}
			.more{
				display: flex;
				align-items: center;
				text{
					
					font-family: Source Han Sans SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #999999;
				}
				image{
					width:44rpx;
					height:44rpx;
				}
			}
		}
		.upload{
			padding:30rpx 0;
			.topic{
				margin-bottom: 30rpx;
				font-family: Source Han Sans SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #222222;
			}
		}
	}
	.checkOption{
		padding:0 24rpx;
		margin-top:33rpx;
		font-family: Source Han Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #EB6100;
		display: flex;
		align-items: center;
	}
	.submit{
		background: #EB6100;
		border-radius: 45px;
		padding: 30rpx 0;
		text-align: center;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
		position: fixed;
		width:94%;
		left:3%;
		bottom:44rpx;
	}
}
::v-deep .u-upload__button{
	border:1px solid #E5E7EA;
	border-radius: 10rpx;
}
::v-deep .u-upload__deletable{
	height: 50rpx  !important;
	width: 50rpx  !important;
	z-index:999 !important;
	.u-icon__icon{
		font-size: 40rpx !important;
		line-height: 40rpx !important;
		
	}
}
</style>