当前位置： 首页 > ds >正文

uniapp-商城-54-后台 新增商品（页面布局）

ds 2025/5/13 13:08:27

        后台页面中还存在商品信息的添加和修改等。接下来我们逐步进行分析和展开。包含页面布局和数据库逻辑等等。

1、整体效果

样式效果如下，依然采用了表单形式来完成和商家信息差不多，但在商品属性上多做了一些弹窗等界面，样式和功能点表多。

2、整体样式和布局

2.1 代码效果：

2.2 表单间隔

从图上看到 每一个标签有一个间隔。

.goodsView{
    padding:30rpx;

3、 这里的布局是使用的uni-froms 以及uni-forms-item

3.1   uni-froms 的使用

<uni-forms ref="goodsForm" :model="goodsFormData" :rules="goodsRules" :label-width="100" label-align="right">

依然是ref 、model、rules 

rules 这里就没有自定义规则（没有uniapp-商城-50-后台 商家信息 第4点的问题）

创作中心-CSDN https://mpbeta.csdn.net/mp_blog/creation/editor/147853834

3.2 商品图片的上传 uni-file-picker

上传图片依然用的是   uni-file-picker  没有对上传张数限制

    <uni-file-picker v-model="goodsFormData.thumb" fileMediatype="image" mode="grid"></uni-file-picker>

uni-app官网uni-app,uniCloud,serverless,介绍,基础用法,选择指定后缀图片，且限制选择个数,手动上传,单选图片且点击再次选择,自定义样式,使用插槽,API,FilePicker Props,value 格式,list-styles 格式,image-styles 格式,FilePickhttps://uniapp.dcloud.net.cn/component/uniui/uni-file-picker.html

3.3 商品名称的页面 uni-easyinput

使用的是 uni-easyinput 进行名称的添加。trim是否自动去掉空格。

uni-easyinput 增强输入框 | uni-app官网uni-app,uniCloud,serverless,uni-easyinput 增强输入框,介绍,基本用法,输入框带左右图标,插槽,输入框禁用,密码框,输入框聚焦,多行文本,多行文本自动高度,取消边框,API,Easyinput Props,Type Options,ConfirmType Ophttps://uniapp.dcloud.net.cn/component/uniui/uni-easyinput.html<uni-data-select collection="kt-mall-category" field="_id as value, name as text"
                    v-model="goodsFormData.category_id"></uni-data-select>

collection 数据库

field 选择数据的范围

3.4 商品分类 uni-data-select

这里的数据来源于前面商品分类添加的数据，需要进行后台数据联动。

使用的是选择组件 uni-data-select，然后根据前面商品属性添加的类别进行选择。

uni-app官网uni-app,uniCloud,serverless,介绍,安装方式,基本用法,云端数据示例,API,DataSelect Props,使用云端数据时的属性（DataCom Props）,Localdata Options,DataSelect Events,示例https://uniapp.dcloud.net.cn/component/uniui/uni-data-select.html

安装：

uni-data-select 下拉框选择器 - DCloud 插件市场 通过数据驱动的下拉框选择器https://ext.dcloud.net.cn/plugin?name=uni-data-select

3.5 商品价格 uni-easyinput

使用的 uni-forms-item uni-easyinput， trim是否自动去掉空格。

3.6 商品属性  u-cell 

使用 u-cell  展示。

这个是u-view 提供的组件，需要重新安装和使用

Cell 单元格 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架uView UI，是 uni-app 生态最优秀的 UI 框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水https://uviewui.com/components/cell.html<u-cell :title="skuTitle" isLink :border="false" @click="clickSelect"></u-cell>
                <view class="skuList">
                    <view class="item" v-for="item in goodsFormData.sku_select" @click="clickSelect">
                        <view class="left">{{item.skuName}}:</view>
                        <view class="right">{{skuChildName(item.children)}}</view>
                    </view>
                </view>

3.7 商品描述 uni-easyinput

使用的 uni-forms-item 、uni-easyinput， trim是否自动去掉空格。

4、页面中使用 弹出层  uni-popup   用于3.6的商品属性

4.1 bug处理

主要是使用的 uni-popup，依然会有前面的bug  但是我们在前面的章节已经处理了。

创作中心-CSDN https://mpbeta.csdn.net/mp_blog/creation/editor/147851881

4. 2 整体页面感知

包含两部分弹窗，上面部分是从底部弹出，下面的是弹出聚焦在中部。

上面分三个盒子  上中下 三个，

复杂的就是中部盒子。

<view class="safe-area-bottom"></view>    兼容ios系统的下边的安全区域遮挡我们也页面显示。

中部：

整体样式结果：（这里没有联动分类数据所以没有分类数据可以选择）

5、整体代码

<template><view class="goodsView"><!-- 添加商品 --><uni-forms ref="goodsForm" :model="goodsFormData" :rules="goodsRules" :label-width="100" label-align="right"><uni-forms-item label="商品图片"><uni-file-picker v-model="goodsFormData.thumb" fileMediatype="image" mode="grid"></uni-file-picker></uni-forms-item><uni-forms-item label="商品名称" required name="name"><uni-easyinput v-model="goodsFormData.name" placeholder="请输入商品名称" trim="both"></uni-easyinput></uni-forms-item><uni-forms-item label="产品分类" required name="category_id"><uni-data-select collection="kt-mall-category" field="_id as value, name as text"v-model="goodsFormData.category_id"></uni-data-select></uni-forms-item><uni-forms-item label="商品价格" required name="price"><uni-easyinput type="number" v-model="goodsFormData.price" placeholder="请输入商品价格"trim="both"></uni-easyinput></uni-forms-item><uni-forms-item label="商品原价"><uni-easyinput type="number" v-model="goodsFormData.before_price" placeholder="请输入原价"trim="both"></uni-easyinput></uni-forms-item><uni-forms-item label="商品属性"><u-cell :title="skuTitle" isLink :border="false" @click="clickSelect"></u-cell><view class="skuList"><view class="item" v-for="item in goodsFormData.sku_select" @click="clickSelect"><view class="left">{{item.skuName}}:</view><view class="right">{{skuChildName(item.children)}}</view></view></view></uni-forms-item><uni-forms-item label="商品描述"><uni-easyinput type="textarea" placeholder="请输入详细的描述信息"v-model="goodsFormData.description"></uni-easyinput></uni-forms-item><view class="btnView"><button type="primary" @click="onSubmit">确认提交</button></view></uni-forms><uni-popup ref="attrWrapPop" type="bottom"><view class="attrWrapper"><view class="head"><view class="title">商品属性</view><view class="addAttr" @click="clickAddAttr()">+ 添加属性</view></view><view class="body"><view class="item" v-for="(item,index) in skuArr"><view class="top"><checkbox :checked="item.checked" @click="changeCheckbox(index)"></checkbox><view class="font">{{item.skuName}}</view></view><view class="btnGroup" v-if="item.checked"><view class="btn" :class="child.checked?'active':''" v-for="(child,cIdx) in item.children"@click="clickChlidBtn(index,cIdx)">{{child.name}}</view><view class="btn" @click="clickAddAttr(index)"><u-icon name="plus"></u-icon></view></view></view></view><view class="foot"><button type="primary" @click="clickConfirmSelect">确认选择</button></view></view><view class="safe-area-bottom"></view></uni-popup><uni-popup ref="addAttrPop"><uni-popup-dialog mode="input" title="新增" placeholder="请输入新增的内容"@confirm="dialogConfirm"></uni-popup-dialog></uni-popup></view>
</template><script>const skuCloudObj = uniCloud.importObject("kt-mall-sku", {"customUI": true});const goodsCloudObj = uniCloud.importObject("kt-mall-goods", {"customUI": true})export default {data() {return {goodsFormData: {thumb: [],name: "",category_id: null,price: null,before_price: null,description: "",sku_select: []},addAttrType: "parent", //parent代表父，child代表子goodsRules: {name: {rules: [{required: true,errorMessage: "请输入产品名称"}]},price: {rules: [{required: true,errorMessage: "请输入产品价格"}]},category_id: {rules: [{required: true,errorMessage: "请输入产品分类"}]}},skuArr: []};},onLoad() {},computed: {skuTitle() {if (this.goodsFormData.sku_select.length) {let arr = this.goodsFormData.sku_select.map(item => {return item.skuName})return arr.join("/")} else {return "点击添加属性"}}},methods: {//属性返回子元素的名称skuChildName(arr) {let nsArr = arr.map(item => {return item.name})return nsArr.join("/")},//点击确认选择clickConfirmSelect() {let arr = this.skuArr.filter(item => {let state = item.children.some(child => child.checked)return item.checked && state}).map(item => {let children = item.children.filter(child => {return child.checked})return {...item,children}})this.goodsFormData.sku_select = arrthis.$refs.attrWrapPop.close();},//获取sku列表async getSkuData() {let res = await skuCloudObj.get();this.skuArr = res.dataconsole.log(res);},//点击添加属性clickAddAttr(index = null) {if (index == null) {this.addAttrType = "parent"this.attrIndex = null} else {this.addAttrType = "child"this.attrIndex = index}this.$refs.addAttrPop.open();},//添加属性弹窗的确认按钮async dialogConfirm(e) {if (!e) return;if (this.addAttrType == "parent") {let obj = {skuName: e,checked: true,children: []}let res = await skuCloudObj.add(obj)obj._id = res.id;this.skuArr.push(obj)} else if (this.addAttrType == "child") {let obj = {name: e,checked: true}let id = this.skuArr[this.attrIndex]._id;let res = await skuCloudObj.updateChild(id, obj)this.skuArr[this.attrIndex].children.push(obj)}},//点击属性的复选框changeCheckbox(index) {this.skuArr[index].checked = !this.skuArr[index].checked},//点击属性值的子元素clickChlidBtn(index, cIdx) {this.skuArr[index].children[cIdx].checked = !this.skuArr[index].children[cIdx].checked},//点击选择属性clickSelect() {this.$refs.attrWrapPop.open();if (this.skuArr.length) return;this.getSkuData();},//点击提交表单onSubmit() {this.$refs.goodsForm.validate().then(res => {this.toDataBase();}).catch(err => {console.log(err);})},//上传到云数据库async toDataBase() {this.goodsFormData.thumb = this.goodsFormData.thumb.map(item => {return {url: item.url,name: item.name,extname: item.extname}})let res = await goodsCloudObj.add(this.goodsFormData)uni.showToast({title: "新增商品成功"})setTimeout(() => {uni.navigateBack()}, 1500)}}}
</script><style lang="scss" scoped>.goodsView {padding: 30rpx;.skuList {.item {padding: 30rpx;background: $page-bg-color;margin: 15rpx 0;@include flex-box-set(start);}}}.attrWrapper {padding: 30rpx;background: #fff;border-radius: 20rpx 20rpx 0 0;.head {@include flex-box();font-size: 34rpx;margin-bottom: 30rpx;.title {font-weight: bold;}.addAttr {color: $brand-theme-color-aux;}}.body {.item {border-top: 1px solid $border-color-light;&:last-child {border-bottom: 1px solid $border-color-light;}.top {padding: 30rpx 0;@include flex-box-set(start);.font {padding-left: 10rpx;font-weight: bold;}}.btnGroup {padding: 10rpx 0 30rpx;@include flex-box-set(start);flex-wrap: wrap;.btn {padding: 0rpx 25rpx;height: 60rpx;border: 1rpx solid $border-color-light;margin-right: 20rpx;border-radius: 10rpx;color: $text-font-color-2;margin-bottom: 20rpx;@include flex-box-set();&.active {border-color: $brand-theme-color;color: $brand-theme-color;background: rgba(236, 87, 79, 0.1);}}}}}.foot {padding: 50rpx 200rpx;}}
</style>

http://www.xdnf.cn/news/5880.html

相关文章：

  • Linux异步通知机制详解
  • TongWeb7.0常用-D参数说明
  • python标准库--sys - 系统相关功能在算法比赛的应用
  • 无人机信号线被电磁干扰导致停机
  • mplayer使用详解
  • JDK 安装与配置
  • 实数完备性定理互证2
  • 【蓝桥杯嵌入式】【模块】一、系统初始化
  • okhttp3.Interceptor简介-笔记
  • 【PXIE301-211】基于PXIE总线的16路并行LVDS数据采集、1路光纤数据收发处理平台
  • [Java][Leetcode simple] 189. 轮转数组
  • 前端-高德地图选点带搜索功能
  • hashicorp raft源码分析（一、项目介绍与Leder选举实现）
  • 猫咪如厕检测与分类识别系统系列～进阶【三】网页端算法启动架构及数据库实现
  • YOLOv5推理代码解析
  • 医院陪护服务革新：透明化监护与即时救济机制构建
  • 如何优雅的使用CMake中的FindPkgConfig模块
  • 验证回文串1
  • Linux sysvinit 系统启动
  • 【三】 空域滤波的基础与空域中的低通滤波器（2）【830数字图像处理】
  • 解构赋值
  • RuoYi 中使用 PageUtils.startPage() 实现分页查询的完整解析
  • 数字ic后端设计从入门到精通4（含fusion compiler, tcl教学）CMOS VLSI Design
  • Baumer工业相机堡盟工业相机的工业视觉是否可以在室外可以做视觉检测项目
  • 【系统架构师】2025论文《基于架构的软件设计方法》【最新】
  • telnetlib源码深入解析
  • Java面试终极篇：Sentinel+Seata+Kafka Streams高并发架构实战
  • Adobe Acrobat pro在一份PDF中插入空白页
  • 【基于ALS模型的教育视频推荐系统(Java实现)】
  • java反序列化commons-collections链6