ipanel-rnapp-ajb-base 1.0.0

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

@@ -0,0 +1,524 @@
+import React, { useMemo, useState } from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Image,
+  ScrollView,
+  TextInput,
+  Platform,
+} from "react-native";
+import ActionSheet, { SheetManager } from "react-native-actions-sheet";
+import { Icon } from "@rneui/themed";
+import px from "../../../utils/scaleSize";
+import { regFenToYuan } from "../../../utils/priceConversion";
+
+// const deviceHeight = Dimensions.get('window').height;
+const { navigate } = global.base;
+
+const Index = ({ sheetId, payload }) => {
+  // 价格 购买类型 规格
+  const {
+    buyTypes = [],
+    defaultBuyTypeIndex = 0, // 购买类型
+    // specificationList = [],
+    defaultSpecificationIndex = 0,
+    services = [],
+    defaultSelectServiceIndexs = [],
+    count = 1,
+    productOption = {}, // 商品所有信息
+    // selectOption = {}, // 选择的子商品
+    posterUrl = "",
+    addressInfo = {},
+    setOption = () => {},
+    setIndex = () => {},
+    addShopCart = () => {},
+    type = "", // 购物车切换规格或者购买选择规格
+    handelSureSpecifications = () => {},
+  } = payload;
+
+  const [selectProduct, setSelectProduct] = useState(
+    productOption?.option[defaultSpecificationIndex]
+  );
+
+  // 第一行规格
+  const specificationListRow1 = productOption.option.slice(
+    0,
+    Math.ceil(productOption.option.length / 2)
+  );
+  // 第二行规格
+  const specificationListRow2 = productOption.option.slice(
+    Math.ceil(productOption.option.length / 2)
+  );
+
+  const [selectServiceIndexs, setSelectServiceIndexs] = useState(
+    defaultSelectServiceIndexs
+  );
+  const [activeSpecificationIndex, setActiveSpecificationIndex] = useState(
+    defaultSpecificationIndex
+  );
+  const [activeBuyTypeIndex, setActiveBuyTypeIndex] =
+    useState(defaultBuyTypeIndex);
+  const [selectCount, setSelectCount] = useState(String(count));
+
+  const [buyTypesList, setBuyTypesList] = useState(buyTypes);
+
+  const TabBox = ({ title, active = false, style, ...props }) => {
+    return (
+      <TouchableOpacity
+        {...props}
+        style={[styles.tagBox, style, active ? styles.tagBoxActive : {}]}
+      >
+        <Text style={[styles.tabText, active ? styles.tagTextActive : {}]}>
+          {title}
+        </Text>
+      </TouchableOpacity>
+    );
+  };
+
+  const handlerServicePress = (index) => {
+    if (selectServiceIndexs.includes(index)) {
+      selectServiceIndexs.splice(selectServiceIndexs.indexOf(index), 1);
+      setSelectServiceIndexs([...selectServiceIndexs]);
+    } else {
+      setSelectServiceIndexs([...selectServiceIndexs, index]);
+    }
+  };
+
+  const productDesc = useMemo(() => {
+    return `${productOption.option[activeSpecificationIndex].title}x${selectCount}`;
+  }, [activeSpecificationIndex, selectCount]);
+
+  const handlerMinus = () => {
+    if (Number(selectCount) > 1) {
+      setSelectCount(String(Number(selectCount) - 1));
+    }
+  };
+
+  const handlerPlus = () => {
+    setSelectCount(String(Number(selectCount) + 1));
+  };
+
+  const changeCount = (val) => {
+    let num = Number(val);
+    if (num <= 0 || !num) {
+      num = 1;
+    }
+    setSelectCount(String(num));
+  };
+  // 立即购买
+  const handleConfirm = () => {
+    navigate("ConfirmOrderScreen", {
+      list: [
+        {
+          count: Number(selectCount),
+          selectOption: selectProduct,
+          url: selectProduct.original_image_url || posterUrl,
+          productInfo: productOption,
+          buyTypes: activeBuyTypeIndex, // 购买类型
+        },
+      ],
+      addressInfo: addressInfo,
+    });
+    SheetManager.hide(sheetId);
+  };
+
+  // 加入购物车
+  const handleAddShopCart = () => {
+    addShopCart(selectProduct, Number(selectCount), sheetId);
+  };
+
+  const handleCannel = () => {
+    SheetManager.hide(sheetId);
+  };
+  const changeIndex = (index) => {
+    setActiveSpecificationIndex(index);
+    setOption(productOption?.option[index]);
+    setSelectProduct(productOption?.option[index]);
+    setIndex(index);
+    const types = [
+      {
+        type: 3,
+        name: "全款购买",
+      },
+    ];
+    if (productOption?.option[index]?.extend?.product?.price?.deposit) {
+      types.push({
+        type: 1,
+        name: "预定购买",
+      });
+    }
+    setBuyTypesList([...types]);
+  };
+  // 购物车选择商品回调
+  const selectSpecification = () => {
+    // activeSpecificationIndex选中第几个商品
+    handelSureSpecifications(activeSpecificationIndex);
+    SheetManager.hide(sheetId);
+  };
+  return (
+    <>
+      <ActionSheet
+        id={sheetId}
+        isModal={false}
+        overdrawSize={100}
+        overdrawEnabled={false}
+      >
+        <View style={styles.content}>
+          <Text style={styles.price}>
+            ￥{regFenToYuan(selectProduct?.current_price)}
+          </Text>
+          <Text style={styles.productDesc}>已选：{productDesc}</Text>
+          <View style={{ height: px(1600) }}>
+            <ScrollView
+              removeClippedSubviews={true}
+              showsVerticalScrollIndicator={false}
+            >
+              {buyTypesList.length > 0 && (
+                <View style={styles.buyType}>
+                  <Text style={styles.title}>购买类型</Text>
+                  <View style={styles.buyTypeList}>
+                    {buyTypesList.map((item) => (
+                      <TabBox
+                        key={item.type}
+                        title={item.name}
+                        style={{
+                          marginRight: px(55),
+                        }}
+                        active={activeBuyTypeIndex === item.type}
+                        onPress={() => setActiveBuyTypeIndex(item.type)}
+                      />
+                    ))}
+                  </View>
+                </View>
+              )}
+
+              <View style={styles.selectSpecification}>
+                <Text style={styles.title}>选择规格</Text>
+                <View style={styles.specificationListRow}>
+                  {productOption.option.map((item, index) => (
+                    <TabBox
+                      key={index}
+                      title={item.title}
+                      active={activeSpecificationIndex === index}
+                      style={{
+                        marginRight: px(38),
+                        marginBottom: px(38),
+                      }}
+                      onPress={() => changeIndex(index)}
+                    />
+                  ))}
+                  {productOption.option.map((item, index) => (
+                    <TabBox
+                      key={index}
+                      title={item.title}
+                      active={activeSpecificationIndex === index}
+                      style={{
+                        marginRight: px(38),
+                        marginBottom: px(38),
+                      }}
+                      onPress={() => changeIndex(index)}
+                    />
+                  ))}
+                </View>
+              </View>
+              {type !== "selectSpecifications" && (
+                <View style={styles.selectCount}>
+                  <Text style={styles.title}>数量</Text>
+                  <View style={styles.countBox}>
+                    <TouchableOpacity
+                      style={styles.minusBox}
+                      onPress={handlerMinus}
+                    >
+                      {/*<ion-icon name="remove-outline"></ion-icon>*/}
+                      <Icon
+                        type="ionicon"
+                        name="remove-outline"
+                        size={px(70)}
+                        color="#999"
+                      />
+                    </TouchableOpacity>
+                    {/* <Text style={styles.countText}>{selectCount}</Text> */}
+                    <TextInput
+                      style={styles.countText}
+                      keyboardType="numeric"
+                      onChangeText={(text) => changeCount(text)}
+                      value={selectCount}
+                    />
+                    <TouchableOpacity
+                      style={styles.plusBox}
+                      onPress={handlerPlus}
+                    >
+                      <Icon
+                        type="ionicon"
+                        name="add-outline"
+                        size={px(70)}
+                        color="#333"
+                      />
+                    </TouchableOpacity>
+                  </View>
+                </View>
+              )}
+              {selectProduct.service && (
+                <View style={styles.service}>
+                  <Text style={styles.title}>服务</Text>
+                  <View style={styles.serviceList}>
+                    {services.map((item, index) => (
+                      <TabBox
+                        key={index}
+                        title={`${item.name} ¥${item.price}`}
+                        active={selectServiceIndexs.includes(index)}
+                        onPress={() => handlerServicePress(index)}
+                      />
+                    ))}
+                  </View>
+                </View>
+              )}
+            </ScrollView>
+          </View>
+          {type === "selectSpecifications" ? (
+            <View
+              style={
+                Platform.OS === "ios" ? styles.iosBottomBtns : styles.bottomBtns
+              }
+            >
+              <TouchableOpacity
+                style={[styles.buy, { flex: 1 }]}
+                onPress={selectSpecification}
+              >
+                <Text style={styles.buyText}>确定</Text>
+              </TouchableOpacity>
+            </View>
+          ) : (
+            <View
+              style={
+                Platform.OS === "ios" ? styles.iosBottomBtns : styles.bottomBtns
+              }
+            >
+              <TouchableOpacity
+                style={styles.addShopCart}
+                onPress={handleAddShopCart}
+              >
+                <Text style={styles.addShopCartText}>加入购物车</Text>
+              </TouchableOpacity>
+              <TouchableOpacity style={styles.buy} onPress={handleConfirm}>
+                <Text style={styles.buyText}>立即购买</Text>
+              </TouchableOpacity>
+            </View>
+          )}
+          <View style={styles.productShow}>
+            <Image
+              source={{
+                uri: selectProduct.original_image_url || posterUrl,
+              }}
+              style={styles.productPoster}
+            />
+          </View>
+          <TouchableOpacity style={styles.closeBox} onPress={handleCannel}>
+            <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",
+  },
+  title: {
+    fontSize: px(44),
+    lineHeight: px(77),
+    color: "#333",
+  },
+
+  tagBox: {
+    borderRadius: px(47),
+    paddingHorizontal: px(49),
+    backgroundColor: "#f9f9f9",
+    height: px(93),
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  tabText: {
+    fontSize: px(38),
+    fontWeight: "400",
+    color: "#333",
+    // lineHeight: px(77),
+  },
+  tagTextActive: {
+    color: "#ea6000",
+  },
+  tagBoxActive: {
+    borderWidth: px(3),
+    borderStyle: "solid",
+    borderColor: "#ea6000",
+    backgroundColor: "rgba(234,96,0,0.1)",
+    paddingHorizontal: px(49 - 3),
+  },
+
+  price: {
+    fontSize: px(66),
+    fontWeight: "bold",
+    color: "#ea6000",
+    marginBottom: px(16),
+    marginLeft: px(385),
+  },
+  productDesc: {
+    fontSize: px(38),
+    color: "#666",
+    fontWeight: "400",
+    marginBottom: px(100),
+    marginLeft: px(385),
+    height: px(104),
+  },
+
+  // 购买类型
+  buyType: {
+    marginBottom: px(99),
+  },
+  buyTypeList: {
+    flexDirection: "row",
+    marginTop: px(27),
+  },
+
+  // 选择规格
+  selectSpecification: {},
+  specificationListRow: {
+    display: "flex",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    marginTop: px(27),
+  },
+
+  // 数量
+  selectCount: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginBottom: px(99),
+    marginTop: px(50),
+  },
+  countBox: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  minusBox: {
+    width: px(77),
+    height: px(77),
+    backgroundColor: "#fff",
+    borderWidth: px(3),
+    borderColor: "#eee",
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: px(77 / 2),
+  },
+  plusBox: {
+    width: px(77),
+    height: px(77),
+    backgroundColor: "#fff",
+    borderWidth: px(3),
+    borderColor: "#eee",
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: px(77 / 2),
+  },
+  countText: {
+    // marginHorizontal: px(38),
+    fontSize: px(44),
+    color: "#333",
+    // borderWidth: px(3),
+    // borderColor: '#eee',
+    height: px(77),
+    padding: 0,
+    width: px(120),
+    paddingHorizontal: px(10),
+    textAlign: "center",
+  },
+
+  service: {
+    marginBottom: px(82),
+  },
+  serviceList: {
+    flexDirection: "row",
+    marginTop: px(27),
+  },
+  bottomBtns: {
+    paddingTop: px(20),
+    flexDirection: "row",
+    justifyContent: "space-between",
+  },
+  iosBottomBtns: {
+    paddingTop: px(20),
+    marginBottom: px(50),
+    flexDirection: "row",
+    justifyContent: "space-between",
+  },
+  addShopCart: {
+    borderRadius: px(69),
+    borderWidth: px(3),
+    borderStyle: "solid",
+    borderColor: "#999",
+    width: px(467),
+    height: px(115),
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  addShopCartText: {
+    color: "#333",
+    fontSize: px(44),
+    fontWeight: "500",
+  },
+  buy: {
+    width: px(467),
+    height: px(115),
+    backgroundColor: "#ea6000",
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: px(69),
+  },
+  buyText: {
+    fontSize: px(44),
+    color: "#fff",
+    fontWeight: "500",
+  },
+
+  closeBox: {
+    position: "absolute",
+    top: px(36),
+    right: px(44),
+  },
+  closeImg: {
+    width: px(70),
+    height: px(70),
+  },
+
+  productShow: {
+    position: "absolute",
+    width: px(280),
+    height: px(280),
+    backgroundColor: "#f9f9f9",
+    borderRadius: px(22),
+    top: px(20),
+    left: px(55),
+    zIndex: 2000,
+  },
+  productPoster: {
+    width: px(280),
+    height: px(280),
+  },
+  tranparentStyle: {
+    height: px(82),
+    backgroundColor: "#fff",
+    opacity: 0,
+  },
+});
+
+export default Index;

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

