CN112748924B - 库存展示方法及系统 - Google Patents

Abstract

本申请公开了一种库存展示方法，该方法包括：初始化规格列表组件，所述规格列表包括商品的多个规格；初始化多个单规格组件，每个所述单规格组件对应一个所述规格；所述单规格组件接收用户对所述规格的选择操作，并将所述选择操作传送至所述规格列表组件；所述规格列表组件根据所述选择操作确定每个所述规格的展示信息并传送至每个所述单规格组件；所述单规格组件根据所述展示信息确定所述规格的展示样式。本申请还公开了一种库存展示系统、电子装置和计算机可读存储介质。由此，能够通过规格列表组件和单规格组件解耦业务逻辑，使处理过程更加清晰明了，而且便于再次开发扩展。

Description

库存展示方法及系统

技术领域

本申请涉及数据处理技术领域，尤其涉及一种库存展示方法、系统、电子装置及计算机可读存储介质。

背景技术

在电商网站等应用场景中，通常在用户选择商品加入购物车时需要对用户进行该商品的库存展示，也就是SKU(Stock Keeping Unit，库存保有单位)展示。SKU为库存进出计量的单位，可以是以件、盒、托盘等为单位，SKU是物理上不可分割的最小存货单元。

现有的很多电商网站中已有多SKU规格展示页面，加购物车或直接购买的时候会出现多SKU规格供用户选择。但是，现有的多SKU规格展示页面一般样式简单、功能简单，数据结构设计繁琐，不利于功能扩展。

需要说明的是，上述内容并不用于限制申请保护范围。

发明内容

本申请的主要目的在于提出一种库存展示方法、系统、电子装置及计算机可读存储介质，旨在解决至少一个上述技术问题。

为实现上述目的，本申请实施例提供了一种库存展示方法，所述方法包括：

初始化规格列表组件，所述规格列表包括商品的多个规格；

初始化多个单规格组件，每个所述单规格组件对应一个所述规格；

所述单规格组件接收用户对所述规格的选择操作，并将所述选择操作传送至所述规格列表组件；

所述规格列表组件根据所述选择操作确定每个所述规格的展示信息，并将所述展示信息传送至每个所述单规格组件；及

所述单规格组件根据所述展示信息确定所述规格的展示样式。

可选地，所述规格列表组件用于控制多个所述规格的排列展示，处理所述规格的选中、取消选中、禁用、高亮逻辑。

可选地，所述规格列表组件的参数包括库存保有单位SKU唯一标识和SKU规格源数据列表，所述SKU规格源数据列表的数据结构为数组。

可选地，所述初始化多个单规格组件包括：

根据所述规格列表组件的参数计算出规格二维数组；

根据所述规格二维数组循环渲染多个所述单规格组件并初始化每个所述单规格组件。

可选地，所述根据所述规格列表组件的参数计算出规格二维数组包括：

从所述规格列表组件的所述SKU规格源数据列表中提取出各个SKU规格属性，生成所述规格二维数组。

可选地，所述规格列表组件根据所述选择操作确定每个所述规格的展示信息包括：

所述规格列表组件根据所述选择操作和所述SKU规格源数据进行每个所述规格之间的逻辑判断，得到每个所述规格的展示信息。

可选地，所述单规格组件用于控制一个所述规格的展示，所述单规格组件对应的展示样式包括未选中、选中、高亮、禁用效果。

可选地，所述单规格组件的参数包括规格名称、是否选中、是否禁用、是否高亮；所述规格列表组件将所述展示信息通过所述单规格组件的所述参数传送至所述单规格组件。

可选地，所述方法在初始化规格列表组件后还包括：

验证所述规格列表组件中的所述SKU规格源数据的合法性，当验证通过后，执行所述初始化多个单规格组件的步骤。

此外，为实现上述目的，本申请实施例还提供一种库存展示系统，所述系统包括：

初始化模块，用于初始化规格列表组件，所述规格列表包括商品的多个规格；

所述初始化模块，还用于初始化多个单规格组件，每个所述单规格组件对应一个所述规格；

接收模块，用于通过所述单规格组件接收用户对所述规格的选择操作，并将所述选择操作传送至所述规格列表组件；

判断模块，用于通过所述规格列表组件根据所述选择操作确定每个所述规格的展示信息，并将所述展示信息传送至每个所述单规格组件；

展示模块，用于通过所述单规格组件根据所述展示信息确定所述规格的展示样式。

为实现上述目的，本申请实施例还提供一种电子装置，所述电子装置包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的库存展示程序，所述库存展示程序被所述处理器执行时实现如上述的库存展示方法。

为实现上述目的，本申请实施例还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有库存展示程序，所述库存展示程序被处理器执行时实现如上述的库存展示方法。

本申请实施例提出的库存展示方法、系统、电子装置及计算机可读存储介质，能够通过规格列表组件和单规格组件解耦业务逻辑，由规格列表组件处理各个规格之间的逻辑判断，单规格组件仅控制单个规格的展示样式，不仅简化了处理过程，使其更加清晰明了，而且单规格组件再次开发扩展也很方便，后续可支持更多样式。

