|
|
@@ -0,0 +1,342 @@
|
|
|
+import * as WebBrowser from "expo-web-browser";
|
|
|
+import * as React from "react";
|
|
|
+import {
|
|
|
+ Image,
|
|
|
+ Platform,
|
|
|
+ StyleSheet,
|
|
|
+ TouchableOpacity,
|
|
|
+ View,
|
|
|
+ ImageBackground,
|
|
|
+} from "react-native";
|
|
|
+import { useModel } from "flooks";
|
|
|
+import {
|
|
|
+ Layout,
|
|
|
+ Tab,
|
|
|
+ TabView,
|
|
|
+ Text,
|
|
|
+ useTheme,
|
|
|
+ Button,
|
|
|
+ Card,
|
|
|
+ Input,
|
|
|
+ Icon,
|
|
|
+} from "@ui-kitten/components";
|
|
|
+import EmptyComponent from "../../components/EmptyComponent";
|
|
|
+import FormInput from "../../components/FormInput";
|
|
|
+import { useFocusEffect, useRoute } from "@react-navigation/native";
|
|
|
+import ListComponent from "../../components/ListComponent";
|
|
|
+import NavHeaderBar from "../../components/NavHeaderBar";
|
|
|
+import GoodsCard from "../../components/GoodsCard";
|
|
|
+import ActionButton from "react-native-action-button";
|
|
|
+
|
|
|
+export default function GoodsSpecificationScreen({ navigation }) {
|
|
|
+ const theme = useTheme();
|
|
|
+ const { changeBackground } = useModel("barModel", true);
|
|
|
+ const { mid } = useModel("userModel");
|
|
|
+ const { httpGet, httpPost } = useModel("httpModel", true);
|
|
|
+ const { success, warnning } = useModel("loadingModel", true);
|
|
|
+ const { showDialog } = useModel("dialogModel");
|
|
|
+ const [allEditInfo, setEdit] = React.useState({});
|
|
|
+ const [goodsId, setGoodsId] = React.useState(0);
|
|
|
+ const [startState, changeState] = React.useState(true);
|
|
|
+ const [editList, setEditList] = React.useState([]);
|
|
|
+ const [addNew, changeNew] = React.useState(false);
|
|
|
+ const [isNew, changeIsNew] = React.useState(false);
|
|
|
+
|
|
|
+ const {
|
|
|
+ userTitle21,
|
|
|
+ fullReduction2,
|
|
|
+ fullReduction1,
|
|
|
+ delText,
|
|
|
+ editText,
|
|
|
+ confirm,
|
|
|
+ cancel,
|
|
|
+ complete,
|
|
|
+ successText,
|
|
|
+ removeTips,
|
|
|
+ } = useModel("wordsModel");
|
|
|
+ const { addClassGoods } = useModel("goodsModel");
|
|
|
+ useFocusEffect(
|
|
|
+ React.useCallback(() => {
|
|
|
+ changeBackground(theme["color-primary-500"]);
|
|
|
+ }, [])
|
|
|
+ );
|
|
|
+
|
|
|
+ const route = useRoute();
|
|
|
+
|
|
|
+ function getList() {
|
|
|
+ let { params } = route;
|
|
|
+ let { goodsId } = params || {};
|
|
|
+ setGoodsId(goodsId);
|
|
|
+ return httpGet(
|
|
|
+ "/goodsSpecification/byGoodsId",
|
|
|
+ {
|
|
|
+ goodsId: goodsId || 0,
|
|
|
+ },
|
|
|
+ true
|
|
|
+ ).then(res => {
|
|
|
+ changeState(false);
|
|
|
+ if (res.length === 0) {
|
|
|
+ changeIsNew(true);
|
|
|
+ } else {
|
|
|
+ changeIsNew(false);
|
|
|
+ }
|
|
|
+ let content = res || [];
|
|
|
+ if (isNew || addNew) {
|
|
|
+ content.push({ name: "", amount: "" });
|
|
|
+ }
|
|
|
+
|
|
|
+ return Promise.resolve({
|
|
|
+ content: content.map(item => {
|
|
|
+ let _info = { ...item, amount: item.amount.toString() };
|
|
|
+
|
|
|
+ if (!_info.id || editList.indexOf(_info.id) != -1) {
|
|
|
+ _info.edit = true;
|
|
|
+ } else {
|
|
|
+ _info.edit = false;
|
|
|
+ }
|
|
|
+ return _info;
|
|
|
+ }),
|
|
|
+ last: true,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ const renderItem = ({ item, index }) => {
|
|
|
+ if (!item.id || item.edit) {
|
|
|
+ return editItem(item, index);
|
|
|
+ } else {
|
|
|
+ return saveItem(item);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const saveItem = (info, index) => (
|
|
|
+ <Layout style={styles.item}>
|
|
|
+ <Layout style={[styles.text, styles.flexRow]}>
|
|
|
+ <Text category='c1'>添加{info.name}</Text>
|
|
|
+ <Layout style={styles.money}>
|
|
|
+ <Text category='c1'>¥{info.amount}</Text>
|
|
|
+ </Layout>
|
|
|
+ </Layout>
|
|
|
+
|
|
|
+ <Button
|
|
|
+ size='small'
|
|
|
+ appearance='outline'
|
|
|
+ onPress={() => editInfo(info.id)}
|
|
|
+ >
|
|
|
+ {editText}
|
|
|
+ </Button>
|
|
|
+ <Button
|
|
|
+ size='small'
|
|
|
+ status='danger'
|
|
|
+ style={styles.buttonlast}
|
|
|
+ onPress={() => delInfo(info, index)}
|
|
|
+ >
|
|
|
+ {delText}
|
|
|
+ </Button>
|
|
|
+ </Layout>
|
|
|
+ );
|
|
|
+
|
|
|
+ const editItem = (info, index) => (
|
|
|
+ <Layout style={styles.item}>
|
|
|
+ <Layout style={[styles.text, styles.flexRow]}>
|
|
|
+ <Text>规格</Text>
|
|
|
+ <Input
|
|
|
+ size='small'
|
|
|
+ defaultValue={info.name}
|
|
|
+ style={styles.input}
|
|
|
+ key={index + "_0"}
|
|
|
+ keyboardType='numeric'
|
|
|
+ onChangeText={text => {
|
|
|
+ let _editInfo = { ...allEditInfo } || {};
|
|
|
+ if (!_editInfo[info.id || "new"]) {
|
|
|
+ _editInfo[info.id || "new"] = {};
|
|
|
+ }
|
|
|
+ _editInfo[info.id || "new"]["name"] = text;
|
|
|
+ setEdit(_editInfo);
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ <Text>价钱</Text>
|
|
|
+ <Input
|
|
|
+ size='small'
|
|
|
+ defaultValue={info.amount}
|
|
|
+ style={styles.input}
|
|
|
+ key={index + "_1"}
|
|
|
+ keyboardType='numeric'
|
|
|
+ onChangeText={text => {
|
|
|
+ let _editInfo = { ...allEditInfo } || {};
|
|
|
+ if (!_editInfo[info.id || "new"]) {
|
|
|
+ _editInfo[info.id || "new"] = {};
|
|
|
+ }
|
|
|
+ _editInfo[info.id || "new"]["amount"] = text;
|
|
|
+ setEdit(_editInfo);
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </Layout>
|
|
|
+
|
|
|
+ <Button size='small' onPress={() => saveInfo(info)}>
|
|
|
+ {confirm}
|
|
|
+ </Button>
|
|
|
+ <Button
|
|
|
+ size='small'
|
|
|
+ appearance='outline'
|
|
|
+ style={styles.buttonlast}
|
|
|
+ onPress={() => cancelInfo(info)}
|
|
|
+ >
|
|
|
+ {cancel}
|
|
|
+ </Button>
|
|
|
+ </Layout>
|
|
|
+ );
|
|
|
+
|
|
|
+ function setName(index, text) {}
|
|
|
+
|
|
|
+ function setAmount(index, text) {}
|
|
|
+
|
|
|
+ const editInfo = id => {
|
|
|
+ let _editList = [...editList];
|
|
|
+ _editList.push(id);
|
|
|
+ setEditList(_editList);
|
|
|
+ changeState(true);
|
|
|
+ };
|
|
|
+ const delInfo = (info, index) => {
|
|
|
+ showDialog({
|
|
|
+ bodyText: removeTips,
|
|
|
+ status: "danger",
|
|
|
+ cancelable: true,
|
|
|
+ confirmCallback: () => {
|
|
|
+ httpPost("/goodsSpecification/del/" + info.id)
|
|
|
+ .then(res => {
|
|
|
+ success(successText);
|
|
|
+ changeState(true);
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ warnning(e.error);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ });
|
|
|
+ };
|
|
|
+ //取消
|
|
|
+ const cancelInfo = info => {
|
|
|
+ let _editInfo = { ...allEditInfo };
|
|
|
+ _editInfo[info.id || "new"] = {};
|
|
|
+ setEdit(_editInfo);
|
|
|
+
|
|
|
+ if (info.id) {
|
|
|
+ let _editList = [...editList];
|
|
|
+ _editList = _editList.filter(item => {
|
|
|
+ return item != res.id;
|
|
|
+ });
|
|
|
+ setEditList(_editList);
|
|
|
+ } else if (!isNew) {
|
|
|
+ changeNew(false);
|
|
|
+ }
|
|
|
+ changeState(true);
|
|
|
+ };
|
|
|
+ //保存
|
|
|
+ const saveInfo = info => {
|
|
|
+ let _editInfo = { ...allEditInfo };
|
|
|
+ let name = "";
|
|
|
+ let amount = "";
|
|
|
+ if (_editInfo[info.id || "new"]) {
|
|
|
+ name = _editInfo[info.id || "new"]["name"];
|
|
|
+ amount = _editInfo[info.id || "new"]["amount"];
|
|
|
+ }
|
|
|
+ let data = {
|
|
|
+ ...info,
|
|
|
+ name: name,
|
|
|
+ amount: amount,
|
|
|
+ goodsId: goodsId,
|
|
|
+ };
|
|
|
+ if (!info.id && !isNew) {
|
|
|
+ changeNew(false);
|
|
|
+ }
|
|
|
+
|
|
|
+ addClassGoods(data).then(res => {
|
|
|
+ _editInfo["new"] = {};
|
|
|
+ _editInfo[res.id] = {};
|
|
|
+ setEdit(_editInfo);
|
|
|
+ let _editList = [...editList];
|
|
|
+ _editList = _editList.filter(item => {
|
|
|
+ return item != res.id;
|
|
|
+ });
|
|
|
+ setEditList(_editList);
|
|
|
+ changeState(true);
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ //
|
|
|
+ const addFullReduction = () => {
|
|
|
+ changeNew(true);
|
|
|
+ changeState(true);
|
|
|
+ };
|
|
|
+
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ <NavHeaderBar title='商品规格编辑' />
|
|
|
+
|
|
|
+ <Layout style={[styles.lay]}>
|
|
|
+ <ListComponent
|
|
|
+ getInfo={getList}
|
|
|
+ renderItem={renderItem}
|
|
|
+ style={styles.list}
|
|
|
+ separatorStyle={styles.separatorStyle}
|
|
|
+ showEmpty={true}
|
|
|
+ extraData={{ allEditInfo }}
|
|
|
+ startState={startState}
|
|
|
+ />
|
|
|
+ <ActionButton
|
|
|
+ buttonColor={theme["color-primary-500"]}
|
|
|
+ onPress={addFullReduction}
|
|
|
+ position='left'
|
|
|
+ />
|
|
|
+ </Layout>
|
|
|
+ </>
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+const PulsIcon = props => (
|
|
|
+ <Icon
|
|
|
+ {...props}
|
|
|
+ style={[props.style, { width: 33, height: 33 }]}
|
|
|
+ name='plus-circle'
|
|
|
+ />
|
|
|
+);
|
|
|
+const styles = StyleSheet.create({
|
|
|
+ lay: {
|
|
|
+ backgroundColor: "#fff",
|
|
|
+ flex: 1,
|
|
|
+ },
|
|
|
+ padBot: {
|
|
|
+ paddingBottom: 100,
|
|
|
+ },
|
|
|
+ list: {
|
|
|
+ paddingVertical: 10,
|
|
|
+ paddingHorizontal: 15,
|
|
|
+ backgroundColor: "transparent",
|
|
|
+ flex: 0,
|
|
|
+ },
|
|
|
+ item: {
|
|
|
+ flexDirection: "row",
|
|
|
+ alignItems: "center",
|
|
|
+ paddingVertical: 10,
|
|
|
+ },
|
|
|
+ input: {
|
|
|
+ marginHorizontal: 5,
|
|
|
+ minWidth: 49,
|
|
|
+ },
|
|
|
+ text: {
|
|
|
+ flex: 1,
|
|
|
+ },
|
|
|
+ flexRow: {
|
|
|
+ flexDirection: "row",
|
|
|
+ alignItems: "center",
|
|
|
+ },
|
|
|
+ buttonlast: {
|
|
|
+ marginLeft: 10,
|
|
|
+ },
|
|
|
+ button: {
|
|
|
+ alignSelf: "flex-start",
|
|
|
+ },
|
|
|
+ money: {
|
|
|
+ marginLeft: 10,
|
|
|
+ },
|
|
|
+});
|