修改编辑上传图片

pages/business/editRelease.vue

@@ -27,10 +27,26 @@
 
 
 			<view style="padding-left: 10rpx;">
-				<upload :file-list='businesslicense' class="upload" ref="upload" :action="action" :max-size="maxSize"
+				<view style='flex-wrap:wrap;' class='flex'>
+					<view v-for='(item,index) in imgList2' v-if="imgList2 && imgList2.length > 0"
+						style="position: relative;margin-left: 20rpx;">
+						<view class="delete_img" @click="deleteImg(index)">
+							<u-icon size='4' name="close"></u-icon>
+						</view>
+						<image :src="item.appendixPath" mode=""
+							style="width: 100px;height: 100px;border:1px solid #ccc;border-radius: 5rpx;"></image>
+					</view>
+					<view class="biankuang" @click="uploadClick" v-if="imgList2.length < 9">
+						<view class="tubiao">
+							<image class="upload" src="../../static/img/jiaoyi/tianjiazhaopian.png" mode="">
+							</image>
+						</view>
+					</view>
+				</view>
+				<!-- 			<upload :file-list='businesslicense' class="upload" ref="upload" :action="action" :max-size="maxSize"
 					delIconSize='30' delBgColor='rgba(0,0,0,0.4)' delIcon="trash" :max-count="9"
 					:size-type="['compressed']" @on-success="getImgUrl" @on-remove="onRemove"
-					:before-upload="filterFileType"></upload>
+					:before-upload="filterFileType"></upload> -->
 			</view>
 		</view>
 		<view class="content2">
@@ -71,6 +87,7 @@
 </template>
 
 <script>
+	import * as config from '../../config'
 	import upload from '@/components/upload_small.vue';
 	import selectAddress from "@/components/selectAddress.vue"
 	import {
@@ -83,6 +100,7 @@
 		},
 		data() {
 			return {
+				imgList2: [],
 				searchPlaceHolder: '选择交货地区',
 				placeTitle: '交货地',
 				id: '',
@@ -120,8 +138,27 @@
 				action: this.$uploadUrl,
 				maxSize: 50 * 1024 * 1024, //限制文件大小 50M
 				isAdd: false,
+				num: 0
 			};
 		},
