feats

src/onlineSelling/components/HouseGrid/Floor.js

@@ -12,7 +12,7 @@ export default function Floor(props) {
         {roomList.map((room) => {
           return (
             <View className="item" key={room.houseId} >
-              <Room dataset={room} onClick={props.onRoomClick}/>
+              <Room dataset={room} onClick={props.onRoomClick} onActionClick={props.onActionClick}/>
             </View>
           )
         })}

src/onlineSelling/components/HouseGrid/Unit.js

@@ -29,7 +29,7 @@ export default class Unit extends Component {
         </View>
         <View className="body" >
           {!noshow && floorList.map((floor) => {
-            return <Floor key={floor.floorId} dataset={floor} onRoomClick={this.props.onRoomClick} />
+            return <Floor key={floor.floorId} dataset={floor} onRoomClick={this.props.onRoomClick} onActionClick={this.props.onActionClick} />
           })}
         </View>
       </View>

src/onlineSelling/components/HouseGrid/index.js

@@ -3,12 +3,13 @@ import Unit from './Unit'
 
 export default (props) => {
   const unitList = (props.dataset || {}).unitList || []
-  const onRoomClick = props.onRoomClick || (() => {})
+  const handleRoomClick = props.onRoomClick || (() => {})
+  const handleActionClick = props.onActionClick || (() => {})
 
   return (
     <Block>
       {
-        unitList.map((unit) => (<Unit key={unit.unitId} dataset={unit} onRoomClick={onRoomClick} />))
+        unitList.map((unit) => (<Unit key={unit.unitId} dataset={unit} onRoomClick={handleRoomClick} onActionClick={handleActionClick} />))
       }
     </Block>
   )

src/onlineSelling/pages/houseCart/index.js

@@ -2,6 +2,8 @@ import Taro, { Component } from '@tarojs/taro'
 import { View, ScrollView } from '@tarojs/components'
 
 import './index.scss'
+import Blank from '../../components/Blank'
+import HouseGrid from '../../components/HouseGrid'
 
 export default class extends Component {
   config = {
@@ -10,6 +12,7 @@ export default class extends Component {
 
   state = {
     dataType: 1, // maybe need change  1 预选, 2 认筹
+    houseList: [ { name: '1期1栋1单元1楼101户' } ],
     chooseList: [ { name: '1期1栋1单元1楼101户' }, { name: '1期1栋1单元1楼102户' } ], // 已经选择的房源列表
     collapsed: true, // 已选列表默认关闭, true 关闭, false 开启 
   }
@@ -22,6 +25,12 @@ export default class extends Component {
     this.setState({ dataType })
   }
 
+  // 添加到选择列表
+  // 注意, 不是确认选择
+  add2Cart = (room) => {
+
+  }
+
   // 确认选择
   handleSubmit = () => {
 
@@ -47,61 +56,90 @@ export default class extends Component {
   }
 
   renderHead() {
-    const { dataType } = this.state
+    const { dataType, houseList } = this.state
+    const hasData = houseList && houseList.length
 
     return (
       <View className="head">
         <View className="tips">仅显示符合认筹条件的房源。点击房源卡片查看房源详情，不要在房源详情页做操作。请在当前页面选择提交认筹。</View>
-        <View className="actions">
-          <View className={`action ${dataType === 1 ? 'active' : ''}`} onClick={() => this.changeShowData(1)}>预选热度图</View>
-          <View className={`action ${dataType === 2 ? 'active' : ''}`} onClick={() => this.changeShowData(2)}>认筹热度图</View>
-        </View>
+        {
+          hasData && (
+            <View className="actions">
+              <View className={`action ${dataType === 1 ? 'active' : ''}`} onClick={() => this.changeShowData(1)}>预选热度图</View>
+              <View className={`action ${dataType === 2 ? 'active' : ''}`} onClick={() => this.changeShowData(2)}>认筹热度图</View>
+            </View>
+          )
+        }
       </View>
     );
   }
 
   renderHouses() {
-    return (
-      <ScrollView className="body" scrollY>
+    const { houseList } = this.state
+    const hasData = houseList && houseList.length
 
+    return hasData && (
+      <ScrollView className="body" scrollY>
+      {
+        houseList.map((item) => {
+          return <HouseGrid key={item.unitId} dataset={item} onRoomClick={this.handleRoomClick} onActionClick={this.add2Cart} />
+        })
+      }
       </ScrollView>
     )
   }
 
   renderAction() {
-    const { chooseList, collapsed } = this.state;
+    const { chooseList, collapsed, houseList } = this.state;
     const title = collapsed ? `已选择: ${chooseList[0].name} 等 ${chooseList.length} 个房源` : '已选列表'
     const opened = collapsed ? 'off' : 'on'
+    const nodata = houseList && houseList.length ? '' : 'nodata'
+    const btnText = chooseList && chooseList.length ? '确认以上选择' : '未选择房源'
+    const choosed = chooseList && chooseList.length
 
     return (
       <View className="footer">
-        <View className="shoping-cart collapse">
-          <View className={`title ${opened}`} onClick={this.trigCartPannel}>
-            <Text>{title}</Text>
-            <Text className="at-icon at-icon-chevron-down"></Text>            
-          </View>
-          <View className={`choose-list ${opened}`}>
-            {chooseList.map((house, index) => {
-              return (
-                <View key={`cart-item-${index}`} className="choose-item" onClick={() => this.subChooseList(house)}>
-                  <View className="choose-item-body">{house.name}</View>
-                  <View className="choose-item-action">
-                    <Text className="at-icon at-icon-subtract-circle"></Text>
+      {
+        choosed && (
+          <View className="shoping-cart collapse">
+            <View className={`title ${opened}`} onClick={this.trigCartPannel}>
+              <Text>{title}</Text>
+              <Text className="at-icon at-icon-chevron-down"></Text>            
+            </View>
+
+            <View className={`choose-list ${opened}`}>
+              {chooseList.map((house, index) => {
+                return (
+                  <View key={`cart-item-${index}`} className="choose-item" onClick={() => this.subChooseList(house)}>
+                    <View className="choose-item-body">{house.name}</View>
+                    <View className="choose-item-action">
+                      <Text className="at-icon at-icon-subtract-circle"></Text>
+                    </View>
                   </View>
-                </View>
-              )
-            })}
+                )
+              })}
+            </View>          
           </View>
-        </View>
-        <Button className="btn" onClick={this.handleSubmit}>确认以上选择</Button>
+        )
+      }
+        <Button className={`btn ${nodata}`} onClick={this.handleSubmit}>{btnText}</Button>
       </View>
     )
   }
 
+  renderBlank() {
+    const { houseList } = this.state
+
+    return !(houseList && houseList.length) && (
+      <Blank tips="暂无符合条件的房源" />
+    )
+  }
+
   render() {
     return (
       <View className="house-cart">
         {this.renderHead()}
+        {this.renderBlank()}
         {this.renderHouses()}
         {this.renderAction()}
       </View>

src/onlineSelling/pages/houseCart/index.scss

@@ -58,6 +58,11 @@
       line-height: 94px;
       background: #BB9C79;
       border-radius: 10px;
+
+      &.nodata {
+        background:#000;
+        opacity:0.6;
+      }
     }
   }