newjlxred/pages/fu/upLoadInfo.vue

<template>
	<view class="container">
		<view class="up-tit">请提供相关图片描述 以便我们后续跟进</view>
		<view class="add-img-box flex_item">
			<view class="add-img-item"  v-for="(item, index) in imgList" :key="index">
				<image class="add-img" @click.stop="imgInfo(index)" :src="item" mode="aspectFill"></image>
				<image class="add-img-del" @click.stop="delImg(index)" src="/static/img/delete.png"></image>
			</view>
			<view v-if='imgCount > 0' class="add-img-item" @click.stop="scImg()">
				<image class="add-img" src="../../static/images/sctp.png"></image>
			</view>
		</view>
		<view class="mark-box">
			<view class="mark-tit">补充描述</view>
			<textarea class="mark-text" v-model="mark" placeholder="填写描述"></textarea>
		</view>
		<view class="up-btn" v-if="type == 0" @click="submit">提交</view>
		<view class="up-btn" v-if="type == 1" @click="submit">修改</view>
	</view>
</template>

<script>
import { upload,add_four_help } from '@/api/index.js';
import { means, get_means } from '@/api/applyHelp.js';
export default {
	data() {
		return {
			imgList: [],	// 图片
			cloudimgList: [],
			mark: '',	// 描述
			imgCount: 6,	// 最多传6张
			id: '',
			type: 0,
		}
	},
	onLoad(option) {
		this.id = option.id;
		if ( option.type ) {
			this.type = 1;
			get_means({
				id: this.id
			}).then(({data}) => {
				this.imgList = data.img;
				this.mark = data.remark; 
			})
		}
	},
	methods: {
		//多张上传图片
		scImg() {
			let obj = this;
			upload({
				file: ''
			})
				.then(e => {
					let list = []
					obj.imgList = [...obj.imgList, e[0].url];
					console.log(obj.imgList);
					obj.imgCount = 6 - obj.imgList.length;
				})
				.catch(e => {});
		},
		//点击图片显示大图
		imgInfo(i) {
			let tempList = [];
			this.imgList.forEach(e => {
				tempList.push(e);
			});
			//显示图片
			uni.previewImage({
				current: i,
				loop: false,
				urls: this.imgList,
				indicator: 'default'
			});
		},
		//删除图片
		delImg(i) {
			uni.showModal({
				content: '确定删除这张吗',
				success: res => {
					if (res.confirm) {
						this.imgList.splice(i, 1);
						this.imgCount++;
					} else if (res.cancel) {
					}
				}
			});
		},
		// 提交
		submit() {
			let obj = this;
			
			let arr = obj.imgList.join(';');
			console.log(arr,'arr')
			
			console.log(this.mark);
			if (!obj.imgList) {
				obj.$api.msg('请上传图片');
				return;
			}
			if (!obj.mark) {
				obj.$api.msg('请填写描述');
				return;
			}
			means({
				id: obj.id,
				img: arr,
				remark: obj.mark,
			}).then(({data}) => {
				obj.$api.msg('上传成功');
				uni.navigateBack();
			}).catch(e => {
				console.log(e);
			})
		},
	}
}
</script>

<style lang="scss">
.container {
	.up-tit {
		padding: 24rpx 30rpx;
		font-size: $font-base;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.add-img-box {
		width: 100%;
		flex-wrap: wrap;
		// justify-content: center;
		padding: 30rpx 30rpx 0 30rpx;
		background: #FFFFFF;
		border-bottom: 1px solid #F0F0F0;
	}
	.add-img-item {
		margin-bottom: 25rpx;
		width: 33.33%;
		position: relative;
		.add-img {
			padding: 0rpx 10rpx;
			width: 100%;
			height: 214rpx;
			display: block;
		}
	}
	.add-img-del {
		position: absolute;
		width: 40rpx;
		height: 40rpx;
		right: 10rpx;
		top: 0;
		// bottom: 155rpx;
		//background-color: rgba(238, 0, 0, 1);
		border-radius: 20rpx;
	}
	.mark-box {
		display: flex;
		align-items: flex-start;
		background: #FFFFFF;
		padding: 40rpx 30rpx 0 30rpx;
		.mark-tit {
			margin-right: 40rpx;
			font-size: $font-base;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			flex-shrink: 0;
		}
		.mark-text {
			font-size: $font-base - 2rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
	}
	.up-btn {
		margin: auto;
		margin-top: 120rpx;
		width: 560rpx;
		height: 80rpx;
		background: #FF727E;
		border-radius: 40rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>