bukopin-redemption-client-r.../src/common/pages/Vouchers/index.js

109 lines
2.9 KiB
JavaScript

import React from 'react';
import {inject, observer} from 'mobx-react';
import {Link} from 'react-router';
import {Affix, Card, Slider, Select, Col, Row } from 'antd';
import {Tab, Tabs} from 'material-ui';
import './style.scss';
import {ItemCard} from "./ItemCard";
import ModalVouchersComponent from "./Modal";
import EmptyComponent from '../EmptyComponent';
const Option = Select.Option;
@inject('appstate')
@observer
export default class VouchersComponent extends React.Component {
constructor(props) {
super(props);
this.props = props;
this.state = {
isOpened: false,
data: {
name: '',
background_color_1:'',
background_color_2:'',
images: {
logo:''
},
description: '',
additional_data: {
information:''
},
// option: [
// {
// value: '',
// cost: ''
// },
// ],
sku: [
{
id:'',
name: '',
price: ''
},
]
},
};
this.defaultState = Object.assign({}, this.state);
this.vouchersStore = props.appstate.vouchers;
}
componentDidMount() {
this.vouchersStore.getList();
console.log('res list component',this.vouchersStore.getList())
}
render() {
return (
<div className="voucher">
<div className="row">
<div className="col l12 m12 s12 padding">
<p className={'pageTitle'}>
Voucher & Gift Card
</p>
<Row gutter={10}>
{
( this.vouchersStore.list.length > 0) ?
this.vouchersStore.list.map((item, index) => {
return (<Col onClick={() => this.setState({isOpened: true, data: item})} key={index} span={6}>
<ItemCard data={item}/>
</Col>)
})
: (
<EmptyComponent type="default4" header="" content="There is no voucher in sight"/>
)
}
{/* {
(data.length > 0) ?
data.map((item, index) => {
return (<Col onClick={() => this.setState({isOpened: true, data: item})} key={index} span={6}>
<ItemCard data={item}/>
</Col>)
})
: (
<EmptyComponent type="default4" header="" content="There is no voucher in sight"/>
)
} */}
</Row>
{this.state.isOpened && (
<ModalVouchersComponent
title={this.state.data.name+' Vouchers'}
data={this.state.data}
isVisible={this.state.isOpened}
onOk={() => this.setState({isOpened: false})}
onCancel={() => this.setState({isOpened: false})}
/>
)}
</div>
</div>
</div>
)
}
}