|
|
<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>
|