party-h5/pages/mine/upload.vue

<template>
	<view class="">
		<view class="navbar">
			<view class="back">
				<text class="iconfont icon-fanhui " @click="backLast()"></text>
			</view>
			<text>提交申报</text>
		</view>
		<view class="upload-home">
			<view  v-for="(item,index) in verification" :key="index">
				<view class="imgList" v-if="item.key=='resource_ids'">
					<view class="img-title">请上传pdf文件</view>
					<view class="img-box">
						<view class="htz-image-upload-Item" v-if="pdfUrl!=''" v-for="(item,index) in pdfUrl" :key="index">
							<image class="img" src="/static/images/pdf.png" @click="imgPreview(index)"></image>
							<view class="htz-image-upload-Item-del" @click="imgDel(index)">×</view>
						</view>
						<view class="htz-image-upload-Item htz-image-upload-Item-add" @click="upload" v-if="pdfUrl.length < number">
							+
						</view>
					</view>
				</view>
				<view class="imgList" v-if="item.key=='prove_files'">
					<view class="img-title">{{item.name}}</view>
					<view class="img-box">
						<view class="htz-image-upload-Item" v-if="cailiao_pdfUrl!=''" v-for="(item,index) in cailiao_pdfUrl" :key="index">
							<image class="img" src="/static/images/pdf.png" @click="imgPreview(index)"></image>
							<view class="htz-image-upload-Item-del" @click="imgDel_cailiao(index)">×</view>
						</view>
						<view class="htz-image-upload-Item htz-image-upload-Item-add" @click="upload_cailiao" v-if="cailiao_pdfUrl==''">
							+
						</view> 
					</view>
				</view>
				<view class="table" v-if="item.key!='resource_ids' && item.key!='prove_files' && item.key!='grade_id' && item.key!='award_day' && item.key!='position_grade'">
					<view class="text-box">
						<text class="input-key">{{item.name}}：</text><input type="text" v-model="item.fenshu" class="input-val" placeholder-style="color:darkgray;"
							:placeholder="'请输入'+item.name" />
					</view>
				</view>
				<view class="table" v-if="item.key=='grade_id'">
					<view class="text-box" style="display: flex;align-items: center;justify-content: space-between;">
						<text class="input-key">{{item.name}}：</text>
							<picker mode="selector" :range="extra.position_grade" @change="gradeChange"
								class="input1" :value="position_grade">
								<view class="uni-input" style="font-size: 33upx;color:  darkgray;">{{grade}}</view>
							</picker>
					</view>
				</view>
				<view class="table" v-if="item.key=='award_day'">
					<view class="text-box" style="display: flex;align-items: center;justify-content: space-between;">
						<text class="input-key">{{item.name}}：</text>
							<picker mode="date" :value="time" @change="birthDateChange" class="input1">
								<view class="uni-input" style="font-size: 33upx;color:  darkgray;">{{time}}</view>
							</picker>
					</view>
				</view>
				<view class="table" v-if="item.key=='position_grade'">
					<view class="text-box" style="display: flex;align-items: center;justify-content: space-between;">
						<text class="input-key">{{item.name}}：</text>
							<picker mode="selector" :range="extra.position_grade" @change="gradeChange"
								class="input1" :value="position_grade">
								<view class="uni-input" style="font-size: 33upx;color:  darkgray;">{{grade}}</view>
							</picker>
					</view>
				</view>
			</view>
			<view class="submit" @click="saveSubmit()">
				保存
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	var app = getApp()
	import navBar from '../../components/navBar/navbar.vue';
	import configData from '../../config.js'
	export default {
		data() {
			return {
				uploadLists: [],
				max: 1,
				url: "",
				resource_ids: [],
				staff_id: '',
				baseUrl: configData.data.baseUrl + '/upload',
				fenshu: '',
				pdfUrl:[],
				uploadPdf:[],
				ids:[],
				typeId:'',
				verification:[],
				number:9,
				time:'选择日期',
				extra:[],
				grade:'请选择',
				position_grade:0,
				gradeValue:'',
				cailiao_ids:[],
				cailiao_pdfUrl:''
			}
		},
		components: {
			navBar
		},
		onLoad(options) {
			console.log(options)
			this.typeId = options.id
			this.verification = JSON.parse(options.verification)
			if(options.extra!='undefined'){
				this.extra = JSON.parse(options.extra)
			}
			if(options.number!='undefined'){
				this.number = Number(options.number)
			}else{
				if(options.id==5){
					this.number = 1
				}
			}
			console.log(this.extra)
			console.log(this.verification)
			//#ifdef H5
			console.log('ceshi-------h5')
			//#endif
			//#ifdef APP-PLUS
			console.log('ceshi-------app')
			//#endif
			app.request('/authorization', '', 'get').then(res => {
				this.staff_id = res.data.data.staff_id
				console.log(res, '------------------')
			})
		},
		methods: {
			
			backLast: function() {
				uni.navigateBack()
			},
			upload() {
				var that = this
				console.log(this.number)
				uni.chooseFile({
					count: this.number,
					extension: ['.pdf'],
					success(res) {
						console.log(res)
						that.pdfUrl= that.pdfUrl.concat(res.tempFilePaths)
						that.uploadFiles(res.tempFilePaths[0])
					}
				})
			},
			upload_cailiao() {
				var that = this
				console.log(this.number)
				uni.chooseFile({
					count: this.number,
					extension: ['.pdf'],
					success(res) {
						console.log(res)
						that.cailiao_pdfUrl= res.tempFilePaths
						that.cailiao_uploadFiles(res.tempFilePaths[0])
					}
				})
			},
			imgDel_cailiao(index){
				var list = this.cailiao_pdfUrl
				var id = this.cailiao_ids
				list.splice(index,1)
				id.splice(index,1)
				this.cailiao_pdfUrl = list
				this.cailiao_ids = id
			},
			cailiao_uploadFiles(url) {
				uni.uploadFile({
					url: this.baseUrl, //仅为示例，非真实的接口地址
					filePath: url,
					fileType: 'file',
					formData: {
						file_type: 'file'
					},
					header: this.headers,
					success: (uploadFileRes) => {
						console.log(uploadFileRes)
						var data = JSON.parse(uploadFileRes.data)
						console.log(data)
						this.cailiao_ids = data.data.url
					},
				})
			},
			uploadFiles(url) {
				uni.uploadFile({
					url: this.baseUrl, //仅为示例，非真实的接口地址
					filePath: url,
					fileType: 'file',
					formData: {
						file_type: 'file'
					},
					header: this.headers,
					success: (uploadFileRes) => {
						console.log(uploadFileRes)
						var data = JSON.parse(uploadFileRes.data)
						console.log(data)
						this.ids = this.ids.concat(data.data.id)
					},
				})
			},
			imgDel(index){
				var list = this.pdfUrl
				var id = this.ids
				list.splice(index,1)
				id.splice(index,1)
				this.pdfUrl = list
				this.ids = id
			},
			//上传保存图片
			saveSubmit: function() {
				console.log(this.verification, "________")
				// if (!this.pdfUrl) {
				// 	uni.showToast({
				// 		title: '请上传文件~',
				// 		icon: 'none'
				// 	})
				// } else {
					//页面循环展示的数据
					const obj = new Object()
					for(var i=0;i<this.verification.length;i++){
						obj[this.verification[i].key] = this.verification[i].fenshu
						if(this.verification[i].key == 'resource_ids'){
							obj.resource_ids = this.ids
						}
						if(this.verification[i].key == 'prove_files'){
							obj.prove_files = this.cailiao_ids
						}
						if(this.verification[i].key == 'award_day'){
							obj.award_day = this.time
						}
						if(this.verification[i].key == 'grade_id'){
							obj.grade_id = this.gradeValue
						}
						if(this.verification[i].key == 'position_grade'){
							obj.position_grade = this.gradeValue
						}
					}
					obj.staff_id = this.staff_id
					obj.examine_question_id = this.typeId
					console.log(obj)
					for(var key in obj){
						if(!obj[key]){
							uni.showToast({
								title:'请完善信息表！',
								icon:'none'
							})
							return
						}
					}
					app.request('/examine/store', obj, 'post').then(res => {
						console.log(res, "上传成功")
						if(res.statusCode==200){
							uni.showToast({
								title:'上传成功',
								icon:'none'
							})
							uni.navigateBack()
						}else{
							uni.showToast({
								title:res.data.message,
								icon:'none'
							})
						}
					})
				// }
			},
			birthDateChange: function(e) {
				console.log(e)
				this.time = e.detail.value
			},
			gradeChange(e){
				console.log(e)
				var index = Number(e.detail.value)+1
				this.grade = this.extra.position_grade[index]
				this.gradeValue = index
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #EFF1F6;
		padding-bottom: 20px;
	}

	.navbar {
		font-size: 32upx;
		height: 100upx;
		line-height: 100upx;
		color: #888888;
		position: relative;
		position: fixed;
		top: 0;
		z-index: 9999999;
		width: 100%;
		background-color: #FFFFFF;
		text-align: center;
		border-bottom: solid 2upx #EFF1F6;

		.back {
			height: 100upx;
			width: 100upx;
			text-align: center;
			// background-color: #007AFF;
			position: absolute;
			float: left;
			left: 0upx;
			font-size: 32upx;
		}
	}

	.upload-home {
		background-color: #EFF1F6;
		width: 100%;
		height: 100%;

		.table {
			background-color: #FFFFFF;
			font-size: 28upx;
			margin-top: 10upx;
			padding: 10upx 30upx;

			.title {
				color: #666;
				font-size: 30upx;
				display: block;
				padding-bottom: 30upx;
				border-bottom: 1px solid #EFF1F6;
			}

			.text-box {
				margin-top: 20upx;

				.input-key {
					display: inline-block;
					height: 80upx;
					line-height: 80upx;
					width: 160upx;
					vertical-align: top;
					color: #555;
					font-size: 32upx;
				}

				.input-val {
					display: inline-block;
					height: 80upx;
					line-height: 80upx;
					vertical-align: top;
					width: calc(100% - 160upx);
					text-align: right;
					color: darkgray;
					font-size: 32upx;
				}
			}

			// .left {
			// 	flex: 0 0 150upx;
			// }

			// .right {
			// 	flex: 1;
			// 	height: 80upx;
			// 	// border-bottom: solid 2upx #fabeb9;
			// 	line-height: 80upx;
			// }
		}

		.imgList {
			background-color: #fff;
			padding: 30upx;
			margin-top: 10upx;
			.remark {
				font-size: 26upx;
				padding-top: 20upx;
				color: #555;
			}

			.img-title {
				color: #666;
				font-size: 30upx;
				display: block;
				position: relative;

				.down-tmp {
					color: red;
					position: absolute;
					right: 0;

					a {
						text-decoration: none;
						color: red;
					}
				}
			}

			.img-box {
				margin-top: 20upx;
				background-color: #F3F3F3;
				border-radius: 10upx;
				padding: 15upx;

				.list-img {}
			}
		}

		.submit {
			padding: 25upx 0;
			width: 90%;
			margin: 0 auto;
			margin-top: 100upx;
			margin-bottom: 50upx;
			text-align: center;
			font-size: 32upx;
			color: #FFFFFF;
			background-color: #e61916;
			border-radius: 10upx;
		}



		.img-box {
			display: flex;
			flex-wrap: wrap;
		}

		.htz-image-upload-Item {
			width: 160rpx;
			height: 160rpx;
			margin: 13rpx;
			border-radius: 10rpx;
			position: relative;
		}

		.htz-image-upload-Item image {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}

		.htz-image-upload-Item-add {
			font-size: 105rpx;
			/* line-height: 160rpx; */
			text-align: center;
			border: 1px dashed #d9d9d9;
			color: #d9d9d9;
		}

		.htz-image-upload-Item-del {
			background-color: #f5222d;
			font-size: 24rpx;
			position: absolute;
			width: 35rpx;
			height: 35rpx;
			line-height: 35rpx;
			text-align: center;
			top: 0;
			right: 0;
			z-index: 100;
			color: #fff;
		}

	}
</style>