Ver código fonte

团餐修改

付晓文。 3 meses atrás
pai
commit
abe19445cf
1 arquivos alterados com 48 adições e 19 exclusões
  1. 48 19
      pages/groupMeal/goods/form-step1.vue

+ 48 - 19
pages/groupMeal/goods/form-step1.vue

@@ -20,14 +20,17 @@
 				<u-form-item prop="productImage" label="商品封面图" required labelPosition="top">
 					<view class="upload-content">
 						<view class="upload-tip">支持jpg、png格式,建议尺寸为750px*750px,上传1-4张</view>
-						<Upload
+						<u-upload
+							:action="uploadAction"
+							:file-list="fileList.cover"
+							:form-data="uploadFormData"
+							:max-count="4"
+							:multiple="true"
 							width="140"
 							height="140"
-							:maxCount="4"
-							:multiple="true"
-							:fileList.sync="fileList.cover"
-							:previewFullImage="true"
-							@complete="onUpload($event, 'cover')"
+							preview-full-image
+							@on-success="onCoverSuccess"
+							@on-remove="onCoverRemove"
 						/>
 					</view>
 				</u-form-item>
@@ -35,14 +38,17 @@
 				<u-form-item prop="detailImages" label="商品详情图" required borderBottom labelPosition="top">
 					<view class="upload-content">
 						<view class="upload-tip">支持jpg、png格式,最多20张</view>
-						<Upload
+						<u-upload
+							:action="uploadAction"
+							:file-list="fileList.detail"
+							:form-data="uploadFormData"
+							:max-count="20"
+							:multiple="true"
 							width="140"
 							height="140"
-							:maxCount="20"
-							:multiple="true"
-							:fileList.sync="fileList.detail"
-							:previewFullImage="true"
-							@complete="onUpload($event, 'detail')"
+							preview-full-image
+							@on-success="onDetailSuccess"
+							@on-remove="onDetailRemove"
 						/>
 					</view>
 				</u-form-item>
@@ -77,15 +83,14 @@
 </template>
 
 <script>
-import Upload from '@/components/upload/index.vue';
 import configService from '@/common/service/config.service';
 export default {
-	components: {
-		Upload,
-	},
 	data() {
 		return {
 			show: false,
+			uploadAction: configService.apiUrl + '/sys/common/upload',
+			imageHttp: configService.apiUrl + '/',
+			uploadFormData: { biz: 'temp' },
 			form: {
 				name: '',
 				category: '',
@@ -265,9 +270,33 @@ export default {
 			});
 		},
 		// 图片处理
-		onUpload(event, type) {
-			this.fileList[type] = event;
-			this.form[type === 'cover' ? 'productImage' : 'detailImages'] = this.fileList[type].map(f => `${configService.apiUrl}/${f.message}`).join();
+		processImageList(lists, formKey) {
+			const urls = lists.map(item => {
+				if (item.response && item.response.message) {
+					return this.imageHttp + item.response.message;
+				}
+				if (item.url) {
+					return item.url;
+				}
+				return '';
+			}).filter(Boolean);
+			this.form[formKey] = urls.join(',');
+		},
+		onCoverSuccess(res, index, lists) {
+			this.fileList.cover = lists;
+			this.processImageList(lists, 'productImage');
+		},
+		onCoverRemove(index, lists) {
+			this.fileList.cover = lists;
+			this.processImageList(lists, 'productImage');
+		},
+		onDetailSuccess(res, index, lists) {
+			this.fileList.detail = lists;
+			this.processImageList(lists, 'detailImages');
+		},
+		onDetailRemove(index, lists) {
+			this.fileList.detail = lists;
+			this.processImageList(lists, 'detailImages');
 		},
 		// 下一步
 		goNextStep() {