需求说明

做过商城的都知道一个东西，那就是商品，商品的编辑比较有逻辑的就是货品了
比如你卖桌子，获取有以下规格
长度：100cm/80cm/120cm
材质：不锈钢/实木/玻璃
或许还有更多规格
我们把上面的 长度/材质 成为规格
对应的值就是规格值

效果预览

如果我们把上面的规格和对应的值实现后，则有大概如下图的效果

上面的就是编辑区域
下面的则是基于你得输入生成的货品列表

可以看到，2个规格，各3个规格值的时候，组合的货品有9种！！！

代码实现

要实现这样的，那么使用PasteForm要如何标注特性呢？

 /// <summary>
 /// 商品
 /// </summary>
 [Description("商品")]
 public class ProductInfoAddDto
 {

     ///<summary>
     ///标题
     ///</summary>
     [MaxLength(128)]
     [Required]
     [Description("标题")]
     public string Title { get; set; }

     ///<summary>
     ///描述
     ///</summary>
     [MaxLength(256)]
     [Description("描述")]
     public string Desc { get; set; }

    //省略其他字段信息

     /// <summary>
     /// 货品信息
     /// </summary>
     [PasteSunform("../sku/index.html", 500)]
     [Description("货品信息")]
     public SkuBodyModel SkuInfo { get; set; }


 }

看到了把，有一个属性SkuInfo
类型是SkuBodyModel
还有一个关键点，标记的特性是
[PasteSunform]

先看看SkuBodyModel是啥内容

    /// <summary>
    /// 
    /// </summary>
    public class SkuBodyModel
    {

        /// <summary>
        /// 规格信息
        /// </summary>
        public ICollection<SkuFormat> skuFormatBody { get; set; }

        /// <summary>
        /// 货品规格
        /// </summary>
        public ICollection<SkuItemModel> skus { get; set; }
    }

    /// <summary>
    /// 
    /// </summary>
    public class SkuFormat
    {
        /// <summary>
        /// 规格
        /// </summary>
        public string privateSpecName { get; set; }

        /// <summary>
        /// 规格值
        /// </summary>
        public string[] dynamicTags { get; set; }

    }

    /// <summary>
    /// 
    /// </summary>
    public class SkuItemModel
    {
        /// <summary>
        /// 
        /// </summary>
        public int sale_price { get; set; }

        /// <summary>
        /// 
        /// </summary>
        public string sku_code { get; set; }

        /// <summary>
        /// 
        /// </summary>
        public int sort { get; set; }

        /// <summary>
        /// 
        /// </summary>
        public int stock_num { get; set; }

        /// <summary>
        /// 
        /// </summary>
        public string thumb_img { get; set; }

        /// <summary>
        /// 
        /// </summary>
        public ICollection<SkuAttribute> sku_attrs { get; set; }

        /// <summary>
        /// 存放计算的SKUID
        /// </summary>
        public long extend_sku_id { get; set; }
    }

    /// <summary>
    /// 
    /// </summary>
    public class SkuAttribute
    {
        /// <summary>
        /// 规格
        /// </summary>
        public string attr_key { get; set; }

        /// <summary>
        /// 规格值
        /// </summary>
        public string attr_value { get; set; }
    }

可以看到，这些信息我并没有标记特性等
那是因为这些信息不作为PasteForm的基本字段处理，关键在于上面的页面
PasteSunform的../sku/index.html
也就是说，这些数据格式和数据类型是给这个../sku/index.html页面使用的

新增商品

只要按照上面的配置，其实我们都知道，新建的时候这个sku是null的
所以不会带入啥数据，
按照上图的填写后，我们一起来看看，新增的时候提交的数据是怎么样的

关键信息看上面的skuInfo
我们看到了，提交给数据库的时候是一个Obj对象，其实就是我们定义的
SkuBodyModel
所以呢，API端要基于获得的信息，进行整理入库！

编辑商品

编辑商品，有2个步骤
第一步，就是数据库的数据整理成UI可以接收的类型
第二部，就是显示数据

可以看到，API返回的skuInfo信息，和提交的时候的格式是一致的
注意，也需要对应的PasteSunform特性
然后在UI上可以看到

是符合预期的！

实现原理

上面的步骤中，对于UI来说，几乎没有要修改的地方，如果你要长的不太一样，你直接修改sku/index.html页面的代码即可
对于API端来说，就是新增，编辑，读取编辑的数据的处理，关键是要从数据库类型整理成UI的类型！
这是一个前后端协商的过程和结果！

如何渲染的？

其实PasteSunform是一个iframe
在主页面接收到这个对象后，会把值写入到session缓存中，传递一个缓存key给这个Iframe
iframe页面显示后，基于key读取内容，然后进行渲染
然后实现window.funcSubjectForm();
主要是这个函数会被主页面调用
所以sku/index.html页面需要处理这个函数，或者说实现这个函数
window.funcSubjectForm();

如何接入到我的项目

拉取最新的PasteForm项目源码，你可以在wwwroot/page/sku/文件夹看到sku的实现
你可以直接用，或者自行修改，都行！

结语

那么SKU的编辑和新增就说到这了，我们下次来分享下，如何在小程序上实现SKU的选择功能
就是类似商城的，购物的时候选择规格的功能！