ipanel-rnapp-ajb-base 1.0.0

package/app/screens/CommonScreens/DeviceAnswerDetailScreen/index.js

@@ -0,0 +1,50 @@
+import React, {useEffect, useState} from 'react';
+import {View, StyleSheet, Text} from 'react-native';
+import {getProductAnswers} from '../../../api';
+
+const {ScreenBackHeader} = global.base.commonComponents;
+
+const px = global.base.scaleSize;
+
+export default ({route, navigation}) => {
+  const [answer, setAnswer] = useState(
+    route.params?.answer?.replace(/<br\/>/g, ''),
+  );
+  const [question, setQuestion] = useState(route.params?.question || '解答');
+  useEffect(() => {
+    const id = route.params?.id;
+    const product_id = route.params?.product_id;
+    if (id && product_id) {
+      getProductAnswers(product_id).then(res => {
+        const list = res.result || [];
+        const index = list.findIndex(item => item.id === id);
+        if (index > -1) {
+          setAnswer(list[index].product_question_answer);
+          setQuestion(list[index].product_question_name);
+        }
+      });
+    }
+  }, []);
+  return (
+    <View style={styles.container}>
+      <ScreenBackHeader title={question} backgroundColor="#fff" />
+      <View style={{flex: 1, padding: px(30)}}>
+        <Text
+          style={{
+            fontSize: px(55),
+            color: '#333',
+            fontWeight: '400',
+          }}>
+          {answer}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#eee',
+  },
+});

package/app/screens/CommonScreens/DeviceFeedbackScreen/index.js