附图说明

图1为实现本申请各个实施例的一种应用环境架构图；

图2为本申请第一实施例提出的一种库存展示方法的流程图；

图3为图2中步骤S202的细化流程示意图；

图4A-4C为本申请中一种多SKU规格展示页面的示意图；

图5为本申请第二实施例提出的一种库存展示方法的流程图；

图6为本申请第三实施例提出的一种电子装置的硬件架构示意图；

图7为本申请第四实施例提出的一种库存展示系统的模块示意图；

图8为本申请第五实施例提出的一种库存展示系统的模块示意图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本申请，并不用于限定本申请。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

需要说明的是，在本申请实施例中涉及“第一”、“第二”等的描述仅用于描述目的，而不能理解为指示或暗示其相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。另外，各个实施例之间的技术方案可以相互结合，但是必须是以本领域普通技术人员能够实现为基础，当技术方案的结合出现相互矛盾或无法实现时应当认为这种技术方案的结合不存在，也不在本申请要求的保护范围之内。

请参阅图1，图1为实现本申请各个实施例的一种应用环境架构图。本申请可应用于包括，但不仅限于客户端2、服务器4、网络6的应用环境中。

其中，所述客户端2用于向用户显示商品的多SKU规格展示页面并接收用户对某个或多个规格的选择操作。所述客户端2可以为PC(Personal Computer，个人电脑)、手机、平板电脑、便携计算机、可穿戴设备等终端设备。

所述服务器4用于通过规格列表组件和单规格组件实现所述多SKU规格展示页面中各个规格的展示。所述服务器4可以是机架式服务器、刀片式服务器、塔式服务器或机柜式服务器等计算设备，可以是独立的服务器，也可以是多个服务器所组成的服务器集群。

所述网络6可以是企业内部网(Intranet)、互联网(Internet)、全球移动通讯系统(Global System of Mobile communication，GSM)、宽带码分多址(Wideband CodeDivision Multiple Access，WCDMA)、4G网络、5G网络、蓝牙(Bluetooth)、Wi-Fi等无线或有线网络。所述服务器4和一个或多个所述客户端2之间通过所述网络6通信连接，以进行数据传输和交互。

实施例一

如图2所示，为本申请第一实施例提出的一种库存展示方法的流程图。可以理解，本方法实施例中的流程图不用于对执行步骤的顺序进行限定。根据需要，还可以对该流程图中的部分步骤进行添加或删减。

该方法包括以下步骤：

S200，初始化规格列表组件。

一般情况下，在某个商品的多SKU规格展示页面，需要向用户提供该商品的尺码(例如S、M、L)、颜色(例如红、白、黑)等多种规格属性，并供用户通过这些规格属性选择所需的商品，然后根据用户的选择和库存情况等判断展示结果，按照所述展示结果对用户进行展示。目前很多电商网站使用的是React(一种用于构建用户界面的JavaScript库)技术栈来实现这种展示方案，但展示出的样式简单、功能简单，数据结构设计繁琐，不利于功能扩展。本实施例使用了Vue前端框架，功能上拆分设计为两个组件，分别为规格列表组件和单规格组件，两个组件的设计解耦了处理逻辑，更具备灵活性。Vue是一套用于构建用户界面的渐进式JavaScript框架，与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用，Vue的核心库只关注视图层，方便与第三方库或既有项目整合。

所述规格列表组件用于控制多组规格排列展示(例如上述S、M、L三种尺码和红、白、黑三种颜色)，可以处理SKU规格选中、取消选中、禁用、高亮等逻辑。所述规格列表组件中的参数包括value和data，其中value为SKU唯一标识(skuID)，data为SKU规格源数据列表。

所述SKU规格源数据列表的数据结构设计为数组，主要数据结构为：[{skuID:String,specValues:Array,canAddCart:Boolean,price:Number,img:String}]。其中：skuID为SKU唯一标识；specValues为该SKU规格属性(例如上述尺码和颜色)；canAddCart表示能否加车(规格选择互斥判断依据)；price为SKU的价格；img为SKU的样图。例如，当所述SKU规格包括S、M、L三种尺码和红、白、黑三种颜色时，根据尺码和颜色之间的排列组合可以生成3*3＝9条SKU源数据。

所述规格列表组件的html核心部分是一组for循环单规格组件，每个所述单规格组件负责一种SKU规格(例如上述S、M、L三种尺码中的一种，或者红、白、黑三种颜色中的一种)，在单规格组件外面包一层v-for逻辑。v-for是Vue框架提供的循环组件，v-for循环的源数据是通过Vuecomputed计算出来的SKU规格二维数组。所述规格列表组件的js核心部分是根据正则表达式实现的规格选择互斥逻辑。

S202，初始化多个单规格组件。

具体而言，进一步参阅图3，为上述步骤S202的细化流程示意图。可以理解，该流程图不用于对执行步骤的顺序进行限定。根据需要，还可以对该流程图中的部分步骤进行添加或删减。在本实施例中，所述步骤S202具体包括：

S2020，根据所述规格列表组件的参数计算出SKU规格二维数组。

