提交

甲情_甲意/miniprogram/node_modules/antd-mini/less/NoticeBar/index.axml

@@ -0,0 +1,47 @@
+<view
+  a:if="{{show}}"
+  class="ant-notice-bar {{className || ''}} {{type ? 'ant-notice-bar-' + type : ''}}"
+  style="{{style}}"
+>
+  <slot name="icon">
+    <view class="ant-notice-bar-icon">
+      <image-icon
+        a:if="{{icon}}"
+        image="{{icon}}"
+        className="ant-notice-bar-icon-image"
+      ></image-icon>
+      <icon
+        a:elif="{{type === 'error'}}"
+        type="InformationCircleOutline"
+      ></icon>
+      <icon
+        a:else
+        type="SoundOutline"
+      ></icon>
+    </view>
+  </slot>
+  <view class="ant-notice-bar-content ant-notice-bar-content{{$id ? '-' + $id : ''}}">
+    <view
+      class="ant-notice-bar-marquee ant-notice-bar-marquee{{$id ? '-' + $id : ''}}"
+      style="{{marqueeStyle}} display: {{enableMarquee ? 'inline-block' : 'block'}}"
+      onTransitionEnd="onTransitionEnd"
+    >
+      <slot></slot>
+    </view>
+  </view>
+  <view class="ant-notice-bar-operation">
+    <slot name="extra"></slot>
+    <icon
+      a:if="{{mode === 'link'}}"
+      className="ant-notice-bar-operation-icon"
+      type="RightOutline"
+      onTap="onTap"
+    ></icon>
+    <icon
+      a:if="{{mode === 'closeable'}}"
+      className="ant-notice-bar-operation-icon"
+      type="CloseOutline"
+      onTap="onTap"
+    ></icon>
+  </view>
+</view>

甲情_甲意/miniprogram/node_modules/antd-mini/less/NoticeBar/index.d.ts

@@ -0,0 +1 @@
+export {};

甲情_甲意/miniprogram/node_modules/antd-mini/less/NoticeBar/index.js

