feat(sku): 商品属性默认选中交互逻辑修改 (#8559)

* feat(sku): 属性默认选中逻辑修改

* feat(sku): 属性默认选中逻辑修改

Co-authored-by: liu <liujie@youzan.com>
Co-authored-by: neverland <chenjiahan@youzan.com>

src/sku/Sku.js

@@ -10,7 +10,7 @@ import SkuRowPropItem from './components/SkuRowPropItem';
 import SkuStepper from './components/SkuStepper';
 import SkuMessages from './components/SkuMessages';
 import SkuActions from './components/SkuActions';
-import { createNamespace } from '../utils';
+import { createNamespace, isEmpty } from '../utils';
 import {
   isAllSelected,
   isSkuChoosable,
@@ -413,14 +413,24 @@ export default createComponent({
       // 重置商品属性
       this.selectedProp = {};
       const { selectedProp = {} } = this.initialSku;
-      // 只有一个属性值时，默认选中，且选中外部传入信息
+      // 选中外部传入信息
       this.propList.forEach((item) => {
-        if (item.v && item.v.length === 1) {
-          this.selectedProp[item.k_id] = [item.v[0].id];
-        } else if (selectedProp[item.k_id]) {
+        if (selectedProp[item.k_id]) {
           this.selectedProp[item.k_id] = selectedProp[item.k_id];
         }
       });
+      if (isEmpty(this.selectedProp)) {
+        this.propList.forEach((item) => {
+          // 没有加价的属性，默认选中第一个
+          if (item?.v?.length > 0) {
+            const { v, k_id } = item;
+            const isHasConfigPrice = v.some((i) => +i.price !== 0);
+            if (!isHasConfigPrice) {
+              this.selectedProp[k_id] = [v[0].id];
+            }
+          }
+        });
+      }
 
       const propValues = this.selectedPropValues;
       if (propValues.length > 0) {

src/sku/demo/data.ts

@@ -197,6 +197,23 @@ export function getSkuData(largeImageMode = false) {
           },
         ],
       },
+      {
+        k: '未加价的属性项',
+        k_id: 126,
+        is_multiple: true,
+        v: [
+          {
+            id: 1244,
+            name: '属性a',
+            price: 0,
+          },
+          {
+            id: 1245,
+            name: '属性b',
+            price: 0,
+          },
+        ],
+      },
     ],
   };
 }

src/utils/index.ts

@@ -35,3 +35,45 @@ export function get(object: any, path: string): any {
 
   return result;
 }
+
+/**
+ * Checks if `value` is an empty object, collection, map, or set.
+ *
+ * Objects are considered empty if they have no own enumerable string keyed
+ * properties.
+ *
+ * Array-like values such as `arguments` objects, arrays, buffers, strings, or
+ * jQuery-like collections are considered empty if they have a `length` of `0`.
+ * Similarly, maps and sets are considered empty if they have a `size` of `0`.
+ *
+ * @function isEmpty
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is empty, else `false`.
+ * @example
+ *
+ * _.isEmpty(null);
+ * // => true
+ *
+ * _.isEmpty(true);
+ * // => true
+ *
+ * _.isEmpty(1);
+ * // => true
+ *
+ * _.isEmpty([1, 2, 3]);
+ * // => false
+ *
+ * _.isEmpty({ 'a': 1 });
+ * // => false
+ */
+export function isEmpty(value: any): boolean {
+  if (value == null) {
+    return true;
+  }
+
+  if (typeof value !== 'object') {
+    return true;
+  }
+
+  return Object.keys(value).length === 0;
+}