|
|
@@ -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() {
|