@@ -0,0 +1,144 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  StatusBar,
+  Platform,
+  Image,
+  TouchableOpacity,
+  TouchableHighlight,
+} from 'react-native';
+import {Icon} from '@rneui/themed';
+import {useSafeArea} from 'react-native-safe-area-context';
+import {goBack} from '../../../utils/RootNavigation';
+import px from '../../../utils/scaleSize';
+
+// screen自定义头部，带返回按钮，需要配合screen的headerShown: false配置使用
+const Index = ({
+  navigation,
+  title,
+  headerRight = () => null,
+  backgroundColor = '#fff',
+  backColor = '#000',
+  backTheme = 'black', // black | white
+  titleStyle,
+  onBackPress,
+  showBack = true,
+}) => {
+  const handleBack = () => {
+    if (typeof onBackPress === 'function') {
+      onBackPress();
+    } else {
+      goBack();
+    }
+  };
+
+  const insets = useSafeArea();
+
+  const statusBarPlaceholderStyle = {
+    height: (Platform.OS === 'ios' ? insets.top : 0) + StatusBar.currentHeight,
+    backgroundColor: backgroundColor,
+  };
+
+  const headerBackgroundColor = {
+    backgroundColor: backgroundColor,
+  };
+
+  return (
+    <>
+      <View style={statusBarPlaceholderStyle} />
+
+      <View style={[styles.header, headerBackgroundColor]}>
+        {/*<View style={styles.headerLeft}>*/}
+        {/*  <Icon*/}
+        {/*    style={styles.backBtn}*/}
+        {/*    name="chevron-back"*/}
+        {/*    type="ionicon"*/}
+        {/*    size={30}*/}
+        {/*    color={backColor}*/}
+        {/*    onPress={handleBack}*/}
+        {/*  />*/}
+        {/*</View>*/}
+        {showBack && (
+          <TouchableOpacity style={styles.headerLeft} onPress={handleBack}>
+            <Image
+              source={
+                backTheme === 'black'
+                  ? require('../../../assets/img/goBack.png')
+                  : require('../../../assets/img/goBack2.png')
+              }
+              style={styles.goBackImg}
+              resizeMode="contain"
+            />
+          </TouchableOpacity>
+        )}
+        <Text style={[styles.titleStyle, titleStyle]} numberOfLines={1}>
+          {title}
+        </Text>
+        <View style={styles.headerRight}>{headerRight()}</View>
+      </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: 'row',
+    height: 50,
+    alignItems: 'center',
+    paddingHorizontal: px(44),
+    position: 'relative',
+  },
+  goBackImg: {
+    width: px(60),
+    height: px(60),
+    // transform: [
+    //   {
+    //     translateX: px(-25),
+    //   },
+    // ],
+  },
+  headerLeft: {
+    flexDirection: 'row',
+    height: '100%',
+    alignItems: 'center',
+    paddingRight: px(50),
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: px(24),
+    // backgroundColor: 'red',
+    zIndex: 1000,
+  },
+  backBtn: {
+    // marginLeft: 14,
+  },
+  headerTitle: {
+    flexDirection: 'row',
+    maxWidth: '60%',
+    alignItems: 'center',
+  },
+  titleStyle: {
+    fontSize: 18,
+    color: '#000',
+    fontWeight: 'bold',
+    marginRight: 3,
+    flex: 1,
+    textAlign: 'center',
+  },
+  headerRight: {
+    flexDirection: 'row',
+    // flex: 1,
+    height: '100%',
+    // paddingHorizontal: 14,
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    right: px(44),
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default Index;