|
|
@@ -1,17 +1,17 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
- <view class="Regular header-title">我是公司名称我是公司名称</view>
|
|
|
+ <view class="Regular header-title">{{jubaolist.compName}}</view>
|
|
|
<view class='content'>
|
|
|
<view class='matter'>
|
|
|
<view class="title Regular">举报事项<text style='color:#FB1E1E;'>*</text></view>
|
|
|
<view style='position:relative;'>
|
|
|
- <textarea class='textarea Regular' maxlength="150" v-model='status' placeholder="请输入举报事项" placeholder-style="color:#AFB3BF;" />
|
|
|
- <view class='Regular words'>{{status.length}}/150个字</view>
|
|
|
+ <textarea class='textarea Regular' maxlength="150" v-model='jubaolist.error' placeholder="请输入举报事项" placeholder-style="color:#AFB3BF;" />
|
|
|
+ <view class='Regular words'>{{jubaolist.error.length}}/150个字</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="uploading">
|
|
|
<view class="title Regular">上传图片</view>
|
|
|
- <u-upload width='140' height='140' :file-list="fileList" :custom-btn="true" :show-upload-list="showUploadList" ref="uUpload" :max-size="5 * 1024 * 1024" max-count="6" :action="$uploadUrl">
|
|
|
+ <u-upload @on-remove="onRemove" @on-success="onSuccess" @on-error='onError' width='140' height='140' :file-list="fileList" :custom-btn="true" ref="uUpload" :max-size="5 * 1024 * 1024" max-count="6" :action="$ossUrl">
|
|
|
<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
|
|
|
<image style='width:23px;height:23px;margin-top:10px;' src="../../static/img/liangmai/xiangji-2.png" mode=""></image>
|
|
|
<view style='color:#AFB3BF;font-size:10px;' class='Medium'>上传图片</view>
|
|
|
@@ -34,19 +34,61 @@
|
|
|
data() {
|
|
|
return {
|
|
|
status:'',
|
|
|
- fileList:[]
|
|
|
+ fileList:[],
|
|
|
+ jubaolist:{
|
|
|
+ error:''
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
onReady() {
|
|
|
// 得到整个组件对象，内部图片列表变量为"lists"
|
|
|
this.fileList = this.$refs.uUpload.lists;
|
|
|
},
|
|
|
- onLoad(){
|
|
|
-
|
|
|
+ onLoad(options){
|
|
|
+ this.jubaolist.id=options.id
|
|
|
+ this.jubaolist.compName=options.compName
|
|
|
},
|
|
|
methods: {
|
|
|
commit(){
|
|
|
- console.log(this.fileList)
|
|
|
+ console.log(this.fileList,this.$uploadUrl)
|
|
|
+ },
|
|
|
+ //图片成功上传后的回调 data为服务器返回的数据，包括图片的存放地址和名称
|
|
|
+ onSuccess(data, index, lists){
|
|
|
+ console.log('https://taohaoliang.oss-cn-beijing.aliyuncs.com/appData/'+data.data)
|
|
|
+ // console.log(data, index, lists)
|
|
|
+ //页面上定义的临时存放图片的对象，提示也保存后台返回的图片名称
|
|
|
+ // let currentFile = {name: '', url: ''};
|
|
|
+ // currentFile.name = JSON.parse(data).name;
|
|
|
+ // currentFile.url = JSON.parse(data).imgUrl;
|
|
|
+ // //成功上传一个图片就往fileList里面添加一个图片对象
|
|
|
+ // this.fileList.push(currentFile);
|
|
|
+ // //this.form.pictureUrl为后台图片字段来保存字符串类型的图片集合
|
|
|
+ // this.form.pictureUrl = JSON.stringify(this.fileList)
|
|
|
+ //console.log("打印图片List：onSuccess", this.fileList);
|
|
|
+ },
|
|
|
+ onError(res, index, lists, name){
|
|
|
+ console.log(res, index, lists, name)
|
|
|
+ },
|
|
|
+ //删除一张图片的回调，lists这是成功删除一个图片后，还剩余的图片集合
|
|
|
+ onRemove(data, lists){
|
|
|
+ //lists.length > 0说明删除之前已经上传了多余两张的图片
|
|
|
+ if(lists.length > 0 ){
|
|
|
+ var currentfileList = [];
|
|
|
+ //遍历this.fileList 与剩余的lists进行匹配，来组成一个新的格式合适的剩余图片集合
|
|
|
+ this.fileList.forEach((item, index)=>{
|
|
|
+ lists.forEach((item1, index1)=>{
|
|
|
+ if(item.name == JSON.parse(item1.response).name){
|
|
|
+ currentfileList.push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ //删除后对图片集合及时冬天更新，即对this.fileList重新赋值
|
|
|
+ this.fileList = currentfileList;
|
|
|
+ }else{//说明删除之前只有一张图片，删除成功后把this.fileList清空即可
|
|
|
+ this.fileList = [];
|
|
|
+ }
|
|
|
+ this.form.pictureUrl = JSON.stringify(this.fileList)
|
|
|
+ //console.log("打印图片List：onRemove", this.fileList);
|
|
|
}
|
|
|
}
|
|
|
}
|
