平台兼容性

wuyan-goods-sku 一个仿淘宝的商品多规格选择组件

喜欢请给个好评吧

引用方法

import specificationsnew from '@/components/specificationsnew.vue';：** 

< template > 模板

<template>
    <view class="">
        <view @click="selectSukid">选择规格</view>
        <specificationsnew @submitSukid="update" v-if="JSON.stringify(goodsInfo)!='{}' && JSON.stringify(gspecList)!='{}'" :goodsInfo="goodsInfo" :gspecList="gspecList" ref="mychild"></specificationsnew>
        </view>
</template>

< script >模板

<script>
import specificationsnew from '@/components/specificationsnew.vue';
export default {
    components: {
        specificationsnew
    },
    data() {
        return {
            gspecList: {},
            goodsInfo: {},
        };
    },
    onLoad() {
        this.getlist();
    },
    methods: {
        selectSukid:function(){
            if(JSON.stringify(this.goodsInfo)!='{}' && JSON.stringify(this.gspecList)!='{}'){
            this.$refs.mychild.toggleSpec();

            }else{
                 uni.showToast({
                    title: '请稍后再试',
                    mask: false,
                    duration: 1500
                });
            }
        },
        update:function(e){
            console.log(e)
        },
        getlist: function() {
            setTimeout(() => {
                this.gspecList = {
                    //模拟后台返回的数据 多规格
                    goods_spec: [
                        {
                            thumb: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1841931946,2601594367&fm=26&gp=0.jpg',
                            specs: '2_5',
                            id: 23,
                            stock: 10,
                            title: '热+有糖(半勺)',
                            price: '20.00'
                        },
                        {
                            thumb: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3942074681,1492806778&fm=26&gp=0.jpg',
                            specs: '2_6',
                            id: 22,
                            stock: 0,
                            title: '热+无糖',
                            price: '20.00'
                        }
                    ],
                    spec_info_list: [
                        {
                            spec_name: '温度',
                            spec_id: 3,
                            value: [
                                {
                                    spec_value_name: '热',
                                    spec_name: '温度',
                                    spec_id: 3,
                                    spec_value_id: 2
                                },
                                {
                                    spec_value_name: '冷',
                                    spec_name: '温度',
                                    spec_id: 3,
                                    spec_value_id: 3
                                }
                            ]
                        },
                        {
                            spec_name: '口味',
                            spec_id: 4,
                            value: [
                                {
                                    spec_value_name: '有糖(半勺)',
                                    spec_name: '口味',
                                    spec_id: 4,
                                    spec_value_id: 5
                                },

                                {
                                    spec_value_name: '无糖',
                                    spec_name: '口味',
                                    spec_id: 4,
                                    spec_value_id: 6
                                },
                                {
                                    spec_value_name: '有糖(一勺)',
                                    spec_name: '口味',
                                    spec_id: 4,
                                    spec_value_id: 7
                                }
                            ]
                        }
                    ]
                };
                this.goodsInfo = {
                    thumb: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2346693831,2195431178&fm=26&gp=0.jpg',
                    stock: 100,
                    price: '30.00'
                };
            }, 1500);
        }
    }
};
</script>

参数说明

方法 & 事件

• 方法事件有详细备注就不写了