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()

    peach.$store('trade').specType = SPEC_TYPE[e.value[0]].value
}

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

        console.log(index)

        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
}

/**
 * @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 {
        // 多规格
        skus.value = []
    }
}

/**
 * @author Ankkaya
 * @description 确认属性
 * @param {Type}  -
 * @returns {Type}
 */
function submitProperty() {
    try {
        validateSku(skus.value)
        peach.$store('trade').skus = skus.value
        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
    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').goodsInfo?.specType || false)

function initial() {
    onLoad(() => {
        formData.value.specType = specType.value ? true : false
        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()
        }
    })
}

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