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

业务需求：

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

关键因素：

1、有价格的显示，没有价格的不呈现；

2、有规格属性的显示，没有规格属性的不呈现；

3、有多少个规格属性，显示多少个规格属性；

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

解决思路：

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

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

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

操作步骤：

第一步：

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

第二步：

对是否有促销价（成交价）进行判断，有则输出。

第三步：

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

第四步：

创建一个tabselect的方法。

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

第五步：

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

第六步：

修复后台bug。

新增调整规格参数顺序的控件；

新增一键清空规格参数；

总结回顾：

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

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

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

例如：

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

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

增加“购物车”的功能；