|
@@ -0,0 +1,287 @@
|
|
|
+import React from 'react';
|
|
|
+import {
|
|
|
+ Icon,
|
|
|
+ Modal,
|
|
|
+ message,
|
|
|
+ Spin,
|
|
|
+ Upload,
|
|
|
+ Input,
|
|
|
+ Button,
|
|
|
+ Radio,
|
|
|
+ Form
|
|
|
+} from 'antd';
|
|
|
+import { splitUrl} from '@/tools.js';
|
|
|
+
|
|
|
+const PicturesWall = React.createClass({
|
|
|
+ getInitialState() {
|
|
|
+ return {
|
|
|
+ previewVisible: false,
|
|
|
+ previewImage: '',
|
|
|
+ fileList: [],
|
|
|
+ tags: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ handleCancel() {
|
|
|
+ this.setState({ previewVisible: false });
|
|
|
+ },
|
|
|
+ handlePreview(file) {
|
|
|
+ this.setState({
|
|
|
+ previewImage: file.url || file.thumbUrl,
|
|
|
+ previewVisible: true
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleChange(info) {
|
|
|
+ let fileList = info.fileList;
|
|
|
+ this.setState({ fileList });
|
|
|
+ this.props.fileList(fileList);
|
|
|
+ },
|
|
|
+ componentWillReceiveProps(nextProps) {
|
|
|
+ if(nextProps.pictureUrl.length){
|
|
|
+ this.state.fileList = nextProps.pictureUrl;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ render() {
|
|
|
+ const { previewVisible, previewImage, fileList } = this.state;
|
|
|
+ const uploadButton = (
|
|
|
+ <div>
|
|
|
+ <Icon type="plus" />
|
|
|
+ <div className="ant-upload-text">点击上传</div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ return (
|
|
|
+ <div className="clearfix">
|
|
|
+ <Upload
|
|
|
+ action={globalConfig.context + '/open/api/admin/banners/uploadPicture'}
|
|
|
+ data={{ sign: 'banners'}}
|
|
|
+ listType="picture-card"
|
|
|
+ fileList={fileList}
|
|
|
+ onPreview={this.handlePreview}
|
|
|
+ onChange={this.handleChange}
|
|
|
+ >
|
|
|
+ {fileList.length >= 1 ? null : uploadButton}
|
|
|
+ </Upload>
|
|
|
+ <Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel}>
|
|
|
+ <img alt="example" style={{ width: '100%' }} src={previewImage} />
|
|
|
+ </Modal>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+class BannerForm extends React.Component {
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
+ this.state = {
|
|
|
+ loading: false,
|
|
|
+ imgUrl: [],
|
|
|
+ visible:false
|
|
|
+ };
|
|
|
+ }
|
|
|
+ handleCancel() {
|
|
|
+ this.setState({
|
|
|
+ visible: false,
|
|
|
+ });
|
|
|
+ this.props.closeDesc(false, false);
|
|
|
+ }
|
|
|
+ loadData(id) {
|
|
|
+ this.setState({
|
|
|
+ loading: true
|
|
|
+ });
|
|
|
+ $.ajax({
|
|
|
+ method: "get",
|
|
|
+ dataType: "json",
|
|
|
+ crossDomain: false,
|
|
|
+ url: globalConfig.context + '/open/api/admin/banners/details' ,
|
|
|
+ data: {
|
|
|
+ id: id
|
|
|
+ },
|
|
|
+ success: function (data) {
|
|
|
+ let thisData = data.data;
|
|
|
+ if (!thisData) {
|
|
|
+ if (data.error && data.error.length) {
|
|
|
+ message.warning(data.error[0].message);
|
|
|
+ };
|
|
|
+ thisData = {};
|
|
|
+ };
|
|
|
+ this.setState({
|
|
|
+ id: thisData.id, //品类ID
|
|
|
+ data:thisData,
|
|
|
+ imgUrl: thisData.imgUrl ? splitUrl(thisData.imgUrl, ',', globalConfig.avatarHost + '/upload') : [],
|
|
|
+ });
|
|
|
+ }.bind(this),
|
|
|
+ }).always(function () {
|
|
|
+ this.setState({
|
|
|
+ loading: false
|
|
|
+ });
|
|
|
+ }.bind(this));
|
|
|
+ }
|
|
|
+ handOk() {
|
|
|
+ this.setState({
|
|
|
+ visible: false,
|
|
|
+ });
|
|
|
+ this.props.closeDesc(false, true);
|
|
|
+ }
|
|
|
+ handleSubmit(e){
|
|
|
+ e.preventDefault();
|
|
|
+ this.props.form.validateFields((err, values) => {
|
|
|
+ //url转化
|
|
|
+ let thePictureUrl = [];
|
|
|
+ console.log(this.state.imgUrl)
|
|
|
+ if (this.state.imgUrl.length) {
|
|
|
+ let picArr = [];
|
|
|
+ this.state.imgUrl.map(function (item) {
|
|
|
+ if ( item.response && item.response.data && item.response.data.length ){
|
|
|
+ picArr.push(item.response.data);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ thePictureUrl = picArr.join(",");
|
|
|
+ }else{
|
|
|
+ message.warning('请上传图片!');
|
|
|
+ return false;
|
|
|
+ };
|
|
|
+ if (!err) {
|
|
|
+ this.setState({
|
|
|
+ loading: true
|
|
|
+ });
|
|
|
+ $.ajax({
|
|
|
+ method: "post",
|
|
|
+ dataType: "json",
|
|
|
+ async:true,
|
|
|
+ url: this.props.data.id ? globalConfig.context + '/open/api/admin/banners/update' : globalConfig.context + '/open/api/admin/banners/save',
|
|
|
+ data: {
|
|
|
+ id:this.props.data.id,
|
|
|
+ text:values.text,
|
|
|
+ forwardUrl:values.forwardUrl,
|
|
|
+ apiUrl:values.apiUrl,
|
|
|
+ imgUrl:thePictureUrl,
|
|
|
+ deleteSign:false,
|
|
|
+ client:values.client
|
|
|
+ }
|
|
|
+ }).done(function (data) {
|
|
|
+ this.setState({
|
|
|
+ loading: false
|
|
|
+ });
|
|
|
+ if (!data.error.length) {
|
|
|
+ message.success('操作成功!');
|
|
|
+ this.setState({
|
|
|
+ visible: false
|
|
|
+ });
|
|
|
+ this.handOk();
|
|
|
+ } else {
|
|
|
+ message.warning(data.error[0].message);
|
|
|
+ }
|
|
|
+ }.bind(this));
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ componentWillMount(){
|
|
|
+ if (this.props.data&&this.props.data.id) {
|
|
|
+ this.loadData(this.props.data.id);
|
|
|
+ } else {
|
|
|
+ this.state.data = {};
|
|
|
+ };
|
|
|
+ }
|
|
|
+ componentWillReceiveProps(nextProps) {
|
|
|
+ this.state.visible = nextProps.showDesc;
|
|
|
+ if(nextProps.data&&nextProps.data.id){
|
|
|
+ this.loadData(nextProps.data.id);
|
|
|
+ }else{
|
|
|
+ this.setState({
|
|
|
+ data:{},
|
|
|
+ imgUrl:[]
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.props.form.resetFields();
|
|
|
+ }
|
|
|
+ render() {
|
|
|
+ const { getFieldDecorator } = this.props.form;
|
|
|
+ const FormItem = Form.Item;
|
|
|
+ const formItemLayout = {
|
|
|
+ labelCol: { span: 6 },
|
|
|
+ wrapperCol: { span: 12 },
|
|
|
+ };
|
|
|
+ let theData = this.state.data||{};
|
|
|
+ return (
|
|
|
+ <div className="patent-desc">
|
|
|
+ <Modal
|
|
|
+ maskClosable={false}
|
|
|
+ visible={this.state.visible}
|
|
|
+ onOk={this.handOk.bind(this)}
|
|
|
+ onCancel={this.handleCancel.bind(this)}
|
|
|
+ width="600px"
|
|
|
+ title={!theData.id ? '新建轮播图' : '修改轮播图'}
|
|
|
+ footer=""
|
|
|
+ className="admin-desc-content"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <div>
|
|
|
+ <Form layout="horizontal" onSubmit={this.handleSubmit.bind(this)} id="demand-form">
|
|
|
+ <Spin spinning={this.state.loading}>
|
|
|
+ <div className="clearfix">
|
|
|
+ <FormItem {...formItemLayout} label="轮播图描述">
|
|
|
+ {getFieldDecorator('text', {
|
|
|
+ rules: [ { required: true, message: '此项为必填项!' } ],
|
|
|
+ initialValue: theData.text
|
|
|
+ })(<Input placeholder="请输入轮播图名称"/>)}
|
|
|
+ </FormItem>
|
|
|
+ </div>
|
|
|
+ <div className="clearfix">
|
|
|
+ <FormItem {...formItemLayout} label="跳转地址">
|
|
|
+ {getFieldDecorator('forwardUrl', {
|
|
|
+ rules: [ { required: true, message: '此项为必填项!' } ],
|
|
|
+ initialValue: theData.forwardUrl
|
|
|
+ })(<Input placeholder="请输入跳转地址"/>)}
|
|
|
+ </FormItem>
|
|
|
+ </div>
|
|
|
+ <div className="clearfix">
|
|
|
+ <FormItem {...formItemLayout} label="api">
|
|
|
+ {getFieldDecorator('apiUrl', {
|
|
|
+ rules: [ { required: true, message: '此项为必填项!' } ],
|
|
|
+ initialValue: theData.apiUrl
|
|
|
+ })(<Input placeholder="请输入api"/>)}
|
|
|
+ </FormItem>
|
|
|
+ </div>
|
|
|
+ <div className="clearfix">
|
|
|
+ <FormItem {...formItemLayout} label="位置">
|
|
|
+ {getFieldDecorator('client', {
|
|
|
+ rules: [ { required: true, message: '此项为必填项!' } ],
|
|
|
+ initialValue: theData.client
|
|
|
+ })(
|
|
|
+ <Radio.Group>
|
|
|
+ <Radio value={0}>网站</Radio>
|
|
|
+ <Radio value={1}>App</Radio>
|
|
|
+ </Radio.Group>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ </FormItem>
|
|
|
+ </div>
|
|
|
+ <div className="clearfix">
|
|
|
+ <FormItem labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} label={<span><strong style={{color:"#f00"}}> * </strong>轮播图</span>}>
|
|
|
+ <PicturesWall
|
|
|
+ fileList={(e)=>{this.setState({imgUrl:e})}}
|
|
|
+ pictureUrl={this.state.imgUrl}
|
|
|
+ visible={this.props.visible}
|
|
|
+ />
|
|
|
+ </FormItem>
|
|
|
+ </div>
|
|
|
+ <div className="clearfix">
|
|
|
+ <FormItem wrapperCol={{ span: 12, offset: 6 }}>
|
|
|
+ <Button className="set-submit" type="primary" htmlType="submit">
|
|
|
+ 保存
|
|
|
+ </Button>
|
|
|
+ <Button className="set-submit" type="ghost" onClick={this.handleCancel.bind(this)}>
|
|
|
+ 取消
|
|
|
+ </Button>
|
|
|
+ </FormItem>
|
|
|
+ </div>
|
|
|
+ </Spin>
|
|
|
+ </Form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Modal>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+export default Form.create()(BannerForm);
|