在本实施例中，从所述规格列表组件的data部分，也就是多SKU源数据列表中，可以提取出各个SKU规格属性，生成所述二维数组。所述二维数组的数据结构类似[{titie:‘尺码’,specList:[‘S’,’M’,’L’]}]。

S2022，根据所述二维数组循环渲染多个单规格组件并初始化每个单规格组件。

每个所述单规格组件分别控制一种SKU规格的展示，例如上述S、M、L三种尺码中的一种，或者红、白、黑三种颜色中的一种。也就是说，当所述SKU规格包括S、M、L三种尺码和红、白、黑三种颜色时，需要循环渲染和初始化尺码S、尺码M、尺码L、红色、白色、黑色分别对应的六个单规格组件。

所述单规格组件的展示样式包括但不限于未选中(默认)、选中、高亮、禁用效果。其中，高亮表示参与活动(例如秒杀)的SKU规格，禁用则一般在互斥或没有库存的情况下展示。所述单规格组件的参数包括text、checked、disabled、highlight，其中text为规格的名称，checked表示是否选中，disabled表示是否禁用，highlight表示是否高亮。

在本实施例中，由于所述单规格组件很纯粹的负责单个规格的展示样式以及选中事件的处理，样式包括未选中(默认)、选中、高亮、禁用效果，事件包括选中和取消选中，代码实现相对简单很多。

通过所述规格列表组件和单规格组件的初始化，即可在该商品的多SKU规格展示页面中展示各个规格的初始化状态(默认为未选中效果)。

回到图2，S204，所述单规格组件接收用户对所述SKU规格的选择操作，并将所述选择操作传送至所述规格列表组件。

当用户需要对该商品加入购物车或者直接购买时，在页面中对所需的规格进行选择操作(例如点击选中)。值得注意的是，当该商品的SKU规格有多个层级(例如既有尺码又有颜色)时，一般需要进行多次选择操作(例如先点击选中尺码M，再点击选中黑色)。

在本实施例中，由用户所选择的SKU规格对应的单规格组件(下文称为第一单规格组件)接收所述选择操作(选中事件)。接收到所述选择操作的第一单规格组件将所述选择操作传送至所述规格列表组件。

由于每个单规格组件只负责单个规格的展示样式和选中事件的处理，因此需要与所述规格列表组件一起综合进行逻辑判断，才能得到SKU规格对应的展示样式。在本实施例中，用户所选择的SKU规格(例如尺码M)对应的第一单规格组件将用户的所述选择操作(选中事件)传送至所述规格列表组件。

S206，所述规格列表组件根据所述选择操作确定每个SKU规格的展示信息。

在本实施例中，所述规格列表组件根据所述选择操作和所述SKU规格源数据进行每个所述SKU规格之间的逻辑判断，得到每个所述SKU规格的展示信息(逻辑判断结果，是否可以选中等)。

所述规格列表组件的所述v-for逻辑可以向每个所述单规格组件传递checked、disabled、highlight、text等属性，其中checked是当前组件(单规格组件)内部控制的私有变量(根据所述选中事件判断)，highlight是特殊的业务(例如秒杀等活动)逻辑判断，disabled是控制规格选中互斥的核心逻辑，该逻辑的判断是根据现有已选中的所述第一单规格组件和当前单规格组件通过正则表达式做比对计算。

在本实施例中，规格选中互斥实现原理为：在v-for循环的过程中，可以得知当前单规格组件所在的层级，也就是v-for组件中的index，同时也可以获取当前单规格组件的文本。根据所述SKU规格源数据可以获取所有的规格组合类型，根据所述选中事件可以获取已经选中了的规格或规格组合。有了这些数据，通过while循环就可以生成所需要的正则表达式，最后根据该正则表达式去比对禁选的规格组合，就能得知当前单规格组件是否可以选中。

例如，当用户首先选择尺码M时，尺码M对应的单规格组件将该选中事件传送至所述规格列表组件，所述规格列表组件根据上述各种逻辑判断可以得出：尺码M规格的展示样式为选中效果，尺码S和尺码L规格的展示样式均为禁用效果(因为与尺码M互斥)，红色、白色、黑色这三个规格的展示样式均为未选中效果(假设其中白色参加秒杀，则白色规格为高亮效果；假设尺码M且为黑色的商品无库存，则黑色规格为禁用效果)。当用户在选择尺码M的基础上再选择红色时，红色对应的单规格组件将该选中事件传送至所述规格列表组件，所述规格列表组件根据上述各种逻辑判断可以得出：尺码M规格的展示样式为选中效果，尺码S和尺码L规格的展示样式均为禁用效果(因为与尺码M互斥)，红色规格的展示样式为选中效果，白色和黑色规格的展示样式均为禁用效果(因为与红色互斥)。

S208，所述规格列表组件将所述展示信息传送至每个单规格组件。

所述规格列表组件根据所述选择操作和上述SKU规格源数据得到每个SKU规格的所述展示信息后，将所述展示信息通过所述text、checked、disabled、highlight参数传送至每个所述单规格组件。

