fix: 商品管理面积计算改为平方米

src/pages/product/manage.vue

@@ -57,22 +57,6 @@
           <text class="close-btn" @click="closeModal">×</text>
         </view>
         <view class="modal-body">
-          <view class="form-item">
-            <text class="label">商品名称*</text>
-            <input class="input" v-model="form.name" placeholder="请输入商品名称" />
-          </view>
-          <view class="form-item">
-            <text class="label">规格</text>
-            <input class="input" v-model="form.spec" placeholder="请输入规格" />
-          </view>
-          <view class="form-item">
-            <text class="label">单位*</text>
-            <input class="input" v-model="form.unit" placeholder="如：个、箱、米" />
-          </view>
-          <view class="form-item">
-            <text class="label">价格*</text>
-            <input class="input" type="digit" v-model="form.price" placeholder="请输入价格" />
-          </view>
           <view class="form-item">
             <text class="label">分类</text>
             <picker :range="categories" range-key="name" @change="onCategoryChange">
@@ -81,6 +65,38 @@
               </view>
             </picker>
           </view>
+          <view class="form-row">
+            <view class="form-item half">
+              <text class="label">长度</text>
+              <input class="input" type="digit" v-model="form.length" placeholder="非必须" />
+            </view>
+            <view class="form-item half">
+              <text class="label">宽度</text>
+              <input class="input" type="digit" v-model="form.width" placeholder="非必须" />
+            </view>
+            <view class="form-item half">
+              <text class="label">面积</text>
+              <input class="input" type="digit" v-model="form.area" placeholder="自动计算" disabled />
+            </view>
+          </view>
+          <view class="form-row">
+            <view class="form-item half">
+              <text class="label">规格</text>
+              <input class="input" v-model="form.spec" placeholder="非必须" />
+            </view>
+            <view class="form-item half">
+              <text class="label">单位*</text>
+              <input class="input" v-model="form.unit" placeholder="如：个、箱、米" />
+            </view>
+          </view>
+          <view class="form-item">
+            <text class="label">商品名称*</text>
+            <input class="input" v-model="form.name" placeholder="请输入商品名称" />
+          </view>
+          <view class="form-item">
+            <text class="label">价格*</text>
+            <input class="input" type="digit" v-model="form.price" placeholder="请输入价格" />
+          </view>
           <view class="form-item">
             <text class="label">备注</text>
             <textarea class="textarea" v-model="form.remark" placeholder="请输入备注" />