+		watch: {
+			imgList: {
+				handler: function() {
+					var that = this
+					setTimeout(() => {
+						that.$api.doRequest('get', 'appendix/query/getFileList', {
+							appendixIds: that.imgList.toString()
+						}).then(res => {
+							that.imgList2 = res.data.data
+							that.$forceUpdate()
+						})
+					}, 1000)
+
+				},
+				deep: true,
+				immediate: true
+			}
+		},
 		onLoad(options) {
 			this.id = options.id
 			console.log(this.id)
@@ -147,10 +184,82 @@
 			}
 		},
 		methods: {
+			deleteImg(index) {
+				this.num = this.imgList.length
+				this.imgList.splice(index, 1)
+			},
+			async uploadClick() {
+				let baseUrlNew = config.def().baseUrlNew
+				let pcUserInfo = uni.getStorageSync('pcUserInfo')
+				console.log('baseUrlNew', baseUrlNew)
+				if (!pcUserInfo) {
+					uni.showToast({
+						title: "登录已失效，请重新登录"
+					})
+					return
+				}
+				await uni.chooseImage({
+					count: 9,
+					success: (chooseImageRes) => {
+						console.log('chooseImageRes', chooseImageRes)
+						let files = []
+						for (let item of chooseImageRes.tempFiles) {
+							files.push({
+								name: 'fileName',
+								url: item.path
+							});
+						}
+						console.log(files)
+						for (let i = 0; i < files.length; i++) {
+							this.num++
+							if (this.num < 10) {
+								console.log(this.num)
+								uni.uploadFile({
+									url: baseUrlNew + 'appendix/api/uploadFiles',
+									// url: baseUrlNew+'appendix/api/uploadFiles', //仅为示例，非真实的接口地址
+									// files: files[i],
+									filePath: files[i].url,
+									name: files[i].name,
+									formData: {
+										// fileName: chooseImageRes.tempFiles[0],
+										companyId: pcUserInfo.compId,
+										modelId: '',
+										vesselId: '',
+									},
+									success: (uploadFileRes) => {
+										console.log(JSON.parse(uploadFileRes.data))
+										var data = JSON.parse(uploadFileRes.data).data
+										data.compId = pcUserInfo.compId
+										this.$api.doRequest('post',
+											'/appendix/api/saveFilesApp', {
+												newAppendixs: [data],
+												oldAppendixIds: ""
+											}).then(res => {
+
+											console.log(res.data.data)
+											this.imgList.push(res.data.data[0])
+
+
+										})
+										console.log(uploadFileRes.data);
+									},
+									fail(res) {
+										console.log(res);
+									}
+								});
+							} else {
+								break;
+							}
+
+						}
+
+					}
+				});
+			},
 			clear() {
 				this.dataObj.publishingContent = ''
 			},
-			init() {
+			async init() {
 				let _obj = {
 					id: this.id
 				}
@@ -158,7 +267,7 @@
 					title: '数据加载中',
 					mask: true
 				})
-				this.$api.doRequest('get', '/transactionExchangeInfo/selectExchangeInfo', _obj).then(res => {
+				await this.$api.doRequest('get', '/transactionExchangeInfo/selectExchangeInfo', _obj).then(res => {
 					console.log(res.data)
 					if (res.data.code == 200) {
 						this.dataObj = res.data.data
@@ -170,15 +279,39 @@
 							this.searchPlaceHolder = '选择交货地区'
 						}
 						this.imgList = res.data.data.urlImg.split(',')
-						for (let i = 0; i < this.imgList.length; i++) {
-							this.businesslicense.push({
-								url: this.imgList[i]
-							})
-						}
-						console.log("this.businesslicense", this.businesslicense)
+						// for (let i = 0; i < this.imgList.length; i++) {
+						// 	this.businesslicense.push({
+						// 		url: this.imgList[i]
+						// 	})
+						// }
+						// console.log("this.businesslicense", this.businesslicense)
 					}
 					uni.hideLoading()
 				})
+				if (this.imgList.length > 0) {
+					this.businesslicense = []
+					console.log(this.imgList)
+					let _imgList = []
+					for (let i = 0; i < this.imgList.length; i++) {
+						await this.$api.doRequest('get', 'appendix/query/getFileList', {
+							appendixIds: this.imgList[i]
+						}).then(res1 => {
+							console.log(res1)
+							_imgList.push({
+								url: res1.data.data[0].appendixPath
+							})
+							if (i == this.imgList.length - 1) {
+								uni.hideLoading()
+							}
+							// for (let q = 0; q < res1.data.data.length; q++) {
+
+							// }
+						})
+
+					}
+					this.businesslicense = _imgList
+					console.log("this.businesslicense", this.businesslicense)
+				}
 			},
 			closePopup() {
 				this.dataObj.publisher = this.userInfo.wechatNo
@@ -483,4 +616,46 @@
 		// font-size: 28rpx;
 		// padding: 9rpx 24rpx;
 	}
+
+	.biankuang {
+		// border: 1px dashed #AFB3BF;
+		border-radius: 10rpx;
+		width: 200rpx;
+		height: 200rpx;
+		margin-left: 20rpx;
+		text-align: center;
+		line-height: 220rpx;
+		background: #F5F6FA;
+
+		.upload {
+			width: 46rpx;
+			height: 46rpx;
+		}
+	}
+
+	.delete_img {
+		position: absolute;
+		z-index: 100;
+		right: 0px;
+		border-radius: 0 5rpx 0 10px;
+		color: #ffffff;
+		font-size: 28rpx;
+
+		border: 1px;
+		// border-radius: 5rpx;
+		width: 40rpx;
+		height: 38rpx;
+		background-color: rgba(17, 26, 52, 0.50);
+		text-align: center;
+	}
+
+	/deep/.pickerClass {
+		width: 80%;
+		position: absolute;
+		right: 11px;
+		padding: 0 30px 0 0;
+		top: 50%;
+		transform: translateY(-50%);
+		z-index: 2
+	}
 </style>

pages/business/record.vue

@@ -124,6 +124,16 @@
 
 
 		methods: {
+			previewImage(item, index) {
+				console.log(111111111)
+				var i = item.imgList; //获取当前页面的轮播图数据
+				//uniapp预览轮播图
+				uni.previewImage({
+					indicator: 'default',
+					current: index, //预览图片的下标
+					urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
+				})
+			},
 			refresh(val) {
 				let _obj = {
 					id: val.id,