Merge branch 'dev' of codeup.aliyun.com:61c14a7efa282c88e103c23f/oak-general-business into dev

app/components/message/index.json

@@ -0,0 +1,6 @@
+{
+    "component": true,
+    "usingComponents": {
+        "l-icon": "../../lin-ui/icon/index"
+    }
+}

app/components/message/index.less

@@ -0,0 +1,47 @@
+@import "../../config/styles/_base.less";
+
+.l-message {
+  width: 750rpx;
+  height: 0;
+  border-radius: 0rpx 0rpx 16rpx 16rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  left: 50%;
+  font-size: 28rpx;
+  color: #fff;
+  opacity: 0;
+  box-shadow: 0rpx 6rpx 16rpx 0rpx rgb(217 212 191 / 50%);
+  transform: translateX(-50%) translateZ(0) translateY(-100%);
+  transition: all 0.4s ease-in-out;
+
+  &-success {
+    background-color: @success-color;
+  }
+
+  &-error {
+    background-color: @error-color;
+  }
+
+  &-warning {
+    background-color: @warning-color;
+    color: #333;
+  }
+
+  &-primary {
+    background-color: @primary-color;
+  }
+}
+
+.l-message-show {
+  transform: translateX(-50%) translateZ(0) translateY(0);
+  height: 72rpx;
+  opacity: 1;
+}
+
+.l-message-image {
+  width: 30rpx;
+  height: 30rpx;
+  margin-right: 15rpx;
+}

app/components/message/index.ts

@@ -0,0 +1,130 @@
+Component({
+    options: {
+        multipleSlots: true,
+    },
+    externalClasses: ['l-class', 'l-image-class', 'l-lass-image'],
+    properties: {
+        zIndex: {
+            type: Number,
+            value: 777,
+        },
+        show: Boolean,
+        icon: String,
+        iconColor: {
+            type: String,
+            value: '#fff',
+        },
+        iconSize: {
+            type: String,
+            value: '28',
+        },
+        image: String,
+        content: String,
+        type: {
+            type: String,
+            value: 'primary',
+            options: ['primary', 'warning', 'success', 'error'],
+        },
+        duration: {
+            type: Number,
+            value: 1500,
+        },
+        openApi: {
+            type: Boolean,
+            value: true,
+        },
+        /**
+         * message距离顶部的距离
+         */
+        top: {
+            type: Number,
+            value: 0,
+        },
+    },
+
+    data: {
+        status: false,
+    },
+
+    // 解决 addListener undefined 的错误
+    observers: {
+        show: function (show) {
+            show && this.changeStatus();
+            if (!show)
+                this.setData({
+                    status: show,
+                });
+        },
+    },
+
+    lifetimes: {
+        attached() {
+            this.initMessage();
+        },
+    },
+
+    pageLifetimes: {
+        show() {
+            this.initMessage();
+        },
+    },
+
+    methods: {
+        changeStatus() {
+            this.setData({
+                status: true,
+            });
+            // @ts-ignore
+            if (this.data.timer) clearTimeout(this.data.timer);
+            // @ts-ignore
+            this.data.timer = setTimeout(() => {
+                this.setData({
+                    status: false,
+                });
+                // @ts-ignore
+                if (this.data.success) this.data.success();
+                // @ts-ignore
+                this.data.timer = null;
+            }, this.properties.duration);
+        },
+        initMessage() {
+            // @ts-ignore
+            wx.oak = wx.oak || {};
+            // @ts-ignore
+            wx.oak.showMessage = (options = {}) => {
+                const {
+                    content = '',
+                    image = '',
+                    type = 'primary',
+                    duration = 1500,
+                    success = null,
+                    top = 0,
+                } = options as {
+                    content: string;
+                    image: string;
+                    type: string;
+                    duration: number;
+                    success: any;
+                    top: number;
+                };
+                // @ts-ignore
+                this.data.success = success;
+                this.setData({
+                    content,
+                    image,
+                    duration,
+                    type,
+                    top,
+                });
+                this.changeStatus();
+                return this;
+            };
+            // @ts-ignore
+            wx.oak.hideMessage = () => {
+                this.setData({
+                    status: false,
+                });
+            };
+        },
+    },
+});

app/components/message/index.wxml

@@ -0,0 +1,11 @@
+<!-- index.wxml -->
+<view class="l-message l-class {{'l-message-'+type}} {{status?'l-message-show':''}}" style="z-index:{{zIndex}};top:{{top}}rpx">
+    <block wx:if="{{status}}">
+        <view style="margin-right:15rpx">
+             <l-icon name="{{icon?icon:type}}" size="{{iconSize}}" color="{{type==='warning'?'#333':iconColor}}" />
+        </view>
+        <image wx:if="{{image}}" src="{{image}}" class="l-message-image l-class-image l-image-class" />
+        {{content}}
+        <slot />
+    </block>
+</view>