2021年6月3日,OneAdmin信息管理模块中,增加了一产品规格属性的功能。但在小程序端的视觉效果还比较粗糙,所以今天再优化了一下。

业务需求:

微信小程序端优化——需要将已经输入价格的产品,显示出标价、促销价;需要将有规格属性的产品,显示出规格属性。

关键因素:

1、有价格的显示,没有价格的不呈现;

2、有规格属性的显示,没有规格属性的不呈现;

3、有多少个规格属性,显示多少个规格属性;

4、视觉效果如何才能更加美观;

解决思路:

对数据中的价格字段进行是否存在判断,即可界定该产品是否填有价格。

对数据中的规格属性字段进行是否存在判断,即可界定该产品是否填有规格属性。并且,使用数组遍历的方式,就可以完美地实现规格属性的输出显示。

利用行的删格布局概念,将每行文字左右对齐。

操作步骤:

第一步:

给产品详情页增加一个“价格”区域,并在相应的地方填充好基本内容。

第二步:

对是否有促销价(成交价)进行判断,有则输出。

第三步:

创建一个选项卡,并设定好初始值——“产品详情”和“规格参数”。

第四步:

创建一个tabselect的方法。

并对选项卡的键值index值进行判断。当用户点击选项卡后,会改变选项卡的键值——当键值为0时,显示详情,当键值为1时显示规格属性。

第五步:

对是否存在“规格参数”进行判断,有则显示,无则只显示产品详情。

总结回顾:

视觉上多使用常规的、适应性广的布局方式,并结合部分交互,让用户可以更容易了解和操作。

对显示内容的界定十分关键,可以让软件在更自动化的同时更人性化。

本次优化仅是阶段性的工作。未来,有可能对产品详情进行更加深入的优化。

例如:

增加“有价格的产品直接下单购买”的功能;

与万能表单结合,增加在下单购买前,进行个人信息收集的功能;

增加“购物车”的功能;


马上致电网为科技:13071111008