添加弹窗

src/components/popup/popup-clock.less

@@ -0,0 +1,41 @@
+.text-left {
+  text-align: left;
+}
+
+.type3btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 10rpx;
+  margin-top: -20rpx;
+  .checked {
+    width: 40rpx;
+    height: 40rpx;
+    margin-right: 30rpx;
+  }
+  .text {
+    font-family: PingFang SC;
+    font-size: 28rpx;
+    color: #999;
+  }
+}
+
+.alert-popup-btns {
+  display: flex;
+  margin-top: 60rpx;
+  justify-content: center;
+  .alert-popup-btn {
+    width: 270rpx;
+    height: 90rpx;
+    line-height: 90rpx;
+    font-size: 32rpx;
+    font-weight: 500;
+    text-align: center;
+    border: 1rpx solid #000;
+    border-radius: 45rpx;
+    color: #fff;
+    background-color: #000;
+    font-family: PingFang SC;
+  }
+}

src/components/popup/popup-clock.tsx

@@ -0,0 +1,148 @@
+import classnames from "classnames";
+import { Component } from "react";
+
+import { Block, View, Image, Text, Button, PageMeta } from "@tarojs/components";
+
+import { Popup } from "@antmjs/vantui";
+
+import "./popup.less";
+import "./popup-clock.less";
+
+import { go } from "../../utils/traoAPI";
+
+/** props
+ * isLarge            是否大尺寸
+ * isShow             是否显示
+ * isClose            右上角关闭图标
+ * title              弹窗标题
+ * content            弹窗内容
+ * confirmButtonText  确定按钮
+ * textAlgin          文本对齐 left  right  center
+ * type:              1注册
+ * @confirm           关闭回调
+ */
+export default class PopupClock extends Component<any, any> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: "确认组件",
+    };
+  }
+
+  async onLoad() {}
+  componentDidMount() {}
+
+  componentWillUnmount() {}
+
+  componentDidShow() {}
+
+  componentDidHide() {}
+
+  async initData() {}
+
+  onClose = () => {
+    this.props.close();
+  };
+
+  onConfirm = () => {
+    let { type } = this.props;
+
+    switch (type) {
+      case "1": // 未注册
+        go("/pages/register/register");
+        break;
+      case "2": // 登录过期
+        go("/pages/login/login");
+        break;
+      case "3": // 前端提示-关注公众号
+        break;
+    }
+    this.props.confirm();
+  };
+
+  onClickStop = (e) => {
+    e.stopPropagation();
+  };
+
+  render() {
+    let {
+      title,
+      content,
+      confirmButtonText,
+      textAlgin,
+      isShow,
+      isClose,
+      isLarge,
+      myClassName,
+      type,
+    } = this.props;
+    return (
+      <Block>
+        <PageMeta pageStyle={isShow ? "overflow: hidden;" : ""} />
+        <Popup
+          className={myClassName}
+          show={isShow}
+          closeOnClickOverlay={false}
+          round
+          overlayStyle='width: 100vw;padding: 0;'
+          onClick={this.onClickStop}
+        >
+          {/* <View
+            className="at-icon at-icon-close common-close"
+            onClick={this.onClose}
+          ></View> */}
+          {isClose && (
+            <View
+              className='at-icon at-icon-close common-close'
+              onClick={this.onClose}
+            ></View>
+          )}
+          <View
+            className={classnames("common-box", {
+              "common-large": isLarge,
+            })}
+          >
+            {title && (
+              <View
+                className={classnames("common-popup-title", {
+                  "margin-samll": isLarge,
+                })}
+              >
+                {title}
+              </View>
+            )}
+            <View className='common-popup-content-box'>
+              <View
+                className={classnames("common-popup-content", {
+                  "text-left": textAlgin === "left",
+                  "text-right": textAlgin === "right",
+                  "text-center": textAlgin === "center",
+                })}
+              >
+                {content}
+              </View>
+            </View>
+
+            {type === "3" && (
+              <View className='type3btn' onClick={this.onConfirm}>
+                <Image
+                  className='checked'
+                  src={require("../../img/welcome/checked.png")}
+                ></Image>
+                <Text className='text'>今年不再提示</Text>
+              </View>
+            )}
+
+            {type !== "3" && (
+              <View className='alert-popup-btns'>
+                <Button className='alert-popup-btn' onClick={this.onConfirm}>
+                  {confirmButtonText}
+                </Button>
+              </View>
+            )}
+          </View>
+        </Popup>
+      </Block>
+    );
+  }
+}