feats

config/index.js

   },
   copy: {
     patterns: [
+      {
+        from: 'src/onlineSelling/assets/',
+        to: 'dist/onlineSelling/assets/'
+      }
     ],
     options: {
     }

project.config.json

 			"list": [
 				{
 					"id": -1,
-					"name": "pages/im/list/index",
-					"pathName": "pages/im/list/index",
+					"name": "pages/houseList/index",
+					"pathName": "onlineSelling/pages/houseList/index",
 					"query": "",
 					"scene": null
-				},
-				{
-					"id": -1,
-					"name": "pages/activity/detail/assistance",
-					"pathName": "pages/activity/detail/assistance",
-					"query": "id=85",
-					"scene": null
-				},
-				{
-					"id": -1,
-					"name": "pages/project/detail/index",
-					"pathName": "pages/project/detail/index",
-					"query": "id=93e6d86b8b48e3ea359084e3ceaf2d03",
-					"scene": null
 				}
 			]
 		}

src/onlineSelling/components/HouseGrid/unit.scss

 .unit {
   .head {
-    margin: 20rpx 0;
+    margin-bottom: 20rpx;
     padding: 0 30rpx;
     font-size: 32rpx;
     line-height: 1.8em;

src/onlineSelling/components/NamedIcon/index.js

+import { Text } from "@tarojs/components";
+import './index.scss'
+
+export default function NamedIcon(props) {
+  const bg = `background: url(../../assets/${props.name}.png); background-size:cover;`
+  const size = props.size || 48
+  const bound = `width: ${size}rpx; height: ${size}rpx;`
+
+  return <Text className="namedicon" style={`${bg} ${bound}`}></Text>
+}

src/onlineSelling/components/NamedIcon/index.scss

+.namedicon {
+  display: inline-block;
+  vertical-align: middle;
+}

src/onlineSelling/components/TimeTicker/index.js

-import { useState, useEffect } from '@tarojs/taro'
-import { View, Text } from '@tarojs/components'
-import dayjs from 'dayjs'
-import './style.scss'
-
-export default function TimeTicker(props) {
-    const [tm, setTm] = useState(0)
-
-    useEffect(() => {
-        const now = dayjs()
-        const end = dayjs(props.endTime || now)
-
-        const tk = end.isAfter(now) ? setInterval(() => {
-            setTm(end.diff(now))
-        }, props.interval || 60000) : undefined
-
-        return () => clearInterval(tk)
-    }, props.endTime)
-
-    const tips = props.translate(tm)
-
-    return (
-        <View className="timeticker">
-            <Text></Text>
-            <Text>{tips}</Text>
-        </View>
-    )
-}
+import Taro, { Component } from '@tarojs/taro'
+import { View, Text } from '@tarojs/components'
+import dayjs from 'dayjs'
+import { formateLeftTime } from '@/utils/tools'
+import './index.scss'
+
+export default class TimeTicker extends Component {
+
+    state = {
+      tips: '',
+    }
+
+    tk = undefined
+
+    componentWillMount() {
+      this.tk = setInterval(() => {
+        const now = dayjs()
+        const start = dayjs(this.props.startTime || now)
+        const end = dayjs(this.props.endTime || now)
+
+        const tm = end.diff(start)
+        const translate = this.props.translate || (x => formateLeftTime(x, 'min'))
+
+        if (tm >= 0) {
+          this.setState({
+            tips: translate(tm)
+          })
+        }
+
+      }, this.props.interval || 1000)
+    }
+
+    componentWillUnmount() {
+      if (tk) {
+        clearInterval(tk)
+      }
+    }
+
+    render() {
+        return (
+            <View className="timeticker">
+                <Text></Text>
+                <Text>{tips}</Text>
+            </View>
+        )
+    }
+}

src/onlineSelling/pages/houseList/index.js

 import Taro, { Component } from '@tarojs/taro'
-import { View } from '@tarojs/components'
+import { View, ScrollView, Button } from '@tarojs/components'
 import TimeTicker from '../../components/TimeTicker'
 import Unit from '../../components/HouseGrid/Unit'
+import NamedIcon from '../../components/NamedIcon'
 import { formateLeftTime } from '@/utils/tools'
 
 import './index.scss'
   }
 
   formateTM (dt) {
-    return `距离预选结束还有${formateLeftTime(dt)}`
+    return `距离预选结束还有 ${formateLeftTime(dt, 'min')}`
   }
 
   renderBar () {
           <TimeTicker endTime="2020-02-12" translate={this.formateTM.bind(this)} />
         </View>
         <View className="action">
-          <View>帮助</View>
-          <View>过滤</View>
+          <View>
+            <NamedIcon name="explain" size={50} />
+          </View>
+          <View>
+            <NamedIcon name="screen" size={50} />
+          </View>
         </View>
       </View>
     )
     const { testData } = this.state
 
     return (
-      <View>
+      <ScrollView className="container" scrollY scrollWithAnimation>
       {
         testData.map((item) => {
           return <Unit key={item.unitId} dataset={item} />
         })
       }
+      </ScrollView>
+    )
+  }
+
+  renderBlank() {
+    return (
+      <View className="container">
+        <View className="blank"></View>
+      </View>      
+    )
+  }
+
+  renderBottom() {
+    return (
+      <View className="bottombar">
+        <Button className="btn record">
+          <NamedIcon name="record" size="42"/>
+          <Text className="txt">选房记录</Text>
+        </Button>
+        <Button className="btn share">
+          <NamedIcon name="share" size="42"/>
+          <Text className="txt">分享</Text>
+        </Button>
       </View>
     )
   }
 
   render () {
     return (
-      <View>
+      <View className="houselist">
         {this.renderBar()}
-        {this.renderHouses()}
+        {this.renderBlank()}
+        {this.renderBottom()}
       </View>
     )
   }

