feats

src/pages/building/Edit/Basic.jsx

@@ -1,9 +1,16 @@
 import React from 'react'
-import { Form, Input, notification, Select } from 'antd'
+import { Form, Input, InputNumber, Radio, notification, Select } from 'antd'
 import FileUpload from '@/components/XForm/FileUpload';
+import ImageUpload from '@/components/XForm/ImageUpload';
+import ImageListUpload from '@/components/XForm/ImageListUpload';
+import SelectCity from '@/components/SelectButton/CitySelect'
+import AreaSelect from '@/components/SelectButton/AreaSelect'
 import BuildingType from './components/BuildingTypeSelect'
+import OpenTimePicker from './components/OpenTimePicker'
 import { formItemLayout } from './utils'
 
+const fullWidth= { width: '100%' }
+
 const Item = Form.Item
 
 const BuildingBasic = (props) => {
@@ -48,7 +55,9 @@ const BuildingBasic = (props) => {
         {getFieldDecorator('price')(<Input />)}
       </Form.Item>
       <Form.Item label="开盘时间" >
-        {getFieldDecorator('openingDate')(<Input placeholder="预计xxxx年xx月开盘" />)}
+        {getFieldDecorator('openingDate')(
+          <OpenTimePicker placeholder="请选择开盘时间" style={fullWidth} />
+        )}
       </Form.Item>
       <Form.Item label="电话" >
         {getFieldDecorator('tel', {
@@ -63,14 +72,14 @@ const BuildingBasic = (props) => {
       <Form.Item label="项目说明" >
         {getFieldDecorator('dynamic')(<Input placeholder="项目动态等，不超过30个字" maxLength={30}/>)}
       </Form.Item>
-      <Form.Item label="物业类型" >
+      {/* <Form.Item label="物业类型" >
         {getFieldDecorator('propertyType')(<Input />)}
-      </Form.Item>
+      </Form.Item> */}
       <Form.Item label="销售状态" >
         {getFieldDecorator('marketStatus', {
           rules: [{ required: true, message: '请选择销售状态' }],
         })(
-          <Select placeholder="销售状态" style={{ width: '100%' }}>
+          <Select placeholder="销售状态" style={fullWidth}>
             <Select.Option value="待售">待售</Select.Option>
             <Select.Option value="在售">在售</Select.Option>
             <Select.Option value="售罄">售罄</Select.Option>
@@ -80,7 +89,7 @@ const BuildingBasic = (props) => {
       </Form.Item>
       <Form.Item label="项目标签" >
         {getFieldDecorator('tag')(
-          <Select mode="tags" placeholder="输入后选中" style={{ width: '100%' }} />
+          <Select mode="tags" placeholder="输入后选中" style={fullWidth} />
         )}
       </Form.Item>
       <Form.Item label="项目视频" help="视频仅支持mp4格式，建议尺寸：750*600，比例5:4，用于楼盘详情">
@@ -88,6 +97,55 @@ const BuildingBasic = (props) => {
           <FileUpload accept=".mp4" beforeUpload={fileUploadBeforeUpload} label="上传视频" size={1} />,
         )}
       </Form.Item>
+      <Form.Item label="视频封面图" help="建议图片尺寸：750*600px，比例5:4,格式：jpg，用于视频封面" >
+        {getFieldDecorator('videoImage', {
+          rules: [{ required: true, message: '请选择视频封面图' }],
+        })(
+          <ImageUpload />,
+        )}
+      </Form.Item>
+      <Form.Item label="楼盘主图" help="建议图片尺寸：750*600px，比例5:4,格式：jpg，用于楼盘详情">
+        {getFieldDecorator('avatarImage', {
+          rules: [{ required: true, message: '请选择项目主图' }],
+        })(
+          <ImageListUpload unlimited />,
+        )}
+      </Form.Item>
+      <Form.Item label="楼盘封面图" help="建议图片尺寸：750*420px，比例16:9,格式：jpg，用于楼盘列表">
+        {getFieldDecorator('listImage', {
+          rules: [{ required: true, message: '请选择列表图' }],
+        })(
+          <ImageUpload />,
+        )}
+      </Form.Item>
+      <Form.Item label="排序" help="数值越大，楼盘在小程序列表页中展示越靠前">
+        {getFieldDecorator('orderNo')(<InputNumber min={0} />)}
+      </Form.Item>
+      <Form.Item label="首页推荐" >
+        {getFieldDecorator('isMain', { initialValue: 1 })(
+          <Radio.Group>
+            <Radio value={1}>是</Radio>
+            <Radio value={2}>否</Radio>
+          </Radio.Group>,
+        )}
+      </Form.Item>
+      <Form.Item label="所在城市" >
+        {getFieldDecorator('cityId', {
+          rules: [{ required: true, message: '请选择城市' }],
+        })(
+          <SelectCity />,
+        )}
+      </Form.Item>
+      <Form.Item label="楼盘区域" >
+        {getFieldDecorator('buildingArea', {
+          rules: [{ required: true, message: '请输入楼盘区域' }],
+        })(<AreaSelect />)}
+      </Form.Item>
+      <Form.Item label="项目地址" >
+        {getFieldDecorator('address', {
+          rules: [{ required: true, message: '请输入项目地址' }],
+        })(<Input />)}
+      </Form.Item>
 
     </Form>
   )

src/pages/building/Edit/components/OpenTimePicker.jsx

@@ -0,0 +1,27 @@
+
+import React, { useEffect, useState } from 'react';
+import moment from 'moment';
+import { DatePicker } from 'antd';
+
+/**
+ * 主要是做了一个日期的格式转换
+ */
+export default (props) => {
+  const { value, onChange, ...leftProps } = props;
+  const [val, setVal] = useState(value ? moment(value, 'YYYY-MM-DD HH:mm') : undefined);
+
+  const handelChange = (e) => {
+    if (onChange) {
+      onChange(e ? e.format('YYYY-MM-DD HH:mm') : undefined);
+    }
+  }
+
+  useEffect(() => {
+    setVal(value ? moment(value, 'YYYY-MM-DD HH:mm') : undefined);
+  }, [value])
+
+  return (
+    <DatePicker value={val} showTime={{ format: 'HH:mm' }} format="YYYY-MM-DD HH:mm"  {...leftProps} onChange={handelChange} />
+  )
+}
+