S210，每个单规格组件根据所述展示信息确定所述SKU规格的展示样式并进行相应样式的展示。

每个所述单规格组件根据所述规格列表组件传送的参数，即可确定该组件的展示样式，然后按照所述样式对该规格进行展示。例如，尺码M展示选中效果，尺码S和尺码L展示禁用效果。

参阅图4A-4C所示，为一种多SKU规格展示页面的示意图。其中，图4A所展示的是各个规格的初始化状态；图4B展示的是用户选择尺码M规格之后的状态；图4C展示的是用户再选择红色规格之后的状态。

本实施例提出的库存展示方法，可以通过清晰简单的数据结构记录SKU规格源数据，并通过规格列表组件和单规格组件解耦业务逻辑，由规格列表组件处理各个规格之间的逻辑判断，单规格组件仅控制单个规格的展示样式，不仅简化了处理过程，使其更加清晰明了，而且单规格组件再次开发扩展也很方便，后续可支持更多样式，例如增加一些二次元的风格等。

实施例二

如图5所示，为本申请第二实施例提出的一种库存展示方法的流程图。在第二实施例中，所述库存展示方法在上述第一实施例的基础上，还包括步骤S302。可以理解，本方法实施例中的流程图不用于对执行步骤的顺序进行限定。根据需要，还可以对该流程图中的部分步骤进行添加或删减。

该方法包括以下步骤：

S300，初始化规格列表组件。

一般情况下，在某个商品的多SKU规格展示页面，需要向用户提供该商品的尺码(例如S、M、L)、颜色(例如红、白、黑)等多种规格属性，并供用户通过这些规格属性选择所需的商品，然后根据用户的选择和库存情况等判断展示结果，按照所述展示结果对用户进行展示。目前很多电商网站使用的是React技术栈来实现这种展示方案，但展示出的样式简单、功能简单，数据结构设计繁琐，不利于功能扩展。本实施例使用了Vue前端框架，功能上拆分设计为两个组件，分别为规格列表组件和单规格组件，两个组件的设计解耦了处理逻辑，更具备灵活性。Vue是一套用于构建用户界面的渐进式JavaScript框架，与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用，Vue的核心库只关注视图层，方便与第三方库或既有项目整合。

所述规格列表组件用于控制多组规格排列展示(例如上述S、M、L三种尺码和红、白、黑三种颜色)，可以处理SKU规格选中、取消选中、禁用、高亮等逻辑。所述规格列表组件中的参数包括value和data，其中value为SKU唯一标识(skuID)，data为SKU规格源数据列表。

所述SKU规格源数据列表的数据结构设计为数组，主要数据结构为：[{skuID:String,specValues:Array,canAddCart:Boolean,price:Number,img:String}]。其中：skuID为SKU唯一标识；specValues为该SKU规格属性(例如上述尺码和颜色)；canAddCart表示能否加车(规格选择互斥判断依据)；price为SKU的价格；img为SKU的样图。例如，当所述SKU规格包括S、M、L三种尺码和红、白、黑三种颜色时，根据尺码和颜色之间的排列组合可以生成3*3＝9条SKU源数据。

所述规格列表组件的html核心部分是一组for循环单规格组件，每个所述单规格组件负责一种SKU规格(例如上述S、M、L三种尺码中的一种，或者红、白、黑三种颜色中的一种)，在单规格组件外面包一层v-for逻辑。v-for是Vue框架提供的循环组件，v-for循环的源数据是通过Vuecomputed计算出来的SKU规格二维数组。所述规格列表组件的js核心部分是根据正则表达式实现的规格选择互斥逻辑。

S302，验证所述规格列表组件中的SKU规格源数据的合法性。

在本实施例中，当初始化所述规格列表组件后，还需要验证所述规格列表组件的data参数(即所述SKU规格源数据)的数据合法性，包括每个字段是否都有相应的数据，数据格式是否合法等等。

当验证通过后，才能继续执行后续步骤。当验证未通过(不合法)时，则在该多SKU规格展示页面中所述规格列表组件对应的区域展示空白状态。

S304，当验证通过后，初始化多个单规格组件。

首先，根据所述规格列表组件的参数计算出SKU规格二维数组。

在本实施例中，从所述规格列表组件的data部分，也就是多SKU源数据列表中，可以提取出各个SKU规格属性，生成所述二维数组。所述二维数组的数据结构类似[{titie:‘尺码’,specList:[‘S’,’M’,’L’]}]。

然后，根据所述二维数组循环渲染多个单规格组件并初始化每个单规格组件。

每个所述单规格组件分别控制一种SKU规格的展示，例如上述S、M、L三种尺码中的一种，或者红、白、黑三种颜色中的一种。也就是说，当所述SKU规格包括S、M、L三种尺码和红、白、黑三种颜色时，需要循环渲染和初始化尺码S、尺码M、尺码L、红色、白色、黑色分别对应的六个单规格组件。

所述单规格组件的展示样式包括但不限于未选中(默认)、选中、高亮、禁用效果。其中，高亮表示参与活动(例如秒杀)的SKU规格，禁用则一般在互斥或没有库存的情况下展示。所述单规格组件的参数包括text、checked、disabled、highlight，其中text为规格的名称，checked表示是否选中，disabled表示是否禁用，highlight表示是否高亮。

