Edit_Stamp.js 9.36 KB
import React, { Component } from 'react';
import {Image, View, Text, StyleSheet,ScrollView,TouchableOpacity,TextInput,Dimensions } from 'react-native';
import CouponeItem from '../CouponItem'
import StampItem from '../StampItem'
import Modal from 'react-native-modal'
import CheckBox from '@react-native-community/checkbox'
import * as Location from 'expo-location'
import Refresh from '../../assets/Refresh.svg'
import {post,put} from 'axios'
import { SERVER } from '../../common/servername';
export default class AddTab extends Component {
    static navigationOptions = {
        
        headerShown: false
        
    }
    state = {
        current:1,
        select:"업종",
        condition:"",
        re:"",
        conditionCount:[],
        reward:[],
        useCondition:"",
        storeId:0,
        store_select:"",
        store:[],
    }
    constructor(props) {
        super(props)
    }
    componentDidMount() {
        if(!this.props.navigation.state.params) {
            alert("잘못된 접근입니다.")
            this.props.navigation.goBack(null)
        }
        console.log("parent",this.props.navigation.state.params.parent.id)
        this.setState({
            storeId:this.props.navigation.state.params.parent.id,
            store_select:this.props.navigation.state.params.name,
            useCondition:this.props.navigation.state.params.useCondition,
            item:this.props.navigation.state.params.item,
            conditionCount:this.props.navigation.state.params.parent.StampConditions.map((e,i) => e.conditionCount),
            reward:this.props.navigation.state.params.parent.StampConditions.map((e,i) => e.reward)
        })
    }
    Add_condition = () => {
        if(!this.state.condition) return alert("조건을 입력해주세요.")
        if(!this.state.re) return alert("보상을 입력해주세요.")
        this.setState((prev) => ({
            conditionCount:[
                ...prev.conditionCount,
                this.state.condition
            ],
            reward:[
                ...prev.reward,
                this.state.re
            ]
        }))
        alert("추가되었습니다.")
    }
    onSubmit = () => {
        if(!this.state.conditionCount) return alert("조건을 추가해주세요.")
        put(`http://${SERVER}/stamps/${this.state.storeId}`,{StampId:this.state.storeId,conditionCount:this.state.conditionCount,reward:this.state.reward,useCondition:this.state.useCondition}).then(res => {
            console.log(res.data)
            if(res.data.success) {
                alert("스탬프가 수정되었습니다.")
                this.props.navigation.goBack(null)

            }
        })
    }
    render() {
        return (
            <View style={{marginBottom:100,backgroundColor:"white",height:"100%",width:"100%"}}>
                <View style={{width:"100%",flexDirection:"row",paddingTop:16,paddingBottom:16,paddingLeft:16,backgroundColor:"#615F5F"}}>
                    <TouchableOpacity onPress={() => this.props.navigation.goBack(null)}>
                        <Image source={require('../../assets/back.png')}/>
                    </TouchableOpacity>
                    <View style={{flexDirection:"row",justifyContent:"space-between"}}>
                        <TouchableOpacity onPress={() => this.props.navigation.replace("Add_Store")}>
                        <Text style={{color:"#BDBCBC",fontSize:16,marginLeft:16}}>
                            스토어 등록
                        </Text>
                        </TouchableOpacity>
                        <TouchableOpacity>
                        <Text style={{color:"#BDBCBC",fontSize:16,marginLeft:16}}>
                            쿠폰발행
                        </Text>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => this.props.navigation.replace("Add_Stamp")}>
                        <Text style={{color:"white",fontSize:16,marginLeft:16,borderBottomWidth:1,borderBottomColor:"white"}}>
                            스탬프 발행
                        </Text>
                        </TouchableOpacity>
                        <TouchableOpacity  onPress={() => this.props.navigation.replace("Add_Menu")} >
                        <Text style={{color:"#BDBCBC",fontSize:16,marginLeft:16}}>
                            메뉴 등록
                        </Text>
                        </TouchableOpacity>
                    </View>
                </View>
                <ScrollView style={{paddingLeft:16,paddingRight:16,paddingTop:16}}>
                    <Text style={{color:"#615F5F",fontSize:15,fontWeight:"bold",marginBottom:8}}>
                        스토어 (상점) 선택
                    </Text>
                    <View style={{ borderWidth:1,borderColor:"#615F5F",paddingTop:10,paddingBottom:9,marginBottom:17}}>
                        <Text style={{fontSize:15,color:"#615F5F",fontWeight:"bold",textAlign:"center"}}>
                            {this.state.store_select}
                        </Text>
                    </View>
                    <View style={{flexDirection:"row",marginBottom:17}}>
                        <Text style={{alignSelf:"center",color:"#615F5F",fontSize:15,fontWeight:"bold",marginBottom:8}}>
                            스탬프
                        </Text>
                        <TextInput value={this.state.condition} onChangeText={e => this.setState({condition:e})} 
                        style={{textAlign:"center",width:"100%",
                        borderColor:"#615F5F",borderWidth:1,
                        width:"35%",paddingTop:10.5,paddingBottom:9.5,
                        paddingLeft:8,marginLeft:16,marginRight:16}} 
                        placeholder=""/>
                        <Text style={{alignSelf:"center",color:"#615F5F",fontSize:15,fontWeight:"bold",marginBottom:8}}>
                             모으면
                        </Text>

                    </View>
                    
                    <View style={{flexDirection:"row",marginBottom:17}}>
                        <TextInput placeholder="ex ) 아메리카노 한잔 무료" value={this.state.re} onChangeText={e => this.setState({re:e})} 
                        style={{textAlign:"center",width:"100%",
                        borderColor:"#615F5F",borderWidth:1,
                        width:"100%",paddingTop:10.5,paddingBottom:9.5,
                        paddingLeft:8}} />
                    </View>
                    
                    {this.state.conditionCount.map((e,i) => {
                        return (
                            <Text style={{textAlign:"center"}}>{"스탬프 "+e+"개 모으면 "+this.state.reward[i]}</Text>
                        )
                    })}
                    <View style={{marginBottom:17}}>
                        <Text style={{color:"#615F5F",borderBottomColor:"#615F5F",alignSelf:"center",borderBottomWidth:1,fontSize:15,fontWeight:"bold",marginBottom:8}}>
                            조건삭제
                        </Text>
                    </View>
                    <TouchableOpacity onPress={() => this.Add_condition()} style={{paddingTop:10.4,paddingBottom:8.6,paddingLeft:20,paddingRight:20,alignSelf:"center",borderWidth:5,borderColor:"#FFD63A",marginBottom:16}}>
                        <Text style={{fontWeight:"bold",fontSize:15,textAlign:"center"}}>
                            + 조건추가
                        </Text>
                </TouchableOpacity>
                    <TextInput value={this.state.useCondition} 
                    onChangeText={e => this.setState({useCondition:e})}  
                    style={{borderColor:"#615F5F",marginTop:100,borderWidth:1,width:"100%",height:100,textAlignVertical:"top",paddingTop:10.5,paddingBottom:9.5,paddingLeft:8,marginBottom:19}} 
                    placeholder="이용조건"/>
                    {/*<View style={{flexDirection:"row",marginBottom:29}}>
                        <View style={{justifyContent:"center"}}>
                            <Text style={{alignSelf:"center",color:"#615F5F",fontSize:15,fontWeight:"bold",marginBottom:8}}>
                                발행 수량
                            </Text>
                        </View>
                        <TextInput value={this.state.name} onChangeText={e => this.setState({name:e})} 
                        style={{textAlign:"left",paddingRight:35,fontSize:15,fontWeight:"bold",
                        width:"80%",borderColor:"#615F5F",borderWidth:1,
                        paddingTop:7,paddingBottom:6,marginLeft:"auto",
                        paddingLeft:8}} />
                        <Text style={{position:"absolute",right:16,alignSelf:"center",color:"#615F5F",fontSize:15,fontWeight:"bold"}}>

                        </Text>
                    </View>
                */}
                 
                </ScrollView>
                
                <TouchableOpacity onPress={() => this.onSubmit()} 
                style={{backgroundColor:"#f4cd37",paddingTop:21,paddingBottom:19}}>
                    <Text style={{textAlign:"center",fontSize:18,color:"black",fontWeight:"bold"}}>
                        수정 완료
                    </Text>
                </TouchableOpacity>
            
            </View>
        );
    }
}
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
});