@@ -0,0 +1,152 @@
+import { __awaiter, __generator } from "tslib";
+import { Component, triggerEventOnly, getValueFromProps, } from '../_util/simply';
+import { getInstanceBoundingClientRect } from '../_util/jsapi/get-instance-bounding-client-rect';
+import { NoticeBarDefaultProps } from './props';
+Component(NoticeBarDefaultProps, {
+    getInstance: function () {
+        if (this.$id) {
+            return my;
+        }
+        return this;
+    },
+    getBoundingClientRectWithId: function (prefix) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, getInstanceBoundingClientRect(this.getInstance(), "".concat(prefix).concat(this.$id ? "-".concat(this.$id) : ''))];
+                    case 1: return [2 /*return*/, _a.sent()];
+                }
+            });
+        });
+    },
+    onTap: function () {
+        var mode = getValueFromProps(this, 'mode');
+        if (mode === 'link') {
+            triggerEventOnly(this, 'tap');
+        }
+        if (mode === 'closeable') {
+            if (typeof this.props.onTap !== 'function') {
+                return;
+            }
+            this.setData({
+                show: false,
+            });
+            triggerEventOnly(this, 'tap');
+        }
+    },
+    startMarquee: function (state) {
+        var loop = getValueFromProps(this, 'loop');
+        var leading = 500;
+        var duration = state.duration, overflowWidth = state.overflowWidth, viewWidth = state.viewWidth;
+        var marqueeScrollWidth = overflowWidth;
+        if (loop) {
+            marqueeScrollWidth = overflowWidth + viewWidth;
+        }
+        var newMarqueeStyle = "transform: translate3d(".concat(-marqueeScrollWidth, "px, 0, 0); transition: ").concat(duration, "s all linear ").concat(typeof leading === 'number' ? "".concat(leading / 1000, "s") : '0s', ";");
+        this.setData({
+            marqueeStyle: newMarqueeStyle,
+        });
+        return newMarqueeStyle;
+    },
+    measureText: function (callback) {
+        var _this = this;
+        var fps = 40;
+        var loop = getValueFromProps(this, 'loop');
+        // 计算文本所占据的宽度，计算需要滚动的宽度
+        setTimeout(function () { return __awaiter(_this, void 0, void 0, function () {
+            var marqueeSize, contentSize, overflowWidth, viewWidth, marqueeScrollWidth;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, this.getBoundingClientRectWithId('.ant-notice-bar-marquee')];
+                    case 1:
+                        marqueeSize = _a.sent();
+                        return [4 /*yield*/, this.getBoundingClientRectWithId('.ant-notice-bar-content')];
+                    case 2:
+                        contentSize = _a.sent();
+                        overflowWidth = (marqueeSize &&
+                            contentSize &&
+                            marqueeSize.width - contentSize.width) ||
+                            0;
+                        viewWidth = (contentSize === null || contentSize === void 0 ? void 0 : contentSize.width) || 0;
+                        marqueeScrollWidth = overflowWidth;
+                        if (loop) {
+                            marqueeScrollWidth = overflowWidth + viewWidth;
+                        }
+                        if (overflowWidth > 0) {
+                            callback({
+                                overflowWidth: overflowWidth,
+                                viewWidth: viewWidth,
+                                duration: marqueeScrollWidth / fps,
+                            });
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        }); }, 0);
+    },
+    // 文本滚动的计算
+    resetMarquee: function (state) {
+        var loop = getValueFromProps(this, 'loop');
+        var viewWidth = state.viewWidth;
+        var showMarqueeWidth = '0px';
+        if (loop) {
+            showMarqueeWidth = "".concat(viewWidth, "px");
+        }
+        var marqueeStyle = "transform: translate3d(".concat(showMarqueeWidth, ", 0, 0); transition: 0s all linear;");
+        this.setData({
+            marqueeStyle: marqueeStyle,
+        });
+    },
+    onTransitionEnd: function () {
+        var _this = this;
+        var loop = getValueFromProps(this, 'loop');
+        var trailing = 200;
+        if (loop) {
+            var timer_1 = setTimeout(function () {
+                _this.measureText(function (state) {
+                    _this.resetMarquee.call(_this, state);
+                });
+                clearTimeout(timer_1);
+            }, trailing);
+        }
+    },
+}, {
+    show: true,
+    marqueeStyle: '',
+}, undefined, {
+    didMount: function () {
+        var _this = this;
+        var enableMarquee = this.props.enableMarquee;
+        if (enableMarquee) {
+            this.measureText(function (state) {
+                _this.startMarquee.call(_this, state);
+            });
+        }
+    },
+    didUpdate: function () {
+        var _this = this;
+        var enableMarquee = this.props.enableMarquee;
+        // 这里更新处理的原因是防止notice内容在动画过程中发生改变。
+        if (enableMarquee) {
+            this.measureText(function (state) {
+                _this.startMarquee.call(_this, state);
+            });
+        }
+    },
+    pageEvents: {
+        onShow: function () {
+            var _this = this;
+            if (this.props.enableMarquee) {
+                this.setData({ marqueeStyle: '' });
+                this.resetMarquee({
+                    overflowWidth: 0,
+                    duration: 0,
+                    viewWidth: 0,
+                });
+                this.measureText(function (state) {
+                    _this.startMarquee.call(_this, state);
+                });
+            }
+        },
+    },
+});

甲情_甲意/miniprogram/node_modules/antd-mini/less/NoticeBar/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "icon": "../Icon/index",
+    "image-icon": "../ImageIcon/index"
+  }
+}

甲情_甲意/miniprogram/node_modules/antd-mini/less/NoticeBar/index.less