在本实施例中，由于所述单规格组件很纯粹的负责单个规格的展示样式以及选中事件的处理，样式包括未选中(默认)、选中、高亮、禁用效果，事件包括选中和取消选中，代码实现相对简单很多。

通过所述规格列表组件和单规格组件的初始化，即可在该商品的多SKU规格展示页面中展示各个规格的初始化状态(默认为未选中效果)。

S306，所述单规格组件接收用户对所述SKU规格的选择操作，并将所述选择操作传送至所述规格列表组件。

当用户需要对该商品加入购物车或者直接购买时，在页面中对所需的规格进行选择操作(例如点击选中)。值得注意的是，当该商品的SKU规格有多个层级(例如既有尺码又有颜色)时，一般需要进行多次选择操作(例如先点击选中尺码M，再点击选中黑色)。

在本实施例中，由用户所选择的SKU规格对应的单规格组件(下文称为第一单规格组件)接收所述选择操作(选中事件)。

由于每个单规格组件只负责单个规格的展示样式和选中事件的处理，因此需要与所述规格列表组件一起综合进行逻辑判断，才能得到SKU规格对应的展示样式。在本实施例中，用户所选择的SKU规格(例如尺码M)对应的第一单规格组件将用户的所述选择操作(选中事件)传送至所述规格列表组件。

S308，所述规格列表组件根据所述选择操作确定每个SKU规格的展示信息。

在本实施例中，所述规格列表组件根据所述选择操作和所述SKU规格源数据进行每个所述SKU规格之间的逻辑判断，得到每个所述SKU规格的展示信息(逻辑判断结果，是否可以选中等)。

所述规格列表组件的所述v-for逻辑可以向每个所述单规格组件传递checked、disabled、highlight、text等属性，其中checked是当前组件(单规格组件)内部控制的私有变量(根据所述选中事件判断)，highlight是特殊的业务(例如秒杀等活动)逻辑判断，disabled是控制规格选中互斥的核心逻辑，该逻辑的判断是根据现有已选中的所述第一单规格组件和当前单规格组件通过正则表达式做比对计算。

在本实施例中，规格选中互斥实现原理为：在v-for循环的过程中，可以得知当前单规格组件所在的层级，也就是v-for组件中的index，同时也可以获取当前单规格组件的文本。根据所述SKU规格源数据可以获取所有的规格组合类型，根据所述选中事件可以获取已经选中了的规格或规格组合。有了这些数据，通过while循环就可以生成所需要的正则表达式，最后根据该正则表达式去比对禁选的规格组合，就能得知当前单规格组件是否可以选中。

例如，当用户首先选择尺码M时，尺码M对应的单规格组件将该选中事件传送至所述规格列表组件，所述规格列表组件根据上述各种逻辑判断可以得出：尺码M规格的展示样式为选中效果，尺码S和尺码L规格的展示样式均为禁用效果(因为与尺码M互斥)，红色、白色、黑色这三个规格的展示样式均为未选中效果(假设其中白色参加秒杀，则白色规格为高亮效果；假设尺码M且为黑色的商品无库存，则黑色规格为禁用效果)。当用户在选择尺码M的基础上再选择红色时，红色对应的单规格组件将该选中事件传送至所述规格列表组件，所述规格列表组件根据上述各种逻辑判断可以得出：尺码M规格的展示样式为选中效果，尺码S和尺码L规格的展示样式均为禁用效果(因为与尺码M互斥)，红色规格的展示样式为选中效果，白色和黑色规格的展示样式均为禁用效果(因为与红色互斥)。

S310，所述规格列表组件将所述展示信息传送至每个单规格组件。

所述规格列表组件根据所述选择操作和上述SKU规格源数据得到每个SKU规格的所述展示信息后，将所述展示信息通过所述text、checked、disabled、highlight参数传送至每个所述单规格组件。

S312，每个单规格组件根据所述展示信息确定所述SKU规格的展示样式并进行相应样式的展示。

每个所述单规格组件根据所述规格列表组件传送的参数，即可确定该组件的展示样式，然后按照所述样式对该规格进行展示。例如，尺码M展示选中效果，尺码S和尺码L展示禁用效果。

本实施例提出的库存展示方法，可以通过规格列表组件和单规格组件解耦业务逻辑，由规格列表组件处理各个规格之间的逻辑判断，单规格组件仅控制单个规格的展示样式，不仅简化了处理过程，使其更加清晰明了，而且单规格组件再次开发扩展也很方便，后续可支持更多样式。另外，在初始化规格列表组件之后先验证所述规格列表组件中的数据合法性，可以避免由于数据不合法而导致后续逻辑判断错误，保证展示结果的准确性。

实施例三

如图6所示，为本申请第三实施例提出一种电子装置20的硬件架构示意图。本实施例中，所述电子装置20可包括，但不仅限于，可通过系统总线相互通信连接的存储器21、处理器22、网络接口23。需要指出的是，图6仅示出了具有组件21-23的电子装置20，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。在本实施例中，所述电子装置20为所述服务器4。当然，在其他实施例中，所述电子装置20也可以是所述客户端2。

