@dckj-npm/dc-material 0.1.357 → 0.1.359

package/es/components/shopping-cart/components/good-item.js

@@ -0,0 +1,127 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["item", "isEdit", "onUpdateItem", "onCheckChange", "onAddOrSubtract"];
+import React, { useCallback, useState, useMemo, useEffect } from 'react';
+import "./good-item.scss";
+import subtractPng from "../../../assets/icon/shop/subtract.png";
+import addPng from "../../../assets/icon/shop/add.png";
+import checkboxPng from "../../../assets/icon/shop/checkbox.png";
+
+/**
+ * 数据
+ */
+
+var GoodItem = function GoodItem(_ref) {
+  var item = _ref.item,
+    isEdit = _ref.isEdit,
+    onUpdateItem = _ref.onUpdateItem,
+    onCheckChange = _ref.onCheckChange,
+    onAddOrSubtract = _ref.onAddOrSubtract,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _otherProps = otherProps || {};
+  var _useState = useState(item),
+    localItem = _useState[0],
+    setLocalItem = _useState[1];
+  useEffect(function () {
+    console.log('修改', localItem.id, localItem.checked);
+  }, [item.checked]);
+  var isUndercarriage = useMemo(function () {
+    return localItem.productGrounding === '已下架' || localItem.productGrounding === '1';
+  }, [localItem]);
+
+  // const localCover = useMemo(() => {
+  //   return localItem.imgUrl || 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg';
+  // }, [localItem]);
+
+  var handleSubtract = useCallback(function () {
+    if (localItem.amount <= 1) return;
+    var prevItem = _extends({}, localItem, {
+      amount: localItem.amount - 1,
+      isUpdate: true
+    });
+    setLocalItem(prevItem);
+    onUpdateItem(_extends({}, localItem, {
+      amount: localItem.amount - 1,
+      isUpdate: true
+    }));
+    onAddOrSubtract('subtract', prevItem);
+  }, [localItem, onUpdateItem]);
+  var handleAdd = useCallback(function () {
+    var prevItem = _extends({}, localItem, {
+      amount: localItem.amount + 1,
+      isUpdate: true
+    });
+    setLocalItem(prevItem);
+    onUpdateItem(prevItem);
+    onAddOrSubtract('add', prevItem);
+  }, [localItem, onUpdateItem]);
+
+  // const handleCheckChange = useCallback((e: CheckboxChangeEvent) => {
+  //   const prevItem = {...localItem, checked: e.target.checked}
+  //   setLocalItem(prevItem)
+  //   onCheckChange(prevItem);
+  // }, [onCheckChange]);
+
+  var handleCheckChange = useCallback(function () {
+    var prevItem = _extends({}, localItem, {
+      checked: !localItem.checked
+    });
+    setLocalItem(prevItem);
+    onCheckChange(prevItem);
+  }, [onCheckChange]);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "view"
+  }, _otherProps), /*#__PURE__*/React.createElement("div", {
+    className: "left"
+  }, item.checked ? /*#__PURE__*/React.createElement("div", {
+    className: "checkbox-img"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "checkbox-img",
+    src: checkboxPng,
+    onClick: handleCheckChange
+  })) : /*#__PURE__*/React.createElement("div", {
+    className: "checkbox2",
+    onClick: handleCheckChange
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "cover-box"
+  }, isUndercarriage && /*#__PURE__*/React.createElement("div", {
+    className: "overlay"
+  }, /*#__PURE__*/React.createElement("span", null, "\u5DF2\u4E0B\u67B6")), /*#__PURE__*/React.createElement("img", {
+    className: "cover",
+    src: localItem.imgUrl,
+    alt: "cover",
+    style: {
+      objectFit: 'cover'
+    }
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "info"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "title"
+  }, localItem.productName), /*#__PURE__*/React.createElement("div", {
+    className: "good-item-footer"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "price"
+  }, "\xA5", /*#__PURE__*/React.createElement("span", null, localItem.productPromotionPrice || localItem.productPrice), localItem.productPromotionPrice && /*#__PURE__*/React.createElement("span", {
+    className: "line-through"
+  }, "\xA5", localItem.productPrice)), !isUndercarriage && /*#__PURE__*/React.createElement("div", {
+    className: "actions"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "subtract",
+    onClick: handleSubtract
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "icon",
+    src: subtractPng,
+    alt: "subtract"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "text"
+  }, localItem.amount), /*#__PURE__*/React.createElement("div", {
+    className: "add",
+    onClick: handleAdd
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "icon",
+    src: addPng,
+    alt: "add"
+  }))))));
+};
+GoodItem.displayName = 'GoodItem';
+export default GoodItem;

