修改保质期天数勾选后提示没有勾选、临期提醒天数输入不了问题、进货价传递给后端的是undefined问题

package_a/addProduct/addProduct.vue

@@ -38,16 +38,24 @@
       <view class="form-item">
         <text class="item-label">商品图</text>
         <view class="image-upload-section">
-          <view class="upload-placeholder" @tap="chooseImage">
+          <view v-if="!productInfo.image" class="upload-placeholder" @tap="chooseImage">
             <text class="upload-icon">+</text>
             <text class="upload-text">点击上传商品图片</text>
           </view>
-          <image
-            v-if="productInfo.image"
-            :src="productInfo.image"
-            class="product-image"
-            mode="aspectFit"
-          ></image>
+          <view v-else class="image-wrapper">
+            <image
+              :src="productInfo.image"
+              class="product-image"
+              mode="aspectFit"
+              @tap="previewImage"
+            ></image>
+            <view class="image-delete-btn" @tap.stop="deleteImage">
+              <text class="image-delete-icon">x</text>
+            </view>
+            <view class="image-reupload-btn" @tap.stop="chooseImage">
+              <text class="image-reupload-text">替换</text>
+            </view>
+          </view>
         </view>
       </view>
 
@@ -129,55 +137,31 @@
       <!-- 保质期天数 -->
       <view class="form-item" v-if="productInfo.expirationManagement">
         <text class="item-label">保质期天数</text>
-        <view class="expiration-options">
-          <view
-            class="expiration-item"
-            :class="{ active: productInfo.expirationDays === 365 }"
-            @tap="setExpirationDays(365)"
-          >
-            <text class="expiration-text">1年</text>
-            <text class="expiration-days">36天</text>
+        <picker
+          mode="selector"
+          :range="expirationLabels"
+          :value="expirationIndex"
+          @change="onExpirationChange"
+        >
+          <view class="picker-value">
+            <text :class="expirationIndex >= 0 ? 'picker-text' : 'picker-placeholder'">
+              {{ expirationIndex >= 0 ? expirationOptions[expirationIndex].label : '请选择保质期天数' }}
+            </text>
+            <text class="picker-arrow">&#9662;</text>
           </view>
-          <view
-            class="expiration-item"
-            :class="{ active: productInfo.expirationDays === 270 }"
-            @tap="setExpirationDays(270)"
-          >
-            <text class="expiration-text">9个月</text>
-            <text class="expiration-days">27天</text>
-          </view>
-          <view
-            class="expiration-item"
-            :class="{ active: productInfo.expirationDays === 180 }"
-            @tap="setExpirationDays(180)"
-          >
-            <text class="expiration-text">6个月</text>
-            <text class="expiration-days">18天</text>
-          </view>
-          <view
-            class="expiration-item"
-            :class="{ active: productInfo.expirationDays === 240 }"
-            @tap="setExpirationDays(240)"
-          >
-            <text class="expiration-text">8个月</text>
-            <text class="expiration-days">24天</text>
-          </view>
-          <view
-            class="expiration-item"
-            :class="{ active: productInfo.expirationDays === 300 }"
-            @tap="setExpirationDays(300)"
-          >
-            <text class="expiration-text">10个月</text>
-            <text class="expiration-days">30天</text>
-          </view>
-        </view>
+        </picker>
       </view>
 
       <!-- 临期提醒天数 -->
       <view class="form-item" v-if="productInfo.expirationManagement">
         <text class="item-label">临期提醒天数</text>
-        <view class="warning-days-display">
-          <text class="warning-days-value">{{ productInfo.shelfLife }}</text>
+        <view class="warning-days-section">
+          <input
+            class="item-input"
+            type="number"
+            placeholder="请输入临期提醒天数"
+            v-model="productInfo.warningDays"
+          />
           <text class="warning-days-unit">天</text>
         </view>
       </view>
@@ -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; }