ipanel-rnapp-ajb-base 1.0.0

package/app/components/common/LoginType/protocol.js

@@ -0,0 +1,160 @@
+import React from 'react';
+import {Divider} from '@rneui/themed';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Dimensions,
+} from 'react-native';
+import {WebView} from 'react-native-webview';
+import px from '../../../utils/scaleSize';
+const ProtocolDialog = ({
+  type,
+  url,
+  handleOneDisagree,
+  handleOneAgree,
+  dialogTitle,
+}) => {
+  const agree = type => {
+    handleOneAgree(type);
+  };
+  const disagree = type => {
+    handleOneDisagree(type);
+  };
+  return (
+    <View style={styles.agreementMask}>
+      <View style={styles.agreementConfirmContent}>
+        {dialogTitle ? (
+          <View style={styles.agreementConfirmHead}>
+            <Text style={styles.agreementConfirmTitle}>{dialogTitle}</Text>
+          </View>
+        ) : (
+          <></>
+        )}
+        <View style={{flex: 1}}>
+          <WebView
+            style={{}}
+            source={{
+              uri: url,
+            }}
+          />
+        </View>
+
+        <View style={styles.agreementButtons}>
+          <TouchableOpacity
+            style={styles.agreeBtn}
+            activeOpacity={0.7}
+            onPress={() => agree(type)}>
+            <Text style={styles.agreeBtnText}>同意</Text>
+          </TouchableOpacity>
+        </View>
+        <View style={styles.agreementButtons}>
+          <TouchableOpacity
+            style={styles.disagreeBtn}
+            activeOpacity={0.7}
+            onPress={() => disagree(type)}>
+            <Text style={styles.disagreeBtnText}>不同意</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  agreementMask: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    bottom: 0,
+    right: 0,
+    zIndex: 2,
+    backgroundColor: 'rgba(0,0,0,0.7)',
+  },
+  agreementConfirmContent: {
+    position: 'absolute',
+    height: Dimensions.get('window').height * 0.7,
+    left: px(75),
+    right: px(75),
+    top: Dimensions.get('window').height * 0.15,
+    backgroundColor: '#fff',
+    paddingBottom: 0,
+    borderRadius: px(29),
+  },
+  agreementConfirmHead: {
+    marginTop: px(52),
+    marginBottom: px(34),
+  },
+  headerLeft: {
+    position: 'absolute',
+    top: 15,
+    left: 10,
+    zIndex: 2,
+  },
+  goBackImg: {
+    width: 20,
+    height: 20,
+  },
+  agreementConfirmTitleBox: {
+    // flex: 1,
+    position: 'absolute',
+    top: 10,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    zIndex: 1,
+  },
+  agreementConfirmTitle: {
+    fontSize: 20,
+    // lineHeight: 50,
+    color: '#000',
+    textAlign: 'center',
+    // paddingTop: 20,
+  },
+  agreementConfirmText: {
+    fontSize: px(40),
+    lineHeight: px(69),
+    color: '#333',
+    marginHorizontal: px(40),
+  },
+  agreementConfirmImportantText: {
+    color: 'rgba(234, 96, 0, 1)',
+  },
+  agreementButtons: {
+    // justifyContent: 'center',
+    alignItems: 'center',
+
+    // marginTop: px(12),
+    // flexDirection: 'row',
+    // justifyContent: 'center',
+    // borderBottomLeftRadius: px(29),
+  },
+  disagreeBtn: {
+    width: px(850),
+    height: px(132),
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  disagreeBtnText: {
+    color: '#666',
+    fontSize: px(52),
+    textAlign: 'center',
+    fontWeight: '400',
+  },
+  agreeBtn: {
+    width: px(850),
+    height: px(132),
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#E86003',
+    borderRadius: px(23),
+  },
+  agreeBtnText: {
+    color: '#fff',
+    fontSize: px(52),
+    textAlign: 'center',
+    fontWeight: '600',
+  },
+});
+export default ProtocolDialog;

package/app/components/common/Notify/index.js

