feat: first commit

src/components/message-dialog/index.less

@@ -0,0 +1,83 @@
+@import '@/styles/common.less';
+@import '@/styles/variables.less';
+
+.message-dialog {
+
+  .title {
+    font-size: 36px;
+    line-height: 58px;
+    font-weight: 500;
+    color: @blColor;
+  }
+
+  .tips {
+    font-size: 28px;
+    line-height: 48px;
+    font-weight: 400;
+    text-align: left;
+    color: @blColorG2;
+
+    .highlight {
+      display: inline;
+      color: @blHighlightColor;
+    }
+  }
+
+  &__help {
+    .flex-column();
+
+    &__title {
+      .title();
+    }
+
+    &__body {
+      margin-top: 24px
+    }
+
+    &__tips {
+      .tips();
+
+      .highlight {
+        display: inline;
+        color: @blHighlightColor;
+      }
+    }
+
+    &__btn {
+      .button(@width: 360px; @height: 72px; @fontSize: 28px; @borderRadius: 36px);
+      margin-top: 24px;
+    }
+  }
+
+  &__no-times {
+    &__title {
+      .title();
+    }
+
+    &__tips {
+      .tips();
+      margin-top: 24px;
+    }
+
+    &__body {
+      width: 100%;
+      .flex-column();
+      padding: 40px 0;
+      background: @blHighlightBg;
+      margin-top: 20px;
+    }
+
+    &__times {
+      font-size: 28px;
+      line-height: 40px;
+      font-weight: 400;
+      color: #000000;
+    }
+
+
+    &__btn {
+      .button(@width: 360px; @height: 72px; @fontSize: 28px; @borderRadius: 36px);
+      margin-top: 24px;
+    }
+  }
+}

src/components/message-dialog/index.tsx

@@ -0,0 +1,70 @@
+import { Button } from '@tarojs/components';
+
+import { Dialog } from '@taroify/core';
+
+import './index.less';
+
+const PREFIX = 'message-dialog';
+const HELP = `${PREFIX}__help`;
+const NO_TIMES = `${PREFIX}__no-times`;
+
+interface IHelpProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+interface INoTimesProps {
+  open: boolean;
+  times: number;
+  onClick: () => void;
+  onClose: () => void;
+}
+
+export function MessageHelpDialog(props: IHelpProps) {
+  const { open, onClose } = props;
+
+  return (
+    <Dialog onClose={onClose} open={open}>
+      <Dialog.Content>
+        <div className={HELP}>
+          <div className={`${HELP}__title`}>消息通知次数说明</div>
+          <div className={`${HELP}__body`}>
+            <div className={`${HELP}__tips`}>
+              {`离开小程序后，如果有用户向你发送消息，我们将通过微信的"服务通知"提醒你。\n由于微信服务通知有次数限制，次数使用完则无法收到通知。`}
+            </div>
+            <div className={`${HELP}__tips`}>
+              <div className="highlight">通知次数</div>
+              代表你还能接收服务通知的次数
+            </div>
+            <div className={`${HELP}__tips`}>
+              <div className="highlight">点击增加</div>
+              可以为你增加通知次数
+            </div>
+          </div>
+          <Button className={`${HELP}__btn`} onClick={onClose}>
+            知道了
+          </Button>
+        </div>
+      </Dialog.Content>
+    </Dialog>
+  );
+}
+
+export function MessageNoTimesDialog(props: INoTimesProps) {
+  const { open, times = 0, onClick, onClose } = props;
+
+  return (
+    <Dialog className={NO_TIMES} onClose={onClose} open={open}>
+      <Dialog.Content>
+        <div className={`${NO_TIMES}__title`}>未读消息提醒次数不够了！</div>
+        <div className={`${NO_TIMES}__tips`}>有通知次数才能<span className="highlight">及时收到</span>招聘邀请，快点击“点我增加”吧～</div>
+        <div className={`${NO_TIMES}__body`}>
+          <div className={`${NO_TIMES}__times`}>{`未读消息提醒剩余：${times}次`}</div>
+          <Button className={`${NO_TIMES}__btn`} onClick={onClick}>
+            点我增加
+          </Button>
+        </div>
+      </Dialog.Content>
+    </Dialog>
+  );
+}