@@ -0,0 +1,365 @@
+import React, {useEffect, useMemo, useState, useLayoutEffect} from 'react';
+import {
+  View,
+  StyleSheet,
+  Image,
+  TouchableOpacity,
+  ScrollView,
+  Platform,
+  TextInput,
+  KeyboardAvoidingView,
+  Keyboard,
+} from 'react-native';
+import {Divider, Icon, Input, Slider, Text} from '@rneui/themed';
+import {launchImageLibrary} from 'react-native-image-picker';
+import useKeyboard from '../../../hooks/useKeyboard';
+
+const {ScreenBackHeader} = global.base.commonComponents;
+
+const px = global.base.scaleSize;
+
+import {getProductAnswers} from '../../../api';
+
+// 设备类型对应题库
+const DEVICE_TO_QUESTION = {
+  itee: 2,
+  igot: 3,
+  curtain: 4,
+  light: 5,
+  ifree: 6,
+  thermostat: 7,
+  windowpusher: 8,
+  ac: 9,
+  scale: 10,
+  hematometer: 11,
+  tv: 12,
+  istickiot: 13,
+  skiprope: 14,
+  rowmachine: 15,
+  oximeter: 16,
+};
+
+export default ({route, navigation}) => {
+  const {device_type} = route.params;
+  const [questionList, setQuestionList] = useState([]);
+  const [feedbackText, setFeedbackText] = useState('');
+  // 用于反馈的图片列表
+  const [imgList, setImgList] = useState([]);
+  const buttonDisabled = useMemo(() => {
+    return !feedbackText;
+  }, [feedbackText]);
+  const [showQuestion, setShowQuestion] = useState(true);
+  const {keyboardShow} = useKeyboard();
+
+  useLayoutEffect(() => {
+    init();
+  }, []);
+
+  // 获取设备对应题库
+  const init = async () => {
+    const questionId =
+      route.params.questionId || DEVICE_TO_QUESTION[device_type];
+    if (questionId) {
+      const res = await getProductAnswers(questionId);
+      if (res.error_code === 0) {
+        setQuestionList(res.result || []);
+      }
+    }
+  };
+
+  // 选择相册图片
+  const handleSelectPicture = async () => {
+    const result = await launchImageLibrary({
+      mediaType: 'mixed',
+      selectionLimit: 5,
+      // includeBase64: true,
+    });
+    if (result.didCancel) {
+      console.log('cancel');
+    } else if (result.errorCode) {
+      console.log('error', result);
+    } else {
+      const files = result.assets;
+      setImgList([...imgList, ...files]);
+    }
+  };
+
+  // 提交反馈
+  const submitFeedback = () => {
+    const formData = new FormData();
+    formData.append(
+      'productId',
+      route.params.questionId || DEVICE_TO_QUESTION[device_type] + '',
+    );
+    formData.append('questionDescription', feedbackText);
+    imgList.forEach(img => {
+      formData.append('file', {
+        uri: Platform.OS === 'ios' ? img.uri.replace('file://', '') : img.uri,
+        type: 'multipart/form-data',
+        name: img.fileName,
+        // name: img.type,
+      });
+    });
+    global.loading.showLoading('提交中...');
+    console.log(formData, 'formData');
+    fetch('https://api.cloud.ipanel.cn/vgatehelp/ajb/problemFeedback', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+      body: formData,
+    })
+      .then(res => {
+        global.loading.hideLoading();
+        return res.json();
+      })
+      .then(data => {
+        console.log(data);
+        if (data.error_code === 0) {
+          global.toast.showToast('提交成功');
+        } else {
+          global.toast.showToast('提交失败');
+        }
+      })
+      .catch(err => {
+        console.log(err);
+        global.loading.hideLoading();
+        global.toast.showToast('提交失败');
+      });
+  };
+
+  // 删除图片
+  const deleteImg = index => {
+    return setImgList([...imgList.filter((item, i) => i !== index)]);
+  };
+
+  return (
+    <View style={styles.container}>
+      <ScreenBackHeader title="帮助与反馈" backgroundColor="#fff" />
+      <View style={{flex: 1}}>
+        <ScrollView showsVerticalScrollIndicator={false}>
+          <View style={styles.titleBox}>
+            <Text style={styles.title}>常见问题</Text>
+          </View>
+
+          <View
+            style={{
+              backgroundColor: '#fff',
+            }}>
+            {questionList.map(item => (
+              <React.Fragment key={item.id}>
+                <TouchableOpacity
+                  style={styles.cellBox}
+                  onPress={() =>
+                    navigation.navigate('DeviceAnswerDetailScreen', {
+                      question: item.product_question_name,
+                      answer: item.product_question_answer,
+                    })
+                  }>
+                  <Text style={styles.cellLabel}>
+                    {item.product_question_name}
+                  </Text>
+                  {/*<Icon*/}
+                  {/*  name="chevron-right"*/}
+                  {/*  type="material"*/}
+                  {/*  size={20}*/}
+                  {/*  color="#aaa"*/}
+                  {/*/>*/}
+                  <Image
+                    source={require('../../../assets/img/link.png')}
+                    style={{
+                      width: px(30),
+                      height: px(30),
+                    }}
+                    resizeMode="contain"
+                  />
+                </TouchableOpacity>
+                <Divider color="#eee" width={1} />
+              </React.Fragment>
+            ))}
+          </View>
+
+          <View style={styles.titleBox}>
+            <Text style={styles.title}>问题反馈</Text>
+          </View>
+          <View style={styles.feedbackBox}>
+            <TextInput
+              value={feedbackText}
+              onChangeText={setFeedbackText}
+              // numberOfLines={4}
+              multiline={true}
+              containerStyle={{
+                height: px(350),
+                padding: 0,
+                margin: 0,
+                borderWidth: 0,
+              }}
+              inputContainerStyle={{
+                height: '100%',
+                width: '100%',
+                padding: 0,
+                margin: 0,
+                borderBottomWidth: 0,
+              }}
+              style={{
+                fontSize: px(44),
+                paddingLeft: px(82),
+                // height: px(350),
+                justifyContent: 'flex-start',
+                alignItems: 'flex-start',
+                color: '#333',
+              }}
+              placeholder="请详细描述问题~"
+              placeholderTextColor="#999"
+            />
+            <View
+              style={{
+                paddingLeft: px(82),
+                flexDirection: 'row',
+                alignItems: 'center',
+                position: 'absolute',
+                bottom: px(38),
+                left: 0,
+                right: 0,
+              }}>
+              <TouchableOpacity
+                style={styles.addImgBox}
+                onPress={handleSelectPicture}>
+                <Image
+                  source={require('../../../assets/img/add_img.png')}
+                  style={styles.addImg}
+                />
+              </TouchableOpacity>
+              <View style={styles.imgList}>
+                <ScrollView
+                  showsHorizontalScrollIndicator={true}
+                  horizontal={true}>
+                  {imgList.map((img, index) => (
+                    <View style={styles.imgBox} key={img.fileName}>
+                      <Image
+                        source={{uri: img.uri}}
+                        style={styles.imgItem}
+                        resizeMode="contain"
+                      />
+                      <TouchableOpacity
+                        style={styles.deleteImgButton}
+                        onPress={() => deleteImg(index)}>
+                        <Image
+                          source={require('../../../assets/img/delete_pic.png')}
+                          resizeMode="contain"
+                          style={styles.deleteImg}
+                        />
+                      </TouchableOpacity>
+                    </View>
+                  ))}
+                </ScrollView>
+              </View>
+            </View>
+          </View>
+          <TouchableOpacity
+            onPress={submitFeedback}
+            style={{
+              ...styles.button,
+              backgroundColor: buttonDisabled
+                ? 'rgba(234, 96, 0, 0.3)'
+                : 'rgba(234, 96, 0, 1)',
+            }}
+            disabled={buttonDisabled}>
+            <Text style={styles.buttonText}>提交反馈</Text>
+          </TouchableOpacity>
+        </ScrollView>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#eee',
+  },
+  titleBox: {
+    paddingTop: px(25),
+    paddingBottom: px(22),
+    paddingLeft: px(38),
+  },
+  title: {
+    fontSize: px(38),
+    color: '#333',
+    fontWeight: '400',
+  },
+
+  cellBox: {
+    paddingVertical: px(30),
+    minHeight: px(150),
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingLeft: px(38),
+    paddingRight: px(44),
+  },
+
+  cellLabel: {
+    fontSize: px(49),
+    color: '#333',
+    fontWeight: '400',
+    marginRight: px(50),
+    flex: 1,
+  },
+
+  feedbackBox: {
+    backgroundColor: '#fff',
+    height: px(555),
+    position: 'relative',
+  },
+
+  addImgBox: {
+    // paddingLeft: px(82),
+  },
+  addImg: {
+    width: px(148),
+    height: px(148),
+  },
+
+  // 反馈图片列表
+  imgList: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  imgBox: {
+    marginLeft: px(38),
+    width: px(148 + 11),
+    height: px(148 + 11),
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+  },
+  imgItem: {
+    width: px(148),
+    height: px(148),
+    borderRadius: px(16),
+  },
+  deleteImgButton: {
+    position: 'absolute',
+    right: px(0),
+    top: px(0),
+  },
+  deleteImg: {
+    width: px(55),
+    height: px(55),
+  },
+
+  button: {
+    marginHorizontal: px(82),
+    marginVertical: px(115),
+    backgroundColor: '#EA6000',
+    paddingVertical: px(33),
+    borderRadius: px(69),
+  },
+  buttonText: {
+    fontSize: px(49),
+    color: '#fff',
+    textAlign: 'center',
+    fontWeight: '500',
+  },
+});

