boying/pages/upload/upload.vue

<template>
	<view class="content">
		<view class="upload-title">
			请提供相关截图及描述，以便上级审核(最多两张)
		</view>
		<view class="upload-box">
			<view class="upload-img flex">
				<image src="../../static/img/upload.png" mode="" v-if="!imgone" @click="upimg('imgone')"></image>
				<image :src="imgone" mode="" v-if="imgone" @click="upimg('imgone')"></image>
				<image src="../../static/img/upload.png" mode="" v-if="!imgtow"  @click="upimg('imgtow')"></image>
				<image :src="imgtow" mode="" v-if="imgtow"  @click="upimg('imgtow')"></image>
			</view>
			<view class="fenge"></view>
			<view class="upload-content">
				<view class="describe">
					<view class="title">
						补充描述
					</view>
					<textarea class="title1" value=""  placeholder="填写描述" maxlength="140" focus="focus" />
				</view>
			</view>
		</view>
		<view class="submit" @click="sub">
			提交
		</view>
	</view>
</template>
<script>
	import {
		uploadApply
	} from '../../api/apply.js'
	import { uploads } from '@/api/user.js';
	export default {
		data() {
			return {
				imgone: '',
				imgtow: '',
				apply_id: '',
			}
		},
		onLoad(opt) {
			this.apply_id = opt.id
		},
		methods: {
			upimg(name) {
				uploads({
					filename: ''
				}).then(res => {
					console.log(res,'++++++++++++++++')
					this.$set(this,name,res[0].fullurl)
				})
			},
			sub() {
				let obj = this
				if(obj.imgone == '' && obj.imgtow == '') {
					return obj.$api.msg('请上传凭证')
				}
				uni.showLoading({
					title: '提交中...',
					mask: true
				})
				let arr = []
				if(obj.imgone) {
					arr.push(obj.imgone)
				}
				if(obj.imgtow) {
					arr.push(obj.imgtow)
				}
				console.log(arr,'arr')
				uploadApply({
					images:arr
				},obj.apply_id).then( res => {
					uni.hideLoading()
					uni.showToast({
						title:'提交成功',
						duration:2000
					});
					setTimeout(function() {
						uni.navigateBack();
					}, 800);
					console.log(res,'+++++++++++++++++')
				}).catch( err => {
					uni.hideLoading()
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		padding: 0;
		margin: 0;
	}

	.content {
		
		.upload-title {
			padding: 30rpx 30rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 28rpx;
		}

		.upload-box {
			width: 100%;
			height: 450rpx;
			background-color: #15130F;

			.upload-img {
				justify-content: flex-start;
				margin: 30rpx;
				padding-top: 30rpx;
				height: 190rpx;
				image {
					width: 160rpx;
					height: 100%;
					margin-right: 15rpx;
				}
			}

			.fenge {
				width: 100%;
				border: 1rpx solid #F0F0F0;
			}

			.describe {
				display: flex;
		
				padding: 20rpx 30rpx;

				.title {
					width: 150rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}

				.title1 {
					margin-left: 40rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}
			}
		}
		.submit{
			margin: 120rpx auto;
			text-align: center;
			line-height: 80rpx;
			width: 560rpx;
			height: 80rpx;
			background: linear-gradient(-74deg, #CE9C6D, #FFECD6);
			border-image: linear-gradient(115deg, #FEEBD5, #FFFFFF, #E1AD7D) 1 1;
			box-shadow: 3rpx 4rpx 5rpx 0rpx rgba(151, 118, 74, 0.5);
			border-radius: 40rpx;
		}
	}
</style>