boying/pages/upload/upload.vue

<template>
	<view class="content">
		<view class="upload-title">{{ type == 2 ? $t('hea.scms') : $t('hea.ptms') }}</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">{{ $t('hea.bcms') }}</view>
					<textarea class="title1" value="" :placeholder="$t('hea.txms')" maxlength="140" focus="focus" placeholder-class="place" />
				</view>
			</view>
		</view>
		<view class="submit" @click="sub">{{ $t('hea.tj') }}</view>
	</view>
</template>
<script>
import { uploadApply } from '../../api/apply.js';
import { uploads } from '@/api/user.js';
export default {
	data() {
		return {
			imgone: '',
			imgtow: '',
			apply_id: '',
			type: 2
		};
	},
	onLoad(opt) {
		uni.setNavigationBarTitle({
			title: this.$t('foo.sczl')
		});
		this.apply_id = opt.id;
		this.type = opt.type;
	},
	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 {
				padding: 10rpx;
				margin-left: 40rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000;
				background: #ebebeb;
			}
			.place {
				color: #15130f;
			}
		}
	}
	.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>