uniapp选择、切换、记住商品规格

92 阅读1分钟
export default {
    data() {
        return {
            sku: [],
            specs: {},
            goods: {},
            selectSku: {},
            select: false,
            skuName: ''
        }
    },
    onShow() {
        this.sku=[]
        this.goods = {};
        this.getGoods()
    },
    onLoad(option) {
        let info = uni.getStorageSync('goods') || {};
        if (option.select) {
            if (info.skuName) this.skuName = info.skuName;
            if (info.specs) this.specs = info.specs;
            if (info.sku) this.selectSku = info.sku;
            this.select = true;
        }
    },
    methods:{
        getGoods() {
            // 获取到商品数据后,对数据进行处理
            this.goodsFormat()
        },
        // 规格初始化
        goodsFormat() {
           if (this.goods.goods_spec_format && 0 !== this.goods.goods_spec_format.length) {
               // 已选规格
               if (Object.keys(this.specs).length !== 0 && this.select) {
                   for (var i = 0; i < this.goods.goods_spec_format.length; i++) {
                       if (this.specs[this.goods.goods_spec_format[i].id]) {
                           for (var j = 0; j < this.goods.goods_spec_format[i].spec_value
                               .length; j++) {
                               this.goods.goods_spec_format[i].spec_value[j].check = this
                                   .specs[this.goods.goods_spec_format[i].id].id === this.goods
                                   .goods_spec_format[i].spec_value[j].id;
                           }
                       }
                   }
               } else {
                   // 未选规格,默认选中第一个规格
                   let selectSkus = [];
                   for (var i = 0; i < this.goods.goods_spec_format.length; i++) {
                       for (var j = 0; j < this.goods.goods_spec_format[i].spec_value
                           .length; j++) {
                           if (0 === j) {
                               selectSkus.push({
                                   id: this.goods.goods_spec_format[i]
                                       .spec_value[j].id,
                                   value: this.goods.goods_spec_format[i]
                                       .spec_value[j].value
                               })
                           }
                           this.goods.goods_spec_format[i].spec_value[j].check = 0 === j;
                           this.specs[this.goods.goods_spec_format[i].id] = {
                               id: this.goods
                                   .goods_spec_format[i].spec_value[0].id,
                               value: this.goods
                                   .goods_spec_format[i].spec_value[0].value
                           }
                       }
                   }
                   this.skuFormat(selectSkus)
               }
           }
       },
       // 过滤当前sku
        skuFormat(skus) {
            let skuId = ''
            let sku_ids = '';
            let sku_names = ''
            for (var i = 0; i < skus.length; i++) {
                sku_ids += skus[i].id + ((1 === skus.length || i===skus.length-1) ? '' : ',');
                sku_names += skus[i].value + (( 1 === skus.length || i===skus.length-1) ? '' : '/')
            }
            const sku = this.sku.filter(item => sku_ids === item.goods_spec_format.spec_value_ids)[0] || {}
            this.selectSku = sku
            this.skuName = sku_names;
            this.setStorage({
                sku: sku,
                skuName: sku_names
            })
        },
        // 选择规格
        specChange(sku, spec_id) {
           this.specs[spec_id] = {
               id: sku.id,
               value: sku.value
           };
           let skus = []
           for (var i = 0; i < this.goods.goods_spec_format.length; i++) {
               if (spec_id === this.goods.goods_spec_format[i].id) {
                   for (var j = 0; j < this.goods.goods_spec_format[i].spec_value
                       .length; j++) {
                       this.goods.goods_spec_format[i].spec_value[j].check = sku.id == this.goods.goods_spec_format[
                               i]
                           .spec_value[j].id;
                   }
               }
           }
           this.skuFormat(Object.values(this.specs))
           this.setStorage({
               specs: this.specs
           })
       },
       setStorage(data) {
           let info = uni.getStorageSync('goods') || {};
           uni.setStorageSync('goods', Object.assign(info, data))
       }
    }
}

规格如下:

image.png image.png

image.png