You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
142 lines
3.0 KiB
Vue
142 lines
3.0 KiB
Vue
<template>
|
|
<div class="uploadfiles">
|
|
<LoadingD :status="loading"></LoadingD>
|
|
<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 v-for="(item,index) in needinfo.fileList">
|
|
<div class="l_title">
|
|
{{item.label}}
|
|
</div>
|
|
<van-uploader :ref="`uploader${index}`" :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>
|
|
<van-button type="primary" class="button" round @click="to()">下一步</van-button>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import {
|
|
onMounted,
|
|
ref
|
|
} from 'vue';
|
|
import { showToast } from 'vant';
|
|
import {
|
|
useRouter
|
|
} from "vue-router"
|
|
import {
|
|
UpFile
|
|
} from "@/api/api.js";
|
|
import {
|
|
usePiniaStore
|
|
} from '@/stores/index.js'
|
|
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([]) //需要展示的数据
|
|
onMounted(() => {
|
|
|
|
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> |