商品属性选择 Sku ​

<template>
    <tm-app>

        <view class="pa-32">
            <tm-button @click="show = true;" label="打开购买窗口" block linear="left" linear-deep="accent" color="red" :font-size="32" :round="24"></tm-button>
        </view>
        <tm-sheet>
			<tm-text label="这个sku组件，商品的可选属性是不限制的，不管是显示尺码，颜色，型号，还是就显示一个颜色。可以随意的控制。"></tm-text>
		</tm-sheet>
        <tm-sku @buy="buy" :num="num" 
        :height="900"
        :sku-map="[
        {key:'size',value:'商品尺码'},
        {key:'color',value:'商品颜色'},
        {key:'model',value:'商品型号'},
        ]" :list="list" v-model:show="show"></tm-sku>
    </tm-app>
</template>
<script lang="ts" setup>
import tmSku from '@/tmui/components/tm-sku/tm-sku.vue';
import tmApp from '@/tmui/components/tm-app/tm-app.vue';
import tmButton from "@/tmui/components/tm-button/tm-button.vue";
import tmSheet from "@/tmui/components/tm-sheet/tm-sheet.vue";
import tmText from "@/tmui/components/tm-text/tm-text.vue";

import { Ref, ref } from "vue"
const show = ref(false)
const list= ref({
    data:[
        {
            title:"颜色类型",
            id:"test",
            children:[
                {
                    title:"白色",
                    id:"a",
					 num: 5
                },
                {
                    title:"黑色",
                    id:"b",
					 num: 5
                },
            ]
        },
        {
            title:"尺码表",
            id:"model",
            children:[
                {
                    title:"XS",
                    id:"a",
					 num: 5
                },
                {
                    title:"S",
                    id:"b",
					 num: 5
                },
            ]
        },
        {
            title:"款式",
            id:"style",
            children:[
                {
                    title:"套装",
                    id:"a",
					 num: 0
                },
                {
                    title:"单件",
                    id:"b",
					 num: 5
                },
            ]
        }
 
    ],
    product:[
        { id: "a-a-a", title: "白色-XS-套装", num: 0,max_buy:3,price: 56.9, salePrice: 54, tip: '当前可省10元',img:'https://gw.alicdn.com/bao/uploaded/i1/2328862868/O1CN01b5pglN1X3ahprbU9P_!!2328862868.jpg' },
        { id: "a-a-b", title: "白色-XS-单件", num: 5,max_buy:3,price: 56.9, salePrice: 54, tip: '当前可省10元',img:'https://gw.alicdn.com/bao/uploaded/i3/2328862868/O1CN01UBMJfy1X3af4Lc3ME_!!2328862868.jpg' },
        { id: "a-b-a", title: "白色-S-套装", num: 5,max_buy:3,price: 56.9, salePrice: 54, tip: '当前可省10元',img:'https://gw.alicdn.com/bao/uploaded/i1/TB1fw40oAvoK1RjSZPfSutPKFXa.jpg' },
        { id: "a-b-b", title: "白色-S-单件", num: 5,max_buy:3,price: 56.9, salePrice: 54, tip: '当前可省10元',img:'https://gw.alicdn.com/bao/uploaded/i1/398719215/O1CN01zgD6Xi2HwWY8U589Z_!!398719215.jpg' },

        { id: "b-a-a", title: "黑色-XS-套装", num: 5,max_buy:3,price: 56.9, salePrice: 54, tip: '当前可省10元',img:'https://gw.alicdn.com/bao/uploaded/i1/TB1fw40oAvoK1RjSZPfSutPKFXa.jpg' },
        { id: "b-a-b", title: "黑色-XS-单件", num: 5,max_buy:3,price: 56.9, salePrice: 54, tip: '当前可省10元',img:'https://gw.alicdn.com/bao/uploaded/i3/2328862868/O1CN01UBMJfy1X3af4Lc3ME_!!2328862868.jpg' },
        { id: "b-b-a", title: "黑色-S-套装", num: 5,max_buy:3,price: 56.9, salePrice: 54, tip: '当前可省10元',img:'https://gw.alicdn.com/bao/uploaded/i1/2328862868/O1CN01b5pglN1X3ahprbU9P_!!2328862868.jpg' },
        { id: "b-b-b", title: "黑色-S-单件", num: 5,max_buy:3,price: 56.9, salePrice: 54, tip: '当前可省10元',img:'https://gw.alicdn.com/bao/uploaded/i1/TB1fw40oAvoK1RjSZPfSutPKFXa.jpg' },

    ]

})

const num = ref(2)
function buy(e:any){
    console.log(e)
}
</script>