src/onlineSelling/pages/houseList/index.scss

-.topbar {
-  height: 64rpx;
-  font-size: 24rpx;
-  line-height: 64rpx;
-  display: flex;
-  margin-top: 24px;
+.houselist {
+  height: 100vh;
 
-  .body {
-    flex: auto;
-    color: #999;
-    background:rgba(248,248,248,1);
-    padding-left: 30rpx;
+  .topbar {
+    height: 64rpx;
     font-size: 24rpx;
+    line-height: 64rpx;
+    display: flex;
+    margin: 24px 0;
+  
+    .body {
+      flex: auto;
+      color: #999;
+      background:rgba(248,248,248,1);
+      padding-left: 30rpx;
+      font-size: 24rpx;
+    }
+  
+    .action {
+      flex: none;
+      width: 30%;
+      display: flex;
+      justify-content: space-around;
+    }
   }
-
-  .action {
-    flex: none;
-    width: 30%;
+  
+  .bottombar {
+    height: 168rpx;
+    box-shadow:0px 16px 48px 0px rgba(0, 0, 0, 0.12);
+    width: 100%;
+    padding: 0 35rpx;
+    overflow: hidden;
     display: flex;
-    justify-content: space-around;
+    align-items: center;
+
+    .btn {
+      height: 88rpx;
+      flex: none;
+      border-radius: 10rpx;
+
+      .txt {
+        display: inline-block;
+        padding-left: 10rpx;
+        font-size: 30rpx;
+        line-height: 88rpx;
+        text-align: center;
+      }
+    }
+
+    .record {
+      background: #f2f2f2;
+      color: #333;
+      width: 58%;
+    }
+
+    .share {
+      background: #BB9C79;
+      color: #fff;
+      width: 32%;
+    }
+  }
+
+  .container {
+    // top + margin + bottom
+    height: calc(100% - 280rpx);
+
+    .blank {
+      width: 280rpx;
+      height: 220rpx;
+      background: url('../../assets/norecord.png');
+      background-size: cover;
+      transform: translateY(50%);
+      margin: 0 auto;
+    }
   }
-}
+}

src/utils/tools.js

  * 格式化剩余时间为 xx天xx小时xx分xx秒
  * @param {int} leftTime 时间毫秒数
  */
-export function formateLeftTime(leftTime) {
+export function formateLeftTime(leftTime, unit) {
   const nd = 1000 * 24 * 60 * 60;
   const nh = 1000 * 60 * 60;
   const nm = 1000 * 60;
   const min = Math.floor(leftTime % nd % nh / nm);
   const sec = Math.floor(leftTime % nd % nh % nm / ns);
 
-  return `${day}天${hour}小时${min}分${sec}秒`
+  switch (unit) {
+    case 'min':
+      return `${day}天${hour}小时${min}分`
+    default:
+      return `${day}天${hour}小时${min}分${sec}秒`
+  }
 }
 
 export function getDownloadURL(url, type) {