@@ -0,0 +1,68 @@
+import React, {useImperativeHandle, useState} from 'react';
+import {View, Modal, StyleSheet, Text, StatusBar} from 'react-native';
+import px from '../../../utils/scaleSize';
+
+export default ({onRef}) => {
+  const [visible, setVisible] = useState(false);
+  const [options, setOptions] = useState(null);
+
+  useImperativeHandle(onRef, () => {
+    return {
+      show: args => {
+        setOptions(args);
+        setVisible(true);
+      },
+      hide: () => {
+        setVisible(false);
+      },
+    };
+  });
+
+  return (
+    visible && (
+      <Modal
+        animationType="fade"
+        transparent={true}
+        visible={visible}
+        statusBarTranslucent={true}>
+        <View style={styles.mask} />
+        <View style={styles.notifyContainer}>
+          <Text style={styles.title}>{options?.title}</Text>
+          <Text style={styles.content}>{options?.content}</Text>
+        </View>
+      </Modal>
+    )
+  );
+};
+
+const styles = StyleSheet.create({
+  mask: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    opacity: 0.5,
+    left: 0,
+    right: 0,
+    backgroundColor: '#000',
+    zIndex: 100,
+  },
+  notifyContainer: {
+    marginTop: px(29) + StatusBar.currentHeight,
+    marginHorizontal: px(40),
+    borderRadius: px(17),
+    backgroundColor: '#fff',
+    paddingHorizontal: px(40),
+    paddingVertical: px(69),
+  },
+  title: {
+    fontWeight: '600',
+    color: '#333',
+    fontSize: px(46),
+    marginBottom: px(29),
+  },
+  content: {
+    fontSize: px(40),
+    color: '#333',
+    fontWeight: '400',
+  },
+});

package/app/components/common/OnceTouchable/index.js

@@ -0,0 +1,33 @@
+import React, {useCallback, useState} from 'react';
+import {TouchableOpacity} from 'react-native';
+
+/**
+ * @param type 按钮类型 TouchableOpacity | TouchableHighlight | TouchableWithoutFeedback
+ * @param onPress
+ * @param disabled
+ * @param style
+ * @param props
+ * @returns {React.CElement<Readonly<TouchableOpacityProps> | TouchableOpacityProps, TouchableOpacity>}
+ */
+export default ({type, onPress, disabled, style, ...props}) => {
+  const [buttonDisabled, setButtonDisabled] = useState(false);
+  const handlePress = useCallback(
+    async (...args) => {
+      setButtonDisabled(true);
+      typeof onPress === 'function' && (await onPress(...args));
+      setButtonDisabled(false);
+    },
+    [onPress],
+  );
+  return React.createElement(type || TouchableOpacity, {
+    ...props,
+    disabled: buttonDisabled || disabled,
+    style: [
+      style,
+      {
+        opacity: buttonDisabled || disabled ? 0.3 : 1,
+      },
+    ],
+    onPress: handlePress,
+  });
+};

package/app/components/common/PaymentPicker/index.js

