diff --git a/package_a/addProduct/addProduct.vue b/package_a/addProduct/addProduct.vue index 46bdb06..7396bf3 100644 --- a/package_a/addProduct/addProduct.vue +++ b/package_a/addProduct/addProduct.vue @@ -38,16 +38,24 @@ 商品图 - + + 点击上传商品图片 - + + + + x + + + 替换 + + @@ -129,55 +137,31 @@ 保质期天数 - - - 1年 - 36天 + + + + {{ expirationIndex >= 0 ? expirationOptions[expirationIndex].label : '请选择保质期天数' }} + + - - 9个月 - 27天 - - - 6个月 - 18天 - - - 8个月 - 24天 - - - 10个月 - 30天 - - + 临期提醒天数 - - {{ productInfo.shelfLife }} + + @@ -273,10 +257,21 @@ export default { productionDate: '', url:'' }, - showScanner: false + showScanner: false, + expirationOptions: [ + { label: '6个月(180天)', days: 180 }, + { label: '8个月(240天)', days: 240 }, + { label: '9个月(270天)', days: 270 }, + { label: '10个月(300天)', days: 300 }, + { label: '1年(365天)', days: 365 } + ], + expirationIndex: -1 } }, computed: { + expirationLabels() { + return this.expirationOptions.map(item => item.label); + }, warningDaysDisplay() { if (!this.productInfo.expirationDays) return ''; const days = parseInt(this.productInfo.expirationDays); @@ -316,7 +311,12 @@ export default { if(fromData.shelfLife){ console.log(fromData.productionDate); this.productInfo.productionDate = fromData.productionDate || '2026-12-19' + this.productInfo.expirationDays = fromData.shelfLife; this.productInfo.shelfLife = fromData.shelfLife; + this.productInfo.warningDays = fromData.approaching || fromData.shelfLife.toString().substring(0, 2); + // 同步下拉框选中索引 + const idx = this.expirationOptions.findIndex(item => item.days === Number(fromData.shelfLife)); + if (idx >= 0) this.expirationIndex = idx; } console.log(this.productInfo); } catch (e) { @@ -378,6 +378,16 @@ export default { } }, + // 预览图片 + previewImage() { + if (this.productInfo.image) { + uni.previewImage({ + current: this.productInfo.image, + urls: [this.productInfo.image] + }) + } + }, + // 选择图片 chooseImage() { uni.chooseImage({ @@ -390,6 +400,19 @@ export default { }) }, + // 删除图片 + deleteImage() { + uni.showModal({ + title: '提示', + content: '确定要删除商品图片吗?', + success: (res) => { + if (res.confirm) { + this.productInfo.image = '' + } + } + }) + }, + // 设置推荐价格 setPrice(price) { this.productInfo.price = price.toString() @@ -401,12 +424,14 @@ export default { this.productInfo.expirationManagement = e.detail.value }, - // 设置保质期天数 - setExpirationDays(days) { - this.productInfo.expirationDays = days.toString() - const warningDays = days.toString().substring(0, 2); + // 下拉框选择保质期天数 + onExpirationChange(e) { + const index = e.detail.value; + this.expirationIndex = index; + const selected = this.expirationOptions[index]; + this.productInfo.expirationDays = selected.days.toString(); + const warningDays = selected.days.toString().substring(0, 2); this.productInfo.warningDays = warningDays; - uni.showToast({ title: `已设置为${days}天`, icon: 'success', duration: 1500 }) }, // 表单验证-完整校验 @@ -415,7 +440,7 @@ export default { if (!this.productInfo.price) { uni.showToast({ title: '请输入售价', icon: 'none' });return false } // 开启保质期管理 必校验三项 if (this.productInfo.expirationManagement) { - if (!this.productInfo.shelfLife) { uni.showToast({ title: '请选择保质期天数', icon: 'none' });return false } + if (!this.productInfo.expirationDays) { uni.showToast({ title: '请选择保质期天数', icon: 'none' });return false } // 临期提醒天数自动设置,不需要手动输入 if (!this.productInfo.productionDate) { uni.showToast({ title: '请选择生产日期', icon: 'none' });return false } } @@ -435,7 +460,7 @@ export default { productBarCode: this.productInfo.barcode, storePrice: this.productInfo.price, stockQuantity: this.productInfo.quantity, - costPrice: this.productInfo.costPrice, + costPrice: this.productInfo.cost, productCode: this.productInfo.productCode, shelfCode: this.productInfo.shelfCode, expirationManagement: this.productInfo.expirationManagement ? 1 : 0, @@ -444,6 +469,7 @@ export default { approaching: this.productInfo.warningDays, storeId: storeId }; + console.log('gggg',formData) const res = await addProductWithFile(this.productInfo.image || '', formData); uni.hideLoading(); if (res.code === 200) { @@ -503,7 +529,12 @@ export default { .upload-placeholder { width:200rpx;height:200rpx;border:2rpx dashed #ccc;border-radius:8rpx;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f9f9f9; } .upload-icon { font-size:48rpx;color:#999;margin-bottom:16rpx; } .upload-text { font-size:24rpx;color:#999; } +.image-wrapper { position:relative;width:200rpx;height:200rpx; } .product-image { width:200rpx;height:200rpx;border-radius:8rpx; } +.image-delete-btn { position:absolute;top:-16rpx;right:-16rpx;width:40rpx;height:40rpx;background:#F53F3F;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:10; } +.image-delete-icon { color:#fff;font-size:26rpx;line-height:40rpx; } +.image-reupload-btn { position:absolute;bottom:0;left:0;right:0;height:48rpx;background:rgba(0,0,0,0.5);border-radius:0 0 8rpx 8rpx;display:flex;align-items:center;justify-content:center; } +.image-reupload-text { color:#fff;font-size:22rpx; } /* 价格区域 */ .price-section { display:flex;align-items:center;flex:1;justify-content:flex-end; } @@ -522,19 +553,15 @@ export default { .quantity-section,.cost-section { display:flex;align-items:center;flex:1;justify-content:flex-end; } .quantity-unit,.cost-unit { font-size:32rpx;color:#333;margin-left:10rpx; } -/* ✅ 保质期相关样式 完美匹配 */ -.expiration-options { display:flex;flex-wrap:wrap;gap:20rpx;flex:1;justify-content:flex-end; } -.expiration-item { display:flex;flex-direction:column;align-items:center;padding:16rpx 20rpx;background:#f9f9f9;border-radius:8rpx;min-width:100rpx;border:2rpx solid transparent;transition:all 0.3s; } -.expiration-item.active { background:#F53F3F;border-color:#F53F3F; } -.expiration-item.active .expiration-text { color:#fff; } -.expiration-item.active .expiration-days { color:#fff; } -.expiration-text { font-size:28rpx;color:#333; } -.expiration-days { font-size:24rpx;color:#999;margin-top:4rpx; } +/* 保质期下拉框样式 */ +.picker-value { display:flex;align-items:center;justify-content:flex-end;padding:0 20rpx;min-width:280rpx; } +.picker-text { font-size:30rpx;color:#333; } +.picker-placeholder { font-size:30rpx;color:#999; } +.picker-arrow { font-size:24rpx;color:#999;margin-left:12rpx; } /* 临期提醒天数样式 */ -.warning-days-display { display:flex;align-items:center;flex:1;justify-content:flex-end; } -.warning-days-value { font-size:36rpx;color:#F53F3F;font-weight:600;margin-right:8rpx; } -.warning-days-unit { font-size:28rpx;color:#666; } +.warning-days-section { display:flex;align-items:center;flex:1;justify-content:flex-end; } +.warning-days-unit { font-size:32rpx;color:#333;margin-left:10rpx; } /* 分隔线 */ .divider { height:20rpx;background:#f5f5f5;border-top:1rpx solid #f0f0f0;border-bottom:1rpx solid #f0f0f0; }