@antmjs/vantui/es/sku/demo/demo1.js

一套适用于Taro3及React的vantui组件库

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
/* eslint-disable */
import react from 'react';
import { View } from '@tarojs/components';
import { Toast, Sku } from '@antmjs/vantui';
import * as COMMON from './common';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
export default function Demo() {
  var sku = COMMON.sku,
    goodsList = COMMON.goodsList;
  // 选中的商品，可以获取自定义属性如：商品图片、价格、数量
  var _react$useState = react.useState({}),
    _react$useState2 = _slicedToArray(_react$useState, 2),
    currentGoods = _react$useState2[0],
    setCurrent = _react$useState2[1];
  var itemDisable = function itemDisable(goodsItem) {
    if (!goodsItem) return true;
    // 商品表可设定count为库存数，或者通过其它条件判断
    if (goodsItem.count === 0) return true;
    return false;
  };
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(Toast, {}), /*#__PURE__*/_jsx(View, {
      children: "\u5F53\u524D\u9009\u62E9\u5546\u54C1\uFF1A"
    }), /*#__PURE__*/_jsxs(View, {
      style: {
        paddingBottom: 10
      },
      children: ["HUAWEI\u624B\u673A\u3010", (currentGoods === null || currentGoods === void 0 ? void 0 : currentGoods.skuName) || '--', "\u3011"]
    }), /*#__PURE__*/_jsx(Sku, {
      autoChoice: true,
      sku: sku,
      goodsList: goodsList,
      onChange: function onChange(e) {
        return setCurrent(e);
      },
      clickAttrDisable: function clickAttrDisable() {
        return Toast.show("\u6682\u65E0\u5E93\u5B58");
      },
      itemDisable: itemDisable,
      itemRender: function itemRender(it) {
        if (it['color']) {
          return /*#__PURE__*/_jsxs(View, {
            className: "sku-color-item",
            children: [/*#__PURE__*/_jsx(View, {
              className: "color-item",
              style: {
                background: it['color']
              }
            }), /*#__PURE__*/_jsx(View, {
              children: it.name
            })]
          });
        }
        return it.name;
      }
    })]
  });
}