Store.js 7.29 KB
import React, { Component } from 'react';
import {Image, View, Text, StyleSheet,ScrollView,TouchableOpacity } from 'react-native';

import QRCode from 'react-native-qrcode-svg';
import Setting from '../../assets/setting.svg'
import {get,all} from 'axios'
import { SERVER } from '../../common/servername';
import AsyncStorage from '@react-native-community/async-storage';
import moment from 'moment'
import Loading from '../Pages/Loading'
export default class AddTab extends Component {
    static navigationOptions = {
        
        headerShown: false
        
    }
    state = {
        current:1,
        likes:0,
        reviews:0,
        store:[],
        loading:true
    }
    constructor(props) {
        super(props)
    }
    componentDidMount() {
        AsyncStorage.getItem("user",(err,res) => {
            if(res) {
                get(`http://${SERVER}/stores/managerRead/${JSON.parse(res).id}`).then(res => {
                    this.setState({
                        store:res.data.data
                    })
                    all(res.data.data.map((e,i) => get(`http://${SERVER}/reviews/${e.id}`))).then(ress => {
                        this.setState({
                            reviews:ress.reduce(function (accumulator, currentValue) {
                                return accumulator + currentValue.data.data.length;
                            },0)
                        })
                    })
                    all(res.data.data.map((e,i) => get(`http://${SERVER}/likes/${e.id}`))).then(ress => {
                        this.setState({
                            likes:ress.reduce(function (accumulator, currentValue) {
                                return accumulator + currentValue.data.data.length;
                            },0),
                            loading:false
                        })
                        
                    })
                })
            }
        })
    }
    render() {
        return (
            <View style={{width:"100%",height:"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>
                    <Text style={{color:"white",fontSize:16,marginLeft:16}}>
                        스토어
                    </Text>
                </View>
                {this.state.loading?<Loading/>:
                <ScrollView style={{backgroundColor:"white"}}>
                    <View style={{
                        width:"100%",
                    shadowColor: "#000",
                    shadowOffset: {
                        width: 0,
                        height: 2,
                    },
                    backgroundColor:"white",
                    shadowOpacity: 0.25,
                    shadowRadius: 3.84,
                    elevation: 5,}}>
                    <View style={{flex:1,flexDirection:"row", }}>
                        <TouchableOpacity onPress={() => this.props.navigation.navigate("Store_detail",{current:1})} style={{width:"50%",paddingTop:8.9, paddingBottom:11.1,}}>
                            <Text style={[{textAlign:"center",borderRightColor:"#615F5F",borderRightWidth:1,color:"#615F5F"}]}>
                                찜한 고객 리스트({this.state.likes})
                            </Text>
                        </TouchableOpacity>
                        <TouchableOpacity  onPress={() => this.props.navigation.navigate("Store_detail",{current:2})}  style={{width:"50%",paddingTop:8.9, paddingBottom:11.1}}>
                            <Text style={[{textAlign:"center",color:"#615F5F"}]}>
                                리뷰 고객 리스트({this.state.reviews})
                            </Text>
                        </TouchableOpacity>
                    </View>
                    </View>
                    {this.state.store.map((e,i) => {
                           return (
                               
                    <View style={{paddingTop:16,marginLeft:16,marginRight:16,paddingBottom:16,borderBottomColor:"#979292",borderBottomWidth:1}}>

                    <View style={{flexDirection:"row"}}>
                        <Image style={{width:127,height:74,alignSelf:"center"}} resizeMode="stretch" source={require('../../assets/img.png')}/>
                        <View style={{position:"absolute",width:127,height:15,backgroundColor:"rgba(0,0,0,0.5)",alignSelf:"center"}}>
                            <Text style={{color:"#FFD63A",fontSize:8,fontWeight:"bold",textAlign:"center"}}>
                                {e.status}
                            </Text>
                        </View>
                        <View style={{paddingLeft:8}}>
                            <View style={{flexDirection:"row"}}>
                                <Text style={{fontSize:16,color:"black",lineHeight:20}}>
                                    {e.name}
                                </Text>
                                <TouchableOpacity style={{alignSelf:"center"}}>
                                    <Setting style={{alignSelf:"center",marginLeft:5}}/>
                                </TouchableOpacity>
                            </View>
                            {e.status?
                            <View style={{marginTop:8,alignSelf:"flex-start",paddingLeft:12,paddingRight:12,borderColor:"#FFD63A",borderWidth:1}}>
                                <Text style={{fontSize:12,color:"#FFD63A",lineHeight:15}}>
                                    {e.status}
                                </Text>
                            </View>:undefined}
                            <View style={{marginTop:8}}>
                                <Text style={{color:"#615F5F",fontSize:10,lineHeight:12}}>
                                    등록일: {moment( e.createdAt).format("YYYY. MM. DD")}
                                </Text>
                                <Text style={{color:"#615F5F",fontSize:10,lineHeight:12}}>
                                    최종수정일: {moment( e.updatedAt).format("YYYY. MM. DD")}
                                </Text>
                            </View>
                        </View>
                        <View style={{alignSelf:"center",marginLeft:"auto"}}>
                        <QRCode size={50}
                            value="https://www.naver.com"
                        />
                        </View>
                    </View>
                </View>
                           ) 
                        })}
                </ScrollView>}
                
            <View style={{zIndex:10,position:"absolute",bottom:0,width:"100%"}}>
                <TouchableOpacity onPress={() => this.props.navigation.navigate("Add_Store")} style={{backgroundColor:"#f4cd37",padding:20}}>
                    <Text style={{textAlign:"center",fontSize:15,fontWeight:"bold",color:"black"}}>
                        스토어(상점) 추가 등록 +
                    </Text>
                </TouchableOpacity>
            </View>
            </View>
        );
    }
}
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
});