package/es/components/shopping-cart/components/good-item.scss

@@ -0,0 +1,161 @@
+@import '../../../assets/scss/mixin.scss';
+
+
+
+.view {
+  width: 100%;
+  margin-top: 15px;
+  background: white;
+  border-radius: 16px;
+  padding: 15px 10px;
+  @include flexMixer(start);
+
+  .checkbox2 {
+    width: 19px;
+    height: 19px;
+    background: #ffffff;
+    border-radius: 50%;
+    border: 1px solid #cbcbcb;
+    margin-right: 10px;
+  }
+
+  .checkbox-img {
+    width: 19px;
+    height: 19px;
+    background: #ffffff;
+    border-radius: 50%;
+    margin-right: 10px;
+  }
+
+  .checkbox {
+    border-radius: 100%;
+
+    .ant-checkbox-inner {
+      border-radius: 100% ;
+    }
+
+    .ant-checkbox-checked:after {
+      border-radius: 100%;
+      border-color: #EC5C29;
+    }
+
+    .ant-checkbox-input:focus+.ant-checkbox-inner, .ant-checkbox-wrapper:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner, .ant-checkbox-checked .ant-checkbox-inner {
+      border-color: #EC5C29;
+    }
+    .ant-checkbox-checked .ant-checkbox-inner  {
+      background: #EC5C29;
+    }
+
+    .ant-checkbox-input:focus + .ant-checkbox-inner, .ant-checkbox-wrapper:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner {
+      border-color: #d9d9d9;
+    }
+  }
+
+
+  .left {
+    margin-right: 11px;
+    @include flexMixer(start);
+
+    .cover-box {
+      width: 75px;
+      height: 75px;
+      min-width: 75px;
+      overflow: hidden;
+      border-radius: 6px;
+      position: relative;
+
+      .overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.34);
+        z-index: 9;
+        font-weight: 500;
+        font-size: 12px;
+        color: #ffffff;
+        @include flexMixer(center, end);
+
+        span {
+          height: 30px;
+          width: 100%;
+          background: rgba(0, 0, 0, 0.73);
+          @include flexMixer();
+        }
+      }
+
+      .cover {
+        width: 75px;
+        height: 75px;
+        overflow: hidden;
+      }
+    }
+  }
+
+  .info {
+    width: 100%;
+
+    .title {
+      font-weight: bold;
+      font-size: 15px;
+      color: #333333;
+      @include pointMixer(2);
+    }
+
+    .good-item-footer {
+      width: 100%;
+      @include flexMixer(space-between);
+      margin-top: 15px;
+
+      .price {
+        font-weight: bold;
+        font-size: 14px;
+        color: #ec5c29;
+
+        span {
+          font-size: 18px;
+        }
+
+        .line-through {
+          text-decoration: line-through;
+          color: #999999;
+          font-size: 13px;
+          margin-left: 5px;
+        }
+      }
+
+      .actions {
+        @include flexMixer(start);
+
+        .subtract,
+        .add {
+          width: 22px;
+          height: 22px;
+          background: #f7f7f7;
+          border-radius: 4px;
+          @include flexMixer();
+
+          .icon {
+            width: 12px;
+            height: 12px;
+          }
+        }
+
+        .subtract {
+          .icon {
+            width: 12px;
+            height: 3px;
+          }
+        }
+
+        .text {
+          font-weight: bold;
+          font-size: 16px;
+          color: #000000;
+          margin: 0 13px;
+        }
+      }
+    }
+  }
+}

