diff --git a/src/pages/product/manage.vue b/src/pages/product/manage.vue
index 27f088a..1512bee 100644
--- a/src/pages/product/manage.vue
+++ b/src/pages/product/manage.vue
@@ -57,22 +57,6 @@
×
-
- 商品名称*
-
-
-
- 规格
-
-
-
- 单位*
-
-
-
- 价格*
-
-
分类
@@ -81,6 +65,38 @@
+
+
+ 长度
+
+
+
+ 宽度
+
+
+
+ 面积
+
+
+
+
+
+ 规格
+
+
+
+ 单位*
+
+
+
+
+ 商品名称*
+
+
+
+ 价格*
+
+
备注
@@ -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,21 @@ export default {
this.loadCategories()
this.loadProducts()
},
+ computed: {
+ computedArea() {
+ const l = parseFloat(this.form.length)
+ const w = parseFloat(this.form.width)
+ if (!isNaN(l) && !isNaN(w) && l > 0 && w > 0) {
+ return (l * w).toFixed(2)
+ }
+ return ''
+ }
+ },
+ watch: {
+ computedArea(val) {
+ this.form.area = val
+ }
+ },
methods: {
async loadCategories() {
try {
diff --git a/src/pages/product/select.vue b/src/pages/product/select.vue
index cbd4001..13251aa 100644
--- a/src/pages/product/select.vue
+++ b/src/pages/product/select.vue
@@ -14,38 +14,65 @@
-
-
-
-
+
+
+
+ 全部
+
+
+ {{ cat.name }}
+
+
-
-
-
-
-
- {{ item.name }}
- {{ item.spec || '-' }}
-
-
- ¥{{ item.price }}
- {{ item.unit || '个' }}
-
+
+
+
+
+
+ {{ item.name }}
+ {{ item.spec || '-' }}
-
-
-
- 暂无商品
+
+ ¥{{ item.price }}
+ {{ item.unit || '个' }}
-
+
+
+
+ 暂无商品
+
+
+
+
+
+
+
+
+
+
+
+ 长度(cm)
+
+
+
+ 宽度(cm)
+
+
+
+ 面积(m²)
+
+
+
+
+
+
@@ -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 {
- padding: 28rpx 20rpx;
+.category-row .category-item {
+ display: inline-block;
+ padding: 16rpx 32rpx;
font-size: 26rpx;
color: #666;
- text-align: center;
- border-left: 6rpx solid transparent;
+ border-radius: 30rpx;
+ margin-right: 16rpx;
+ background: #f5f5f5;
}
-.category-item.active {
- background: #f8f9fa;
- color: #667eea;
- font-weight: bold;
- border-left-color: #667eea;
+.category-row .category-item.active {
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ color: #fff;
}
.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;
+}
\ No newline at end of file