一种同城前端会员等级系统

技术领域

本发明涉及会员管理系统技术领域，具体涉及一种同城前端会员等级系统。

背景技术

会员等级系统组件是同城票据网个人中心页基础信息分页的重要构成组件，主要承担了展示会员等级和会员权益，传递用户信息和进行交互的重要组件。网站个人中心需要展示会员信息、权益详情的弹框以及轮播查看各等级信息的交互功能。而原生构建的组件弹框代码量多且复杂，动效和性能不够优异，其主要表现为：

1、轮播组件的性能不如框架优异；

2、维护和优化成本高，代码和功能迭代困难；

3、在不同浏览器之下存在兼容性问题。

发明内容

本发明的目的是提供一种同城前端会员等级系统，用于解决上述问题。

为了实现上述目的，本发明提供如下技术方案：

一种同城前端会员等级系统，包括：

会员构架管理模块，基于会员资料使会员入住高楼虚拟模型内；

视觉交互模块，基于所述高楼虚拟模型预设层数设置以及对应楼层所属会员的权益，建设会员权利标识以及权利；

会员弹窗模块，基于所述会员权利标识以及所述权利建立相应的弹窗窗口，并对弹性数据进行数据渲染形成子组件并植入后台运行框架进行运行、管理；

数据转化模块，基于子组件运行，对访问ID进行加载，锁定之后访问用户的子组件的窗口图像比例、分辨率、色彩进行协调。

优选的，所述高楼虚拟模型基于MemberLevel为基础形成构件层次，并负责运行和管理每层运行单独的子组件。

优选的，所述子组件以RightItemComponen对子组件的窗口进行图样、文字的渲染动画运行以及表现。

优选的，所述弹窗窗口以OpenMyRightModal运行模拟，则鼠标点击锁定的父页面后激活子窗口focus，因为是先回到父页面的点击事件后再激活子页面，所以子页面会消失一下后再激活。

优选的，所述弹性数据进行数据渲染是基于Swiper构建轮播弹框的表象的渲染模拟器，并对所述弹窗窗口出现的形式进行自定义。

优选的，所述会员构架管理模块、所述视觉交互模块以及所述会员弹窗模块均运行于SwiperSliderComponent上。

一种同城前端会员等级处理方法，应用于上述方案中所述的同城前端会员等级系统，其步骤包括：

S001、调用会员等级接口，并将获取数据存入组件state中，其中，获取的数据包括用户会员等级、用户等级成长值、用户会员等级权益列表，最后将数据被分配至高楼虚拟模型内，对用户进行分层管理；

S002、会员权益icon组件，并以Swiper构建轮播弹框的表象的渲染弹窗，从而引导会员权益弹框和规则弹框以展示；

S003、根据接口获取的数据，判断渲染不同会员等级状态下的各个组件。

优选的，所述步骤2中所述会员权益弹框和所述规则弹框加载过程中，通过svg图片处理，从而使得不同会员权益标识的颜色变化，并且在各个浏览器下展示清晰，不会像位图一样失真。

在上述技术方案中，本发明提供的一种同城前端会员等级系统，具备以下有益效果：将前端会员等级的整个模块变成一个组件，调取会员接口获取用户会员等级信息在前端渲染，展示会员等级信息，再通过Swiper编写会员权益弹框，从而完成整个前端会员等级系统组件的构建。会员权益轮播弹框，交互轮播更加流畅，且代码运行量减低，性能消耗小，加载效率高，并且使用svg处理图标，不易失真。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明中记载的一些实施例，对于本领域普通技术人员来讲，还可以根据这些附图获得其他的附图。

图1为本发明实施例提供的模块结构示意图；

图2为本发明实施例提供的流程计结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

实施例1

如图1所示，一种同城前端会员等级系统，包括：

会员构架管理模块，基于会员资料使会员入住高楼虚拟模型内；

视觉交互模块，基于高楼虚拟模型预设层数设置以及对应楼层所属会员的权益，建设会员权利标识以及权利；

会员弹窗模块，基于会员权利标识以及权利建立相应的弹窗窗口，并对弹性数据进行数据渲染形成子组件并植入后台运行框架进行运行、管理；

