Day11-2:70-80 分类、规格参数、销售参数、分组

本文探讨了SPU和SKU在产品设计中的应用,涉及前端组件间的数据交互,如API操作、Cascader级联选择器、分页技术(MyBatis),以及面向对象设计、品牌分类关联、多对多关系编码和实体对象分类。还关注销售属性与规格参数的区分,以及批量和多条件删除的实现。

SPU和SKU是什么?

设计数据表

前端:

父子组件传送数据:子组件向父组件传。

 API:

传id,key,key搜名称或者描述。

三级分类(Cascader级联选择器)

修改-找到三级分类的完整路径

可搜索三级分类

分页:MyBatis分页组件。

品牌分类关联(华为有手机、路由器,小米有手机、电视..)

看谷粒的面向对象设计,挺好。

多对多时,代码怎么设计对象。

规格参数新增 \ 修改

实体对象分类:vo - dao- po- bo- 

列表:

100万个分类和1000个分组整合会很恐怖。

销售属性:

销售属性、规格参数共用一个分类时如何枚举区分?

批量+多条件删除生成

<template> <view class="order-container"> <!-- 顶部标题栏 --> <view class="header"> <view class="back-icon-container" @tap="goBack"> <uni-icons type="back" size="24" color="#fff" class="back-icon" /> </view> <view class="title-container"> <text class="title">货物信息录入</text> </view> </view> <!-- 表单内容区 - 增加左右外边距 --> <view class="form-content"> <!-- 表单卡片 - 增加左右内边距 --> <view class="form-card"> <view class="card-title">订单信息</view> <!-- 序号 --> <view class="form-item"> <text class="label">序号</text> <input class="input full-width" v-model="formData.serialNumber" placeholder="系统自动生成" disabled placeholder-style="color: #c0c4cc;" /> </view> <!-- 客户代码 --> <view class="form-item"> <text class="label">客户代码</text> <input class="input full-width" v-model="formData.customerCode" placeholder="请输入客户代码" placeholder-style="color: #c0c4cc;" /> </view> <!-- 单号带扫码功能 --> <view class="form-item"> <text class="label">单号</text> <view class="input-group"> <input class="input" v-model="formData.orderNumber" placeholder="请输入或扫描单号" placeholder-style="color: #c0c4cc;" /> <view class="scan-btn-container"> <button class="scan-btn" @click="scanBarcode"> <uni-icons type="scan" size="18" color="#fff"></uni-icons> </button> </view> </view> </view> <!-- 数量 --> <view class="form-item"> <text class="label">数量</text> <input class="input full-width" type="number" v-model="formData.quantity" placeholder="请输入数量" placeholder-style="color: #c0c4cc;" /> </view> </view> <!-- 操作按钮 --> <view class="action-buttons"> <button class="reset-btn" @click="resetForm">重置</button> <button class="submit-btn" @click="submitForm">提交信息</button> </view> </view> </view> </template> <script> export default { data() { return { formData: { serialNumber: '', customerCode: '', orderNumber: '', quantity: '' } } }, onLoad() { this.generateSerialNumber(); }, methods: { goBack() { uni.navigateBack(); }, generateSerialNumber() { const prefix = 'SN'; const date = new Date(); const year = date.getFullYear().toString().slice(-2); const month = (date.getMonth() + 1).toString().padStart(2, '0'); const day = date.getDate().toString().padStart(2, '0'); const random = Math.floor(1000 + Math.random() * 9000); this.formData.serialNumber = `${prefix}${year}${month}${day}${random}`; }, // 扫码功能 scanBarcode() { // #ifdef APP-PLUS || MP-WEIXIN uni.scanCode({ onlyFromCamera: true, scanType: ['barCode', 'qrCode'], success: (res) => { if (res.result) { this.formData.orderNumber = res.result; uni.showToast({ title: '扫码成功', icon: 'success' }); } }, fail: (err) => { console.error('扫码失败:', err); uni.showToast({ title: '扫码失败', icon: 'none' }); } }); // #endif // #ifdef H5 uni.showToast({ title: '当前环境不支持扫码', icon: 'none' }); // #endif }, resetForm() { this.formData.customerCode = ''; this.formData.orderNumber = ''; this.formData.quantity = ''; this.generateSerialNumber(); uni.showToast({ title: '表单已重置', icon: 'success' }); }, submitForm() { if (!this.formData.customerCode) { uni.showToast({ title: '请输入客户代码', icon: 'none' }); return; } if (!this.formData.orderNumber) { uni.showToast({ title: '请输入或扫描单号', icon: 'none' }); return; } if (!this.formData.quantity || Number(this.formData.quantity) <= 0) { uni.showToast({ title: '请输入有效数量', icon: 'none' }); return; } uni.showLoading({ title: '提交中...' }); setTimeout(() => { uni.hideLoading(); uni.showToast({ title: '订单提交成功', icon: 'success' }); setTimeout(() => { uni.navigateBack(); }, 1500); }, 1500); } } } </script> <style> /* 全局适配样式 */ * { box-sizing: border-box; margin: 0; padding: 0; } .order-container { display: flex; flex-direction: column; height: 100vh; background-color: #f5f7fa; padding: 0; } /* 顶部标题栏 */ .header { background: linear-gradient(135deg, #5e8fff, #6b7de9); padding: 15px 20px; display: flex; align-items: center; color: #fff; box-shadow: 0 2px 10px rgba(94, 143, 255, 0.3); position: relative; } .back-icon-container { padding: 5px; z-index: 10; } .title-container { position: absolute; left: 50%; transform: translateX(-50%); width: 100%; text-align: center; } .title { font-size: 18px; font-weight: bold; } /* 表单内容区 - 增加左右外边距 */ .form-content { flex: 1; padding: 20px 15px; display: flex; flex-direction: column; align-items: center; margin: 0 15px; /* 增加左右外边距 */ } /* 表单卡片 - 增加左右内边距 */ .form-card { background: #fff; border-radius: 12px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08); padding: 20px 18px; /* 增加左右内边距 */ width: 100%; max-width: 500px; margin-bottom: 20px; } .card-title { display: flex; align-items: center; margin-bottom: 20px; font-weight: bold; color: #333; font-size: 16px; padding-bottom: 10px; border-bottom: 1px solid #eee; } /* 表单项 */ .form-item { margin-bottom: 20px; } .label { display: block; margin-bottom: 8px; font-size: 14px; color: #666; } /* 输入框全宽样式 - 确保不超过父容器 */ .input { width: 100%; height: 44px; padding: 0 12px; /* 减少水平内边距 */ border: 1px solid #dcdfe6; border-radius: 8px; font-size: 15px; background: #fff; box-sizing: border-box; /* 确保内边距不影响总宽度 */ } .input:focus { border-color: #5e8fff; outline: none; } .full-width { width: 100%; } /* 输入组 - 单号+扫码 */ .input-group { display: flex; align-items: center; width: 100%; /* 确保宽度不超出 */ } .input-group .input { flex: 1; border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 8px; /* 增加间距 */ } .scan-btn-container { display: flex; align-items: center; height: 44px; } .scan-btn { background: #5e8fff; color: white; border: none; width: 44px; height: 44px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; } /* 操作按钮 */ .action-buttons { display: flex; margin-top: auto; padding: 10px 0; width: 100%; max-width: 500px; } .reset-btn, .submit-btn { flex: 1; height: 48px; border-radius: 10px; font-size: 16px; font-weight: 500; display: flex; align-items: center; justify-content: center; margin: 0 10px; border: none; } .reset-btn { background: #f0f2f5; color: #606266; } .submit-btn { background: linear-gradient(135deg, #5e8fff, #6b7de9); color: white; box-shadow: 0 4px 12px rgba(94, 143, 255, 0.4); } /* 平台适配 */ /* 小程序适配 */ /* #ifdef MP-WEIXIN */ .header { padding-top: 10px; padding-bottom: 10px; } .form-content { padding: 10px; margin: 0 10px; /* 小程序增加外边距 */ } .form-card { padding: 15px 12px; /* 小程序增加内边距 */ } .input { height: 40px; font-size: 14px; padding: 0 10px; /* 减小内边距 */ } .scan-btn { width: 40px; height: 40px; } /* #endif */ /* APP适配 */ /* #ifdef APP-PLUS */ .header { padding-top: 40px; padding-bottom: 15px; } /* #endif */ /* 平板适配 */ @media (min-width: 768px) { .form-content { margin: 0 20px; /* 平板增加外边距 */ } .form-card { max-width: 600px; padding: 30px 25px; /* 平板增加内边距 */ } .action-buttons { max-width: 600px; } } /* 小屏幕设备适配 */ @media (max-width: 360px) { .form-content { padding: 15px 10px; margin: 0 10px; } .form-card { padding: 15px 12px; } .input { padding: 0 8px; /* 小屏幕减少内边距 */ font-size: 14px; } .scan-btn { width: 38px; height: 38px; } } </style> 标题修改成货物信息查询,表单内参数删除,替换成多条件查询,条件分别是序号、入库日期、客户代码、单号、数量、物品名称、重量、尺寸、货物类型、出库日期、渠道、备注
11-19
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值