feats

project.config.json

@@ -48,8 +48,15 @@
 			"list": [
 				{
 					"id": -1,
-					"name": "pages/houseList/index",
-					"pathName": "onlineSelling/pages/houseList/index",
+					"name": "pages/help/index",
+					"pathName": "onlineSelling/pages/help/index",
+					"query": "",
+					"scene": null
+				},
+				{
+					"id": 1,
+					"name": "pages/records/index",
+					"pathName": "onlineSelling/pages/records/index",
 					"query": "",
 					"scene": null
 				}

src/app.js

@@ -118,6 +118,8 @@ class App extends Component {
         root: "onlineSelling",
         pages: [
           'pages/houseList/index',
+          'pages/help/index',
+          'pages/records/index',
         ],
       }
     ],

src/onlineSelling/components/Blank/index.js

@@ -0,0 +1,7 @@
+
+import { View } from '@tarojs/components'
+import './index.scss'
+
+export default function Blank(props) {
+  return (<View className="blank"></View>)
+}

src/onlineSelling/components/Blank/index.scss

@@ -0,0 +1,9 @@
+
+.blank {
+  width: 280rpx;
+  height: 220rpx;
+  background: url('../../assets/norecord.png');
+  background-size: cover;
+  transform: translateY(50%);
+  margin: 0 auto;
+}

src/onlineSelling/components/HotBlock/index.js

@@ -0,0 +1,34 @@
+import { View } from "@tarojs/components";
+import './index.scss'
+
+function computeLevel (num) {
+  switch (true) {
+    case num >= 200:
+      return 13;
+    case num > 100:
+      return 12;
+    case num > 50:
+      return 11;
+    case num > 40:
+      return 10;
+    case num > 30:
+      return 9;
+    case num > 20:
+      return 8;
+    case num > 20:
+      return 8;
+    case num > 10:
+      return 7;
+    case num >= 6:
+      return 6;
+    case num > 0:
+      return num;
+    default:
+      return 0;
+  }
+}
+
+export default function HotBlock(props) {
+  const level = computeLevel(props.number)
+  return (<View className={`hotblock bkg-${level}`}>{props.children}</View>)
+}

src/onlineSelling/components/HotBlock/index.scss

@@ -0,0 +1,45 @@
+
+.hotblock {
+  &.bkg-0 {
+    background:#F8F8F8;
+  }
+  &.bkg-1 {
+    background:#F9DED1;
+  }
+  &.bkg-2 {
+    background:#F6D4C3;
+  }
+  &.bkg-3 {
+    background:#F8C6AD;
+  }
+  &.bkg-4 {
+    background:#FDDBDB;
+  }
+  &.bkg-5 {
+    background:#F9CCCC;
+  }
+  &.bkg-6 {
+    background:#F9B7B7;
+  }
+  &.bkg-7 {
+    background:#FFADAD;
+  }
+  &.bkg-8 {
+    background:#F59683;
+  }
+  &.bkg-9 {
+    background:#F7836C;
+  }
+  &.bkg-10 {
+    background:#F97459;
+  }
+  &.bkg-11 {
+    background:#FC6749;
+  }
+  &.bkg-12 {
+    background:#FD4E2B;
+  }
+  &.bkg-13 {
+    background:#FE2E2E;
+  }
+}

src/onlineSelling/components/HouseCard/index.js

@@ -0,0 +1,40 @@
+import { View, Image, Text } from "@tarojs/components";
+import { transferImage } from '@/utils/tools'
+import dayjs from 'dayjs'
+
+import './index.scss'
+
+export default function HouseCard(props) {
+  const {
+    buildingName,
+    blockName,
+    unitName,
+    roomName,
+    aerialViewImg,
+    price,
+    createDate,
+    status,
+  } = props.summary || {}
+
+  const title = `${buildingName} ${blockName} ${unitName} ${roomName}`
+  const thumb = transferImage(aerialViewImg)
+  const showDT = dayjs(createDate).format('YYYY/MM/DD')
+
+  return (
+    <View className="housecard">
+      <View className="head">
+        <Image className="thumb" src={thumb} mode="aspectFit" />
+      </View>
+      <View className="body">
+      <View className="badge">已预选</View>
+      <View className="title">{title}</View>
+        <View className="subtitle">
+          <Text>现价</Text>
+          <Text className="red">{price}</Text>
+        </View>
+        <View className="meta">{showDT}</View>
+        <View className="sign bg-success"></View>
+      </View>
+    </View>
+  )
+}

