template2/components/goods-spec-choice/goods-spec-choice.vue

<template>
    <view>
        <component-popup :propShow="popup_status" propPosition="bottom" @onclose="popup_close_event">
            <view class="goods-spec-choice-container padding-main bg-white pr">
                <view class="close fr oh">
                    <view class="fr" @tap.stop="popup_close_event">
                        <icon type="clear" size="20"></icon>
                    </view>
                </view>
                <view class="goods-spec-choice-content">
                    <!-- 商品规格 -->
                    <view v-if="spec.length > 0" class="goods-spec-choose">
                        <view v-for="(item, key) in spec" :key="key" class="item padding-top-xxl padding-bottom-xxl">
                            <view class="text-size-sm">{{item.name}}</view>
                            <view v-if="item.value.length > 0" class="spec margin-top-sm">
                                <block v-for="(items, keys) in item.value" :key="keys">
                                    <button @tap.stop="goods_spec_choice_event" :data-key="key" :data-keys="keys" type="default" size="mini" hover-class="none" :class="'round '+items.is_active + ' ' + items.is_dont + ' ' + items.is_disabled">
                                        <image v-if="(items.images || null) != null" :src="items.images" mode="scaleToFill" class="va-m dis-inline-block round margin-right-sm"></image>
                                        <text class="va-m">{{items.name}}</text>
                                    </button>
                                </block>
                            </view>
                        </view>
                    </view>
                </view>
                <button class="bg-main br-main cr-white text-size-sm round" type="default" @tap.stop="spec_confirm_event" hover-class="none">确定</button>
            </view>
        </component-popup>
    </view>
