pco/app/pages/business-order/report.vue

<template>
	<view>
		<view class="box">
			<view class="top">
				<text class="title">证明上传</text>
			</view>
			<view class="item">
				<view class="l">核酸证明：</view>
				<view class="r">
					<view class="img">
						<uni-file-picker v-model="nucleicReport" fileMediatype="image" mode="grid" limit="1"
							@select="nucleicSelect" @delete="form.nucleicReport=''" :image-styles="imageStyles" />
					</view>
				</view>
			</view>
			<view class="item">
				<view class="l">消杀合格证明：</view>
				<view class="r">
					<view class="img">
						<uni-file-picker v-model="disinfectReport" fileMediatype="image" mode="grid" limit="1"
							@select="disinfectSelect" @delete="form.disinfectReport=''" :image-styles="imageStyles" />
					</view>
				</view>
			</view>
			<view class="item">
				<view class="l">检验检疫证：</view>
				<view class="r">
					<view class="img">
						<uni-file-picker ref="checkReport" v-model="checkReport" fileMediatype="image" mode="grid"
							limit="1" @select="checkSelect" @delete="form.checkReport=''" :image-styles="imageStyles" />
					</view>
				</view>
			</view>
			<view class="item">
				<view class="l">签发出库证明：</view>
				<view class="r">
					<view class="img">
						<uni-file-picker v-model="outReport" fileMediatype="image" mode="grid" limit="1"
							@select="outSelect" @delete="form.outReport=''" :image-styles="imageStyles" />
					</view>
				</view>
			</view>
		</view>
		<u-button type="primary" @click="confirmFn">保存</u-button>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
				id: '',
				form: {
					partMoney: 0
				},
				imgList: [],
				outReport: [],
				checkReport:[],
				disinfectReport:[],
				nucleicReport:[],
				imageStyles: {
					width: 150,
					height: 100,
					border: {
						color: "#eee",
						width: 1,
						style: 'dashed',
						radius: '5px'
					}
				},
				uploadImageUrl: request.server + '/upload/image',
			}
		},
		onLoad(options) {
			this.id = options.id;
		},
		onShow() {
			this.getBusinessById();
		},
		methods: {
			outSelect(e) {
				this.handlerUpload(e, 'outReport')
			},
			checkSelect(e) {
				this.handlerUpload(e, 'checkReport')
			},
			disinfectSelect(e) {
				this.handlerUpload(e, 'disinfectReport')
			},
			nucleicSelect(e) {
				this.handlerUpload(e, 'nucleicReport')
			},
			handlerUpload(e, target) {
				let that = this;
				uni.uploadFile({
					url: that.uploadImageUrl,
					filePath: e.tempFilePaths[0],
					name: 'file',
					success: (resp => {
						that.form[target] = JSON.parse(resp.data).data;
					})
				})
			},
			getBusinessById() {
				this.$api.getBusinessById({
					id: this.id
				}).then(resp => {
					this.form = resp.data;
					if(this.form.nucleicReport){
						this.nucleicReport=[{
							'name':'payTicket.png',
							'extname':'.png',
							'url':this.form.nucleicReport
						}]
					}
					if(this.form.disinfectReport){
						this.disinfectReport=[{
							'name':'payTicket.png',
							'extname':'.png',
							'url':this.form.disinfectReport
						}]
					}
					if(this.form.checkReport){
						this.checkReport=[{
							'name':'payTicket.png',
							'extname':'.png',
							'url':this.form.checkReport
						}]
					}
					if(this.form.outReport){
						this.outReport=[{
							'name':'payTicket.png',
							'extname':'.png',
							'url':this.form.outReport
						}]
					}
				})
			},
			confirmFn() {
				console.log(this.form)
				if (!this.form.nucleicReport) {
					this.$common.toast('请上传核酸报告');
					return;
				}
				if (!this.form.disinfectReport) {
					this.$common.toast('请上传消杀合格证明');
					return;
				}
				if (!this.form.checkReport) {
					this.$common.toast('请上传入关检验检疫证');
					return;
				}
				if (!this.form.outReport) {
					this.$common.toast('请上传签发出库证明');
					return;
				}
				this.$api.uploadReport(this.form).then(Resp => {
					this.$common.toast('上传成功');
					setTimeout(() => {
						this.$common.back()
					}, 500)
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.item-line {
		color: #a2a2a2;
		padding: 5px 0 10px 29px;
		border-bottom: 1px solid #E5E5E5;
	}

	@import '@/common/common.scss'
</style>