|
@@ -1,10 +1,415 @@
|
|
|
import React from 'react';
|
|
|
+import { Tabs, Form, Row, Col, Input, InputNumber, Button, Upload, Icon } from 'antd';
|
|
|
import './index.less';
|
|
|
import Page from '@src/containers/Page';
|
|
|
import Block from '@src/components/Block';
|
|
|
+import { flattenObject } from '@src/services/Tools';
|
|
|
+import { asyncSMessage } from '@src/services/AsyncTools';
|
|
|
+import { System } from '../../../stores/system';
|
|
|
|
|
|
export default class extends Page {
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
+ this.state.tab = 'qx_cat';
|
|
|
+ this.vipList = ['1个月', '3个月', '6个月'];
|
|
|
+ }
|
|
|
+
|
|
|
+ initData() {
|
|
|
+ this.refresh(this.state.tab);
|
|
|
+ }
|
|
|
+
|
|
|
+ refresh(tab) {
|
|
|
+ if (tab === 'qx_cat') {
|
|
|
+ return this.refreshQxCat();
|
|
|
+ }
|
|
|
+ if (tab === 'textbook') {
|
|
|
+ return this.refreshTextbook();
|
|
|
+ }
|
|
|
+ if (tab === 'vip') {
|
|
|
+ return this.refreshVip();
|
|
|
+ }
|
|
|
+ return Promise.reject();
|
|
|
+ }
|
|
|
+
|
|
|
+ refreshQxCat() {
|
|
|
+ return System.getServiceQxCat().then(result => {
|
|
|
+ this.setState({ qx_cat: result || {} });
|
|
|
+ const { form } = this.props;
|
|
|
+ form.setFieldsValue(flattenObject(result, 'sentence'));
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ refreshTextbook() {
|
|
|
+ return System.getServiceTextbook().then(result => {
|
|
|
+ this.setState({ textbook: result || {} });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ refreshVip() {
|
|
|
+ return System.getServiceVip().then(result => {
|
|
|
+ this.setState({ vip: result || {} });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ changeMapValue(field, index, key, value) {
|
|
|
+ const data = this.state[field] || {};
|
|
|
+ data[index] = data[index] || {};
|
|
|
+ data[index][key] = value;
|
|
|
+ this.setState({ [field]: data });
|
|
|
+ }
|
|
|
+
|
|
|
+ changeValue(field, key, value) {
|
|
|
+ const data = this.state[field] || {};
|
|
|
+ data[key] = value;
|
|
|
+ this.setState({ [field]: data });
|
|
|
+ }
|
|
|
+
|
|
|
+ submit(tab) {
|
|
|
+ let handler;
|
|
|
+ if (tab === 'qx_cat') {
|
|
|
+ handler = this.submitQxCat();
|
|
|
+ }
|
|
|
+ if (tab === 'textbook') {
|
|
|
+ handler = this.submitTextbook();
|
|
|
+ }
|
|
|
+ if (tab === 'vip') {
|
|
|
+ handler = this.submitVip();
|
|
|
+ }
|
|
|
+ handler.then(() => {
|
|
|
+ asyncSMessage('保存成功');
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ submitQxCat() {
|
|
|
+ const { qx_cat } = this.state;
|
|
|
+ return System.setServiceQxCat(qx_cat);
|
|
|
+ }
|
|
|
+
|
|
|
+ submitTextbook() {
|
|
|
+ const { textbook } = this.state;
|
|
|
+ return System.setServiceTextbook(textbook);
|
|
|
+ }
|
|
|
+
|
|
|
+ submitVip() {
|
|
|
+ const { vip } = this.state;
|
|
|
+ return System.setServiceVip(vip);
|
|
|
+ }
|
|
|
+
|
|
|
+ renderQxCat() {
|
|
|
+ const { getFieldDecorator, setFieldsValue, getFieldValue } = this.props.form;
|
|
|
+ const image = getFieldValue('qx_cat.image') || null;
|
|
|
+ return <Form>
|
|
|
+ <Row>
|
|
|
+ <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label='商品价格'>
|
|
|
+ {getFieldDecorator('qx_cat[0].price', {
|
|
|
+ rules: [
|
|
|
+ { required: true, message: '输入千行Cat价格' },
|
|
|
+ ],
|
|
|
+ })(
|
|
|
+ <InputNumber placeholder='请输入千行Cat价格' onChange={(value) => {
|
|
|
+ this.changeMapValue('qx_cat', 0, 'price', value);
|
|
|
+ }} style={{ width: '200px' }} />,
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label='服务名称'>
|
|
|
+ {getFieldDecorator('qx_cat[0].title', {
|
|
|
+ rules: [
|
|
|
+ { required: true, message: '输入千行Cat名称' },
|
|
|
+ ],
|
|
|
+ })(
|
|
|
+ <Input placeholder='请输入千行Cat名称' onChange={(value) => {
|
|
|
+ this.changeMapValue('qx_cat', 0, 'title', value);
|
|
|
+ }} style={{ width: '200px' }} />,
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label='服务简介'>
|
|
|
+ {getFieldDecorator('qx_cat[0].description', {
|
|
|
+ rules: [
|
|
|
+ { required: true, message: '输入千行Cat服务简介' },
|
|
|
+ ],
|
|
|
+ })(
|
|
|
+ <Input placeholder='请输入千行Cat服务简介' onChange={(value) => {
|
|
|
+ this.changeMapValue('qx_cat', 0, 'description', value);
|
|
|
+ }} style={{ width: '200px' }} />,
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label='有效期说明'>
|
|
|
+ {getFieldDecorator('qx_cat[0].expire_info', {
|
|
|
+ rules: [
|
|
|
+ { required: true, message: '输入千行Cat有效期说明' },
|
|
|
+ ],
|
|
|
+ })(
|
|
|
+ <Input placeholder='请输入千行Cat有效期说明' onChange={(value) => {
|
|
|
+ this.changeMapValue('qx_cat', 0, 'expire_info', value);
|
|
|
+ }} style={{ width: '200px' }} />,
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label='退款政策'>
|
|
|
+ {getFieldDecorator('qx_cat[0].refund_policy', {
|
|
|
+ rules: [
|
|
|
+ { required: true, message: '输入千行Cat退款政策' },
|
|
|
+ ],
|
|
|
+ })(
|
|
|
+ <Input placeholder='请输入千行Cat退款政策' onChange={(value) => {
|
|
|
+ this.changeMapValue('qx_cat', 0, 'refund_policy', value);
|
|
|
+ }} style={{ width: '200px' }} />,
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label='版权说明'>
|
|
|
+ {getFieldDecorator('qx_cat[0].copyright_notes', {
|
|
|
+ rules: [
|
|
|
+ { required: true, message: '输入千行Cat版权说明' },
|
|
|
+ ],
|
|
|
+ })(
|
|
|
+ <Input placeholder='请输入千行Cat版权说明' onChange={(value) => {
|
|
|
+ this.changeMapValue('qx_cat', 0, 'copyright_notes', value);
|
|
|
+ }} style={{ width: '200px' }} />,
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+
|
|
|
+ <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label='商品图片'>
|
|
|
+ {getFieldDecorator('qx_cat.image', {
|
|
|
+ rules: [
|
|
|
+ { required: true, message: '上传图片' },
|
|
|
+ ],
|
|
|
+ })(
|
|
|
+ <Upload
|
|
|
+ listType="picture-card"
|
|
|
+ showUploadList={false}
|
|
|
+ beforeUpload={(file) => System.uploadImage(file).then((result) => {
|
|
|
+ setFieldsValue({ 'qx_cat.image': result });
|
|
|
+ })}
|
|
|
+ >
|
|
|
+ {image ? <img src={image} alt="avatar" /> : <div>
|
|
|
+ <Icon type={this.state.loading ? 'loading' : 'plus'} />
|
|
|
+ <div className="ant-upload-text">Upload</div>
|
|
|
+ </div>}
|
|
|
+ </Upload>,
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ </Row>
|
|
|
+ </Form>;
|
|
|
+ }
|
|
|
+
|
|
|
+ renderTextbook() {
|
|
|
+ const { getFieldDecorator, setFieldsValue, getFieldValue } = this.props.form;
|
|
|
+ const image = getFieldValue('textbook.image') || null;
|
|
|
+ return <Form>
|
|
|
+ <Row>
|
|
|
+ <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label='商品图片'>
|
|
|
+ {getFieldDecorator('textbook.image', {
|
|
|
+ rules: [
|
|
|
+ { required: true, message: '上传图片' },
|
|
|
+ ],
|
|
|
+ })(
|
|
|
+ <Upload
|
|
|
+ listType="picture-card"
|
|
|
+ showUploadList={false}
|
|
|
+ beforeUpload={(file) => System.uploadImage(file).then((result) => {
|
|
|
+ setFieldsValue({ 'textbook.image': result });
|
|
|
+ })}
|
|
|
+ >
|
|
|
+ {image ? <img src={image} alt="avatar" /> : <div>
|
|
|
+ <Icon type={this.state.loading ? 'loading' : 'plus'} />
|
|
|
+ <div className="ant-upload-text">Upload</div>
|
|
|
+ </div>}
|
|
|
+ </Upload>,
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label='商品价格'>
|
|
|
+ {getFieldDecorator('textbook[0].price', {
|
|
|
+ rules: [
|
|
|
+ { required: true, message: '输入数学机经价格' },
|
|
|
+ ],
|
|
|
+ })(
|
|
|
+ <InputNumber placeholder='请输入数学机经价格' onChange={(value) => {
|
|
|
+ this.changeMapValue('textbook', 0, 'price', value);
|
|
|
+ }} style={{ width: '200px' }} />,
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label='服务名称'>
|
|
|
+ {getFieldDecorator('textbook[0].title', {
|
|
|
+ rules: [
|
|
|
+ { required: true, message: '输入数学机经名称' },
|
|
|
+ ],
|
|
|
+ })(
|
|
|
+ <Input placeholder='请输入数学机经名称' onChange={(value) => {
|
|
|
+ this.changeMapValue('textbook', 0, 'title', value);
|
|
|
+ }} style={{ width: '200px' }} />,
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label='服务简介'>
|
|
|
+ {getFieldDecorator('textbook[0].description', {
|
|
|
+ rules: [
|
|
|
+ { required: true, message: '输入数学机经服务简介' },
|
|
|
+ ],
|
|
|
+ })(
|
|
|
+ <Input placeholder='请输入数学机经服务简介' onChange={(value) => {
|
|
|
+ this.changeMapValue('textbook', 0, 'description', value);
|
|
|
+ }} style={{ width: '200px' }} />,
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label='有效期说明'>
|
|
|
+ {getFieldDecorator('textbook[0].expire_info', {
|
|
|
+ rules: [
|
|
|
+ { required: true, message: '输入数学机经有效期说明' },
|
|
|
+ ],
|
|
|
+ })(
|
|
|
+ <Input placeholder='请输入数学机经有效期说明' onChange={(value) => {
|
|
|
+ this.changeMapValue('textbook', 0, 'expire_info', value);
|
|
|
+ }} style={{ width: '200px' }} />,
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label='退款政策'>
|
|
|
+ {getFieldDecorator('textbook[0].refund_policy', {
|
|
|
+ rules: [
|
|
|
+ { required: true, message: '输入数学机经退款政策' },
|
|
|
+ ],
|
|
|
+ })(
|
|
|
+ <Input placeholder='请输入数学机经退款政策' onChange={(value) => {
|
|
|
+ this.changeMapValue('textbook', 0, 'refund_policy', value);
|
|
|
+ }} style={{ width: '200px' }} />,
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label='版权说明'>
|
|
|
+ {getFieldDecorator('textbook[0].copyright_notes', {
|
|
|
+ rules: [
|
|
|
+ { required: true, message: '输入数学机经版权说明' },
|
|
|
+ ],
|
|
|
+ })(
|
|
|
+ <Input placeholder='请输入数学机经版权说明' onChange={(value) => {
|
|
|
+ this.changeMapValue('textbook', 0, 'copyright_notes', value);
|
|
|
+ }} style={{ width: '200px' }} />,
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ </Row>
|
|
|
+ </Form>;
|
|
|
+ }
|
|
|
+
|
|
|
+ renderVip() {
|
|
|
+ const { getFieldDecorator, setFieldsValue, getFieldValue } = this.props.form;
|
|
|
+ const image = getFieldValue('vip.image') || null;
|
|
|
+ return <Form>
|
|
|
+ <Form.Item labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} label='商品图片'>
|
|
|
+ {getFieldDecorator('vip.image', {
|
|
|
+ rules: [
|
|
|
+ { required: true, message: '上传图片' },
|
|
|
+ ],
|
|
|
+ })(
|
|
|
+ <Upload
|
|
|
+ listType="picture-card"
|
|
|
+ showUploadList={false}
|
|
|
+ beforeUpload={(file) => System.uploadImage(file).then((result) => {
|
|
|
+ setFieldsValue({ 'vip.image': result });
|
|
|
+ })}
|
|
|
+ >
|
|
|
+ {image ? <img src={image} alt="avatar" /> : <div>
|
|
|
+ <Icon type={this.state.loading ? 'loading' : 'plus'} />
|
|
|
+ <div className="ant-upload-text">Upload</div>
|
|
|
+ </div>}
|
|
|
+ </Upload>,
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ <Row>
|
|
|
+ {this.vipList.map((row, index) => {
|
|
|
+ return <Col span={12}>
|
|
|
+ <h1>{row}</h1>
|
|
|
+ <Form.Item labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} label='商品价格'>
|
|
|
+ {getFieldDecorator(`vip[${index}].price`, {
|
|
|
+ rules: [
|
|
|
+ { required: true, message: '输入价格' },
|
|
|
+ ],
|
|
|
+ })(
|
|
|
+ <InputNumber placeholder={'输入价格'} onChange={(value) => {
|
|
|
+ this.changeMapValue('vip', index, 'price', value);
|
|
|
+ }} style={{ width: '200px' }} />,
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} label='服务名称'>
|
|
|
+ {getFieldDecorator(`vip[${index}].title`, {
|
|
|
+ rules: [
|
|
|
+ { required: true, message: '输入名称' },
|
|
|
+ ],
|
|
|
+ })(
|
|
|
+ <Input placeholder={'输入名称'} onChange={(value) => {
|
|
|
+ this.changeMapValue('vip', index, 'title', value);
|
|
|
+ }} style={{ width: '200px' }} />,
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} label='服务简介'>
|
|
|
+ {getFieldDecorator(`vip[${index}].description`, {
|
|
|
+ rules: [
|
|
|
+ { required: true, message: '输入服务简介' },
|
|
|
+ ],
|
|
|
+ })(
|
|
|
+ <Input placeholder='请输入服务简介' onChange={(value) => {
|
|
|
+ this.changeMapValue('vip', index, 'description', value);
|
|
|
+ }} style={{ width: '200px' }} />,
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} label='有效期说明'>
|
|
|
+ {getFieldDecorator(`vip[${index}].expire_info`, {
|
|
|
+ rules: [
|
|
|
+ { required: true, message: '输入有效期说明' },
|
|
|
+ ],
|
|
|
+ })(
|
|
|
+ <Input placeholder='请输入有效期说明' onChange={(value) => {
|
|
|
+ this.changeMapValue('vip', index, 'expire_info', value);
|
|
|
+ }} style={{ width: '200px' }} />,
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} label='退款政策'>
|
|
|
+ {getFieldDecorator(`vip[${index}].refund_policy`, {
|
|
|
+ rules: [
|
|
|
+ { required: true, message: '输入退款政策' },
|
|
|
+ ],
|
|
|
+ })(
|
|
|
+ <Input placeholder='请输入退款政策' onChange={(value) => {
|
|
|
+ this.changeMapValue('vip', index, 'refund_policy', value);
|
|
|
+ }} style={{ width: '200px' }} />,
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} label='版权说明'>
|
|
|
+ {getFieldDecorator(`vip[${index}].copyright_notes`, {
|
|
|
+ rules: [
|
|
|
+ { required: true, message: '输入版权说明' },
|
|
|
+ ],
|
|
|
+ })(
|
|
|
+ <Input placeholder='请输入版权说明' onChange={(value) => {
|
|
|
+ this.changeMapValue('vip', index, 'copyright_notes', value);
|
|
|
+ }} style={{ width: '200px' }} />,
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ </Col>;
|
|
|
+ })}
|
|
|
+
|
|
|
+ </Row>
|
|
|
+ </Form>;
|
|
|
+ }
|
|
|
+
|
|
|
renderView() {
|
|
|
- return <Block flex />;
|
|
|
+ const { tab } = this.state;
|
|
|
+ return <Block><Tabs activeKey={tab} onChange={(value) => {
|
|
|
+ this.setState({ tab: value, selectedKeys: [], checkedKeys: [] });
|
|
|
+ this.refresh(value);
|
|
|
+ }}>
|
|
|
+ <Tabs.TabPane tab="千行Cat" key="qx_cat">
|
|
|
+ {this.renderQxCat()}
|
|
|
+ </Tabs.TabPane>
|
|
|
+ <Tabs.TabPane tab="数学机经" key="textbook">
|
|
|
+ {this.renderTextbook()}
|
|
|
+ </Tabs.TabPane>
|
|
|
+ <Tabs.TabPane tab="Vip" key="vip">
|
|
|
+ {this.renderVip()}
|
|
|
+ </Tabs.TabPane>
|
|
|
+ </Tabs>
|
|
|
+ <Row type="flex" justify="center">
|
|
|
+ <Col>
|
|
|
+ <Button type="primary" onClick={() => {
|
|
|
+ this.submit(tab);
|
|
|
+ }}>保存</Button>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </Block>;
|
|
|
}
|
|
|
}
|