@dckj-npm/dc-material 0.1.357 → 0.1.359

package/lib/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/lib/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/lib/components/shopping-cart/shopping-cart.js

@@ -0,0 +1,244 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireWildcard(require("react"));
+require("./index.scss");
+var _goodItem = _interopRequireDefault(require("./components/good-item"));
+var _checkbox = _interopRequireDefault(require("../../assets/icon/shop/checkbox.png"));
+var _excluded = ["dataList", "handleOnLoad", "handleOnSubmit", "handleOnDelete", "handleGoodUpdate", "isLogin"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+// 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 = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var _otherProps = otherProps || {};
+  dataList = dataList.map(function (item) {
+    return (0, _extends2["default"])({}, 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 = (0, _react.useState)(false),
+    isEdit = _useState[0],
+    setIsEdit = _useState[1];
+  var _useState2 = (0, _react.useState)(dataList),
+    list = _useState2[0],
+    setList = _useState2[1]; // 假设 dataList 是传入的 props
+  var isBeforeUnmount = (0, _react.useRef)(false);
+  var _useState3 = (0, _react.useState)(false),
+    checked = _useState3[0],
+    setChecked = _useState3[1];
+  var _useState4 = (0, _react.useState)(dataList),
+    items = _useState4[0],
+    setItems = _useState4[1];
+  (0, _react.useEffect)(function () {
+    // 初始化列表，添加 checked 和 isUpdate 属性
+    var initialItems = (list || []).map(function (item) {
+      return (0, _extends2["default"])({}, 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 = (0, _react.useCallback)(function (index, updatedItem) {
+    var newList = [].concat(list);
+    newList[index] = updatedItem;
+    setList(newList);
+  }, [list]);
+
+  // 计算已选商品列表
+  var selectDataList = (0, _react.useCallback)(function () {
+    return items.filter(function (item) {
+      return item.checked;
+    });
+  }, [items]);
+
+  // 计算购物车总数量
+  var localTotal = (0, _react.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 = (0, _react.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 = (0, _react.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 = (0, _react.useCallback)(function (newValue) {
+    setChecked(newValue);
+    var shopList = items.map(function (data) {
+      data.checked = newValue;
+      return data;
+    });
+    setItems(shopList);
+    console.log('切换', items);
+  }, []);
+
+  // 提交
+  var submit = (0, _react.useCallback)(function () {
+    // 实现提交逻辑
+    console.log('提交购物车', selectDataList());
+    if (handleOnSubmit) {
+      handleOnSubmit(selectDataList());
+    }
+  }, []);
+
+  // 删除购物车商品
+  var removeShopCar = (0, _react.useCallback)(function () {
+    // 实现删除逻辑，比如清空列表或调用后端接口
+    console.log('删除购物车商品');
+    if (handleOnDelete) {
+      handleOnDelete(selectDataList());
+    }
+    // setItems([]); // 如果要清空购物车
+  }, []);
+  console.log('dataList', isBeforeUnmount);
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+    className: "shopping-cart"
+  }, _otherProps), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      padding: '12.5px 12.5px 68px 12.5px'
+    }
+  }, items.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "header"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "number"
+  }, "\u6570\u91CF\uFF1A", list.length), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "text",
+    onClick: updateEdit,
+    style: {
+      color: isEdit ? '#EC5C29' : '#333333'
+    }
+  }, isEdit ? '完成' : '管理')), /*#__PURE__*/_react["default"].createElement("div", null, list.map(function (item, index) {
+    return /*#__PURE__*/_react["default"].createElement(_goodItem["default"], {
+      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["default"].createElement("div", {
+    className: "footer",
+    style: {
+      display: items.length > 0 ? 'block' : 'none'
+    }
+  }, !isEdit ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: "box"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "left"
+  }, checked ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: "checkbox-img"
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    className: "checkbox-img",
+    src: _checkbox["default"],
+    onClick: function onClick() {
+      return checkAllChange(false);
+    }
+  })) : /*#__PURE__*/_react["default"].createElement("div", {
+    className: "checkbox2",
+    onClick: function onClick() {
+      return checkAllChange(true);
+    }
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "text"
+  }, "\u5168\u9009")), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "footer-info"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "text"
+  }, "\u5DF2\u9009", localTotal(), "\u4EF6,", /*#__PURE__*/_react["default"].createElement("span", null, "\u5408\u8BA1\uFF1A")), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "price"
+  }, "\xA5", localTotalPrice().toFixed(2)), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "btn",
+    onClick: submit
+  }, "\u7ED3\u7B97"))) : /*#__PURE__*/_react["default"].createElement("div", {
+    className: "box box2"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "left"
+  }, checked ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: "checkbox-img"
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    className: "checkbox-img",
+    src: _checkbox["default"],
+    onClick: function onClick() {
+      return checkAllChange(false);
+    }
+  })) : /*#__PURE__*/_react["default"].createElement("div", {
+    className: "checkbox2",
+    onClick: function onClick() {
+      return checkAllChange(true);
+    }
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "text"
+  }, "\u5168\u9009")), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "footer-info"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "btn",
+    onClick: removeShopCar
+  }, "\u5220\u9664")))));
+};
+ShoppingCart.displayName = 'ShoppingCart';
+var _default = exports["default"] = ShoppingCart;