所述存储器21至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，所述存储器21可以是所述电子装置20的内部存储单元，例如该电子装置20的硬盘或内存。在另一些实施例中，所述存储器21也可以是所述电子装置20的外部存储设备，例如该电子装置20上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。当然，所述存储器21还可以既包括所述电子装置20的内部存储单元也包括其外部存储设备。本实施例中，所述存储器21通常用于存储安装于所述电子装置20的操作系统和各类应用软件，例如库存展示系统60的程序代码等。此外，所述存储器21还可以用于暂时地存储已经输出或者将要输出的各类数据。

所述处理器22在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器22通常用于控制所述电子装置20的总体操作。本实施例中，所述处理器22用于运行所述存储器21中存储的程序代码或者处理数据，例如运行所述库存展示系统60等。

所述网络接口23可包括无线网络接口或有线网络接口，该网络接口23通常用于在所述电子装置20与其他电子设备之间建立通信连接。

实施例四

如图7所示，为本申请第四实施例提出一种库存展示系统60的模块示意图。所述库存展示系统60可以被分割成一个或多个程序模块，一个或者多个程序模块被存储于存储介质中，并由一个或多个处理器所执行，以完成本申请实施例。本申请实施例所称的程序模块是指能够完成特定功能的一系列计算机程序指令段，以下描述将具体介绍本实施例各程序模块的功能。

在本实施例中，所述库存展示系统60包括：

初始化模块600，用于初始化规格列表组件，所述规格列表包括一种商品的多个SKU规格。

一般情况下，在某个商品的多SKU规格展示页面，需要向用户提供该商品的尺码(例如S、M、L)、颜色(例如红、白、黑)等多种规格属性，并供用户通过这些规格属性选择所需的商品，然后根据用户的选择和库存情况等判断展示结果，按照所述展示结果对用户进行展示。目前很多电商网站使用的是React技术栈来实现这种展示方案，但展示出的样式简单、功能简单，数据结构设计繁琐，不利于功能扩展。本实施例使用了Vue前端框架，功能上拆分设计为两个组件，分别为规格列表组件和单规格组件，两个组件的设计解耦了处理逻辑，更具备灵活性。Vue是一套用于构建用户界面的渐进式JavaScript框架，与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用，Vue的核心库只关注视图层，方便与第三方库或既有项目整合。

所述规格列表组件用于控制多组规格排列展示(例如上述S、M、L三种尺码和红、白、黑三种颜色)，可以处理SKU规格选中、取消选中、禁用、高亮等逻辑。所述规格列表组件中的参数包括value和data，其中value为SKU唯一标识(skuID)，data为SKU规格源数据列表。

所述SKU规格源数据列表的数据结构设计为数组，主要数据结构为：[{skuID:String,specValues:Array,canAddCart:Boolean,price:Number,img:String}]。其中：skuID为SKU唯一标识；specValues为该SKU规格属性(例如上述尺码和颜色)；canAddCart表示能否加车(规格选择互斥判断依据)；price为SKU的价格；img为SKU的样图。例如，当所述SKU规格包括S、M、L三种尺码和红、白、黑三种颜色时，根据尺码和颜色之间的排列组合可以生成3*3＝9条SKU源数据。

所述规格列表组件的html核心部分是一组for循环单规格组件，每个所述单规格组件负责一种SKU规格(例如上述S、M、L三种尺码中的一种，或者红、白、黑三种颜色中的一种)，在单规格组件外面包一层v-for逻辑。v-for是Vue框架提供的循环组件，v-for循环的源数据是通过Vuecomputed计算出来的SKU规格二维数组。所述规格列表组件的js核心部分是根据正则表达式实现的规格选择互斥逻辑。

所述初始化模块600，还用于初始化多个单规格组件，每个所述单规格组件对应一个所述SKU规格。

首先，所述初始化模块600根据所述规格列表组件的参数计算出SKU规格二维数组。

在本实施例中，从所述规格列表组件的data部分，也就是多SKU源数据列表中，可以提取出各个SKU规格属性，生成所述二维数组。所述二维数组的数据结构类似[{titie:‘尺码’,specList:[‘S’,’M’,’L’]}]。

然后，所述初始化模块600根据所述二维数组循环渲染多个单规格组件并初始化每个所述单规格组件。

每个所述单规格组件分别控制一种SKU规格的展示，例如上述S、M、L三种尺码中的一种，或者红、白、黑三种颜色中的一种。也就是说，当所述SKU规格包括S、M、L三种尺码和红、白、黑三种颜色时，需要循环渲染和初始化尺码S、尺码M、尺码L、红色、白色、黑色分别对应的六个单规格组件。

所述单规格组件的展示样式包括但不限于未选中(默认)、选中、高亮、禁用效果。其中，高亮表示参与活动(例如秒杀)的SKU规格，禁用则一般在互斥或没有库存的情况下展示。所述单规格组件的参数包括text、checked、disabled、highlight，其中text为规格的名称，checked表示是否选中，disabled表示是否禁用，highlight表示是否高亮。