数据转化模块，基于子组件运行，对访问ID进行加载，锁定之后访问用户的子组件的窗口图像比例、分辨率、色彩进行协调。

上述技术方案中，高楼虚拟模型基于MemberLevel为基础形成构件层次，并负责运行和管理每层运行单独的子组件。

进一步的，子组件以RightItemComponen对子组件的窗口进行图样、文字的渲染动画运行以及表现。

更为进一步，弹窗窗口以OpenMyRightModal运行模拟，则鼠标点击锁定的父页面后激活子窗口focus，因为是先回到父页面的点击事件后再激活子页面，所以子页面会消失一下后再激活。

再者，弹性数据进行数据渲染是基于Swiper构建轮播弹框的表象的渲染模拟器，并对弹窗窗口出现的形式进行自定义。

实施例中的，会员构架管理模块、视觉交互模块以及会员弹窗模块均运行于SwiperSliderComponent上。

实施例2

一种同城前端会员等级处理方法，应用于实施例1中的其包括以下步骤：

S001、调用会员等级接口，并将获取数据存入组件state中，其中，获取的数据包括用户会员等级、用户等级成长值、用户会员等级权益列表，最后将数据被分配至高楼虚拟模型内，对用户进行分层管理；

S002、会员权益icon组件，并以Swiper构建轮播弹框的表象的渲染弹窗，从而引导会员权益弹框和规则弹框以展示；

S003、根据接口获取的数据，判断渲染不同会员等级状态下的各个组件。

实施例中的，步骤2中会员权益弹框和规则弹框加载过程中，通过svg图片处理，从而使得不同会员权益标识的颜色变化，并且在各个浏览器下展示清晰，不会像位图一样失真。

综上，将前端会员等级的整个模块变成一个组件，调取会员接口获取用户会员等级信息在前端渲染，展示会员等级信息，再通过Swiper编写会员权益弹框，从而完成整个前端会员等级系统组件的构建。会员权益轮播弹框，交互轮播更加流畅，且代码运行量减低，性能消耗小，加载效率高，并且使用svg处理图标，不易失真。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

本发明中应用了具体实施例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

本申请的实施例还提供能够实现上述实施例中的方法中全部步骤的一种电子设备的具体实施方式，所述电子设备具体包括如下内容：

处理器(processor)、存储器(memory)、通信接口(Communications Interface)和总线；

其中，所述处理器、存储器、通信接口通过所述总线完成相互间的通信；

所述处理器用于调用所述存储器中的计算机程序，所述处理器执行所述计算机程序时实现上述实施例中的方法中的全部步骤。

本申请的实施例还提供能够实现上述实施例中的方法中全部步骤的一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，该计算机程序被处理器执行时实现上述实施例中的方法的全部步骤。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于硬件+程序类实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。虽然本说明书实施例提供了如实施例或流程图所述的方法操作步骤，但基于常规或者无创造性的手段可以包括更多或者更少的操作步骤。实施例中列举的步骤顺序仅仅为众多步骤执行顺序中的一种方式，不代表唯一的执行顺序。在实际中的装置或终端产品执行时，可以按照实施例或者附图所示的方法顺序执行或者并行执行(例如并行处理器或者多线程处理的环境，甚至为分布式数据处理环境)。术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、产品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、产品或者设备所固有的要素。在没有更多限制的情况下，并不排除在包括所述要素的过程、方法、产品或者设备中还存在另外的相同或等同要素。为了描述的方便，描述以上装置时以功能分为各种模块分别描述。当然，在实施本说明书实施例时可以把各模块的功能在同一个或多个软件和/或硬件中实现，也可以将实现同一功能的模块由多个子模块或子单元的组合实现等。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

本领域技术人员应明白，本说明书的实施例可提供为方法、系统或计算机程序产品。因此，本说明书实施例可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本说明书实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本说明书实施例的至少一个实施例或示例中。

在本说明书中，对上述术语的示意性表述不必须针对的是相同的实施例或示例。此外，在不相互矛盾的情况下，本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。以上所述仅为本说明书实施例的实施例而已，并不用于限制本说明书实施例。对于本领域技术人员来说，本说明书实施例可以有各种更改和变化。凡在本说明书实施例的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本说明书实施例的权利要求范围之内。