文档章节

商品SKU规格算法

chinahufei
 chinahufei
发布于 06/26 21:23
字数 717
阅读 14
收藏 0

思想

  1. 定义规格属性数据格式
  2. 定义生成SKU数据格式
  3. 完成点击多选框后生成的数据源
  4. 根据数据源生成SKU数据
  5. 根据生成的SKU数据做展示

代码示例

<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品编辑</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <script src="../plugins/angularjs/angular.min.js"></script>
    <script>
        var app = angular.module("goodApp", []);
        app.controller("goodController", function ($scope, $controller) {
            // 参数数据
            $scope.entity = {
                goods: {},
                goodsDesc: {
                    specificationItems: []
                },
                itemList: []
            }

            // 规格属性数据
            $scope.specList = [
                {id: 1, text: "内存", options: [{optionName: "4G"}, {optionName: "8G"}, {optionName: "12G"}]},
                {id: 2, text: "颜色", options: [{optionName: "红色"}, {optionName: "白色"}, {optionName: "蓝色"}]},
                {id: 3, text: "尺寸", options: [{optionName: "5.5"}, {optionName: "6.0"}, {optionName: "6.5"}]}
            ];

            // 点击选中后生成specificationItems中的数据
            // 格式: [{specName:"内存",options:["4G","8G"]},{specName:"颜色",options:["红色","白色"]}];
            $scope.selectChecked = function ($event, specName, optionName) {
                var selectArray = $scope.entity.goodsDesc.specificationItems;
                var resObj = $scope.findHasSpecName(specName);
                if (resObj == null) {
                    selectArray.push({specName: specName, options: [optionName]});
                } else {
                    var idx = resObj.options.indexOf(optionName);
                    if (idx < 0) {
                        resObj.options.push(optionName);
                    } else {
                        resObj.options.splice(idx, 1);
                    }
                }
                console.log(selectArray);
                $scope.createSKUTable();
            }

            // 生成sku表数据 --- 格式
            /*$scope.entity.itemList = [
                {spec:{颜色:红色,内存:8G},price:0,num:999,isUse:true,isDef:false},
                {spec:{颜色:红色,内存:4G},price:0,num:999,isUse:true,isDef:false}
            ];*/
            $scope.createSKUTable = function () {
                // 初始化列表
                $scope.entity.itemList = [{spec: {}, price: 0, num: 999, isUse: true, isDef: false}];
                // 数据源
                var sourceList = $scope.entity.goodsDesc.specificationItems;
                // 遍历列
                for (var col = 0; col < sourceList.length; col++) {
                    var colName = sourceList[col].specName;  // 列名
                    // 遍历行
                    var table = [];
                    for (var row = 0; row < $scope.entity.itemList.length; row++) {
                        var rowData = $scope.entity.itemList[row];   // 每行数据
                        // 变量每个单元格
                        for (var cell = 0; cell < sourceList[col].options.length; cell++) {
                            // 对于每行数据进行深克隆
                            var tempRow = JSON.parse(JSON.stringify(rowData))
                            // 对当前行赋值
                            tempRow.spec[colName] = sourceList[col].options[cell];
                            table.push(tempRow);
                        }
                    }
                    $scope.entity.itemList = table;
                }
                console.log($scope.entity.itemList);
            }


            // 查找列表中是否有specName
            $scope.findHasSpecName = function (specName) {
                var arr = $scope.entity.goodsDesc.specificationItems;
                for (var i = 0; i < arr.length; i++) {
                    if (arr[i].specName == specName) {
                        return arr[i];
                    }
                }
                return null;
            }

        })
    </script>
</head>
<body class="hold-transition skin-red sidebar-mini" ng-app="goodApp" ng-controller="goodController">