src/onlineSelling/components/HouseCard/index.scss

@@ -0,0 +1,73 @@
+.housecard {
+  width: calc(100% - 32rpx);
+  height: 250rpx;
+  background:#fff;
+  border-radius: 8rpx;
+  display: flex;
+  margin: 16rpx;
+  box-shadow: 0 4rpx 15rpx 1rpx rgba(0, 0, 0, 0.12);
+
+  .head {
+    width: 36%;
+    flex: none;
+    border-right: 2rpx solid rgba(0, 0, 0, 0.04);
+    padding: 10rpx;
+
+    .thumb {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .body {
+    width: 64%;
+    flex: none;
+    position: relative;
+    line-height: 40rpx;
+    padding: 20rpx 10rpx;
+
+    .badge {
+      font-size: 30rpx;
+      color: #BB9C79;
+      text-align: right;
+    }
+
+    .title {
+      font-size: 26rpx;
+      font-weight: bold;
+      color:#333;
+    }
+
+    .subtitle {
+      font-size: 28rpx;
+      color:#333;
+    }
+
+    .meta {
+      font-size: 24rpx;
+      color:#999;
+    }
+
+    .sign {
+      width: 86rpx;
+      height: 86rpx;
+      position: absolute;
+      right: 10rpx;
+      bottom: 10rpx;
+    }
+  }
+
+  .red {
+    color: #FF3C3C;
+  }
+
+  .bg-success {
+    background: url(../../assets/success.png);
+    background-size: cover;
+  }
+
+  .bg-fail {
+    background: url(../../assets/fail.png);
+    background-size: cover;
+  }
+}

src/onlineSelling/components/HouseGrid/Room.js

@@ -1,32 +1,18 @@
 import { View } from "@tarojs/components";
+import HotBlock from "../HotBlock";
 import './room.scss'
 
-function computeLevel (num) {
-  switch (true) {
-    case num >= 40:
-      return 5;
-    case num >= 16:
-      return 4;
-    case num >= 3:
-      return 3;
-    case num >= 1:
-      return 2;
-    default:
-      return 1;
-  }
-}
-
 export default function Room(props) {
   const { roomNumber, totalNum, price, apartmentName } = props.dataset || {}
   const personNum = `(${totalNum}人)`
-  const colorBG = computeLevel(totalNum)
-
   return (
-    <View className={`room bkg-${colorBG}`}>
-      <View className="warn">{roomNumber}</View>
-      <View className="warn">{personNum}</View>
-      <View className="info">{price}</View>
-      <View className="tip">{apartmentName}</View>
-    </View>
+    <HotBlock number={totalNum}>
+      <View className="room">
+        <View className="warn">{roomNumber}</View>
+        <View className="warn">{personNum}</View>
+        <View className="info">{price}</View>
+        <View className="info">{apartmentName}</View>
+      </View>
+    </HotBlock>
   )
 }

src/onlineSelling/components/HouseGrid/floor.scss

@@ -17,7 +17,7 @@
     flex-wrap: wrap;
 
     .item {
-      width: 32%;
+      width: 31%;
       flex: none;
       margin-right: 2%;
       

src/onlineSelling/components/HouseGrid/room.scss

@@ -10,26 +10,10 @@
   }
 
   .warn {
-    color: #E31F05;
+    color: #730000;
   }
 
   .tip {
     color: #BB9C79;
   }
-
-  &.bkg-1 {
-    background:rgba(248,248,248,1);
-  }
-  &.bkg-2 {
-    background:rgba(249,222,209,1);
-  }
-  &.bkg-3 {
-    background:rgba(248,198,173,1);
-  }
-  &.bkg-4 {
-    background:rgba(255,173,173,1);
-  }
-  &.bkg-5 {
-    background:rgba(249,142,142,1);
-  }
 }

src/onlineSelling/components/ScrollMessage/index.js

@@ -0,0 +1,70 @@
+import Taro, { Component, render } from '@tarojs/taro'
+import { Swiper, View, SwiperItem } from "@tarojs/components";
+import NamedIcon from '../NamedIcon';
+import { formateLeftTime } from '@/utils/tools'
+import dayjs from 'dayjs'
+import './index.scss'
+import TimeTicker from '../TimeTicker';
+
+export default class ScrollMessage extends Component {
+  formateTM = (dt) => {
+    const now = dayjs(new Date);
+    const { preselectionStartTime, preselectionEndTime } = this.props.summary || {}
+    const start = dayjs(preselectionStartTime)
+    const end = dayjs(preselectionEndTime)
+
+    let tip = ''
+    let useTK = true
+
+    if (now.isBefore(start)) {
+      tip = '距离预选开始还有'
+    } else if (now.isBefore(end)) {
+      tip = '距离预选结束还有'
+    } else {
+      tip = '预选已结束，请关注下轮预选'
+      useTK = false
+    }
+
+    return `${tip} ${useTK ? formateLeftTime(dt, 'min') : ''}`
+  }
+
+  computeDate = () => {
+    const now = dayjs(new Date);
+    const { preselectionStartTime, preselectionEndTime } = this.props.summary || {}
+    const start = dayjs(preselectionStartTime)
+    const end = dayjs(preselectionEndTime)
+
+    if (now.isBefore(start)) {
+      return [now, start]
+    } else if (now.isBefore(end)) {
+      return [now, end]
+    } else {
+      return [now, now]
+    }
+  }
+
+  render() {
+    const [start, end] = this.computeDate()
+    const { salesNumber, preselectionNumber } = this.props.summary || {}
+    const notice = `当前 ${salesNumber} 套房源已有 ${preselectionNumber} 人成功预选`
+
+    return (
+      <View className="scrollmessage">
+        <View className="head">
+          <NamedIcon name="notice" size={44} />
+        </View>
+        <View className="body">
+          <Swiper vertical autoplay>
+            <SwiperItem>
+              <TimeTicker startTime={start} endTime={end} translate={this.formateTM} />
+            </SwiperItem>
+            <SwiperItem>
+              <View>{notice}</View>
+            </SwiperItem>
+          </Swiper>
+        </View>
+      </View>
+    )
+  }
+}
+

src/onlineSelling/components/ScrollMessage/index.scss

@@ -0,0 +1,12 @@
+.scrollmessage {
+  display: flex;
+
+  .head {
+    flex: none;
+    width: 60rpx;
+  }
+
+  .body {
+    flex: auto;
+  }
+}

src/onlineSelling/pages/help/index.js

@@ -0,0 +1,149 @@
+import Taro, { Component } from '@tarojs/taro'
+import { View } from '@tarojs/components'
+import './index.scss'
+import HotBlock from '../../components/HotBlock'
+
+export default class Help extends Component {
+  config = {
+    navigationBarTitleText: '帮助说明'
+  }
+
+  render() {
+    const hots = [
+      {
+        label: '(0)',
+        value: 0,
+      },
+      {
+        label: '(1)',
+        value: 1,
+      },
+      {
+        label: '(2)',
+        value: 2,
+      },
+      {
+        label: '(3)',
+        value: 3,
+      },
+      {
+        label: '(4)',
+        value: 4,
+      },
+      {
+        label: '(5)',
+        value: 5,
+      },
+      {
+        label: '(6~10)',
+        value: 8,
+      },
+      {
+        label: '(11~20)',
+        value: 15,
+      },
+      {
+        label: '(21~30)',
+        value: 25,
+      },
+      {
+        label: '(31~40)',
+        value: 35,
+      },
+      {
+        label: '(41~50)',
+        value: 45,
+      },
+      {
+        label: '(51~100)',
+        value: 80,
+      },
+      {
+        label: '(101~200)',
+        value: 150,
+      },
+      {
+        label: '(200以上)',
+        value: 201,
+      },
+    ]
+
+   return (
+     <View className="article">
+       <View className="section">
+         <View className="title">1.图例解释：</View>
+         <View>
+           <View className="cell flex">
+             <View className="head item-0">1号楼</View>
+             <View className="body item-1">楼栋/幢</View>
+           </View>
+           <View className="cell flex">
+             <View className="head item-0">2 单元</View>
+             <View className="body item-1">单元</View>
+           </View>
+           <View className="cell flex">
+             <View className="head item-0">3 楼</View>
+             <View className="body item-1">楼层</View>
+           </View>
+           <View className="cell flex">
+             <View className="head item-0">
+               <View>301 (1人)</View>
+               <View>234万</View>
+               <View>A户型</View>
+             </View>
+             <View className="body item-1">
+               <View>房号（预选人数）</View>
+               <View>价格</View>
+               <View>户型名</View>
+             </View>
+           </View>
+         </View>
+       </View>
+       <View className="section">
+         <View className="title">2.预选人数（热度）：</View>
+         <View>每有一位客户预选此房源，热度自动增加1，热度越大说明想购买此房源的用户越多，认筹摇号购买难度越大</View>
+       </View>
+       <View className="section">
+         <View className="title">3.热度指标值与颜色关系：</View>
+         <View className="flex" style="flex-wrap: wrap">
+          {hots.map(b => (<View className="item-0 hot-box" key={b.value}><HotBlock number={b.value}>{b.label}</HotBlock></View>))}
+         </View>
+       </View>
+       <View className="section">
+         <View className="title">4.为何需要登录：</View>
+         <View>预选房源和认筹房源按相关法律法规需要实名认证，通过手机号授权登录可以实现快捷认证。登录预选认筹后可以登录账号查看预选记录和认筹记录而不会遗失数据。</View>
+       </View>
+       <View className="section">
+         <View className="title">5.楼盘、房源问题：</View>
+         <View>和楼盘、房源相关问题可以联系置业顾问->在线置业顾问</View>
+       </View>
+       <View className="section">
+         <View className="title">6.如何按面积或价格筛选房源：</View>
+         <View>房源页面点击筛选按钮，选择一个户型或者价格即可查看按户型或价格筛选后的房源。</View>
+       </View>
+       <View className="section">
+         <View className="title">7.如何把在线选房分享我的亲朋好友：</View>
+         <View>房源页面点击分享按钮，选择直接分享发送链接给好友或群，选择生成海报保存图片，相册中找海报图片发送给好友或者朋友圈即可。</View>
+       </View>
+       <View className="section">
+         <View className="title">8.为什么房源详情中预选/取消按钮或认筹/取消按钮操作失败：</View>
+         <View>
+           <View>可能原因：</View>
+           <View>1）没有到预选或认筹时间，请关注通知或联系置业顾问</View>
+           <View>2）已过预选或认筹时间，请关注通知 或 联系置业顾问</View>
+           <View>3）其他原因，请 联系置业顾问</View>
+         </View>
+       </View>
+       <View className="section">
+         <View className="title">9.为什么之前看到的房源现在找不到了：</View>
+         <View>可能由于线上线下销售工作同步不及时原因，临时取消了此房源的线上预选和销售工作，有疑问请  联系置业顾问</View>
+       </View>
+       <View className="section">
+         <View className="title">10.如何查看我的选房记录：</View>
+         <View>房源页面点击下方选房记录按钮进入个人选房记录查看。或直接进入个人中心查看选房记录。</View>
+       </View>
+     </View>
+   )
+ }
+
+}

src/onlineSelling/pages/help/index.scss

@@ -0,0 +1,45 @@
+.article {
+  padding: 30rpx;
+  font-size: 28rpx;
+  line-height: 1.6em;
+  color: #666;
+
+  .section {
+    margin-bottom: 40rpx;
+
+    .title {
+      color: #333;
+    }
+  }
+
+
+  .flex {
+    display: flex;
+
+    .item-0 {
+      flex: none;
+    }
+
+    .item-1 {
+      flex: auto;
+    }
+  }
+
+  .cell {
+    padding: 28rpx 0;
+    box-shadow:0px 1rpx 0px 0px rgba(0, 0, 0, 0.08);
+
+    .head {
+      width: 180rpx;
+    }
+  }
+
+  .hot-box {
+    width: 23%;
+    height: 60rpx;
+    line-height: 60rpx;
+    text-align: center;
+    
+    margin: 2% 2% 0 0;
+  }
+}

src/onlineSelling/pages/houseList/index.js

@@ -1,8 +1,9 @@
 import Taro, { Component } from '@tarojs/taro'
-import { View, ScrollView, Button } from '@tarojs/components'
-import TimeTicker from '../../components/TimeTicker'
+import { View, ScrollView, Button, Swiper } from '@tarojs/components'
 import Unit from '../../components/HouseGrid/Unit'
 import NamedIcon from '../../components/NamedIcon'
+import ScrollMessage from '../../components/ScrollMessage'
+import Blank from '../../components/Blank'
 import { formateLeftTime } from '@/utils/tools'
 
 import './index.scss'
@@ -55,6 +56,13 @@ export default class HouseList extends Component {
                 price: '234万',
                 apartmentName: 'B户型'
               },
+              {
+                houseId: 6,
+                roomNumber: '306',
+                totalNum: 266,
+                price: '234万',
+                apartmentName: 'B户型'
+              },
             ]
           },
           {
@@ -186,21 +194,32 @@ export default class HouseList extends Component {
     ]
   }
 
