Onlife/pages/myProxy/uplode.vue

<template>
	<view class="upload_container">
		<view class="upload_container_header">
			<view class="">上傳營業執照</view>
			<u-upload 
				:maxCount="1" 
				:fileList="businessLicense" 
				:previewFullImage="true"
				@afterRead="afterRead1"
				@delete="deletePic1"
			/>
			<view class="">場地租賃合同上傳</view>
			<u-upload 
				:maxCount="1" 
				:fileList="leaseContract" 
				:previewFullImage="true"
				@afterRead="afterRead2"
				@delete="deletePic2" 
			/>
			<view class="">場地照片上傳（3-5張，門頭、辦公區等）</view>
			<u-upload 
				:maxCount="5" 
				:fileList="placePhotos"
				 :previewFullImage="true"
				@afterRead="afterRead3"
				@delete="deletePic3" 
			/>
			<view class="">核心團隊人員身份證上傳</view>
			<u-upload 
				:maxCount="1" 
				:fileList="idCards" 
				:previewFullImage="true"
				@afterRead="afterRead4"
				@delete="deletePic4" 
			/>
		</view>
		<view class="upload_container_end">
			<button @click="submitForm">提交</button>
		</view>
	</view>
</template>

<script>
	import {_submitdata} from "@/request/api.js"
	export default {
		data() {
			return {
				baseURL:"https://onlif.klinygm.com",
				businessLicense: [], // 營業執照文件
				leaseContract: [], // 場地租賃合同文件
				placePhotos: [], // 場地照片
				idCards: [], // 團隊核心人員身份證
				business:"",
				lease:"",
				place:[],
				idCard:"",
				upVipArea:"",
			}
		},
		onLoad(e) {
			if(e.area){
				this.upVipArea = e.area;
			}
		},
		methods: {
			afterRead1(e){
				this.businessLicense.push(e.file);
				this.uploadeService(e.file.url,1);
			},
			deletePic1(e){
				this.businessLicense.splice(e.index, 1)
			},
			afterRead2(e){
				this.leaseContract.push(e.file);
				this.uploadeService(e.file.url,2);
			},
			deletePic2(e){
				this.leaseContract.splice(e.index, 1)
			},
			afterRead3(e){
				this.placePhotos.push(e.file);
				this.uploadeService(e.file.url,3);
			},
			deletePic3(e){
				this.placePhotos.splice(e.index, 1)
			},
			afterRead4(e){
				this.idCards.push(e.file);
				this.uploadeService(e.file.url,4);
			},
			deletePic4(e){
				this.idCards.splice(e.index, 1)
			},
			uploadeService(url,num){
				let _that = this;
				uni.uploadFile({
					url: _that.baseURL+'/api/common/upload', //僅為示例，非真實的接口地址
					filePath: url,
					name: 'file',
					header:{
						token:uni.getStorageSync('token'),
					},
					formData: {
						'user': 'test'
					},
					success(res){
						let a = JSON.parse(res.data);
						let b = a.data.fullurl;
						switch(num){
							case 1:
								_that.business = b;
								break;
							case 2:
								_that.lease = b;
								break;
							case 3:
								_that.place.push(b);
								break;
							case 4:
								_that.idCard = b;
								break;
						}
					}
				});
			},
			// 提交表單
			async submitForm() {
				if(!this.business || !this.lease || !this.place || !this.idCard){
					uni.showToast({
						title:"請按要求上傳照片",
						icon:"error"
					})
					return
				}
				const params = {
					yyzz: this.business,
					zlht: this.lease,
					cd: this.place,
					sfz: this.idCard
				};
				let aaaa = JSON.stringify(params);
				let res = await _submitdata({data:aaaa,area:this.upVipArea});
				if(res.code === 1){
					uni.showToast({
						title:"提交成功",
						icon:"success",
						duration:1000
					})
					setTimeout(()=>{
						uni.navigateTo({
							url:"/pages/myProxy/myProxy"
						})
					},500)
				}else{
					uni.showToast({
						title:res.msg,
						icon:"none"
					})
				}
				// 通過請求提交formData到後端
			}
		}
	}
</script>

<style lang="scss">
	.upload_container {
		width: 100vw;
		height: 100vh;
		background-color: #000033;
		font-size: 30rpx;
		padding: 20px;
		box-sizing: border-box;
		color: #fff;
		.upload_container_header{
			height: calc(100% - 50px);
		}
		.upload_container_end{
			height: 50px;
			>button{
				background-color: #4caf50;
				color: #fff;
			}
		}
	}
</style>