<!--规格-->
<div class="tab-pane" id="spec" style="padding: 10px">
    <h2 style="text-align: center;">商品规格SKU</h2>
    <div>
        <div class="row data-type" ng-repeat="spec in specList">
            <div>
                <div class="col-md-2 title">{{spec.text}}</div>
                <div class="col-md-10 data">
                    <span ng-repeat="option in spec.options">
                        <input type="checkbox" name="{{option.id}}"
                               ng-click="selectChecked($event, spec.text, option.optionName)">{{option.optionName}}
                    </span>
                </div>
            </div>
        </div>
        {{entity.itemList}}

        <div class="row data-type">
            <table class="table table-bordered table-striped table-hover dataTable">
                <thead>
                <tr>
                    <th class="sorting" ng-repeat="spec in entity.goodsDesc.specificationItems">
                        {{spec.specName}}
                    </th>
                    <th class="sorting">价格</th>
                    <th class="sorting">库存</th>
                    <th class="sorting">是否启用</th>
                    <th class="sorting">是否默认</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="item in entity.itemList">
                    <td ng-repeat="spec in entity.goodsDesc.specificationItems">
                        {{item.spec[spec.specName]}}
                    </td>
                    <td>
                        <input class="form-control" ng-model="item.price" placeholder="价格">
                    </td>
                    <td>
                        <input class="form-control" ng-model="item.num" placeholder="库存数量">
                    </td>
                    <td>
                        <input type="checkbox" ng-model="item.status">
                    </td>
                    <td>
                        <input type="checkbox" ng-model="item.isDefault">
                    </td>
                </tr>

                </tbody>
            </table>

        </div>

    </div>
</div>
</body>

</html>

延伸

  • 规格属性可以自定义添加和修改以及删除,但生成方法已有,后面的比较容易。

© 著作权归作者所有

上一篇: Mysql提升(函数)
下一篇: 函数式编程
chinahufei
粉丝 4
博文 79
码字总数 80616
作品 0
武汉
程序员
私信 提问
tech| 关于电商系统中sku与spu的一个难题

date: 2018-8-1 21:17:14 title: tech| tech| 关于电商系统中sku与spu的一个难题 description: 业务上碰到的关于电商系统中sku与spu的一个难题 最近业务上碰到的一个难题, 分享出来给大家瞧瞧...

daydaygo
2018/08/07
0
0
购物商城数据库设计-商品表设计

大家好,今天我们来设计一下购物商城的商品表。 我们的目标是表结构能够满足下面这张图的搜索: 在设计表之前,我们先来了解下商品中的两个概念:SPU和SKU SPU SPU(Standard Product Unit):...

tanghc
2018/05/30
0
0
关于电商网站商品 sku 规格属性的疑问

最近在做电子商务网站 关于数据库设计有几个疑问 求大神指点 背景: 数据库现有表 goods product(id 包含颜色 尺寸两个规格 商品货号等属性) 在新增和修改商品信息时 因为颜色和尺寸个数(可...

白与黑
2016/04/22
14
0
什么是SPU、SKU、ARPU

什么是SPU、SKU、ARPU 这是一篇存档性笔记,我自己存档一下对这3个词的理解。如果你已经明了了这3个词的意思,请直接忽略之 首先,搞清楚商品与单品的区别。例如,iphone是一个单品,但是在淘...

ihaolin
2014/04/14
0
0
商城 商品模块 数据库 表设计

要实现一个商城,对于商品模块中的数据库表设计不懂,主要是:相同类别的产品的产品参数相同,不同类别的不同,这里就不懂要怎么设计了,所以上网找几篇博客了解 什么是SPUSKUARPU PHP商城 ...

鱼煎
2018/12/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

CentOS7中使用firewalld的基本命令

1、firewalld的基本使用 启动: systemctl start firewalld 关闭: systemctl stop firewalld 查看状态: systemctl status firewalld 开机禁用 : systemctl disable firewalld 开机启用 :......

葉者
16分钟前
2
0
Taro ScrollView 组件的 scrollTop 属性是个坑

官方issue:ScrollView设置scrollTop没效果 同样的,设置 scrollTop=0 并不能实现置顶,官方回复早就修复了,我的 Taro 版本已经是最新的,然而并未修复。 万能的评论区,给出了失效的原因。...

dkvirus
今天
3
0
Qt那些事0.0.21

这次还是关于PRO文件中QMAKE_POST_LINK的故事。 平时都是使用VS2015作为编译器,恰巧想用MinGW编一版程序,结果偏偏出现了错误。话说测试的这个项目可是在Linux下(fodera 20)可以正确编译通...

Ev4n
今天
2
0
OSChina 周六乱弹 —— 抖音外放 亲妈下葬。

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @巴拉迪维 :一直没想明白黎明是怎么混进「四大天王」的,直到最近网易云音乐心动模式开启之后 #今日歌曲推荐# 《那有一天不想你》- 黎明 手机...

小小编辑
今天
600
8
Linux使用源码包安装软件

前言: 最近整理一些以前的学习笔记。 过去都是存储在本地,此次传到网络留待备用。 源码包 Linux软件多数免费、开源,是开发人员编写的,具有很强可读性的一组相关代码文本。 源码包 --> 编...

迷失De挣扎
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部