@@ -109,11 +125,14 @@ export default {
       isEdit: false,
       form: {
         productId: '',
+        categoryId: '',
         name: '',
         spec: '',
         unit: '',
         price: '',
-        categoryId: '',
+        length: '',
+        width: '',
+        area: '',
         remark: '',
         status: 1
       }
@@ -128,6 +147,22 @@ export default {
     this.loadCategories()
     this.loadProducts()
   },
+  computed: {
+    computedArea() {
+      const l = parseFloat(this.form.length)
+      const w = parseFloat(this.form.width)
+      // 长度(cm) × 宽度(cm) ÷ 10000 = 面积(m²)
+      if (!isNaN(l) && !isNaN(w) && l > 0 && w > 0) {
+        return (l * w / 10000).toFixed(2)
+      }
+      return ''
+    }
+  },
+  watch: {
+    computedArea(val) {
+      this.form.area = val
+    }
+  },
   methods: {
     async loadCategories() {
       try {

src/pages/product/select.vue

@@ -14,38 +14,65 @@
       </view>
     </view>
 
-    <!-- 分类 + 商品列表 -->
+    <!-- 分类行 -->
-    <view class="content-wrapper">
+    <view class="category-row">
-      <!-- 左侧分类 -->
+      <view class="category-item" :class="{ active: !categoryId }" @click="selectCategory('')">
-      <scroll-view scroll-y class="category-sidebar">
+        全部
-        <view class="category-item" :class="{ active: !categoryId }" @click="selectCategory('')">
+      </view>
-          全部
+      <view v-for="cat in categories" :key="cat.categoryId" class="category-item" :class="{ active: categoryId === cat.categoryId }" @click="selectCategory(cat.categoryId)">
-        </view>
+        {{ cat.name }}
-        <view v-for="cat in categories" :key="cat.categoryId" class="category-item" :class="{ active: categoryId === cat.categoryId }" @click="selectCategory(cat.categoryId)">
+      </view>
-          {{ cat.name }}
+    </view>
-        </view>
-      </scroll-view>
 
-      <!-- 右侧商品列表 -->
+    <!-- 商品列表 -->
-      <scroll-view scroll-y class="product-scroll">
+    <scroll-view scroll-y class="product-scroll">
-        <view class="product-list">
+      <view class="product-list">
-          <view v-for="item in productList" :key="item.productId" class="product-item" @click="selectProduct(item)">
+        <view v-for="item in productList" :key="item.productId" class="product-item" @click="openProductDetail(item)">
-            <view class="product-info">
+          <view class="product-info">
-              <text class="product-name">{{ item.name }}</text>
+            <text class="product-name">{{ item.name }}</text>
-              <text class="product-spec">{{ item.spec || '-' }}</text>
+            <text class="product-spec">{{ item.spec || '-' }}</text>
-            </view>
-            <view class="product-price">
-              <text class="price">¥{{ item.price }}</text>
-              <text class="unit">{{ item.unit || '个' }}</text>
-            </view>
           </view>
-          
+          <view class="product-price">
-          <view v-if="productList.length === 0" class="empty">
+            <text class="price">¥{{ item.price }}</text>
-            <Icon name="product" :size="80" color="#ccc" />
+            <text class="unit">{{ item.unit || '个' }}</text>
-            <text class="empty-text">暂无商品</text>
           </view>
         </view>
-      </scroll-view>
+        
+        <view v-if="productList.length === 0" class="empty">
+          <Icon name="product" :size="80" color="#ccc" />
+          <text class="empty-text">暂无商品</text>
+        </view>
+      </view>
+    </scroll-view>
+
+    <!-- 商品详情/选择弹窗 -->
+    <view class="modal-mask" v-if="showModal" @click="closeModal">
+      <view class="modal-content" @click.stop>
+        <view class="modal-header">
+          <text class="modal-title">{{ selectedProduct.name }}</text>
+          <text class="modal-close" @click="closeModal">×</text>
+        </view>
+        <view class="modal-body">
+          <view class="size-row">
+            <view class="size-item">
+              <text class="size-label">长度(cm)</text>
+              <input class="size-input" type="digit" v-model="selectedProduct.length" placeholder="非必填" />
+            </view>
+            <view class="size-item">
+              <text class="size-label">宽度(cm)</text>
+              <input class="size-input" type="digit" v-model="selectedProduct.width" placeholder="非必填" />
+            </view>
+            <view class="size-item">
+              <text class="size-label">面积(m²)</text>
+              <input class="size-input" type="digit" v-model="selectedProduct.area" disabled />
+            </view>
+          </view>
+        </view>
+        <view class="modal-footer">
+          <button class="cancel-btn" @click="closeModal">取消</button>
+          <button class="confirm-btn" @click="confirmProduct">确认</button>
+        </view>
+      </view>
     </view>
   </view>
 </template>
@@ -62,7 +89,26 @@ export default {
       productList: [],
       page: 1,
       pageSize: 50,
-      loading: false
+      loading: false,
+      showModal: false,
+      selectedProduct: {
+        productId: '',
+        name: '',
+        spec: '',
+        unit: '',
+        price: 0,
+        length: '',
+        width: '',
+        area: ''
+      }
+    }
+  },
+  watch: {
+    'selectedProduct.length'(val) {
+      this.calcArea()
+    },
+    'selectedProduct.width'(val) {
+      this.calcArea()
     }
   },
   onLoad() {
@@ -70,6 +116,12 @@ export default {
     this.getProducts()
   },
   methods: {
+    calcArea() {
+      const length = parseFloat(this.selectedProduct.length) || 0
+      const width = parseFloat(this.selectedProduct.width) || 0
+      // 长度(cm) * 宽度(cm) / 10000 = 面积(m²)
+      this.selectedProduct.area = length && width ? (length * width / 10000).toFixed(2) : ''
+    },
     async loadCategories() {
       try {
         const categories = await productApi.getCategories()
@@ -103,10 +155,31 @@ export default {
       this.page = 1
       this.getProducts()
     },
-    selectProduct(item) {
+    openProductDetail(item) {
+      this.selectedProduct = {
+        productId: item.productId,
+        name: item.name,
+        spec: item.spec,
+        unit: item.unit,
+        price: item.price,
+        length: '',
+        width: '',
+        area: ''
+      }
+      this.showModal = true
+    },
+    closeModal() {
+      this.showModal = false
+    },
+    confirmProduct() {
       const pages = getCurrentPages()
       const prevPage = pages[pages.length - 2]
-      prevPage.$vm.addProduct(item)
+      prevPage.$vm.addProduct({
+        ...this.selectedProduct,
+        length: this.selectedProduct.length,
+        width: this.selectedProduct.width,
+        area: this.selectedProduct.area
+      })
       uni.navigateBack()
     }
   }
@@ -144,34 +217,32 @@ export default {
   color: #999;
 }
 
-.content-wrapper {
+/* 分类行 */
+.category-row {
   display: flex;
-  height: calc(100vh - 130rpx);
-}
-
-.category-sidebar {
-  width: 140rpx;
   background: #fff;
-  flex-shrink: 0;
+  padding: 20rpx;
+  overflow-x: auto;
+  white-space: nowrap;
 }
 
-.category-item {
+.category-row .category-item {
-  padding: 28rpx 20rpx;
+  display: inline-block;
+  padding: 16rpx 32rpx;
   font-size: 26rpx;
   color: #666;
-  text-align: center;
+  border-radius: 30rpx;
-  border-left: 6rpx solid transparent;
+  margin-right: 16rpx;
+  background: #f5f5f5;
 }
 
-.category-item.active {
+.category-row .category-item.active {
-  background: #f8f9fa;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: #667eea;
+  color: #fff;
-  font-weight: bold;
-  border-left-color: #667eea;
 }
 
 .product-scroll {
-  flex: 1;
+  height: calc(100vh - 260rpx);
   background: #f8f9fa;
 }
 
@@ -235,4 +306,97 @@ export default {
   color: #999;
   margin-top: 20rpx;
 }
+
+/* 弹窗 */
+.modal-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 999;
+}
+
+.modal-content {
+  width: 80%;
+  background: #fff;
+  border-radius: 20rpx;
+  overflow: hidden;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 30rpx;
+  border-bottom: 1rpx solid #eee;
+}
+
+.modal-title {
+  font-size: 32rpx;
+  font-weight: bold;
+}
+
+.modal-close {
+  font-size: 48rpx;
+  color: #999;
+}
+
+.modal-body {
+  padding: 30rpx;
+}
+
+.size-row {
+  display: flex;
+  gap: 20rpx;
+}
+
+.size-item {
+  flex: 1;
+}
+
+.size-label {
+  display: block;
+  font-size: 26rpx;
+  color: #666;
+  margin-bottom: 10rpx;
+}
+
+.size-input {
+  width: 100%;
+  height: 70rpx;
+  background: #f5f5f5;
+  border-radius: 10rpx;
+  padding: 0 20rpx;
+  font-size: 28rpx;
+  box-sizing: border-box;
+}
+
+.modal-footer {
+  display: flex;
+  gap: 20rpx;
+  padding: 30rpx;
+}
+
+.cancel-btn, .confirm-btn {
+  flex: 1;
+  height: 80rpx;
+  line-height: 80rpx;
+  border-radius: 40rpx;
+  font-size: 30rpx;
+}
+
+.cancel-btn {
+  background: #f5f5f5;
+  color: #666;
+}
+
+.confirm-btn {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: #fff;
+}
 </style>