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

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

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点的问题）

创作中心-优快云https://mpbeta.youkuaiyun.com/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 Op