package/app/screens/CommonScreens/EditInvoiceTitleScreen/index.js

@@ -0,0 +1,279 @@
+import React, {useMemo, useState} from 'react';
+import {View, Text, StyleSheet, TouchableOpacity, Keyboard} from 'react-native';
+import {Divider} from '@rneui/themed';
+import {addInvoiceTitle, adjustInvoiceTitle} from '../../../api';
+
+const {commonComponents, scaleSize: px} = global.base;
+const fontStyle = global.base.styles.fontStyle;
+
+const {ScreenBackHeader, Cell} = commonComponents;
+
+export default ({navigation, route}) => {
+  const {usage = 0, invoiceTitle = {}} = route?.params || {};
+  const title = usage === 0 ? '添加发票抬头' : '编辑发票抬头';
+  const [unitInvoiceTitle, setUnitInvoiceTitle] = useState([
+    {
+      label: '名称',
+      name: 'name',
+      value: invoiceTitle?.name || '',
+      placeholder: '单位名称',
+    },
+    {
+      label: '税号',
+      name: 'tax_no',
+      value: invoiceTitle?.tax_no || '',
+      placeholder: '纳税人识别号',
+    },
+    {
+      label: '单位地址',
+      name: 'address',
+      value: invoiceTitle?.address || '',
+      placeholder: '单位地址信息',
+    },
+    {
+      label: '电话号码',
+      name: 'telephone',
+      value: invoiceTitle?.telephone || '',
+      placeholder: '电话号码',
+    },
+    {
+      label: '开户银行',
+      name: 'bank_name',
+      value: invoiceTitle?.bank_name || '',
+      placeholder: '开户银行名称',
+    },
+    {
+      label: '银行帐号',
+      name: 'bank_num',
+      value: invoiceTitle?.bank_num || '',
+      placeholder: '银行账户号码',
+    },
+  ]);
+  const [personInvoiceTitle, setPersonInvoiceTitle] = useState([
+    {
+      label: '名称',
+      name: 'name',
+      value: invoiceTitle?.name || '',
+    },
+  ]);
+
+  const unitInvoiceTitleObj = useMemo(() => {
+    const obj = {};
+    unitInvoiceTitle.forEach(item => {
+      obj[item.name] = item.value;
+    });
+    return obj;
+  }, [unitInvoiceTitle]);
+
+  const personInvoiceTitleObj = useMemo(() => {
+    const obj = {};
+    personInvoiceTitle.forEach(item => {
+      obj[item.name] = item.value;
+    });
+    return obj;
+  }, [personInvoiceTitle]);
+
+  // 抬头类型
+  const [invoiceTitleType, setInvoiceTitleType] = useState(
+    invoiceTitle?.type || '01',
+  );
+
+  const headerRight = () => {
+    return (
+      <TouchableOpacity onPress={save} disabled={saveDisabled}>
+        <Text
+          style={{
+            fontSize: px(44),
+            color: saveDisabled ? '#999' : '#333',
+          }}>
+          确定
+        </Text>
+      </TouchableOpacity>
+    );
+  };
+
+  const saveDisabled = useMemo(() => {
+    if (invoiceTitleType === '01') {
+      return unitInvoiceTitle.filter(item => !item.value).length > 0;
+    } else {
+      return personInvoiceTitle.filter(item => !item.value).length > 0;
+    }
+  }, [invoiceTitleType, unitInvoiceTitle, personInvoiceTitle]);
+
+  const save = () => {
+    usage === 0 ? add() : edit();
+  };
+
+  const add = async () => {
+    const res = await addInvoiceTitle({
+      buyer: {
+        type: invoiceTitleType,
+        ...(invoiceTitleType === '01'
+          ? unitInvoiceTitleObj
+          : personInvoiceTitleObj),
+      },
+    });
+    console.log(res, 'addInvoiceTitle');
+    if (res.code === 0) {
+      global.toast?.showToast('新建成功');
+      navigation.goBack();
+    } else {
+      global.toast?.showToast('新建失败');
+    }
+  };
+
+  const edit = async () => {
+    const res = await adjustInvoiceTitle({
+      title_id: invoiceTitle.title_id,
+      buyer: {
+        type: invoiceTitleType,
+        ...(invoiceTitleType === '01'
+          ? unitInvoiceTitleObj
+          : personInvoiceTitleObj),
+      },
+    });
+    if (res.code === 0) {
+      global.toast?.showToast('修改成功');
+      navigation.goBack();
+    } else {
+      global.toast?.showToast('修改失败');
+    }
+  };
+
+  const onChangeText = (key, value) => {
+    if (invoiceTitleType === '01') {
+      setUnitInvoiceTitle(
+        unitInvoiceTitle.map(item => {
+          if (item.name === key) {
+            return {
+              ...item,
+              value,
+            };
+          } else {
+            return {
+              ...item,
+            };
+          }
+        }),
+      );
+    } else {
+      setPersonInvoiceTitle(
+        personInvoiceTitle.map(item => {
+          if (item.name === key) {
+            return {
+              ...item,
+              value,
+            };
+          } else {
+            return {
+              ...item,
+            };
+          }
+        }),
+      );
+    }
+  };
+
+  return (
+    <TouchableOpacity
+      style={styles.container}
+      onPress={Keyboard.dismiss}
+      activeOpacity={1}>
+      <ScreenBackHeader title={title} headerRight={headerRight} />
+      <Divider color="#eee" />
+      <View style={styles.content}>
+        <Cell
+          label="抬头类型"
+          type="custom"
+          labelTextStyle={{
+            ...fontStyle(44, '#333', 500),
+          }}
+          rightComponent={
+            <View style={styles.switchBox}>
+              <TouchableOpacity
+                activeOpacity={0.5}
+                onPress={() => setInvoiceTitleType('01')}
+                style={[
+                  styles.switchItem,
+                  invoiceTitleType === '01' && styles.activeSwitchItem,
+                ]}>
+                <Text
+                  style={[
+                    styles.switchItemText,
+                    invoiceTitleType === '01' && styles.activeSwitchItemText,
+                  ]}>
+                  单位
+                </Text>
+              </TouchableOpacity>
+              <TouchableOpacity
+                activeOpacity={0.5}
+                onPress={() => setInvoiceTitleType('02')}
+                style={[
+                  styles.switchItem,
+                  invoiceTitleType === '02' && styles.activeSwitchItem,
+                ]}>
+                <Text
+                  style={[
+                    styles.switchItemText,
+                    invoiceTitleType === '02' && styles.activeSwitchItemText,
+                  ]}>
+                  个人
+                </Text>
+              </TouchableOpacity>
+            </View>
+          }
+        />
+        {(invoiceTitleType === '01'
+          ? unitInvoiceTitle
+          : personInvoiceTitle
+        ).map(item => (
+          <Cell
+            key={item.name}
+            type="input"
+            label={item.label}
+            labelTextStyle={{
+              ...fontStyle(44, '#333', 500),
+            }}
+            value={item.value}
+            onChangeText={value => onChangeText(item.name, value)}
+            placeholder={item.placeholder}
+          />
+        ))}
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  content: {
+    flex: 1,
+  },
+  switchBox: {
+    borderRadius: px(49),
+    backgroundColor: '#F2F2F2',
+    width: px(330),
+    flexDirection: 'row',
+    marginRight: px(38),
+  },
+  switchItem: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: px(49),
+    height: px(99),
+    // height: '100%',
+  },
+  activeSwitchItem: {
+    backgroundColor: '#ea6000',
+  },
+  switchItemText: {
+    ...fontStyle(44),
+  },
+  activeSwitchItemText: {
+    color: '#fff',
+  },
+});