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

feat: 选择商品弹窗增加长度、宽度、面积字段，自动计算面积

Browse Source
This commit is contained in:
Agent
2026-04-01 14:01:50 +00:00
parent 8e0122b08f
commit d7995d8cc5
2 changed files with 263 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/pages/product/manage.vue
View File

@@ -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,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 {