sales/todo-frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 恢复选择商品页面正确版本，修复模板标签平衡
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Agent
2026-04-01 16:12:58 +00:00
parent c0adc172c1
commit 02f151307d
1 changed files with 124 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

197
src/pages/product/select.vue
View File

@@ -14,42 +14,67 @@
</view>
</view>
<!-- 分类侧栏 + 商品列表 -->
<view class="content-wrapper">
<!-- 左侧分类 -->
<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)">
{{ cat.name }}
</view>
</scroll-view>
<!-- 右侧商品列表 -->
<scroll-view scroll-y class="product-scroll">
<view class="product-list">
<view v-for="item in productList" :key="item.productId" class="product-item" @click="selectProduct(item)">
<view class="product-info">
<text class="product-name">{{ item.name }}</text>
<view class="product-row">
<text class="product-spec">{{ item.spec || '-' }}</text>
<text class="product-size" v-if="item.length && item.width">{{ item.length }} x {{ item.width }} = {{ item.area }} m²</text>
</view>
</view>
<view class="product-price">
<text class="price">¥{{ item.price }}</text>
<text class="unit">{{ item.unit || '个' }}</text>
</view>
</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="category-row">
<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)">
{{ cat.name }}
</view>
</view>
<!-- 商品列表 -->
<scroll-view scroll-y class="product-scroll">
<view class="product-list">
<view v-for="item in productList" :key="item.productId" class="product-item" @click="openProductDetail(item)">
<view class="product-info">
<text class="product-name">{{ item.name }}</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 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>
<script>
@@ -64,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() {
@@ -72,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()
@@ -105,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()
}
}
@@ -146,37 +217,32 @@ export default {
color: #999;
}
/* 内容区域：侧栏+列表 */
.content-wrapper {
/* 分类行 */
.category-row {
display: flex;
height: calc(100vh - 130rpx);
}
/* 分类侧栏 */
.category-sidebar {
width: 160rpx;
background: #fff;
flex-shrink: 0;
border-right: 1rpx solid #eee;
padding: 20rpx;
overflow-x: auto;
white-space: nowrap;
}
.category-sidebar .category-item {
padding: 28rpx 16rpx;
.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-sidebar .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;
}
@@ -212,21 +278,6 @@ export default {
color: #999;
}
.product-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8rpx;
}
.product-size {
font-size: 22rpx;
color: #667eea;
background: #f0f0ff;
padding: 2rpx 8rpx;
border-radius: 4rpx;
}
.product-price {
text-align: right;
}