DaXingTiJian/mH5/src/views/UploadFiles.vue

<template>
	<div class="uploadfiles">
		<LoadingD :status="loading"></LoadingD>
		<div style="display: flex;justify-content: space-between;width: 100%;padding: 8px;">
			<div v-if="orgname" style="font-size: 14px; color: #277d7b;"><van-icon name="label" size="14" />{{orgname}}</div>
			<div v-if="username" style="font-size: 16px;font-weight: 700; color: #277d7b;"><van-icon name="manager" size="18" style="margin-right: 4px;" />{{username}}</div>
		</div>
		<van-steps active="0" active-icon="checked" active-color="#33cdc9">
			<van-step>类型选择(上传)</van-step>
			<van-step>选择日期</van-step>
			<van-step>预约完成</van-step>
		</van-steps>
		<div class="head">
			请上传"{{needinfo.label}}"相关证件
		</div>
		<!-- <div><van-button type="primary" round @click="callAPP()">测试上传4</van-button></div> -->
		<div v-for="(item,index) in needinfo.fileList">
			<div class="l_title">
				{{item.label}}
			</div>
			<!-- <van-uploader :ref="`uploader${index}`" accept="" :name="index" :key="index" :after-read="afterRead"
				v-model="needinfo.fileList[index].fileurl" preview-size="2.5rem" multiple>
			 <van-button icon="plus" plain size="small"  type="primary">上传文件</van-button> 
			</van-uploader> -->
			<div style="display: flex;">
				<img v-for="(item_image,index_image) in backImageList[index]" :key="index_image"
					@click="DelImage(index,index_image)" style="width:40px;height: 40px;margin-right: 8px;"
					:src="item_image" alt="">
				<van-button icon="plus" plain size="small" @click="callAPP(index)" type="primary">上传文件</van-button>
			</div>

		</div>
		<van-button type="primary" class="button" round @click="to()">下一步</van-button>
	</div>
</template>
<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		showToast,showConfirmDialog 
	} from 'vant';
 
	import {
		useRouter
	} from "vue-router"
	import {
		UpFile,
		UpFileBase64
	} from "@/api/api.js";
	import {
		usePiniaStore
	} from '@/stores/index.js'
	import Bridge from '@/jsBridge/Bridge.js'

	let selectedNum = ref(null); //选中的上传按钮
	let backImageList = ref([
		[],
		[],
		[],
		[]
	]); //上传完成后回显的地址
	const callAPP = (index) => {
		selectedNum.value = index
		//console.log(66666);
		// JS给APP传得参数
		const param = {
			type: 'photoLibrary',
			callBackMethod: 'upLoadAjax',
			params: {
				maxCount: '1',
				maxBytes: '2097152',
			}
		}
		Bridge.callHandler('nativePermission', param, (res) => {

		})
	}

	const zhuce = () => {
		Bridge.registerHandler('upLoadAjax', (datas, responseCallback) => {

			let dd = JSON.parse(datas)
			//上传图片到服务器
			loading.value = true
			UpFileBase64({
				base64file: dd['avatar']
			}).then(res => {
				loading.value = false
				if (res.status == true) {
					if (res.data.fileurl) {
						try {
						//	alert(res.data.fileurl);
							let data = {
								upurl: res.data.fileurl
							}
							needinfo.value.fileList[selectedNum.value].fileurl.push(data);

							let data2 = import.meta.env.VITE_APP_FILE_URL + res.data.fileurl
							backImageList.value[selectedNum.value].push(data2);
						} catch (e) {
							alert(e)
						}

					}


				} else {
					showToast(res.msg);
				}
			})

			// this.msg = `app获取js数据：${datas}`
			// console.log(`app获取js数据：${datas}`)
			// console.log(`responseCallback:${responseCallback}`)
		})
	}
	const DelImage = (index,img_index) => {
		showConfirmDialog({
		  title: '提示',
		  message:
		    '确定删除此图片吗',
		})
		  .then(() => {
		    backImageList.value[index].splice(img_index,1);
			needinfo.value.fileList[index].fileurl.splice(img_index,1);
		  })
		  .catch(() => {
		    // on cancel
		  });
	}

	const pinia = usePiniaStore()
	const router = useRouter();
	const to = () => {
		//遍历整体信息提取上传的图片 数组
		let t_filelist = []
		let check_status = true
		needinfo.value.fileList.forEach((v, k) => {
			t_filelist.push([])
			if (v.fileurl.length == 0) {
				showToast('第' + (k + 1) + '项,不能为空');
				check_status = false
			}
			v.fileurl.forEach((v1, k1) => {
				t_filelist[k].push(v1.upurl)
			})
		})

		let info = pinia.yuyue_info
		info.upfileList = t_filelist
		pinia.ChangeYuYueInfo(info)
		console.log(info);
		if (check_status) {
			router.push('/selectDate')
		}


	}
	let loading = ref(false)
	let needinfo = ref([]) //需要展示的数据
	
	let username=ref('');
	let orgname=ref('');
	onMounted(() => {
		username.value=sessionStorage.getItem('name')
		orgname.value=pinia.yuyue_info.org_name
		zhuce()
		if (pinia.yuyue_info.doc_id) {
			needinfo.value = pinia.hangyeInfo[pinia.yuyue_info.doc_id - 1]
		}

	})

	const afterRead = (file, detail) => {

		if (Array.isArray(file)) {
			file.forEach(item => {
				item.status = 'uploading'
				item.message = '上传中...'
				uploadMaterialImg(item, detail)
			})
		} else {
			file.status = 'uploading'
			file.message = '上传中...'
			uploadMaterialImg(file, detail)
		}


	}
	const uploadMaterialImg = (file, detail) => {
		var data = new FormData();
		data.append('file', file.file);

		loading.value = true
		UpFile(data).then(res => {
			loading.value = false
			if (res.status == true) {
				file.message = ''
				file.status = ''
				file.upurl = res.data
			} else {
				showToast(res.msg);
			}
		})
	}
</script>
<style scoped>
	.uploadfiles {
		height: 100vh;
		background-image: url('../assets/image/r_head2.jpg');
		background-size: 50vw;
		background-repeat: no-repeat;
		background-position: 100% 100%;
		padding: 20px;
	}

	.head {
		font-size: 20px;
		font-weight: 700;
		color: #175e5c;
		padding-top: 10px;
	}

	.l_title {
		font-size: 14px;
		color: #4e4e4e;
		margin: 5px
	}

	.button {
		width: calc(100vw - 40px);
		background-color: #33cdc9;
		border: 0px;
		position: fixed;
		bottom: 20px;
		border: 3px solid #fff;
		left: 20px
	}
</style>