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, SKU_RULE_CONFIG } 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) {
  formData.value.specType = SPEC_TYPE[e.value[0]].value
  formData.value.specText = SPEC_TYPE[e.value[0]].label

  // 如果商品规格不一致，则需要重新初始化 sku 列表
  initSku()
}

function pickerProperty() {
  if (canEdit.value) {
    let index = formData.value.specType ? 1 : 0

    pickerRef.value.onOpen([index])
  }
}

async function onPropertyConfirm(e) {
  await getGoodsProperty()
}

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

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

  // 此处处理商品详情情况下，多规格属性
  // 把 propertyList 中 id 相同的属性合并，并去重
  propertyList.value = peach.$store('trade').selectedProperty || []

  // 根据已经选择数据，设置默认选中
  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
}

/**
 * @author Ankkaya
 * @description 新增商品初始化商品 sku
 * @param {Type}  -
 * @returns {Type}
 */
function initSku() {
  // 单规格
  if (!formData.value.specType) {
    let obj = {
      picUrl: '',
      barCode: '',
      price: 0,
      marketPrice: 0,
      costPrice: 0,
      stock: 0,
      weight: null,
      volume: null,
      properties: [
        {
          propertyId: 0,
          propertyName: '默认',
          valueId: 0,
          valueName: '默认',
        },
      ],
    }

    skus.value = [obj]
  } else {
    // 初始化已选中规格，属性和格式化后的结果
    propertyList.value = []
    goodsPropertyList.value = []
    // 多规格
    skus.value = []
  }
}

/**
 * @author Ankkaya
 * @description 确认属性
 * @param {Type}  -
 * @returns {Type}
 */
function submitProperty() {
  try {
    validateSku(skus.value)
    peach.$store('trade').$patch({
      skus: skus.value,
      specType: formData.value.specType,
    })
    peach.$router.back()
  } catch (e) {
    console.log(skus.value)
    console.log(e, '校验失败')
  }
}

function validateSku(skus) {
  let warningInfo = '请检查商品各行相关属性配置，'
  let validateStatue = true
  let skusValue = skus ?? peach.$store('trade').skus

  // 判断如果是多规格，并且 skusValue 为空 []，则提示
  if (formData.value.specType && skusValue.length < 1) {
    uni.showToast({
      title: '请选择商品规格',
      icon: 'none',
      duration: 4000,
    })
    throw new Error('请选择商品规格')
  }
  for (const sku of skusValue) {
    for (const rule of SKU_RULE_CONFIG) {
      const arg = getValue(sku, rule.name)
      if (!rule.rule(arg)) {
        validateStatue = false
        warningInfo += rule.message
        break
      }
    }
    if (!validateStatue) {
      uni.showToast({
        title: warningInfo,
        icon: 'none',
        duration: 4000,
      })
      throw new Error(warningInfo)
    }
  }
}

function getValue(obj, arg) {
  const keys = arg.split('.')
  let value = obj
  for (const key of keys) {
    if (value && typeof value === 'object' && key in value) {
      value = value[key]
    } else {
      value = undefined
      break
    }
  }
  return value
}

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').specType)

function initial() {
  onLoad(() => {
    formData.value.specType = specType.value
    formData.value.specText = SPEC_TYPE[specType.value ? 1 : 0].label
    skus.value = JSON.parse(JSON.stringify(peach.$store('trade').skus))
    // 如果新增商品 sku，并且是单规格，初始化 sku

    if (!skus.value) {
      initSku()
    }
    if (specType.value) {
      getGoodsProperty()
    }
  })
}

const propertyValueTitle = ref('新增')
const inputPropertyValueDialogRef = ref()
const inputPropertyValueFormdata = ref({
  id: '',
  propertyId: '',
  name: '',
  remark: '',
})
function addPropertyValueClick(item) {
  console.log(item)
  propertyValueTitle.value = '新增'
  inputPropertyValueFormdata.value.name = ''
  inputPropertyValueFormdata.value.propertyId = item.id
  inputPropertyValueDialogRef.value.open()
}

async function dialogInputPropertyValueConfirm(value) {
  if (!value) {
    peach.$helper.toast('请输入商品属性')
    return
  }
  if (inputPropertyValueFormdata.value.id) {
    await GoodsApi.editPropertyValue(inputPropertyValueFormdata.value)
  } else {
    await GoodsApi.createPropertyValue(inputPropertyValueFormdata.value)
  }
  await getGoodsProperty()
  inputPropertyValueDialogRef.value.close()
}

function longPropertyValuePress(item) {
  console.log(item)
  if (canEdit.value) {
    // 震动提示
    uni.vibrateShort()
    uni.showActionSheet({
      itemList: ['编辑', '删除'],
      success: async (res) => {
        if (res.tapIndex === 0) {
          propertyValueTitle.value = '编辑'
          inputPropertyValueFormdata.value.id = item.id
          inputPropertyValueFormdata.value.propertyId = item.propertyId
          inputPropertyValueFormdata.value.name = item.name
          inputPropertyValueDialogRef.value.open()
        }
        if (res.tapIndex === 1) {
          await GoodsApi.delPropertyValue({ id: item.id })
          await getGoodsProperty()
        }
      },
    })
  }
}

export {
  initial,
  canEdit,
  skus,
  pickerRef,
  pickerProperty,
  validateSku,
  onConfirm,
  submitProperty,
  propertyListRef,
  formData,
  onRDPickerConfirm,
  onPropertyConfirm,
  propertyList,
  showPropertyList,
  goodsPropertyList,
  changeSubProperty,
  getGoodsProperty,
  addPropertyValueClick,
  dialogInputPropertyValueConfirm,
  longPropertyValuePress,
  inputPropertyValueDialogRef,
  inputPropertyValueFormdata,
  propertyValueTitle,
}