package/es/components/shopping-cart/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 菜单列表
+ */
+import ShoppingCart from './shopping-cart';
+export type { ShopCartModel, ShopCarModel } from './type';
+export { ShoppingCart };

package/es/components/shopping-cart/index.js

@@ -0,0 +1,6 @@
+/**
+ * 菜单列表
+ */
+
+import ShoppingCart from "./shopping-cart";
+export { ShoppingCart };

package/es/components/shopping-cart/index.scss

@@ -0,0 +1,140 @@
+@import '../../assets/scss/mixin.scss';
+
+.shopping-cart {
+  width: 100%;
+  background: #fafafa;
+  display: flex;
+  flex-direction: column;
+  height: 100vh; /* 使页面填满整个视口 */
+
+  .checkbox2 {
+    width: 19px;
+    height: 19px;
+    background: #ffffff;
+    border-radius: 50%;
+    border: 1px solid #cbcbcb;
+    margin-right: 10px;
+  }
+
+  .checkbox-img {
+    width: 19px;
+    height: 19px;
+    background: #ffffff;
+    border-radius: 50%;
+    margin-right: 10px;
+  }
+
+  .checkbox {
+    border-radius: 100%;
+
+    .ant-checkbox-inner {
+      border-radius: 100% ;
+    }
+
+    .ant-checkbox-checked:after {
+      border-radius: 100%;
+      border-color: #EC5C29;
+    }
+
+    .ant-checkbox-input:focus+.ant-checkbox-inner, .ant-checkbox-wrapper:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner {
+      border-color: #EC5C29;
+    }
+    .ant-checkbox-checked .ant-checkbox-inner {
+      background: #EC5C29;
+    }
+
+    .ant-checkbox-input:focus + .ant-checkbox-inner, .ant-checkbox-wrapper:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner {
+      border-color: #d9d9d9;
+    }
+  }
+
+  :deep(.ant-checkbox-inner) {
+    border-radius: 100% !important;
+  }
+
+  :deep(.van-badge__wrapper) {
+    background: #ffffff;
+    border-color: #cbcbcb;
+  }
+
+  .header {
+    @include flexMixer(space-between);
+    //padding: 0 12.5px;
+  }
+
+  .footer {
+    background-color: white;
+    text-align: center;
+    padding: 0 12.5px;
+    position: fixed; /* 将footer固定在页面底部 */
+    bottom: 0;
+    height: 48px;
+    width: 100%; /* 使footer宽度占满页面 */
+
+    .box {
+      height: 100%;
+      @include flexMixer(space-between, center);
+
+      .left {
+        height: 100%;
+        @include flexMixer(start);
+
+        .text {
+          font-weight: 500;
+          font-size: 14px;
+          color: #999999;
+          margin-left: 5px;
+        }
+
+        :deep(.van-badge__wrapper) {
+          width: 16px;
+          height: 16px;
+          @include flexMixer();
+          font-size: 12px;
+          margin-right: 6px;
+          //margin-top: 2px;
+        }
+      }
+      .footer-info {
+        @include flexMixer(start);
+
+        .text {
+          font-weight: 500;
+          font-size: 13px;
+          color: #999999;
+
+          span {
+            color: #333333;
+          }
+        }
+
+        .price {
+          font-weight: bold;
+          font-size: 17px;
+          color: #ec5c29;
+          margin-right: 10px;
+        }
+
+        .btn {
+          width: 92px;
+          height: 30px;
+          background: linear-gradient(90deg, #f19035, #ed602b);
+          border-radius: 15px;
+          font-weight: bold;
+          font-size: 16px;
+          color: #ffffff;
+          @include flexMixer();
+        }
+      }
+    }
+
+    .box2 {
+      .footer-info {
+        .btn {
+          background: #f44341;
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+}

package/es/components/shopping-cart/shopping-cart.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './index.scss';
+import { ShopCartModel } from "./type";
+declare const ShoppingCart: React.FC<ShopCartModel>;
+export default ShoppingCart;

package/es/components/shopping-cart/shopping-cart.js

@@ -0,0 +1,239 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["dataList", "handleOnLoad", "handleOnSubmit", "handleOnDelete", "handleGoodUpdate", "isLogin"];
+import React, { useRef, useState, useCallback, useEffect } from 'react';
+import "./index.scss";
+import { default as GoodItem } from "./components/good-item";
+import checkboxPng from "../../assets/icon/shop/checkbox.png";
+
+// import arrowImg from '../../assets/icon/mine/right.png'
+
+var ShoppingCart = function ShoppingCart(_ref) {
+  var dataList = _ref.dataList,
+    handleOnLoad = _ref.handleOnLoad,
+    handleOnSubmit = _ref.handleOnSubmit,
+    handleOnDelete = _ref.handleOnDelete,
+    handleGoodUpdate = _ref.handleGoodUpdate,
+    isLogin = _ref.isLogin,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _otherProps = otherProps || {};
+  dataList = dataList.map(function (item) {
+    return _extends({}, item, {
+      checked: item.checked || false,
+      isUpdate: item.isUpdate || false,
+      price: item.productPromotionPrice || item.productPrice || 0
+    });
+  });
+  // 转换 Vue 的 ref 为 React 的 useState 和 useRef
+  // const isProgrammaticallyChanging = useRef(false);
+  var _useState = useState(false),
+    isEdit = _useState[0],
+    setIsEdit = _useState[1];
+  var _useState2 = useState(dataList),
+    list = _useState2[0],
+    setList = _useState2[1]; // 假设 dataList 是传入的 props
+  var isBeforeUnmount = useRef(false);
+  var _useState3 = useState(false),
+    checked = _useState3[0],
+    setChecked = _useState3[1];
+  var _useState4 = useState(dataList),
+    items = _useState4[0],
+    setItems = _useState4[1];
+  useEffect(function () {
+    // 初始化列表，添加 checked 和 isUpdate 属性
+    var initialItems = (list || []).map(function (item) {
+      return _extends({}, item, {
+        checked: item.checked || false,
+        isUpdate: item.isUpdate || false,
+        price: item.productPromotionPrice || item.productPrice || 0
+      });
+    });
+    setItems(initialItems);
+    console.log('items', items, list);
+  }, [list]);
+
+  // 转换 Vue 的方法到 React 的函数
+  var updateEdit = function updateEdit() {
+    setIsEdit(!isEdit);
+  };
+
+  // 处理 item 更新
+  var handleItemUpdate = useCallback(function (index, updatedItem) {
+    var newList = [].concat(list);
+    newList[index] = updatedItem;
+    setList(newList);
+  }, [list]);
+
+  // 计算已选商品列表
+  var selectDataList = useCallback(function () {
+    return items.filter(function (item) {
+      return item.checked;
+    });
+  }, [items]);
+
+  // 计算购物车总数量
+  var localTotal = useCallback(function () {
+    var num = 0;
+    if (selectDataList().length > 0) {
+      num = selectDataList().reduce(function (sum, item) {
+        return sum + item.amount;
+      }, 0);
+    }
+    console.log('num', num);
+    return num;
+  }, [selectDataList]);
+
+  // 计算总价
+  var localTotalPrice = useCallback(function () {
+    return selectDataList().reduce(function (sum, item) {
+      return sum + item.price * item.amount;
+    }, 0);
+  }, [selectDataList]);
+
+  /**
+   * 商品修改事件
+   * */
+  var onAddOrSubtract = function onAddOrSubtract(type, item) {
+    console.log('type', type);
+    if (handleGoodUpdate) {
+      handleGoodUpdate(type, item);
+    }
+  };
+
+  // 处理 checkChange 事件
+  var checkChange = useCallback(function (item) {
+    // 根据 Vue 代码的上下文，这里可能需要处理一些逻辑
+    // 由于没有提供 checkChange 的具体实现，这里仅作为占位符
+    var shopList = items.map(function (data) {
+      if (data.id == item.id) {
+        data.checked = item.checked;
+      }
+      return data;
+    });
+    setItems(shopList);
+    setChecked(shopList.every(function (oItem) {
+      return oItem.checked === true;
+    }));
+  }, []);
+
+  // 处理全选/取消全选
+  var checkAllChange = useCallback(function (newValue) {
+    setChecked(newValue);
+    var shopList = items.map(function (data) {
+      data.checked = newValue;
+      return data;
+    });
+    setItems(shopList);
+    console.log('切换', items);
+  }, []);
+
+  // 提交
+  var submit = useCallback(function () {
+    // 实现提交逻辑
+    console.log('提交购物车', selectDataList());
+    if (handleOnSubmit) {
+      handleOnSubmit(selectDataList());
+    }
+  }, []);
+
+  // 删除购物车商品
+  var removeShopCar = useCallback(function () {
+    // 实现删除逻辑，比如清空列表或调用后端接口
+    console.log('删除购物车商品');
+    if (handleOnDelete) {
+      handleOnDelete(selectDataList());
+    }
+    // setItems([]); // 如果要清空购物车
+  }, []);
+  console.log('dataList', isBeforeUnmount);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "shopping-cart"
+  }, _otherProps), /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: '12.5px 12.5px 68px 12.5px'
+    }
+  }, items.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "header"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "number"
+  }, "\u6570\u91CF\uFF1A", list.length), /*#__PURE__*/React.createElement("div", {
+    className: "text",
+    onClick: updateEdit,
+    style: {
+      color: isEdit ? '#EC5C29' : '#333333'
+    }
+  }, isEdit ? '完成' : '管理')), /*#__PURE__*/React.createElement("div", null, list.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(GoodItem, {
+      key: index // 在 React 中，列表的每个元素都应该有一个唯一的 key
+      ,
+      item: item // 假设 GoodItem 组件通过 props 接收 item
+      ,
+      isEdit: isEdit,
+      onAddOrSubtract: onAddOrSubtract,
+      onUpdateItem: function onUpdateItem(updatedItem) {
+        return handleItemUpdate(index, updatedItem);
+      } // 自定义事件处理函数，传递给 GoodItem 组件
+      ,
+      onCheckChange: checkChange // 假设 checkChange 是需要传递给 GoodItem 的另一个事件处理函数
+    });
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "footer",
+    style: {
+      display: items.length > 0 ? 'block' : 'none'
+    }
+  }, !isEdit ? /*#__PURE__*/React.createElement("div", {
+    className: "box"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "left"
+  }, checked ? /*#__PURE__*/React.createElement("div", {
+    className: "checkbox-img"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "checkbox-img",
+    src: checkboxPng,
+    onClick: function onClick() {
+      return checkAllChange(false);
+    }
+  })) : /*#__PURE__*/React.createElement("div", {
+    className: "checkbox2",
+    onClick: function onClick() {
+      return checkAllChange(true);
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "text"
+  }, "\u5168\u9009")), /*#__PURE__*/React.createElement("div", {
+    className: "footer-info"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text"
+  }, "\u5DF2\u9009", localTotal(), "\u4EF6,", /*#__PURE__*/React.createElement("span", null, "\u5408\u8BA1\uFF1A")), /*#__PURE__*/React.createElement("div", {
+    className: "price"
+  }, "\xA5", localTotalPrice().toFixed(2)), /*#__PURE__*/React.createElement("div", {
+    className: "btn",
+    onClick: submit
+  }, "\u7ED3\u7B97"))) : /*#__PURE__*/React.createElement("div", {
+    className: "box box2"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "left"
+  }, checked ? /*#__PURE__*/React.createElement("div", {
+    className: "checkbox-img"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "checkbox-img",
+    src: checkboxPng,
+    onClick: function onClick() {
+      return checkAllChange(false);
+    }
+  })) : /*#__PURE__*/React.createElement("div", {
+    className: "checkbox2",
+    onClick: function onClick() {
+      return checkAllChange(true);
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "text"
+  }, "\u5168\u9009")), /*#__PURE__*/React.createElement("div", {
+    className: "footer-info"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "btn",
+    onClick: removeShopCar
+  }, "\u5220\u9664")))));
+};
+ShoppingCart.displayName = 'ShoppingCart';
+export default ShoppingCart;