在本实施例中，由于所述单规格组件很纯粹的负责单个规格的展示样式以及选中事件的处理，样式包括未选中(默认)、选中、高亮、禁用效果，事件包括选中和取消选中，代码实现相对简单很多。

通过所述规格列表组件和单规格组件的初始化，即可在该商品的多SKU规格展示页面中展示各个规格的初始化状态(默认为未选中效果)。

接收模块602，用于通过所述单规格组件接收用户对所述SKU规格的选择操作，并将所述选择操作传送至所述规格列表组件。

当用户需要对该商品加入购物车或者直接购买时，在页面中对所需的规格进行选择操作(例如点击选中)。值得注意的是，当该商品的SKU规格有多个层级(例如既有尺码又有颜色)时，一般需要进行多次选择操作(例如先点击选中尺码M，再点击选中黑色)。

在本实施例中，由用户所选择的SKU规格对应的单规格组件(下文称为第一单规格组件)接收所述选择操作(选中事件)。

由于每个单规格组件只负责单个规格的展示样式和选中事件的处理，因此需要与所述规格列表组件一起综合进行逻辑判断，才能得到SKU规格对应的展示样式。在本实施例中，用户所选择的SKU规格(例如尺码M)对应的第一单规格组件将用户的所述选择操作(选中事件)传送至所述规格列表组件。

判断模块604，用于通过所述规格列表组件根据所述选择操作确定每个SKU规格的展示信息，并将所述展示信息传送至每个所述单规格组件。

在本实施例中，所述规格列表组件根据所述选择操作和所述SKU规格源数据进行每个所述SKU规格之间的逻辑判断，得到每个所述SKU规格的展示信息(逻辑判断结果，是否可以选中等)。

所述规格列表组件的所述v-for逻辑可以向每个所述单规格组件传递checked、disabled、highlight、text等属性，其中checked是当前组件(单规格组件)内部控制的私有变量(根据所述选中事件判断)，highlight是特殊的业务(例如秒杀等活动)逻辑判断，disabled是控制规格选中互斥的核心逻辑，该逻辑的判断是根据现有已选中的所述第一单规格组件和当前单规格组件通过正则表达式做比对计算。

在本实施例中，规格选中互斥实现原理为：在v-for循环的过程中，可以得知当前单规格组件所在的层级，也就是v-for组件中的index，同时也可以获取当前单规格组件的文本。根据所述SKU规格源数据可以获取所有的规格组合类型，根据所述选中事件可以获取已经选中了的规格或规格组合。有了这些数据，通过while循环就可以生成所需要的正则表达式，最后根据该正则表达式去比对禁选的规格组合，就能得知当前单规格组件是否可以选中。

例如，当用户首先选择尺码M时，尺码M对应的单规格组件将该选中事件传送至所述规格列表组件，所述规格列表组件根据上述各种逻辑判断可以得出：尺码M规格的展示样式为选中效果，尺码S和尺码L规格的展示样式均为禁用效果(因为与尺码M互斥)，红色、白色、黑色这三个规格的展示样式均为未选中效果(假设其中白色参加秒杀，则白色规格为高亮效果；假设尺码M且为黑色的商品无库存，则黑色规格为禁用效果)。当用户在选择尺码M的基础上再选择红色时，红色对应的单规格组件将该选中事件传送至所述规格列表组件，所述规格列表组件根据上述各种逻辑判断可以得出：尺码M规格的展示样式为选中效果，尺码S和尺码L规格的展示样式均为禁用效果(因为与尺码M互斥)，红色规格的展示样式为选中效果，白色和黑色规格的展示样式均为禁用效果(因为与红色互斥)。

所述规格列表组件根据所述选择操作和上述SKU规格源数据得到每个SKU规格的所述展示信息后，将所述展示信息通过所述text、checked、disabled、highlight参数传送至每个所述单规格组件。

展示模块606，用于通过所述单规格组件根据所述展示信息确定所述SKU规格的展示样式并进行展示。

每个所述单规格组件根据所述规格列表组件传送的参数，即可确定该组件的展示样式，然后按照所述样式对该规格进行展示。例如，尺码M展示选中效果，尺码S和尺码L展示禁用效果。

本实施例提出的库存展示系统，可以通过规格列表组件和单规格组件解耦业务逻辑，由规格列表组件处理各个规格之间的逻辑判断，单规格组件仅控制单个规格的展示样式，不仅简化了处理过程，使其更加清晰明了，而且单规格组件再次开发扩展也很方便，后续可支持更多样式。另外，在初始化规格列表组件之后先验证所述规格列表组件中的数据合法性，可以避免由于数据不合法而导致后续逻辑判断错误，保证展示结果的准确性。

实施例五

如图8所示，为本申请第五实施例提出一种库存展示系统60的模块示意图。在本实施例中，所述库存展示系统60除了包括第四实施例中的所述初始化模块600、接收模块602、判断模块604、展示模块606之外，还包括验证模块608。