@@ -0,0 +1,83 @@
+@import (reference) './variable.less';
+
+@noticeBarPrefix: ant-notice-bar;
+
+.@{noticeBarPrefix} {
+  position: relative;
+  display: flex;
+  height: 75 * @rpx;
+  align-items: center;
+  overflow: hidden;
+  padding: @v-spacing-standard @h-spacing-large;
+  font-size: @notice-font-size;
+  color: @notice-color;
+  background-color: @notice-background-color;
+  box-sizing: border-box;
+
+  &-error {
+    color: @notice-error-color;
+    background-color: @notice-error-background-color;
+
+    &-scroll-left,
+    &-scroll-right {
+      background: @notice-error-background-color;
+    }
+  }
+
+  &-primary {
+    color: @notice-primary-color;
+    background-color: @notice-primary-background-color;
+
+    &-scroll-left,
+    &-scroll-right {
+      background: @notice-primary-background-color;
+    }
+  }
+
+  &-info {
+    color: @COLOR_WHITE;
+    background: @COLOR_TEXT_SECONDARY;
+
+    &-scroll-left,
+    &-scroll-right {
+      background: @COLOR_TEXT_SECONDARY;
+    }
+  }
+
+  &-icon {
+    margin-right: @h-spacing-standard;
+    font-size: 36 * @rpx;
+    &-image-image {
+      width: 36 * @rpx;
+      height: 36 * @rpx;
+    }
+  }
+
+  &-content {
+    position: relative;
+    z-index: 2;
+    flex: 1 100%;
+    overflow: hidden;
+    vertical-align: middle;
+    line-height: @default-line-height;
+  }
+
+  &-marquee {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+  }
+
+  &-operation {
+    display: flex;
+    align-items: center;
+    &-icon {
+      margin-left: 24 * @rpx;
+    }
+  }
+}
+
+.ant-icon-size-x-small {
+  font-size: 18px;
+}

甲情_甲意/miniprogram/node_modules/antd-mini/less/NoticeBar/props.d.ts

@@ -0,0 +1,47 @@
+import { IBaseProps } from '../_util/base';
+/**
+ * @description 通告栏，
+ * 当应用有重要公告或者由于用户的刷新操作产生提示反馈时可以使用通告栏系统。
+ * 通告栏不会对用户浏览当前页面内容产生影响，但又能明显的引起用户的注意。公告内容不超过一行。
+ */
+export interface INoticeBarProps extends IBaseProps {
+    /**
+     * @description 消息的展示
+     */
+    icon?: string;
+    /**
+     * @description 提示类型
+     * default 橙色，error 红色，primary 蓝色，info 灰色
+     * @default "default"
+     */
+    type?: 'default' | 'error' | 'primary' | 'info';
+    /**
+     * @description 通告类型，link 表示连接，整行可点；closeable 表示点击 x 可以关闭；不填时表示你右侧没有图标
+     */
+    mode?: 'link' | 'closeable';
+    /**
+     * @description 是否开启滚动动画
+     * @default false
+     */
+    enableMarquee: boolean;
+    /**
+     * @description 是否循环滚动，enableMarquee 为 true 时有效
+     * @default false
+     */
+    loop: boolean;
+    /**
+     * @description 微信版本需要通过此字段启用 icon 位置的插槽
+     * @default false
+     */
+    slotIcon?: boolean;
+    /**
+     * @description 点击图标（箭头或者叉，由mode属性决定）的事件回调
+     */
+    onTap: () => void;
+    /**
+     * @description 行动点点击回调
+     * @param 当前点击的行动点序号
+     */
+    onActionTap: (index: number) => void;
+}
+export declare const NoticeBarDefaultProps: Partial<INoticeBarProps>;

甲情_甲意/miniprogram/node_modules/antd-mini/less/NoticeBar/props.js

@@ -0,0 +1,8 @@
+export var NoticeBarDefaultProps = {
+    icon: '',
+    type: 'default',
+    mode: null,
+    enableMarquee: false,
+    loop: false,
+    slotIcon: false,
+};

甲情_甲意/miniprogram/node_modules/antd-mini/less/NoticeBar/variable.less

@@ -0,0 +1,24 @@
+@import (reference) '../style/themes/index.less';
+
+// 标准背景
+@notice-background-color: @COLOR_GOLDEN_3;
+// 标准边框颜色
+@notice-border-color: @COLOR_GOLDEN_2;
+// 标准字体颜色
+@notice-color: @COLOR_TANGERINE_1;
+// 标准字体大小
+@notice-font-size: @font-size-subtitle;
+
+// error 边框颜色
+@notice-error-border-color: @COLOR_GOLDEN_2;
+// error 字体颜色
+@notice-error-color: @COLOR_WHITE;
+// error 背景
+@notice-error-background-color: @COLOR_RED;
+
+// primary 边框颜色
+@notice-primary-border-color: tint(@COLOR_BRAND1, 72%);
+// primary 字体颜色
+@notice-primary-color: @COLOR_BRAND1;
+// primary 背景
+@notice-primary-background-color: tint(@COLOR_BRAND1, 80%);