@dckj-npm/dc-material 0.1.149 → 0.1.150

package/lib/components/grid-nav/index.d.ts

@@ -1,3 +1,3 @@
-import GridNav from "./grid-nav";
-export type { GridNavProps } from './grid-nav';
-export default GridNav;
+import GridNav from "./grid-nav";
+export type { GridNavProps } from './grid-nav';
+export default GridNav;

package/lib/components/grid-nav/index.scss

@@ -1,50 +1,50 @@
-/* write style here */
-.dc-grid-nav {
-  width: 100%;
-  display: grid;
-  // gap: 14px 38px;
-  margin: 0;
-  grid-row-gap: 14px;
-  &-item {
-    &-title {
-      color: #222222;
-    }
-    &-right {
-      position: absolute;
-      top: -10px;
-      right: 2px;
-      z-index: 9;
-      &-title {
-        font-size: 8px;
-        color: #fff;
-        position: absolute;
-        left: 8px;
-        top: 2px;
-        z-index: 10;
-      }
-      &-img {
-        width: 32px;
-        height: 19.5px;
-      }
-    }
-  }
-}
-
-.grid-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  text-decoration: none;
-  color: #333;
-  position: relative;
-
-  img {
-    object-fit: cover;
-    margin-bottom: 3px;
-  }
-
-  &:hover {
-    color: #007bff;
-  }
-}
+/* write style here */
+.dc-grid-nav {
+  width: 100%;
+  display: grid;
+  // gap: 14px 38px;
+  margin: 0;
+  grid-row-gap: 14px;
+  &-item {
+    &-title {
+      color: #222222;
+    }
+    &-right {
+      position: absolute;
+      top: -10px;
+      right: 2px;
+      z-index: 9;
+      &-title {
+        font-size: 8px;
+        color: #fff;
+        position: absolute;
+        left: 8px;
+        top: 2px;
+        z-index: 10;
+      }
+      &-img {
+        width: 32px;
+        height: 19.5px;
+      }
+    }
+  }
+}
+
+.grid-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  text-decoration: none;
+  color: #333;
+  position: relative;
+
+  img {
+    object-fit: cover;
+    margin-bottom: 3px;
+  }
+
+  &:hover {
+    color: #007bff;
+  }
+}

package/lib/components/integral-task/index.d.ts

@@ -1,6 +1,6 @@
-/**
- * 标签tag
- */
-import IntegralTask from './integral-task';
-export type { IntegralTaskProps } from './integral-task';
-export default IntegralTask;
+/**
+ * 标签tag
+ */
+import IntegralTask from './integral-task';
+export type { IntegralTaskProps } from './integral-task';
+export default IntegralTask;

package/lib/components/integral-task/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 var _integralTask = _interopRequireDefault(require("./integral-task"));
-/**
- * 标签tag
+/**
+ * 标签tag
  */
 var _default = exports["default"] = _integralTask["default"];

package/lib/components/integral-task/index.scss

@@ -1,35 +1,35 @@
-.integral-task__container {
-  padding: 0 12px;
-  &__item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    &__left {
-      display: flex;
-      align-items: center;
-      &__img {
-        width: 53px;
-        height: 53px;
-        margin-right: 9px;
-      }
-      &__content {
-        &__title {
-          font-size: 15px;
-          color: #333333;
-        }
-        &__integral {
-          display: flex;
-          align-items: center;
-          &--icon {
-            width: 15px;
-            height: 15px;
-          }
-          &--number {
-            font-size: 12px;
-            color: #EA6A3D;
-          }
-        }
-      }
-    }
-  }
-}
+.integral-task__container {
+  padding: 0 12px;
+  &__item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    &__left {
+      display: flex;
+      align-items: center;
+      &__img {
+        width: 53px;
+        height: 53px;
+        margin-right: 9px;
+      }
+      &__content {
+        &__title {
+          font-size: 15px;
+          color: #333333;
+        }
+        &__integral {
+          display: flex;
+          align-items: center;
+          &--icon {
+            width: 15px;
+            height: 15px;
+          }
+          &--number {
+            font-size: 12px;
+            color: #EA6A3D;
+          }
+        }
+      }
+    }
+  }
+}

package/lib/components/integral-task/integral-task.d.ts