所述验证模块608，用于在所述初始化模块600初始化所述规格列表组件后，验证所述规格列表组件中的SKU规格源数据的合法性。

在本实施例中，当初始化所述规格列表组件后，还需要验证所述规格列表组件的data参数(即所述SKU规格源数据)的数据合法性，包括每个字段是否都有相应的数据，数据格式是否合法等等。

当验证通过后，触发所述初始化模块600继续初始化多个单规格组件。当验证未通过(不合法)时，则展示模块606在该多SKU规格展示页面中所述规格列表组件对应的区域展示空白状态。

本实施例提出的库存展示系统，在初始化规格列表组件之后先验证所述规格列表组件中的数据合法性，可以避免由于数据不合法而导致后续逻辑判断错误，保证展示结果的准确性。

实施例六

本申请还提供了另一种实施方式，即提供一种计算机可读存储介质，所述计算机可读存储介质存储有库存展示程序，所述库存展示程序可被至少一个处理器执行，以使所述至少一个处理器执行如上述的库存展示方法的步骤。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。

上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。

显然，本领域的技术人员应该明白，上述的本申请实施例的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，并且在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本申请实施例不限制于任何特定的硬件和软件结合。

以上仅为本申请实施例的优选实施例，并非因此限制本申请实施例的专利范围，凡是利用本申请实施例说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本申请实施例的专利保护范围内。

Claims (11)

1.一种库存展示方法，其特征在于，所述方法包括：

初始化规格列表组件，所述规格列表包括商品的多个规格；

初始化多个单规格组件，每个所述单规格组件对应一个所述规格；

所述单规格组件接收用户对所述规格的选择操作，并将所述选择操作传送至所述规格列表组件；

所述规格列表组件根据所述选择操作确定每个所述规格的展示信息，并将所述展示信息传送至每个所述单规格组件；及

所述单规格组件根据所述展示信息确定所述规格的展示样式，单规格组件仅控制单个规格的展示样式；

所述规格列表组件的参数包括SKU规格源数据列表；其中，所述规格列表组件根据所述选择操作确定每个所述规格的展示信息包括：所述规格列表组件根据所述选择操作和SKU规格源数据进行每个所述规格之间的逻辑判断，得到每个所述规格的展示信息。

2.根据权利要求1所述的库存展示方法，其特征在于，所述规格列表组件用于控制多个所述规格的排列展示，处理所述规格的选中、取消选中、禁用、高亮逻辑。

3.根据权利要求1或2所述的库存展示方法，其特征在于，所述规格列表组件的参数包括库存保有单位SKU唯一标识，所述SKU规格源数据列表的数据结构为数组。

4.根据权利要求3所述的库存展示方法，其特征在于，所述初始化多个单规格组件包括：

根据所述规格列表组件的参数计算出规格二维数组；

根据所述规格二维数组循环渲染多个所述单规格组件并初始化每个所述单规格组件。

5.根据权利要求4所述的库存展示方法，其特征在于，所述根据所述规格列表组件的参数计算出规格二维数组包括：

从所述规格列表组件的所述SKU规格源数据列表中提取出各个SKU规格属性，生成所述规格二维数组。

6.根据权利要求1所述的库存展示方法，其特征在于，所述单规格组件用于控制一个所述规格的展示，所述单规格组件对应的展示样式包括未选中、选中、高亮、禁用效果。

7.根据权利要求1或6所述的库存展示方法，其特征在于，所述单规格组件的参数包括规格名称、是否选中、是否禁用、是否高亮；所述规格列表组件将所述展示信息通过所述单规格组件的所述参数传送至所述单规格组件。

8.根据权利要求3所述的库存展示方法，其特征在于，所述方法在初始化规格列表组件后还包括：

验证所述规格列表组件中的所述SKU规格源数据的合法性，当验证通过后，执行所述初始化多个单规格组件的步骤。

9.一种库存展示系统，其特征在于，所述系统包括：

初始化模块，用于初始化规格列表组件，所述规格列表包括商品的多个规格；

所述初始化模块，还用于初始化多个单规格组件，每个所述单规格组件对应一个所述规格；

接收模块，用于通过所述单规格组件接收用户对所述规格的选择操作，并将所述选择操作传送至所述规格列表组件；

判断模块，用于通过所述规格列表组件根据所述选择操作确定每个所述规格的展示信息，并将所述展示信息传送至每个所述单规格组件；

展示模块，用于通过所述单规格组件根据所述展示信息确定所述规格的展示样式，单规格组件仅控制单个规格的展示样式；

所述规格列表组件的参数包括SKU规格源数据列表；其中，所述规格列表组件根据所述选择操作确定每个所述规格的展示信息包括：所述规格列表组件根据所述选择操作和SKU规格源数据进行每个所述规格之间的逻辑判断，得到每个所述规格的展示信息。

10.一种电子装置，其特征在于，所述电子装置包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的库存展示程序，所述库存展示程序被所述处理器执行时实现如权利要求1至8中任一项所述的库存展示方法。

11.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有库存展示程序，所述库存展示程序被处理器执行时实现如权利要求1至8中任一项所述的库存展示方法。