|
|
@@ -27,25 +27,41 @@
|
|
|
</view>
|
|
|
<view class="upload-row">
|
|
|
<text class="label required">商品封面图</text>
|
|
|
- <view class="tip">支持jpg、png格式,建议尺寸750px*750px</view>
|
|
|
- <view class="upload-box" @click="pickImage('cover')">
|
|
|
- <image v-if="form.cover" :src="form.cover" mode="aspectFill"></image>
|
|
|
- <template v-else>
|
|
|
- <text class="plus">+</text>
|
|
|
- <text>上传图片</text>
|
|
|
- </template>
|
|
|
- </view>
|
|
|
+ <view class="tip">支持jpg、png格式,建议尺寸为750px*750px,上传1-4张</view>
|
|
|
+ <u-upload
|
|
|
+ :action="uploadAction"
|
|
|
+ :file-list="fileList.cover"
|
|
|
+ :form-data="uploadFormData"
|
|
|
+ :max-count="4"
|
|
|
+ :multiple="true"
|
|
|
+ :deletable="true"
|
|
|
+ del-bg-color="#fa3534"
|
|
|
+ upload-text="选择图片"
|
|
|
+ width="140"
|
|
|
+ height="140"
|
|
|
+ preview-full-image
|
|
|
+ @on-success="onCoverSuccess"
|
|
|
+ @on-remove="onCoverRemove"
|
|
|
+ />
|
|
|
</view>
|
|
|
<view class="upload-row">
|
|
|
<text class="label required">商品详情图</text>
|
|
|
- <view class="tip">支持jpg、png格式</view>
|
|
|
- <view class="upload-box" @click="pickImage('detail')">
|
|
|
- <image v-if="form.detail" :src="form.detail" mode="aspectFill"></image>
|
|
|
- <template v-else>
|
|
|
- <text class="plus">+</text>
|
|
|
- <text>上传图片</text>
|
|
|
- </template>
|
|
|
- </view>
|
|
|
+ <view class="tip">支持jpg、png格式,最多20张</view>
|
|
|
+ <u-upload
|
|
|
+ :action="uploadAction"
|
|
|
+ :file-list="fileList.detail"
|
|
|
+ :form-data="uploadFormData"
|
|
|
+ :max-count="20"
|
|
|
+ :multiple="true"
|
|
|
+ :deletable="true"
|
|
|
+ del-bg-color="#fa3534"
|
|
|
+ upload-text="选择图片"
|
|
|
+ width="140"
|
|
|
+ height="140"
|
|
|
+ preview-full-image
|
|
|
+ @on-success="onDetailSuccess"
|
|
|
+ @on-remove="onDetailRemove"
|
|
|
+ />
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
@@ -174,6 +190,7 @@
|
|
|
|
|
|
<script>
|
|
|
import { createMockDishes, buildSpecCombos } from '../mock.js';
|
|
|
+import configService from '@/common/service/config.service';
|
|
|
|
|
|
const DISH_KEY = 'merchantDish_list';
|
|
|
const DRAFT_KEY = 'merchantDish_draft';
|
|
|
@@ -227,6 +244,13 @@ export default {
|
|
|
editId: null,
|
|
|
// 是否开通团餐功能(审核通过后可用团餐归属)
|
|
|
groupMealOpened: false,
|
|
|
+ uploadAction: configService.apiUrl + '/sys/common/upload',
|
|
|
+ imageHttp: configService.apiUrl + '/',
|
|
|
+ uploadFormData: { biz: 'temp' },
|
|
|
+ fileList: {
|
|
|
+ cover: [],
|
|
|
+ detail: []
|
|
|
+ },
|
|
|
form: {
|
|
|
belong: 'store',
|
|
|
category: 'seasonal',
|
|
|
@@ -346,15 +370,54 @@ export default {
|
|
|
this.form.category = item.category;
|
|
|
this.form.name = item.name;
|
|
|
this.form.productType = item.productType;
|
|
|
- this.form.cover = item.image;
|
|
|
- this.form.detail = item.image;
|
|
|
+ this.form.cover = item.image || '';
|
|
|
+ this.form.detail = item.detailImages || item.image || '';
|
|
|
this.form.isCombo = item.isCombo ? 1 : 0;
|
|
|
this.form.price = String(item.price);
|
|
|
this.form.originPrice = String(item.originPrice);
|
|
|
this.form.stock = String(item.stock);
|
|
|
this.form.specMode = 'single';
|
|
|
+ this.fileList = {
|
|
|
+ cover: this.toFileList(this.form.cover),
|
|
|
+ detail: this.toFileList(this.form.detail)
|
|
|
+ };
|
|
|
this.applySpecLock();
|
|
|
},
|
|
|
+ toFileList(value) {
|
|
|
+ if (!value) return [];
|
|
|
+ return String(value)
|
|
|
+ .split(',')
|
|
|
+ .filter(Boolean)
|
|
|
+ .map((url) => ({ url }));
|
|
|
+ },
|
|
|
+ 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, 'cover');
|
|
|
+ },
|
|
|
+ onCoverRemove(index, lists) {
|
|
|
+ this.fileList.cover = lists;
|
|
|
+ this.processImageList(lists, 'cover');
|
|
|
+ },
|
|
|
+ onDetailSuccess(res, index, lists) {
|
|
|
+ this.fileList.detail = lists;
|
|
|
+ this.processImageList(lists, 'detail');
|
|
|
+ },
|
|
|
+ onDetailRemove(index, lists) {
|
|
|
+ this.fileList.detail = lists;
|
|
|
+ this.processImageList(lists, 'detail');
|
|
|
+ },
|
|
|
onBelongChange(val) {
|
|
|
const belong = val || this.form.belong;
|
|
|
this.form.belong = belong;
|
|
|
@@ -381,14 +444,6 @@ export default {
|
|
|
onTypePick(e) {
|
|
|
this.form.productType = e.value;
|
|
|
},
|
|
|
- pickImage(field) {
|
|
|
- uni.chooseImage({
|
|
|
- count: 1,
|
|
|
- success: (res) => {
|
|
|
- this.form[field] = res.tempFilePaths[0];
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
goCombo() {
|
|
|
uni.setStorageSync('merchantDish_combo_editing', this.form.comboItems || []);
|
|
|
uni.navigateTo({ url: '/pages/merchantDish/dish/combo' });
|
|
|
@@ -454,8 +509,13 @@ export default {
|
|
|
uni.showToast({ title: '请完善必填信息', icon: 'none' });
|
|
|
return;
|
|
|
}
|
|
|
+ const coverUrls = (this.form.cover || '').split(',').filter(Boolean);
|
|
|
const draft = {
|
|
|
...this.form,
|
|
|
+ coverImages: this.form.cover,
|
|
|
+ // 列表缩略图取封面第一张
|
|
|
+ cover: coverUrls[0] || '',
|
|
|
+ detailImages: this.form.detail,
|
|
|
isEdit: this.isEdit,
|
|
|
editId: this.editId,
|
|
|
combos: this.form.specMode === 'multi' ? buildSpecCombos(this.form.specs) : []
|
|
|
@@ -543,27 +603,8 @@ export default {
|
|
|
color: #999;
|
|
|
margin: 8rpx 0 16rpx;
|
|
|
}
|
|
|
- .upload-box {
|
|
|
- width: 160rpx;
|
|
|
- height: 160rpx;
|
|
|
- background: #f7f8fc;
|
|
|
- border-radius: 12rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 22rpx;
|
|
|
- color: #999;
|
|
|
- overflow: hidden;
|
|
|
- .plus {
|
|
|
- font-size: 48rpx;
|
|
|
- line-height: 1;
|
|
|
- margin-bottom: 4rpx;
|
|
|
- }
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
+ ::v-deep .u-add-tips {
|
|
|
+ margin-top: 10rpx;
|
|
|
}
|
|
|
}
|
|
|
.spec-block {
|