@@ -1,40 +1,40 @@
-import * as React from 'react';
-import './index.scss';
-interface DataProps {
-    /**
-     * 任务名称
-     */
-    name: string;
-    /**
-     * 积分
-     */
-    integral: number;
-    /**
-     * 状态 0 未完成 1 已完成
-     */
-    status: number;
-}
-export interface IntegralTaskProps {
-    /**
-     * 任务名称
-     */
-    list: DataProps[];
-    /**
-     * 图标
-     */
-    icon: string;
-    /**
-     * 图片
-     */
-    images: string[];
-    /**
-     * 完成文案
-     */
-    completeLabel: string;
-    /**
-     * 未完成文案
-     */
-    undoneLabel: string;
-}
-declare const IntegralTask: React.FC<IntegralTaskProps>;
-export default IntegralTask;
+import * as React from 'react';
+import './index.scss';
+interface DataProps {
+    /**
+     * 任务名称
+     */
+    name: string;
+    /**
+     * 积分
+     */
+    integral: number;
+    /**
+     * 状态 0 未完成 1 已完成
+     */
+    status: number;
+}
+export interface IntegralTaskProps {
+    /**
+     * 任务名称
+     */
+    list: DataProps[];
+    /**
+     * 图标
+     */
+    icon: string;
+    /**
+     * 图片
+     */
+    images: string[];
+    /**
+     * 完成文案
+     */
+    completeLabel: string;
+    /**
+     * 未完成文案
+     */
+    undoneLabel: string;
+}
+declare const IntegralTask: React.FC<IntegralTaskProps>;
+export default IntegralTask;

package/lib/components/member-card/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 菜单列表
+ */
+import MemberCard from './member-card';
+export type { MemberInfoModel } from './type';
+export { MemberCard };

package/lib/components/member-card/index.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+var _memberCard = _interopRequireDefault(require("./member-card"));
+exports.MemberCard = _memberCard["default"];

package/lib/components/member-card/index.scss

@@ -0,0 +1,86 @@
+.member-card {
+  width: 100%;
+  //height: 60px;
+  border-radius: 15px;
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  flex-direction: column;
+  background: white;
+  padding: 13px 20px;
+
+  .header {
+    width: 100%;
+    padding-bottom: 2px;
+    display: flex;
+    justify-content: space-between;
+
+    .left {
+      font-weight: bold;
+      font-size: 15px;
+      color: #333333;
+      display: flex;
+      align-items: center;
+
+      .grade {
+        width: 53px;
+        height: 13px;
+        margin-left: 5px;
+      }
+    }
+
+    .btn-tag {
+      //width: 74px;
+      height: 30px;
+      border-radius: 15px;
+      font-size: 12px;
+      font-weight: bold;
+      color: #63421a;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  .footer {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .progress-bar-container {
+      width: 100%;
+      margin: 2px 0;
+
+      .progress-bar-background {
+        width: 100%;
+        height: 15px;
+        background-color: #FEF1E6;
+        border-radius: 10px;
+        overflow: hidden;
+      }
+
+      .progress-bar-foreground {
+        height: 100%;
+        background-color: #FF5E27;
+        border-radius: 10px;
+        transition: width 0.3s ease-in-out;
+      }
+    }
+
+    .right {
+      font-weight: 500;
+      font-size: 12px;
+      color: #999999;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .img {
+        width: 6px;
+        height: 7px;
+        margin-left: 5px;
+      }
+    }
+  }
+}

package/lib/components/member-card/member-card.d.ts

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

package/lib/components/member-card/member-card.js

@@ -0,0 +1,75 @@
+"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 _right = _interopRequireDefault(require("../../assets/icon/mine/right.png"));
+var _excluded = ["userName", "gradeImg", "isMaxLevel", "maxTotal", "currentNum", "isFastExpireCoupon", "discount", "handleClick", "handleCouponClick"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var MemberCard = function MemberCard(_ref) {
+  var userName = _ref.userName,
+    gradeImg = _ref.gradeImg,
+    isMaxLevel = _ref.isMaxLevel,
+    maxTotal = _ref.maxTotal,
+    currentNum = _ref.currentNum,
+    isFastExpireCoupon = _ref.isFastExpireCoupon,
+    discount = _ref.discount,
+    _ref$handleClick = _ref.handleClick,
+    handleClick = _ref$handleClick === void 0 ? function () {} : _ref$handleClick,
+    _ref$handleCouponClic = _ref.handleCouponClick,
+    handleCouponClick = _ref$handleCouponClic === void 0 ? function () {} : _ref$handleCouponClic,
+    otherProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var _otherProps = otherProps || {};
+
+  // 计算进度百分比 使用 useMemo 来模拟计算属性
+  var progressPercentage = (0, _react.useMemo)(function () {
+    if (isMaxLevel) return 100;
+    if (maxTotal === 0) return 0; // 防止除以零错误
+    if (!maxTotal || !currentNum) return 0;
+    return (currentNum / maxTotal * 100).toFixed(2); // 保留两位小数
+  }, [isMaxLevel, maxTotal, currentNum]);
+
+  // 外层容器的宽度
+  var containerWidth = isFastExpireCoupon ? '60%' : '100%';
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+    className: "member-card"
+  }, _otherProps, {
+    onClick: handleClick
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "header"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "left"
+  }, /*#__PURE__*/_react["default"].createElement("span", null, userName), gradeImg && /*#__PURE__*/_react["default"].createElement("img", {
+    className: "grade",
+    src: gradeImg
+  })), discount && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "btn-tag"
+  }, "\u5C0A\u4EAB", discount !== null && discount !== void 0 ? discount : 0, "\u6298")), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "footer"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "progress-bar-container",
+    style: {
+      width: containerWidth
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "progress-bar-background"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "progress-bar-foreground",
+    style: {
+      width: progressPercentage + "%"
+    }
+  }))), isFastExpireCoupon && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "right",
+    onClick: handleCouponClick
+  }, "\u60A8\u6709\u4F18\u60E0\u5238\u5373\u5C06\u5230\u671F", /*#__PURE__*/_react["default"].createElement("img", {
+    className: "img",
+    src: _right["default"]
+  }))));
+};
+MemberCard.displayName = 'MemberCard';
+var _default = exports["default"] = MemberCard;

