<template>
	<view>
		<view class="cu-bar bg-white  margin-top">
			<view class="action">
				<text class="cuIcon-titles text-red"></text>
				<text>原效果</text>
			</view>
		</view>
		<textarea class="texta" :value="oldinput" placeholder="请输入之前的效果" />
		<view class="flex solid-bottom padding align-center">
		<view  v-for="(item,index) in beforelist" :key='index'>
			<view class="huiyuan_img">
	     <image style='width: 120upx;height: 120upx; ' :src="item.url" mode=""></image>
		 <text class="cuIcon-delete" @click="beforelist.splice(index,1)" style="position: absolute;bottom: 5upx;right: 5upx; color: #000000;"></text>
			</view>
	     </view>
		 <view class="cuIcon-add addiamge" @click="beforeupload" ></view>
		</view>
		<view class="cu-bar bg-white  margin-top">
			<view class="action">
				<text class="cuIcon-titles text-red"></text>
				<text>现在效果</text>
			</view>
		</view>
		<textarea class="texta" :value="oldinput" placeholder="请输入之前的效果" />
		<view class="flex solid-bottom padding align-center">
		<view    v-for="(item,index) in laterlist" :key='index'>
			<view class="huiyuan_img">
		 <image style='width: 120upx;height: 120upx; ' :src="item.url" mode=""></image>
		 <text class="cuIcon-delete" @click="laterlist.splice(index,1)" style="position: absolute;bottom: 5upx;right: 5upx; color: #000000;"></text>
			</view>
		 </view>
		 <view class="cuIcon-add addiamge" @click="laterupload" ></view>
		 </view>
		 <view class="sub-titles">
		 	<button class="bg-red"  >提 交</button>
		 </view>
		</view>
		
</template>

<script>
	import zhUpFile from '@/components/zh-upFile'
	export default {
		components:{
		},
		data() {
			return {
				src:'',
				imageList:[],
				oldinput:"",
				beforelist:[],
				laterlist:[],
				image:'blob:http://192.168.31.193:8080/5d05aa59-3036-46c0-9ae0-9f5b81261e9b',
			}
		},
		methods: {
				
			beforeupload:function(){
				var that = this
				uni.chooseImage({
				    count: 10, //上传图片的数量，默认是9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
						console.log('res',res);
						// that.src = res.tempFilePaths[0]
						// console.log('src',that.src);
					  let image = []
					  res.tempFilePaths.forEach(item=>{
						  let items = {url:item}
						  image.push(items)
					  })
					  that.beforelist = [...  that.beforelist ,...image]
				    }
				});
			},
			laterupload:function(){
				var that = this
				uni.chooseImage({
				    count: 10, //上传图片的数量，默认是9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
						console.log('res',res);
						// that.src = res.tempFilePaths[0]
						// console.log('src',that.src);
					  let image = []
					  res.tempFilePaths.forEach(item=>{
						  let items = {url:item}
						  image.push(items)
					  })
					  that.laterlist = [...  that.laterlist ,...image]
				    }
				});
			},
		}
	}
</script>

<style>
.texta{
	padding: 10upx 5%;
	
}
.texta view{
	display: inline-block;
}	
.huiyuan_img{
	width: 120upx;
	height: 120upx;
	border: #b5ccd9 1upx solid;
	margin: 10upx;
	background-color: #DDDDDD;
	overflow: hidden;
	position: relative;
}
.addiamge{
	width: 120upx;height: 120upx; text-align: center;line-height: 120upx;border: #CCCCCC 1upx solid;margin: 10upx;
	background-color: #fff;
	font-size: 48upx;
	display: inline-block;
}
.sub-titles{
	width: 90%;
	margin:10upx 5%;
	background-color: red;
	border-radius: 15upx;
}
</style>
