import{e as a,o as n,G as t}from"./vendor.js";const l={class:"markdown-body"},p=t(`

Sku \u5546\u54C1\u89C4\u683C\u7EC4\u4EF6

\u4ECB\u7ECD

\u6309\u9700\u52A0\u8F7D\u8BF7\u52A0\u8F7D\u5BF9\u5E94\u4F9D\u8D56\u7EC4\u4EF6\uFF1APopup\u3001InputNumber\u3001Price

\u5B89\u88C5

import { createApp } from 'vue';
//vue
import { Sku, Popup, InputNumber, Price } from '@nutui/nutui';
//taro
import { Sku, Popup, InputNumber, Price } from '@nutui/nutui-taro';

const app = createApp();
app.use(Sku);
app.use(Popup);
app.use(InputNumber);
app.use(Price);

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

<nut-sku
  v-model:visible="base"
  :sku="sku"
  :goods="goods"
  @selectSku="selectSku"
  @clickBtnOperate="clickBtnOperate"
  @close="close"
></nut-sku>

setup() {
    const base = ref(false);
    const data = reactive({
      sku: [
          // \u5177\u4F53\u6570\u636E\u7ED3\u6784\u89C1\u4E0B\u65B9\u6587\u6863
        ],
      goods: {
          // \u5177\u4F53\u6570\u636E\u7ED3\u6784\u89C1\u4E0B\u65B9\u6587\u6863
        }
    });

    onMounted(() => {});
    // \u5207\u6362\u89C4\u683C\u7C7B\u76EE
    const selectSku = (ss: string) => {
      const { sku, skuIndex, parentSku, parentIndex } = ss;
      if (sku.disable) return false;
      data.sku[parentIndex].list.forEach((s) => {
        s.active = s.id == sku.id;
      });
      data.goods = {
        skuId: sku.id,
        price: '4599.00',
        imagePath:
          '//img14.360buyimg.com/n4/jfs/t1/215845/12/3788/221990/618a5c4dEc71cb4c7/7bd6eb8d17830991.jpg' 
      };
    };
    // \u5E95\u90E8\u64CD\u4F5C\u6309\u94AE\u89E6\u53D1
    const clickBtnOperate = (op:string)=>{
      console.log('\u70B9\u51FB\u4E86\u64CD\u4F5C\u6309\u94AE',op)
    } 
    // \u5173\u95ED\u5546\u54C1\u89C4\u683C\u5F39\u6846
    const close = ()=>{}
    return { base, selectSku, clickBtnOperate,close, ...toRefs(data) };
}

\u4E0D\u53EF\u552E

<nut-sku
  v-model:visible="notSell"
  :sku="skuData"
  :goods="goodsInfo"
  :btnExtraText="btnExtraText"
  @changeStepper="changeStepper"
  @selectSku="selectSku"
  @close="close"
>
  <template #sku-operate>
    <div class="sku-operate-box">
      <nut-button class="sku-operate-box-dis" type="warning">\u67E5\u770B\u76F8\u4F3C\u5546\u54C1</nut-button>
      <nut-button class="sku-operate-box-dis" type="info">\u5230\u8D27\u901A\u77E5</nut-button>
    </div>
  </template>
</nut-sku>

setup() {
    const notSell = ref(false);
    const data = reactive({
      sku: [
          // \u6570\u636E\u7ED3\u6784\u89C1\u4E0B\u65B9\u6587\u6863
        ],
      goods: {
          // \u6570\u636E\u7ED3\u6784\u89C1\u4E0B\u65B9\u6587\u6863
        }
    });

    const btnExtraText = ref('\u62B1\u6B49\uFF0C\u6B64\u5546\u54C1\u5728\u6240\u9009\u533A\u57DF\u6682\u65E0\u5B58\u8D27');
    // inputNumber \u66F4\u6539
    const changeStepper = (count: number) => {
      console.log('\u8D2D\u4E70\u6570\u91CF', count);
    };

    // \u5207\u6362\u89C4\u683C\u7C7B\u76EE
    const selectSku = (ss: string) => {
      const { sku, skuIndex, parentSku, parentIndex } = ss;
      if (sku.disable) return false;
      data.sku[parentIndex].list.forEach((s) => {
        s.active = s.id == sku.id;
      });
      data.goods = {
        skuId: sku.id,
        price: '4599.00',
        imagePath:
          '//img14.360buyimg.com/n4/jfs/t1/216079/14/3895/201095/618a5c0cEe0b9e2ba/cf5b98fb6128a09e.jpg' 
      };
    };
    // \u5E95\u90E8\u64CD\u4F5C\u6309\u94AE\u89E6\u53D1
    const clickBtnOperate = (op:string)=>{
      console.log('\u70B9\u51FB\u4E86\u64CD\u4F5C\u6309\u94AE',op)
    } 
    return { notSell, changeStepper,selectSku,btnExtraText,...toRefs(data) };
}

.sku-operate-box {
  width: 100%;
  display: flex;
  padding: 8px 10px;
  box-sizing: border-box;

  .sku-operate-box-dis{
    width: 100%;
    flex-shrink: 1;
    &:first-child{
      margin-right: 18px;
    }
  }
}

\u81EA\u5B9A\u4E49\u6B65\u8FDB\u5668

\u53EF\u4EE5\u6309\u7167\u9700\u6C42\u914D\u7F6E\u6570\u5B57\u8F93\u5165\u6846\u7684\u6700\u5927\u503C\u3001\u6700\u5C0F\u503C\u3001\u6587\u6848\u7B49

<nut-sku
  v-model:visible="customStepper"
  :sku="sku"
  :goods="goods"
  :showSaleLimit="true"
  :stepperMax="7"
  :stepperMin="2"
  :stepperExtraText="stepperExtraText"
  @changeStepper="changeStepper"
  @overLimit="overLimit"
  :btnOptions="['buy', 'cart']"
  @selectSku="selectSku"
  @clickBtnOperate="clickBtnOperate"
  @close="close"
></nut-sku>

setup() {
    const customStepper = ref(false);
    const data = reactive({
      sku: [
          // \u6570\u636E\u7ED3\u6784\u89C1\u4E0B\u65B9\u6587\u6863
        ],
      goods: {
          // \u6570\u636E\u7ED3\u6784\u89C1\u4E0B\u65B9\u6587\u6863
        }
    });

    const stepperExtraText = () => {
      return \`<div style="width:100%;text-align:right;color:#F00">2 \u4EF6\u8D77\u552E</div>\`
    };
    // inputNumber \u66F4\u6539
    const changeStepper = (count: number) => {
      console.log('\u8D2D\u4E70\u6570\u91CF', count);
    };

    // inputNumber \u6781\u9650\u503C
    const overLimit = (val: any) => {
      if (val.action == 'reduce') {
        Toast.text(\`\u81F3\u5C11\u4E70\${val.value}\u4EF6\u54E6\`);
      } else {
        Toast.text(\`\u6700\u591A\u4E70\${val.value}\u4EF6\u54E6\`);
      }
    };
    // \u5207\u6362\u89C4\u683C\u7C7B\u76EE
    const selectSku = (ss: string) => {
      const { sku, skuIndex, parentSku, parentIndex } = ss;
      if (sku.disable) return false;
      data.sku[parentIndex].list.forEach((s) => {
        s.active = s.id == sku.id;
      });
      data.goods = {
        skuId: sku.id,
        price: '4599.00',
        imagePath:
          '//img14.360buyimg.com/n4/jfs/t1/215845/12/3788/221990/618a5c4dEc71cb4c7/7bd6eb8d17830991.jpg' 
      };
    };
    // \u5E95\u90E8\u64CD\u4F5C\u6309\u94AE\u89E6\u53D1
    const clickBtnOperate = (op:string)=>{
      console.log('\u70B9\u51FB\u4E86\u64CD\u4F5C\u6309\u94AE',op)
    } 
    return { overLimit, changeStepper,selectSku, clickBtnOperate,stepperExtraText,...toRefs(data) };
}

\u81EA\u5B9A\u4E49\u63D2\u69FD

Sku \u7EC4\u4EF6\u9ED8\u8BA4\u5212\u5206\u4E3A\u82E5\u5E72\u533A\u57DF\uFF0C\u8FD9\u4E9B\u533A\u57DF\u90FD\u5B9A\u4E49\u6210\u4E86\u63D2\u69FD\uFF0C\u53EF\u4EE5\u6309\u7167\u9700\u6C42\u8FDB\u884C\u66FF\u6362\u3002

<nut-sku
    v-model:visible="customBySlot"
    :sku="sku"
    :goods="goods"
    :btnOptions="['buy', 'cart']"
    @selectSku="selectSku"
    @clickBtnOperate="clickBtnOperate"
    @close="close()"
>
    <!-- \u5546\u54C1\u5C55\u793A\u533A\uFF0C\u4EF7\u683C\u533A\u57DF -->
    <template #sku-header-price>
        <div>
            <nut-price :price="goodsInfo.price" :needSymbol="true" :thousands="false"> </nut-price>
            <span class="tag"></span>
        </div>
    </template> 
    <!-- \u5546\u54C1\u5C55\u793A\u533A\uFF0C\u7F16\u53F7\u533A\u57DF -->
    <template #sku-header-extra>
        <span class="nut-sku-header-right-extra">\u91CD\u91CF\uFF1A0.1kg  \u7F16\u53F7\uFF1A{{skuId}}  </span>
    </template> 
    <!-- sku \u5C55\u793A\u533A\u4E0A\u65B9\u4E0E\u5546\u54C1\u4FE1\u606F\u5C55\u793A\u533A\u4E0B\u65B9\u533A\u57DF\uFF0C\u65E0\u9ED8\u8BA4\u5C55\u793A\u5185\u5BB9 -->
    <template #sku-select-top>
        <div class="address">
            <nut-cell style="box-shadow:none;padding:13px 0" title="\u9001\u81F3" :desc="addressDesc" @click="showAddressPopup=true"></nut-cell>
        </div>
    </template>
    <!-- \u5E95\u90E8\u6309\u94AE\u64CD\u4F5C\u533A -->
    <template #sku-operate>
        <div class="sku-operate-box">
        <nut-button class="sku-operate-item" shape="square" type="warning">\u52A0\u5165\u8D2D\u7269\u8F66</nut-button>
        <nut-button class="sku-operate-item" shape="square" type="primary">\u7ACB\u5373\u8D2D\u4E70</nut-button>
        </div>
    </template>
</nut-sku>

<nut-address
  v-model:visible="showAddressPopup"
  type="exist"
  :exist-address="existAddress"
  @close="close"
  :is-show-custom-address="false"
  @selected="selectedAddress"
  exist-address-title="\u914D\u9001\u81F3"
></nut-address>

setup() {
    const customBySlot = ref(false);
    const showAddressPopup = ref(false);
    const data = reactive({
      sku: [
          // \u6570\u636E\u7ED3\u6784\u89C1\u4E0B\u65B9\u6587\u6863
        ],
      goods: {
          // \u6570\u636E\u7ED3\u6784\u89C1\u4E0B\u65B9\u6587\u6863
        }
    });
    const addressDesc = ref('(\u914D\u9001\u5730\u4F1A\u5F71\u54CD\u5E93\u5B58\uFF0C\u8BF7\u5148\u786E\u8BA4)');
    const existAddress = ref([
      {
        id: 1,
        addressDetail: 'th ',
        cityName: '\u77F3\u666F\u5C71\u533A',
        countyName: '\u57CE\u533A',
        provinceName: '\u5317\u4EAC',
        selectedAddress: true,
        townName: ''
      },
      {
        id: 2,
        addressDetail: '12 ',
        cityName: '\u7535\u996D\u9505',
        countyName: '\u6276\u7EE5\u53BF',
        provinceName: '\u5317\u4EAC',
        selectedAddress: false,
        townName: ''
      },
      {
        id: 3,
        addressDetail: '\u53D1\u5927\u6C34\u6BD4 ',
        cityName: '\u653E\u5230',
        countyName: '\u5E7F\u5B81\u8857\u9053',
        provinceName: '\u9493\u9C7C\u5C9B\u5168\u533A',
        selectedAddress: false,
        townName: ''
      },
      {
        id: 4,
        addressDetail: '\u8FD8\u662F\u60F3\u5427\u767E\u5EA6\u5427 ',
        cityName: '\u7814\u53D1',
        countyName: '\u516B\u91CC\u5E84\u8857\u9053',
        provinceName: '\u5317\u4EAC',
        selectedAddress: false,
        townName: ''
      }
    ]);

    // \u5207\u6362\u89C4\u683C\u7C7B\u76EE
    const selectSku = (ss: string) => {
      const { sku, skuIndex, parentSku, parentIndex } = ss;
      if (sku.disable) return false;
      data.sku[parentIndex].list.forEach((s) => {
        s.active = s.id == sku.id;
      });
      data.goods = {
        skuId: sku.id,
        price: '6002.10',
        imagePath:
          '//img14.360buyimg.com/n4/jfs/t1/215845/12/3788/221990/618a5c4dEc71cb4c7/7bd6eb8d17830991.jpg' 
      };
    };
    const selectedAddress = (prevExistAdd: any, nowExistAdd: any) => {
      const { provinceName, countyName, cityName } = nowExistAdd;
      addressDesc.value = \`\${provinceName}\${countyName}\${cityName}\`;
    };
    // \u5E95\u90E8\u64CD\u4F5C\u6309\u94AE\u89E6\u53D1
    const clickBtnOperate = (op:string)=>{
      console.log('\u70B9\u51FB\u4E86\u64CD\u4F5C\u6309\u94AE',op)
    } 
    return { customBySlot, selectSku, clickBtnOperate,existAddress,addressDesc,selectedAddress,...toRefs(data) };
}

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
v-model:visible\u662F\u5426\u663E\u793A\u5546\u54C1\u89C4\u683C\u5F39\u6846booleanfalse
sku\u5546\u54C1 sku \u6570\u636EArray[]
goods\u5546\u54C1\u4FE1\u606FObject-
stepper-max\u8BBE\u7F6E inputNumber \u6700\u5927\u503C[String, Number]99999
stepper-min\u8BBE\u7F6E inputNumber \u6700\u5C0F\u503C[String, Number]1
btn-options\u5E95\u90E8\u6309\u94AE\u8BBE\u7F6E\u3002[\u2018confirm\u2019,\u2018buy\u2019,\u2018cart\u2019 ] \u5206\u522B\u5BF9\u5E94\u786E\u5B9A\u3001\u7ACB\u5373\u8D2D\u4E70\u3001\u52A0\u5165\u8D2D\u7269\u8F66Array[\u2018confirm\u2019]
btn-extra-text\u6309\u94AE\u4E0A\u90E8\u6DFB\u52A0\u6587\u6848\uFF0C\u9ED8\u8BA4\u4E3A\u7A7A\uFF0C\u6709\u503C\u65F6\u663E\u793AString-
stepper-title\u6570\u91CF\u9009\u62E9\u7EC4\u4EF6\u5DE6\u4FA7\u6587\u6848String\u2018\u8D2D\u4E70\u6570\u91CF\u2019
stepper-extra-textinputNumber \u4E0E\u6807\u9898\u4E4B\u95F4\u7684\u6587\u6848[Function, false]false
buy-text\u7ACB\u5373\u8D2D\u4E70\u6309\u94AE\u6587\u6848String\u7ACB\u5373\u8D2D\u4E70
add-cart-text\u52A0\u5165\u8D2D\u7269\u8F66\u6309\u94AE\u6587\u6848String\u52A0\u5165\u8D2D\u7269\u8F66
confirm-text\u786E\u5B9A\u6309\u94AE\u6587\u6848String\u786E\u5B9A

Events

\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
select-sku\u5207\u6362\u89C4\u683C\u7C7B\u76EE\u65F6\u89E6\u53D1{sku,skuIndex,parentSku,parentIndex}
addinputNumber \u70B9\u51FB\u589E\u52A0\u6309\u94AE\u65F6\u89E6\u53D1value
reduceinputNumber \u70B9\u51FB\u51CF\u5C11\u6309\u94AE\u65F6\u89E6\u53D1value
overLimitinputNumber \u70B9\u51FB\u4E0D\u53EF\u7528\u7684\u6309\u94AE\u65F6\u89E6\u53D1value
change-stepper\u8D2D\u4E70\u53D8\u5316\u65F6\u89E6\u53D1value
click-btn-operate\u70B9\u51FB\u5E95\u90E8\u6309\u94AE\u65F6\u89E6\u53D1{type:\u2018confirm\u2019,value:\u2018inputNumber value\u2019}
click-close-icon\u70B9\u51FB\u5DE6\u4E0A\u89D2\u5173\u95ED icon \u65F6\u89E6\u53D1-
click-overlay\u70B9\u51FB\u906E\u7F69\u65F6\u89E6\u53D1-
close\u5173\u95ED\u5F39\u5C42\u65F6\u89E6\u53D1-

Slots

Sku \u7EC4\u4EF6\u9ED8\u8BA4\u5212\u5206\u4E3A\u82E5\u5E72\u533A\u57DF\uFF0C\u8FD9\u4E9B\u533A\u57DF\u90FD\u5B9A\u4E49\u6210\u4E86\u63D2\u69FD\uFF0C\u53EF\u4EE5\u6309\u7167\u9700\u6C42\u8FDB\u884C\u66FF\u6362\u3002

\u4E8B\u4EF6\u540D\u8BF4\u660E
sku-header\u5546\u54C1\u4FE1\u606F\u5C55\u793A\u533A\uFF0C\u5305\u542B\u5546\u54C1\u56FE\u7247\u3001\u4EF7\u683C\u3001\u7F16\u53F7
sku-header-price\u5546\u54C1\u4FE1\u606F\u5C55\u793A\u533A\uFF0C\u4EF7\u683C\u533A\u57DF\u5C55\u793A
sku-header-extra\u5546\u54C1\u4FE1\u606F\u5C55\u793A\u533A\uFF0C\u7F16\u53F7\u533A\u57DF\u5C55\u793A
sku-select-topsku \u5C55\u793A\u533A\u4E0A\u65B9\u4E0E\u5546\u54C1\u4FE1\u606F\u5C55\u793A\u533A\u4E0B\u65B9\u533A\u57DF\uFF0C\u65E0\u9ED8\u8BA4\u5C55\u793A\u5185\u5BB9
sku-selectsku \u5C55\u793A\u533A
sku-stepper\u6570\u91CF\u9009\u62E9\u533A
sku-stepper-bottom\u6570\u91CF\u9009\u62E9\u533A\u4E0B\u65B9\u533A\u57DF
sku-operate\u5E95\u90E8\u6309\u94AE\u64CD\u4F5C\u533A\u57DF

goods \u5BF9\u8C61\u7ED3\u6784

goods:{
    skuId:'', // \u5546\u54C1\u4FE1\u606F\u5C55\u793A\u533A\uFF0C\u5546\u54C1\u7F16\u53F7
    price: "0", // \u5546\u54C1\u4FE1\u606F\u5C55\u793A\u533A\uFF0C\u5546\u54C1\u4EF7\u683C
    imagePath: "", // \u5546\u54C1\u4FE1\u606F\u5C55\u793A\u533A\uFF0C\u5546\u54C1\u56FE
}

sku \u6570\u7EC4\u7ED3\u6784

sku \u6570\u7EC4\u4E2D\uFF0C\u6BCF\u4E00\u4E2A\u6570\u7EC4\u7D22\u5F15\u4EE3\u8868\u4E00\u4E2A\u89C4\u683C\u7C7B\u76EE\u3002\u5176\u4E2D\uFF0Clist \u4EE3\u8868\u8BE5\u89C4\u683C\u7C7B\u76EE\u4E0B\u7684\u7C7B\u76EE\u503C\u3002\u6BCF\u4E2A\u7C7B\u76EE\u503C\u5BF9\u8C61\u5305\u62EC\uFF1Aname\u3001id\u3001active(\u662F\u5426\u9009\u4E2D)\u3001disable(\u662F\u5426\u53EF\u9009)

sku : [{
    id: 1,
    name: '\u989C\u8272',
    list: [{
        name: '\u4EAE\u9ED1\u8272',
        id: 100016015112,
        active: true,
        disable: false
      },
      {
        name: '\u91C9\u767D\u8272',
        id: 100016015142,
        active: false,
        disable: false
      },
      {
        name: '\u79D8\u94F6\u8272',
        id: 100016015078,
        active: false,
        disable: false
      },
      {
        name: '\u590F\u65E5\u80E1\u6768',
        id: 100009064831,
        active: false,
        disable: false
      },
      {
        name: '\u79CB\u65E5\u80E1\u6768',
        id: 100009064830,
        active: false,
        disable: false
      }
    ]
  },
  {
    id: 2,
    name: '\u7248\u672C',
    list: [{
        name: '8GB+128GB',
        id: 100016015102,
        active: true,
        disable: false
      },
      {
        name: '8GB+256GB',
        id: 100016015122,
        active: false,
        disable: false
      }
    ]
  },
  {
    id: 3,
    name: '\u7248\u672C',
    list: [{
        name: '4G\uFF08\u6709\u5145\u7248\uFF09',
        id: 100016015103,
        active: true,
        disable: false
      },
      {
        name: '5G\uFF08\u6709\u5145\u7248\uFF09',
        id: 100016015123,
        active: false,
        disable: false
      },
      {
        name: '5G\uFF08\u65E0\u5145\u7248\uFF09',
        id: 100016015104,
        active: true,
        disable: true
      },
      {
        name: '5G\uFF08\u65E0\u5145\uFF09\u8D28\u4FDD\u6362\u65B0\u7248',
        id: 100016015125,
        active: false,
        disable: false
      }
    ]
  }
];
`,34),c=[p],d={setup(e,{expose:s}){return s({frontmatter:{}}),(h,j)=>(n(),a("div",l,c))}};export{d as default};