package/lib/components/shopping-cart/type.d.ts

@@ -0,0 +1,51 @@
+export interface ShopCartModel {
+    /**
+     * 加载数据
+     */
+    handleOnLoad: (query: {
+        pageNum: number;
+        pageSize: number;
+    }) => Promise<unknown>;
+    /**
+     * 结算事件
+     * */
+    handleOnSubmit?: (list: ShopCarModel[]) => void;
+    /**
+     * 购物车删除事件
+     * */
+    handleOnDelete?: (list: ShopCarModel[]) => Promise<unknown>;
+    /**
+     * 商品修改事件
+     * */
+    handleGoodUpdate?: (type: 'add' | 'subtract', item: ShopCarModel) => Promise<unknown>;
+    /**
+     * 组件卸载前事件
+     * */
+    handleBeforeUnmount?: (list: ShopCarModel[]) => Promise<unknown>;
+    /**
+     * 是否登录
+     * */
+    isLogin?: boolean;
+    dataList?: ShopCarModel[];
+}
+export interface ShopCarModel {
+    amount: number;
+    fkProductId: string;
+    id: string;
+    imgUrl: string;
+    memo: string;
+    phone: string;
+    price: number;
+    productPrice?: number;
+    productPromotionPrice?: number;
+    productNum?: number;
+    productName: string;
+    productNameLabel: string;
+    userName: string;
+    userNameLabel: string;
+    version: number;
+    checked: boolean;
+    grounding: string;
+    productGrounding: string;
+    isUpdate: boolean;
+}

package/lib/components/shopping-cart/type.js

@@ -0,0 +1,3 @@
+"use strict";
+
+exports.__esModule = true;

package/lib/components/stream-list/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 菜单列表
+ */
+import StreamList from './stream-list';
+export type { StreamListProps } from './stream-list';
+export { StreamList };

package/lib/components/stream-list/index.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+var _streamList = _interopRequireDefault(require("./stream-list"));
+exports.StreamList = _streamList["default"];

package/lib/components/stream-list/index.scss

@@ -0,0 +1,26 @@
+@import '../../variables.scss';
+
+.stream-list-container {
+
+  .refresh-indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 40px;
+    font-size: 14px;
+    color: #333;
+    pointer-events: none;
+  }
+
+  // 加载更多提示的样式
+  .spin, .loading-text {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 40px; // 提示高度
+    font-size: 14px;
+    color: #666;
+  }
+
+}
+

package/lib/components/stream-list/stream-list.d.ts

@@ -0,0 +1,54 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import './index.scss';
+export interface PageHelperType<T = any> {
+    page: number;
+    rows: number;
+    isLastPage: boolean;
+    total: number;
+    list: T[];
+}
+export interface StreamListProps {
+    /**
+     * 子组件内容
+     */
+    children: ReactNode;
+    /**
+     * 请求下一页数据的函数
+     * @param page
+     * @param rows
+     */
+    onNextPage?: (options: {
+        page: number;
+        rows?: number;
+    }) => Promise<PageHelperType>;
+    /**
+     * 请求刷新数据的函数
+     */
+    onRefreshPage?: () => Promise<PageHelperType>;
+    /**
+     * 是否是最后一页
+     */
+    isLastPage?: boolean;
+    /**
+     * 当前页
+     */
+    nowPage?: number;
+    /**
+     * 刷新中的文字提示
+     */
+    refreshingText?: string;
+    /**
+     * 加载中的文字提示
+     */
+    loadingText?: string;
+    /**
+     * 加载更多的文字提示
+     */
+    loadMoreText?: string;
+}
+/**
+ * StreamList 组件
+ */
+declare const StreamList: React.FC<StreamListProps>;
+export default StreamList;