</template>
<script>
    const app = getApp();
    import componentPopup from "../../components/popup/popup";

    export default {
        data() {
            return {
                popup_status: false,
                goods_id: 0,
                spec: [],
                buy_min_number: 1,
                out_value: ''
            };
        },

        components: {
            componentPopup
        },

        created: function() {},

        methods: {
            // 获取数据
            init(goods_id, spec, buy_min_number = 1, out_value = '') {
                this.setData({
                    popup_status: true,
                    goods_id: goods_id,
                    spec: spec || [],
                    buy_min_number: buy_min_number || 1,
                    out_value: out_value,
                });
                
                // 不能选择规格处理
                this.spec_handle_dont(0, 1);
            },

            // 购买弹层关闭
            popup_close_event(e) {
                this.setData({
                    popup_status: false
                });
            },

            // 规格事件
            goods_spec_choice_event(e) {
                var key = e.currentTarget.dataset.key || 0;
                var keys = e.currentTarget.dataset.keys || 0;
                this.goods_spec_choice_handle(key, keys);
            },

            // 规格选择处理
            goods_spec_choice_handle(key, keys) {
                var temp_spec = this.spec;
                // 不能选择和禁止选择跳过
                if ((temp_spec[key]['value'][keys]['is_dont'] || null) == null && (temp_spec[key]['value'][keys]['is_disabled'] || null) == null) {
                    // 规格选择
                    for (var i in temp_spec) {
                        for (var k in temp_spec[i]['value']) {
                            if ((temp_spec[i]['value'][k]['is_dont'] || null) == null && (temp_spec[i]['value'][k]['is_disabled'] || null) == null) {
                                if (key == i) {
                                    if (keys == k && (temp_spec[i]['value'][k]['is_active'] || null) == null) {
                                        temp_spec[i]['value'][k]['is_active'] = 'cr-white bg-main br-main';
                                    } else {
                                        temp_spec[i]['value'][k]['is_active'] = '';
                                    }
                                }
                            }
                        }
                    }
                    this.setData({
                        spec: temp_spec
                    });

                    // 不能选择规格处理
                    this.spec_handle_dont(key);

                    // 获取下一个规格类型
                    this.get_spec_type(key);

                    // 获取规格详情
                    this.get_spec_detail();
                }
            },
            
            // 获取下一个规格类型
            get_spec_type(key) {
                var temp_spec = this.spec;
                var active_index = parseInt(key) + 1;
                var sku_count = app.globalData.get_length(temp_spec);
                if (active_index <= 0 || active_index >= sku_count) {
                    return false;
                }

                // 获取规格值
                var spec = [];
                for (var i in temp_spec) {
                    for (var k in temp_spec[i]['value']) {
                        if ((temp_spec[i]['value'][k]['is_active'] || null) != null) {
                            spec.push({
                                type: temp_spec[i]['name'],
                                value: temp_spec[i]['value'][k]['name']
                            });
                            break;
                        }
                    }
                }
                if (spec.length <= 0) {
                    return false;
                }

                // 获取数据
                uni.request({
                    url: app.globalData.get_request_url('spectype', 'goods'),
                    method: 'POST',
                    data: {
                        id: this.goods_id,
                        spec: JSON.stringify(spec)
                    },
                    dataType: 'json',
                    success: (res) => {
                        if (res.data.code == 0) {
                            var spec_type = res.data.data.spec_type;
                            var spec_count = spec.length;
                            var index = spec_count > 0 ? spec_count : 0;
                            if (index < sku_count) {
                                for (var i in temp_spec) {
                                    for (var k in temp_spec[i]['value']) {
                                        if (index == i) {
                                            temp_spec[i]['value'][k]['is_dont'] = '';
                                            var temp_value = temp_spec[i]['value'][k]['name'];
                                            var temp_status = false;
                                            for (var t in spec_type) {
                                                if (spec_type[t] == temp_value) {
                                                    temp_status = true;
                                                    break;
                                                }
                                            }
                                            if (temp_status == true) {
                                                temp_spec[i]['value'][k]['is_disabled'] = '';
                                            } else {
                                                temp_spec[i]['value'][k]['is_disabled'] = 'spec-items-disabled';
                                            }
                                        }
                                    }
                                }
                                this.setData({
                                    spec: temp_spec
                                });
                            }
                        } else {
                            app.globalData.showToast(res.data.msg);
                        }
                    },
                    fail: () => {
                        app.globalData.showToast('服务器请求出错');
                    }
                });
            },

            // 获取规格详情
            get_spec_detail() {
                // 获取规格值
                var spec = this.goods_selected_spec();

                // 存在规格的时候是否已完全选择规格
                var sku_count = this.spec.length;
                var active_count = spec.length;
                if (spec.length <= 0 || active_count < sku_count) {
                    return false;
                }

                // 获取数据
                uni.request({
                    url: app.globalData.get_request_url('specdetail', 'goods'),
                    method: 'POST',
                    data: {
                        id: this.goods_id,
                        spec: JSON.stringify(spec),
                        stock: this.buy_min_number
                    },
                    dataType: 'json',
                    success: res => {
                        if (res.data.code != 0) {
                            app.globalData.showToast(res.data.msg);
                        }
                    },
                    fail: () => {
                        app.globalData.showToast('服务器请求出错');
                    }
                });
            },

            // 已选的商品规格
            goods_selected_spec() {
                var spec = [];
                var temp_spec = this.spec;
                for (var i in temp_spec) {
                    for (var k in temp_spec[i]['value']) {
                        if ((temp_spec[i]['value'][k]['is_active'] || null) != null) {
                            spec.push({
                                type: temp_spec[i]['name'],
                                value: temp_spec[i]['value'][k]['name']
                            });
                            break;
                        }
                    }
                }
                return spec;
            },

            // 不能选择规格处理
            spec_handle_dont(key, is_init = 0) {
                var temp_spec = this.spec || [];
                if (temp_spec.length <= 0) {
                    return false;
                }

                // 是否不能选择
                key = parseInt(key);
                for (var i in temp_spec) {
                    for (var k in temp_spec[i]['value']) {
                        if (i > key) {
                            temp_spec[i]['value'][k]['is_dont'] = 'spec-dont-choose';
                            temp_spec[i]['value'][k]['is_disabled'] = '';
                            temp_spec[i]['value'][k]['is_active'] = '';
                        } else {
                            if(is_init == 1) {
                                temp_spec[i]['value'][k]['is_active'] = '';
                            }
                        }

                        // 当只有一个规格的时候
                        if (key == 0 && temp_spec.length == 1) {
                            temp_spec[i]['value'][k]['is_disabled'] = (temp_spec[i]['value'][k]['is_only_level_one'] || null) != null && (temp_spec[i]['value'][k]['inventory'] || 0) <= 0 ? 'spec-items-disabled' : '';
                        }
                    }
                }

                this.setData({
                    spec: temp_spec
                });
            },

            // 规格确认事件
            spec_confirm_event(e) {
                var temp_spec = this.spec;
                var sku_count = temp_spec.length;
                var active_count = 0;
                var spec = [];
                if (sku_count > 0) {
                    for (var i in temp_spec) {
                        for (var k in temp_spec[i]['value']) {
                            if ((temp_spec[i]['value'][k]['is_active'] || null) != null) {
                                active_count++;
                                spec.push({
                                    type: temp_spec[i]['name'],
                                    value: temp_spec[i]['value'][k]['name']
                                });
                            }
                        }
                    }
                    if (active_count < sku_count) {
                        app.globalData.showToast('请选择规格');
                        return false;
                    }
                }

                // 关闭弹窗
                this.setData({
                    popup_status: false
                });

                // 调用父级
                this.$emit('specConfirmEvent', {
                    goods_id: this.goods_id,
                    spec: spec,
                    stock: this.buy_min_number,
                    out_value: this.out_value,
                });
            }
        }
    };
</script>
<style>
    .goods-spec-choice-container .close {
        position: absolute;
        top: 20rpx;
        right: 20rpx;
        z-index: 2;
    }
    .goods-spec-choice-content {
        max-height: 50vh;
        overflow-y: scroll;
        overflow-x: hidden;
        margin-top: 20rpx;
    }
    .goods-spec-choice-container .item .spec button {
        background-color: #f5f5f5;
        color: #666;
        border: 1px solid #ccc;
    }
    .goods-spec-choice-container .item .spec button:not(:last-child) {
        margin-right: 25rpx;
    }
    .goods-spec-choice-container .item .spec button image {
        width: 40rpx;
        height: 40rpx !important;
    }
    .goods-spec-choice-container .spec-dont-choose {
        color: #b4b3b3 !important;
        background-color: #ffffff !important;
        border: 1px solid #ebeaea !important;
    }
    .goods-spec-choice-container .spec-dont-choose image {
        opacity: 0.5;
    }
    .goods-spec-choice-container .spec-items-disabled {
        color: #d2cfcf !important;
        background-color: #ffffff !important;
        border: 1px dashed #d5d5d5 !important;
    }
    .goods-spec-choice-container .spec-items-disabled image {
        opacity: 0.3;
    }
</style>