|
@@ -0,0 +1,286 @@
|
|
|
+import React from 'react';
|
|
|
+import { Form, Row, Col, Input, Button, Icon } from 'antd';
|
|
|
+import './index.less';
|
|
|
+import Page from '@src/containers/Page';
|
|
|
+import Block from '@src/components/Block';
|
|
|
+import { flattenObject, formatFormError } from '@src/services/Tools';
|
|
|
+import { asyncSMessage } from '@src/services/AsyncTools';
|
|
|
+import { System } from '../../../stores/system';
|
|
|
+
|
|
|
+export default class extends Page {
|
|
|
+ initData() {
|
|
|
+ System.getCoursePromote().then(result => {
|
|
|
+ const { form } = this.props;
|
|
|
+ (result.video_list || []).forEach((row, index) => {
|
|
|
+ form.getFieldDecorator(`video_list[${index}].number`);
|
|
|
+ form.getFieldDecorator(`video_list[${index}].percent`);
|
|
|
+ });
|
|
|
+ (result['1v1_list'] || []).forEach((row, index) => {
|
|
|
+ form.getFieldDecorator(`1v1_list[${index}].number`);
|
|
|
+ form.getFieldDecorator(`1v1_list[${index}].percent`);
|
|
|
+ });
|
|
|
+ (result.gifts || []).forEach((row, index) => {
|
|
|
+ form.getFieldDecorator(`gifts[${index}].money`);
|
|
|
+ form.getFieldDecorator(`gifts[${index}].hour`);
|
|
|
+ });
|
|
|
+ form.setFieldsValue(flattenObject(result));
|
|
|
+ this.setState({ load: true, data: result });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ addLength(field, info) {
|
|
|
+ let { data } = this.state;
|
|
|
+ data = data || {};
|
|
|
+ data[field] = data[field] || [];
|
|
|
+ data[field].push(info);
|
|
|
+ this.setState({ data });
|
|
|
+ }
|
|
|
+
|
|
|
+ deleteLength(field, start, length) {
|
|
|
+ let { data } = this.state;
|
|
|
+ data = data || {};
|
|
|
+ data[field] = data[field] || [];
|
|
|
+ data[field].splice(start, length);
|
|
|
+ this.setState({ data });
|
|
|
+ }
|
|
|
+
|
|
|
+ changeMapValue(field, index, key, value) {
|
|
|
+ const { data } = this.state;
|
|
|
+ data[field] = data[field] || {};
|
|
|
+ data[field][index] = data[field][index] || {};
|
|
|
+ data[field][index][key] = value;
|
|
|
+ this.setState({ data });
|
|
|
+ }
|
|
|
+
|
|
|
+ changeValue(field, key, value) {
|
|
|
+ const { data } = this.state;
|
|
|
+ data[field] = data[field] || {};
|
|
|
+ data[field][key] = value;
|
|
|
+ this.setState({ data });
|
|
|
+ }
|
|
|
+
|
|
|
+ submit() {
|
|
|
+ const { form } = this.props;
|
|
|
+ form.validateFields((err) => {
|
|
|
+ if (!err) {
|
|
|
+ const data = form.getFieldsValue();
|
|
|
+ data.video_list = (data.video_list || []).map(row => {
|
|
|
+ return { number: Number(row.number), percent: Number(row.percent) };
|
|
|
+ });
|
|
|
+ data['1v1_list'] = (data['1v1_list'] || []).map(row => {
|
|
|
+ return { number: Number(row.number), percent: Number(row.percent) };
|
|
|
+ });
|
|
|
+ data.gifts = (data.gifts || []).map(row => {
|
|
|
+ return { money: Number(row.money), hour: Number(row.hour) };
|
|
|
+ });
|
|
|
+ System.setCoursePromote(data)
|
|
|
+ .then(() => {
|
|
|
+ this.setState(data);
|
|
|
+ asyncSMessage('保存成功');
|
|
|
+ }).catch((e) => {
|
|
|
+ form.setFields(formatFormError(data, e.result));
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ renderVideo() {
|
|
|
+ const { getFieldDecorator } = this.props.form;
|
|
|
+ const { data } = this.state;
|
|
|
+ const videos = data.video_list || [];
|
|
|
+ return <Block>
|
|
|
+ <h1>视频课折扣</h1>
|
|
|
+ <Form>
|
|
|
+ <Form.Item label='按购买课程数量计算' />
|
|
|
+ {videos.map((row, index) => {
|
|
|
+ return <Row>
|
|
|
+ <Col span={2}>
|
|
|
+ <Form.Item>
|
|
|
+ {getFieldDecorator(`video_list[${index}].number`, {
|
|
|
+ rules: [
|
|
|
+ { required: true, message: '输入数量' },
|
|
|
+ ],
|
|
|
+ })(
|
|
|
+ <Input placeholder={'输入数量'} onChange={(value) => {
|
|
|
+ this.changeMapValue('video_list', index, 'number', value);
|
|
|
+ }} />,
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ </Col>
|
|
|
+ <Col span={1}>
|
|
|
+ 门
|
|
|
+ </Col>
|
|
|
+ <Col span={2}>
|
|
|
+ <Form.Item>
|
|
|
+ {getFieldDecorator(`video_list[${index}].percent`, {
|
|
|
+ rules: [
|
|
|
+ { required: true, message: '输入百分比' },
|
|
|
+ ],
|
|
|
+ })(
|
|
|
+ <Input placeholder={'输入百分比'} onChange={(value) => {
|
|
|
+ this.changeMapValue('video_list', index, 'percent', value);
|
|
|
+ }} />,
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ </Col>
|
|
|
+ <Col span={1}>
|
|
|
+ %
|
|
|
+ </Col>
|
|
|
+ <Col span={1} onClick={() => {
|
|
|
+ this.deleteLength('video_list', index, 1);
|
|
|
+ }}>
|
|
|
+ <Button><Icon type="minus" /></Button>
|
|
|
+ </Col>
|
|
|
+ </Row>;
|
|
|
+ })}
|
|
|
+ <Button onClick={() => {
|
|
|
+ this.addLength('video_list', { number: 0, precent: 0 });
|
|
|
+ }}><Icon type={'plus'} /></Button>
|
|
|
+ <Form.Item labelCol={{ span: 3 }} wrapperCol={{ span: 16 }} label='促销文案'>
|
|
|
+ {getFieldDecorator('video.text', {
|
|
|
+ rules: [
|
|
|
+ { required: true, message: '输入促销文案' },
|
|
|
+ ],
|
|
|
+ })(
|
|
|
+ <Input placeholder='2门9折,3门88折,4门85折(套餐不享受此优惠)' onChange={(value) => {
|
|
|
+ this.changeValue('video', 'text', value);
|
|
|
+ }} />,
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ </Form>
|
|
|
+ </Block>;
|
|
|
+ }
|
|
|
+
|
|
|
+ render1vs1() {
|
|
|
+ const { getFieldDecorator } = this.props.form;
|
|
|
+ const { data } = this.state;
|
|
|
+ const vs = data['1v1_list'] || [];
|
|
|
+ return <Block>
|
|
|
+ <h1>1v1课折扣</h1>
|
|
|
+ <Form>
|
|
|
+ <Form.Item label='按购买课程数量计算' />
|
|
|
+ {vs.map((row, index) => {
|
|
|
+ return <Row>
|
|
|
+ <Col span={2}>
|
|
|
+ <Form.Item>
|
|
|
+ {getFieldDecorator(`1v1_list[${index}].number`, {
|
|
|
+ rules: [
|
|
|
+ { required: true, message: '输入数量' },
|
|
|
+ ],
|
|
|
+ })(
|
|
|
+ <Input placeholder={'输入数量'} onChange={(value) => {
|
|
|
+ this.changeMapValue('1v1_list', index, 'number', value);
|
|
|
+ }} />,
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ </Col>
|
|
|
+ <Col span={1}>
|
|
|
+ 课
|
|
|
+ </Col>
|
|
|
+ <Col span={2}>
|
|
|
+ <Form.Item>
|
|
|
+ {getFieldDecorator(`1v1_list[${index}].percent`, {
|
|
|
+ rules: [
|
|
|
+ { required: true, message: '输入百分比' },
|
|
|
+ ],
|
|
|
+ })(
|
|
|
+ <Input placeholder={'输入百分比'} onChange={(value) => {
|
|
|
+ this.changeMapValue('1v1_list', index, 'percent', value);
|
|
|
+ }} />,
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ </Col>
|
|
|
+ <Col span={1}>
|
|
|
+ %
|
|
|
+ </Col>
|
|
|
+ <Col span={1} onClick={() => {
|
|
|
+ this.deleteLength('1v1_list', index, 1);
|
|
|
+ }}>
|
|
|
+ <Button><Icon type="minus" /></Button>
|
|
|
+ </Col>
|
|
|
+ </Row>;
|
|
|
+ })}
|
|
|
+ <Button onClick={() => {
|
|
|
+ this.addLength('1v1_list', { number: 0, precent: 0 });
|
|
|
+ }}><Icon type={'plus'} /></Button>
|
|
|
+ <Form.Item labelCol={{ span: 3 }} wrapperCol={{ span: 16 }} label='促销文案'>
|
|
|
+ {getFieldDecorator('1v1.text', {
|
|
|
+ rules: [
|
|
|
+ { required: true, message: '输入促销文案' },
|
|
|
+ ],
|
|
|
+ })(
|
|
|
+ <Input placeholder='满30课时95折' onChange={(value) => {
|
|
|
+ this.changeValue('1v1', 'text', value);
|
|
|
+ }} />,
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ </Form>
|
|
|
+ </Block>;
|
|
|
+ }
|
|
|
+
|
|
|
+ renderGift() {
|
|
|
+ const { getFieldDecorator } = this.props.form;
|
|
|
+ const { data } = this.state;
|
|
|
+ const gifts = data.gifts || [];
|
|
|
+ return <Block>
|
|
|
+ <h1>课程赠品</h1>
|
|
|
+ <Form>
|
|
|
+ <Form.Item label='满额送回复时长服务' />
|
|
|
+ {gifts.map((row, index) => {
|
|
|
+ return <Row>
|
|
|
+ <Col span={6}>
|
|
|
+ <Form.Item labelCol={{ span: 10 }} wrapperCol={{ span: 14 }} label='实付金额'>
|
|
|
+ {getFieldDecorator(`gifts[${index}].money`, {
|
|
|
+ rules: [
|
|
|
+ { required: true, message: '输入金额' },
|
|
|
+ ],
|
|
|
+ })(
|
|
|
+ <Input placeholder={'输入金额'} onChange={(value) => {
|
|
|
+ this.changeMapValue('gifts', index, 'money', value);
|
|
|
+ }} />,
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ </Col>
|
|
|
+ <Col span={6}>
|
|
|
+ <Form.Item labelCol={{ span: 10 }} wrapperCol={{ span: 14 }} label='赠送'>
|
|
|
+ {getFieldDecorator(`gifts[${index}].hour`, {
|
|
|
+ rules: [
|
|
|
+ { required: true, message: '输入小时' },
|
|
|
+ ],
|
|
|
+ })(
|
|
|
+ <Input placeholder={'输入小时'} onChange={(value) => {
|
|
|
+ this.changeMapValue('gifts', index, 'hour', value);
|
|
|
+ }} />,
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ </Col>
|
|
|
+ <Col span={1} onClick={() => {
|
|
|
+ this.deleteLength('gifts', index, 1);
|
|
|
+ }}>
|
|
|
+ <Button><Icon type="minus" /></Button>
|
|
|
+ </Col>
|
|
|
+ </Row>;
|
|
|
+ })}
|
|
|
+ <Button onClick={() => {
|
|
|
+ this.addLength('gifts', { money: 0, hour: 0 });
|
|
|
+ }}><Icon type={'plus'} /></Button>
|
|
|
+ </Form>
|
|
|
+ </Block>;
|
|
|
+ }
|
|
|
+
|
|
|
+ renderView() {
|
|
|
+ const { tab } = this.state;
|
|
|
+ return <div>
|
|
|
+ {this.renderVideo()}
|
|
|
+ {this.render1vs1()}
|
|
|
+ {this.renderGift()}
|
|
|
+ <Row type="flex" justify="center">
|
|
|
+ <Col>
|
|
|
+ <Button type="primary" onClick={() => {
|
|
|
+ this.submit(tab);
|
|
|
+ }}>保存</Button>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </div>;
|
|
|
+ }
|
|
|
+}
|