@@ -0,0 +1,264 @@
+import React, { useEffect, useRef, useState } from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Image,
+  Platform,
+} from "react-native";
+import ActionSheet, { SheetManager } from "react-native-actions-sheet";
+import px from "../../../utils/scaleSize";
+import { regFenToYuan } from "../../../utils/priceConversion";
+
+import useLatest from "../../../hooks/useLatest";
+
+const Index = ({ sheetId, payload }) => {
+  // 价格 购买类型 规格
+  const { price = 0, onPay, itemInfo, payTime, payTimeOut } = payload;
+  const [payType, setPayType] = useState(11);
+  const handleCancel = () => {
+    // SheetManager.hide(sheetId);
+    global.dialog.confirm({
+      containerStyle: {
+        paddingHorizontal: px(0),
+      },
+      contentStyle: {
+        paddingVertical: px(22),
+        marginBottom: px(16),
+      },
+      titleBoxStyle: {
+        paddingVertical: px(16),
+      },
+      titleStyle: {
+        fontSize: px(44),
+      },
+      contentTextStyle: {
+        color: "#333",
+      },
+      title: "是否放弃本次付款？",
+      component: "超过时效订将被取消，请尽快完成付款",
+      confirmButtonText: "确定离开",
+      confirmCallback: () => {
+        onPay(payType, "cancel", itemInfo);
+        SheetManager.hide(sheetId);
+      },
+      cancelButtonText: "继续支付",
+      cancelCallback: () => {},
+    });
+  };
+  const timer = useRef(null);
+  let difTime = 24 * 60 * 60 * 1000;
+  if (payTime) {
+    difTime =
+      24 * 60 * 60 * 1000 -
+      (new Date().getTime() - new Date(payTime.replace(/-/g, "/")).getTime());
+  }
+  const [count, setCount] = useState(difTime);
+  const latestCount = useLatest(count);
+  const formatDate = (maxtime) => {
+    var d = Math.floor(maxtime / (1000 * 60 * 60 * 24));
+    var h = Math.floor(maxtime / (1000 * 3600)) - d * 24;
+    var m = Math.floor(maxtime / (1000 * 60)) - d * 24 * 60 - h * 60;
+    var s =
+      Math.floor(maxtime / 1000) - d * 24 * 60 * 60 - h * 60 * 60 - m * 60;
+    var hour = d * 24 + h,
+      minutes = m,
+      seconds = s;
+    if (hour > 100) {
+      hour = 99;
+    }
+    if (hour < 10) {
+      hour = "0" + hour;
+    }
+    if (m < 10) {
+      minutes = "0" + minutes;
+    }
+    if (s < 10) {
+      seconds = "0" + seconds;
+    }
+    return hour + ":" + minutes + ":" + seconds;
+  };
+
+  useEffect(() => {
+    timer.current = setInterval(() => {
+      setCount(latestCount.current - 1000);
+      if (latestCount.current <= 0) {
+        payTimeOut(itemInfo?.order_id);
+        clearInterval(timer.current);
+        SheetManager.hide(sheetId);
+      }
+    }, 1000);
+    return () => {
+      clearInterval(timer.current);
+    };
+  }, []);
+
+  const handleConfirm = () => {
+    onPay(payType, "confirm", itemInfo);
+    SheetManager.hide(sheetId);
+  };
+
+  return (
+    <>
+      <ActionSheet id={sheetId} isModal={false}>
+        <View style={styles.content}>
+          <Text style={styles.price}>¥ {regFenToYuan(price)}</Text>
+          <View style={styles.centerRow}>
+            <Text style={styles.remainder}>支付剩余时间</Text>
+            <Text style={styles.time}>{formatDate(latestCount.current)}</Text>
+          </View>
+          <TouchableOpacity
+            style={[styles.row, styles.flexBetween, styles.payType]}
+            onPress={() => {
+              setPayType(11);
+            }}
+          >
+            <View style={styles.row}>
+              <Image
+                source={require("../../../assets/img/wx.png")}
+                style={styles.wx}
+              />
+              <Text style={styles.wxTitle}>微信支付</Text>
+            </View>
+            {payType === 11 ? (
+              <Image
+                source={require("../../../assets/img/ischeck.png")}
+                style={styles.check}
+              />
+            ) : (
+              <Image
+                source={require("../../../assets/img/nocheck.png")}
+                style={styles.check}
+              />
+            )}
+          </TouchableOpacity>
+          <TouchableOpacity
+            disabled
+            style={[styles.row, styles.flexBetween, styles.payType]}
+            onPress={() => {
+              setPayType(5);
+            }}
+          >
+            <View style={styles.row}>
+              <Image
+                source={require("../../../assets/img/zfb.png")}
+                style={styles.wx}
+              />
+              <Text style={styles.wxTitle}>支付宝支付</Text>
+            </View>
+            {payType === 5 ? (
+              <Image
+                source={require("../../../assets/img/ischeck.png")}
+                style={styles.check}
+              />
+            ) : (
+              <Image
+                source={require("../../../assets/img/disabled.png")}
+                style={styles.check}
+              />
+            )}
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={Platform.OS === "ios" ? styles.iosBottomBtns : styles.buy}
+            onPress={handleConfirm}
+          >
+            <Text style={styles.buyText}>确认支付</Text>
+          </TouchableOpacity>
+          <TouchableOpacity style={styles.closeBox} onPress={handleCancel}>
+            <Image
+              source={require("../../../assets/img/close.png")}
+              style={styles.closeImg}
+            />
+          </TouchableOpacity>
+        </View>
+      </ActionSheet>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  content: {
+    paddingHorizontal: px(55),
+    paddingTop: px(38),
+    position: "relative",
+    backgroundColor: "#fff",
+  },
+  price: {
+    color: "#EA6000",
+    fontSize: px(66),
+    fontWeight: "bold",
+    textAlign: "center",
+    marginTop: px(72),
+    marginBottom: px(22),
+  },
+  centerRow: {
+    flexDirection: "row",
+    fontSize: px(33),
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  remainder: {
+    color: "#333",
+    marginRight: px(6),
+  },
+  time: {
+    color: "#EA6000",
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  flexBetween: {
+    justifyContent: "space-between",
+  },
+  buy: {
+    height: px(115),
+    backgroundColor: "#ea6000",
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: px(69),
+    marginTop: px(206),
+  },
+  iosBottomBtns: {
+    marginBottom: px(50),
+    height: px(115),
+    backgroundColor: "#ea6000",
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: px(69),
+    marginTop: px(206),
+  },
+  buyText: {
+    fontSize: px(44),
+    color: "#fff",
+    fontWeight: "500",
+  },
+  payType: {
+    marginTop: px(115),
+  },
+  closeBox: {
+    position: "absolute",
+    top: px(36),
+    right: px(44),
+  },
+  closeImg: {
+    width: px(70),
+    height: px(70),
+  },
+  check: {
+    width: px(55),
+    height: px(55),
+  },
+  wx: {
+    width: px(82),
+    height: px(82),
+  },
+  wxTitle: {
+    color: "#333",
+    fontSize: px(49),
+    marginLeft: px(22),
+  },
+});
+
+export default Index;