-  formateTM (dt) {
-    return `距离预选结束还有 ${formateLeftTime(dt, 'min')}`
+  goto = url => Taro.navigateTo({ url })
+
+  handleExplainClick = e => {
+    this.goto('/onlineSelling/pages/help/index')
   }
 
+  handleSearchClick = e => {}
+
   renderBar () {
+    const summary = {
+      preselectionStartTime: '2020-02-09',
+      preselectionEndTime: '2020-02-16',
+      salesNumber: 199,
+      preselectionNumber: 16,
+    }
+
     return (
       <View className="topbar">
-        <View className="body">          
-          <TimeTicker endTime="2020-02-12" translate={this.formateTM.bind(this)} />
+        <View className="body">
+          <ScrollMessage summary={summary} />
         </View>
         <View className="action">
-          <View>
+          <View onClick={this.handleExplainClick}>
             <NamedIcon name="explain" size={50} />
           </View>
-          <View>
+          <View onClick={this.handleSearchClick}>
             <NamedIcon name="screen" size={50} />
           </View>
         </View>
@@ -224,9 +243,7 @@ export default class HouseList extends Component {
 
   renderBlank() {
     return (
-      <View className="container">
-        <View className="blank"></View>
-      </View>      
+      <View className="container"><Blank /></View>      
     )
   }
 
@@ -249,7 +266,8 @@ export default class HouseList extends Component {
     return (
       <View className="houselist">
         {this.renderBar()}
-        {this.renderBlank()}
+        {this.renderHouses()}
+        {/* {this.renderBlank()} */}
         {this.renderBottom()}
       </View>
     )

src/onlineSelling/pages/houseList/index.scss

@@ -14,6 +14,7 @@
       background:rgba(248,248,248,1);
       padding-left: 30rpx;
       font-size: 24rpx;
+      overflow: hidden;
     }
   
     .action {
@@ -63,14 +64,5 @@
   .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/onlineSelling/pages/records/index.js

@@ -0,0 +1,80 @@
+import Taro, { Component } from '@tarojs/taro'
+import { View, ScrollView } from '@tarojs/components'
+import HouseCard from '../../components/HouseCard'
+
+import './index.scss'
+
+export default class Records extends Component {
+  config = {
+    navigationBarTitleText: '选房记录'
+  }
+
+  state = {
+    testData: [
+      {
+        preselectionRecordId: 1,
+        buildingName: '艾菲国际二期',
+        blockName: '6栋',
+        unitName: '一单元',
+        roomName: '1502',
+        aerialViewImg: 'https://estateagents.oss-cn-shanghai.aliyuncs.com/miniapp/upload/images/1573738541467-25667811-b020-4c1f-b57d-e65a410d6fbd3103856559286073565.jpg',
+        price: '234万',
+        createDate: '2020-02-8',
+        status: 1
+      },
+      {
+        preselectionRecordId: 2,
+        buildingName: '艾菲国际二期',
+        blockName: '6栋',
+        unitName: '一单元',
+        roomName: '1502',
+        aerialViewImg: 'https://estateagents.oss-cn-shanghai.aliyuncs.com/miniapp/upload/images/1573738541467-25667811-b020-4c1f-b57d-e65a410d6fbd3103856559286073565.jpg',
+        price: '234万',
+        createDate: '2020-02-9',
+        status: 0
+      },
+      {
+        preselectionRecordId: 3,
+        buildingName: '艾菲国际二期',
+        blockName: '6栋',
+        unitName: '二单元',
+        roomName: '1503',
+        aerialViewImg: 'https://estateagents.oss-cn-shanghai.aliyuncs.com/miniapp/upload/images/1573738541467-25667811-b020-4c1f-b57d-e65a410d6fbd3103856559286073565.jpg',
+        price: '234万',
+        createDate: '2020-02-10',
+        status: 1
+      },
+      {
+        preselectionRecordId: 4,
+        buildingName: '艾菲国际二期',
+        blockName: '6栋',
+        unitName: '二单元',
+        roomName: '1504',
+        aerialViewImg: 'https://estateagents.oss-cn-shanghai.aliyuncs.com/miniapp/upload/images/1573738541467-25667811-b020-4c1f-b57d-e65a410d6fbd3103856559286073565.jpg',
+        price: '234万',
+        createDate: '2020-02-11',
+        status: 0
+      },
+    ]
+  }
+
+  render() {
+    const { testData } = this.state
+
+    return (
+      <View className="records">
+        <ScrollView scrollY>
+          {
+            testData.map((item) => {
+              return (
+                <View className="carditem" key={item.preselectionRecordId}>
+                  <HouseCard summary={item}/>
+                </View>
+              )
+            })
+          }
+        </ScrollView>
+      </View>
+    )
+  }
+}

src/onlineSelling/pages/records/index.scss

@@ -0,0 +1,9 @@
+.records {
+  padding: 0 30rpx;
+
+  .carditem {
+    & + .carditem {
+      margin-top: 40rpx;
+    }
+  }
+}

yarn-error.log

@@ -1,5 +1,5 @@
 Arguments: 
-  D:\Applications\nodejs\node.exe D:\Applications\Yarn\bin\yarn.js add src/onlineSelling/components/HouseGrid/Unit --silent --no-progress
+  D:\Applications\nodejs\node.exe D:\Applications\Yarn\bin\yarn.js add src/onlineSelling/components/ScrollMessage --silent --no-progress
 
 PATH: 
   D:\Applications\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;D:\FrontProjects\estateagents\miniapp-v3\node_modules\.bin;D:\Applications\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;D:\FrontProjects\estateagents\miniapp-v3\node_modules\.bin;D:\Applications\Java8\bin;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;D:\Applications\nodejs\;D:\Applications\Git\cmd;D:\Applications\go1.12\go\bin;D:\Applications\bin;D:\Applications\nginx-1.10.2;D:\Applications\apache-maven-3.6.0\bin;D:\Applications\Yarn\bin\;C:\Users\yansen\AppData\Local\Microsoft\WindowsApps;C:\Program Files\Bandizip\;C:\Users\yansen\AppData\Roaming\npm;D:\Applications\Microsoft VS Code\bin;D:\GoProjects\bin;C:\Users\yansen\AppData\Local\Yarn\bin
@@ -14,7 +14,7 @@ Platform:
   win32 x64
 
 Trace: 
-  Error: https://registry.npm.taobao.org/src%2fonlineSelling/components/HouseGrid/Unit: [not_found] document not found
+  Error: https://registry.npm.taobao.org/src%2fonlineSelling/components/ScrollMessage: [not_found] document not found
       at Request.params.callback [as _callback] (D:\Applications\Yarn\lib\cli.js:65364:18)
       at Request.self.callback (D:\Applications\Yarn\lib\cli.js:129397:22)
       at Request.emit (events.js:198:13)