mall-app-t/pages/product/js/sku.js

import { ref, computed } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import peach from "@/peach";
import GoodsApi from "@/peach/api/trade/goods";
import { SPEC_TYPE } from "./config";

const pickerRef = ref(null);

// 多属性商品 sku 列表
const skus = ref([]);

const propertyList = ref([]);

const goodsPropertyList = ref([]);

const propertyListRef = ref(null);

const canEdit = computed(() => peach.$store("trade").canEdit);

const formData = ref({
  specType: true,
  specText: SPEC_TYPE[0].label,
});

async function showPropertyList() {
  await getGoodsProperty();
  propertyListRef.value.onOpen();
}

function onRDPickerConfirm(e) {
  peach.$store("trade").specType = SPEC_TYPE[e.value[0]].value;
  formData.value.specText = SPEC_TYPE[e.value[0]].label;
  formData.value.specType = SPEC_TYPE[e.value[0]].value;
}

function pickerProperty() {
  if (canEdit.value) {
    let index = specType.value ? 1 : 0;
    pickerRef.value.onOpen([index]);
  }
}

async function onPropertyConfirm(e) {
  await getGoodsProperty();
  console.log(e);
}

function onConfirm() {
  console.log(skus.value);
}

async function getGoodsProperty() {
  let { data } = await GoodsApi.getHistoryProperty();

  // 把 propertyList 中 id 相同的属性合并，并去重
  propertyList.value = peach.$store("trade").selectedProperty;

  console.log(propertyList.value);

  // 根据已经选择数据，设置默认选中
  data.forEach((item) => {
    // 判断属性是否已经选中
    let propertyParent = propertyList.value.find(
      (sitem) => sitem?.id === item.id
    );

    item.checked = propertyParent ? true : false;

    // 如果属性已经选中，查询子类中是否有选中
    if (item.checked) {
      item.propertyValues.forEach((child) => {
        let childResult = propertyParent?.children.some(
          (schild) => schild === child.id
        );
        child.checked = childResult ? true : false;
      });
    }
  });

  goodsPropertyList.value = data;
  console.log(goodsPropertyList.value);
}

function changeSubProperty() {
  // 修改子属性状态，需要同步更新 skus 的显示
  console.log(goodsPropertyList.value);
  // 过滤父属性 checked 选项，深拷贝避免后面循环改变元数据内容
  let temp = JSON.parse(
    JSON.stringify(goodsPropertyList.value.filter((item) => item.checked))
  );
  temp.forEach((item) => {
    item.propertyValues = item.propertyValues.filter((child) => child.checked);
  });

  let result = temp.map((item) => {
    return item.propertyValues.map((child) => ({
      propertyId: item.id,
      propertyName: item.name,
      valueId: child.id,
      valueName: child.name,
    }));
  });

  let tempSkus = [];

  for (let item of reduceArr(result)) {
    let obj = {
      picUrl: "",
      barCode: "",
      price: 0,
      marketPrice: 0,
      costPrice: 0,
      stock: 0,
      weight: 0,
      volume: 0,
      properties: item,
    };
    tempSkus.push(obj);
  }

  skus.value = tempSkus;
}

function reduceArr(arr) {
  return arr.reduce((acc, cur) => {
    let tempAcc = [];

    if (acc.length < 1) {
      cur.forEach((item, index) => {
        if (tempAcc[index]) {
          tempAcc[index].push(item);
        } else {
          tempAcc[index] = [item];
        }
      });
    } else {
      acc.forEach((item, index) => {
        cur.forEach((sitem, sindex) => {
          tempAcc.push([...item, sitem]);
        });
      });

      if (cur.length < 1) {
        tempAcc = acc;
      }
    }
    return tempAcc;
  }, []);
}

const specType = computed(() => peach.$store("trade").goodsInfo.specType);

function initial() {
  onLoad(() => {
    formData.value.specType = specType.value ? true : false;
    formData.value.specText = SPEC_TYPE[specType.value ? 1 : 0].label;
    skus.value = peach.$store("trade").skus;
    if (specType.value) {
      getGoodsProperty();
    }
  });
}

export {
  initial,
  canEdit,
  skus,
  pickerRef,
  pickerProperty,
  onConfirm,
  propertyListRef,
  formData,
  onRDPickerConfirm,
  onPropertyConfirm,
  propertyList,
  showPropertyList,
  goodsPropertyList,
  changeSubProperty,
};