package/lib/components/member-card/type.d.ts

@@ -0,0 +1,11 @@
+export interface MemberInfoModel {
+    userName: string;
+    discount: string | number;
+    maxTotal: number;
+    currentNum: number;
+    isMaxLevel: boolean;
+    gradeImg: string;
+    isFastExpireCoupon: boolean;
+    handleClick?: () => void;
+    handleCouponClick?: () => void;
+}

package/lib/components/member-card/type.js

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

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

@@ -1,6 +1,6 @@
-/**
- * 菜单列表
- */
-import MenuList from './menu-list';
-export type { MenuListDataProps, MenuListProps } from './types';
-export default MenuList;
+/**
+ * 菜单列表
+ */
+import MenuList from './menu-list';
+export type { MenuListDataProps, MenuListProps } from './types';
+export default MenuList;

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 var _menuList = _interopRequireDefault(require("./menu-list"));
-/**
- * 菜单列表
+/**
+ * 菜单列表
  */
 var _default = exports["default"] = _menuList["default"];

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

@@ -1,16 +1,16 @@
-@import '../../variables.scss';
-
-.menu-list__panel {
-  border-radius: 10px;
-  background-color: white;
-
-  .menu-list__panel__item-list {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    padding: 1px 22px;
-  }
-
-}
-
-
+@import '../../variables.scss';
+
+.menu-list__panel {
+  border-radius: 10px;
+  background-color: white;
+
+  .menu-list__panel__item-list {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: 1px 22px;
+  }
+
+}
+
+

package/lib/components/menu-list/menu-list-item.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { MenuListDataProps } from "./types";
-import "./menu-list-item.scss";
-declare const MenuListItem: React.FC<MenuListDataProps>;
-export default MenuListItem;
+import React from 'react';
+import { MenuListDataProps } from "./types";
+import "./menu-list-item.scss";
+declare const MenuListItem: React.FC<MenuListDataProps>;
+export default MenuListItem;

package/lib/components/menu-list/menu-list-item.scss

@@ -1,49 +1,49 @@
-@import '../../variables.scss';
-
-.menu-list__panel__item {
-  display: flex;
-  gap: 7px;
-  justify-content: space-between;
-  align-items: center;
-  height: 45px;
-
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-
-  &:last-child {
-    border-bottom: none;
-  }
-
-  .menu-list__panel__item_icon {
-    height: 100%;
-    display: flex;
-    align-items: center;
-
-    & > img {
-      height: 15px;
-    }
-  }
-
-  .menu-list__panel__item_title {
-    font-size: 15px;
-    color: #666666;
-    font-weight: 500;
-    margin-right: auto;
-  }
-
-  .menu-list__panel__item_right {
-    height: 100%;
-    display: flex;
-    align-items: center;
-
-    & > svg {
-      height: 16px;
-      font-size: 12px;
-      color: #666666;
-      font-weight: 500;
-    }
-
-
-  }
-
-
-}
+@import '../../variables.scss';
+
+.menu-list__panel__item {
+  display: flex;
+  gap: 7px;
+  justify-content: space-between;
+  align-items: center;
+  height: 45px;
+
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  .menu-list__panel__item_icon {
+    height: 100%;
+    display: flex;
+    align-items: center;
+
+    & > img {
+      height: 15px;
+    }
+  }
+
+  .menu-list__panel__item_title {
+    font-size: 15px;
+    color: #666666;
+    font-weight: 500;
+    margin-right: auto;
+  }
+
+  .menu-list__panel__item_right {
+    height: 100%;
+    display: flex;
+    align-items: center;
+
+    & > svg {
+      height: 16px;
+      font-size: 12px;
+      color: #666666;
+      font-weight: 500;
+    }
+
+
+  }
+
+
+}

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import './index.scss';
-import { MenuListProps } from "./types";
-declare const MenuList: React.FC<MenuListProps>;
-export default MenuList;
+import React from 'react';
+import './index.scss';
+import { MenuListProps } from "./types";
+declare const MenuList: React.FC<MenuListProps>;
+export default MenuList;