records

src/onlineSelling/components/Blank/index.js

@@ -4,9 +4,8 @@ import './index.scss'
 
 export default function Blank(props) {
   return (
-    <View className="blank">
+    <View className="blank" style={props.style}>
       <Image className="nodata-img" src={require('../../assets/norecord.png')}></Image>
-      {/* <View className="nodata"></View> */}
       {
         props.tips && <View className="tips">{props.tips}</View>
       }

src/onlineSelling/components/RaiseCard/index.js

@@ -0,0 +1,53 @@
+import { View, Image, Text } from "@tarojs/components";
+import { transferImage } from '@/utils/tools'
+import dayjs from 'dayjs'
+import emptyImg from '@/assets/empty.png'
+
+import './index.scss'
+
+export default function HouseCard(props) {
+  const {
+    buildingName,
+    termname,
+    blockName,
+    unitName,
+    roomName,
+    price,
+    housingStatus,
+    saleBatchStatus,
+    houseId,
+    createDate,
+    status = 1,
+    buildingImgList = [],
+  } = props.summary || {}
+
+  const title = `${buildingName} ${termname || ''} ${blockName} ${unitName} ${roomName}`
+  const thumb = (buildingImgList || []).length
+  const showDT = dayjs(createDate).format('YYYY/MM/DD')
+  const wanY = Number(price)
+
+  const toHouseDetail = () => {
+    if (housingStatus == '0' || saleBatchStatus == '0') {
+      Taro.showToast({ title: '当前销售批次或该房源已被取消发布', icon: 'none', duration: 2000 })
+    } else {
+      Taro.navigateTo({
+        url: `/onlineSelling/pages/detail/index?id=${houseId}`
+      })
+    }
+  }
+  return (
+    <View className="housecard">
+      <View className="head" onClick={toHouseDetail}>
+        {thumb ? <Image className="thumb" src={transferImage((buildingImgList)[0].url)} mode="aspectFit" /> :
+          <Text style="font-size:26rpx;color:#666">暂无户型图</Text>
+        }
+      </View>
+      <View className="body" onClick={toHouseDetail}>
+        <View className={status == '1' ? 'raised badge' : status == '2' ? 'unraise badge' : 'badge'}>{status == '1' ? '已缴费' : '未缴费'}</View>
+        <View className="title">{title}</View>
+        <View className="meta">{showDT}</View>
+      </View>
+
+    </View>
+  )
+}

src/onlineSelling/components/RaiseCard/index.scss

@@ -0,0 +1,59 @@
+.housecard {
+  width: 690px;
+  height: 250px;
+  background:#fff;
+  display: flex;
+  font-weight: 400;
+  margin: 0 30px 30px 30px;
+  box-shadow:0px 4px 15px 1px rgba(0, 0, 0, 0.12);
+  border-radius:8px;
+  .head {
+    width: 250px;
+    flex: none;
+    border-right: 2px solid rgba(0, 0, 0, 0.04);
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .thumb {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .body {
+    width: 440px;
+    flex: none;
+    position: relative;
+    line-height: 40px;
+    padding: 16px;
+
+    .badge {
+      font-size: 30px;
+      color: #999;
+      text-align: right;
+      margin-right: 12px;
+    }
+    .unraise{
+      color: #FE1C1C
+    }
+    .raised{
+     color: #3DE344; 
+    }
+    .title {
+      font-size: 26px;
+      font-weight: bold;
+      color:#333;
+      line-height: 1.8;
+    }
+
+    .meta {
+      font-size: 24px;
+      color:#999;
+      text-align: right;
+    }
+
+  }
+
+}

src/onlineSelling/pages/records/index.js

@@ -1,6 +1,7 @@
 import Taro, { Component } from '@tarojs/taro'
 import { View, ScrollView, Block } from '@tarojs/components'
 import HouseCard from '../../components/HouseCard'
+import RaiseCard from '../../components/RaiseCard'
 import { queryPreselectionRecord } from '@/services/project'
 import { connect } from '@tarojs/redux'
 import ready from '@/utils/ready'
@@ -20,6 +21,10 @@ export default class Records extends Component {
   state = {
     recordList: [],
     current: 0,
+    noRecord: false,
+    building: '',
+    saleBatch: '',
+    status: '',
   }
   componentDidShow() {
     ready.queue(() => {
@@ -33,7 +38,12 @@ export default class Records extends Component {
       queryPreselectionRecord(params).then(res => {
         const list = res.records
         this.setState({
-          recordList: list.filter(item => item.status == '1') || []
+          recordList: list.filter(item => item.status == '1') || [],
+
+        }, () => {
+          this.setState({
+            noRecord: this.state.recordList.length > 0 ? false : true
+          })
         })
       })
     })
@@ -53,22 +63,22 @@ export default class Records extends Component {
   }
 
   renderPreselection() {
-    const { recordList } = this.state
+    const { recordList, noRecord } = this.state
     return (
       <Block>
         <CheckboxGroup onChange={this.CheckboxChange}>
           {
-            !recordList.length ? <Blank tips="暂无预选记录" /> :
+            noRecord ? <Blank style="margin:14vh 0 32vh 0" tips="暂无预选记录" /> :
               <ScrollView scrollY>
                 {
                   recordList.map((item) => {
                     return (
                       <Label class="checkbox" >
                         <Checkbox value={item.houseId} checked={item.checked} >
-                          {item.status == '1' && <View className="carditem" key={item.preselectionRecordId} >
+                          <View className="carditem" key={item.preselectionRecordId} >
 
                             <HouseCard summary={item} />
-                          </View>}
+                          </View>
                         </Checkbox>
                       </Label>
                     )
@@ -79,6 +89,7 @@ export default class Records extends Component {
           }
         </CheckboxGroup>
         <View className="bottom-con">
+          <View className="raise-btn">认筹房源</View>
           <View className="statement"> ！免责声明：</View>
           <View className="statement">房源信息、选房协议等来源于开发商,具体销售数据可能会有延迟，最终以开发商官网公告为准，请在执行具体操作前和置业顾问沟通确认，并谨慎核查。</View>
 
@@ -86,7 +97,123 @@ export default class Records extends Component {
       </Block>
     )
   }
-  handleExplainClick() {
+  renderRaise() {
+    const { recordList, noRecord } = this.state
+    return (
+      <Block>
+
+        {
+          noRecord ? <Blank style="margin:14vh 0 32vh 0" tips="暂无认筹记录" /> :
+            <ScrollView scrollY>
+              {
+                recordList.map(item => (
+                  <View key={item.preselectionRecordId} >
+                    <RaiseCard summary={item} />
+                  </View>
+                )
+                )
+              }
+            </ScrollView >
+        }
+
+        <View className="bottom-con">
+          <View className="statement">！免责声明：</View>
+          <View className="statement">房源信息、选房协议等来源于开发商,具体销售数据可能会有延迟，最终以开发商官网公告为准，请在执行具体操作前和置业顾问沟通确认，并谨慎核查。</View>
+
+        </View>
+      </Block>
+    )
+  }
+  onSexChange = e => {
+
+    let sex = e.detail.value == '0' ? '1' : e.detail.value == '1' ? '2' : ''
+    this.setState({
+      baseInfo: {
+        ...this.state.baseInfo,
+        sex,
+      }
+    })
+  }
+  handleSaleBatchChange = e => {
+
+    let saleBatch = e.detail.value == '0' ? '1' : e.detail.value == '1' ? '2' : ''
+    this.setState({
+      saleBatch
+    })
+  }
+  handleStatusChange = e => {
+
+    let sex = e.detail.value == '0' ? '1' : e.detail.value == '1' ? '2' : ''
+    this.setState({
+      status,
+    })
+  }
+  renderRaiseScreen() {
+    const { building, saleBatch, status } = this.state
+    const sexSelector = ['男', '女']
+    const selector = [{buildingTypeName:'楼盘1'}, {buildingTypeName:'楼盘2'},{buildingTypeName:'楼盘3'},{buildingTypeName:'楼盘4'},],
+    return (
+      <Block>
+        <View className="base-con">
+          <View className="con-item">
+            <View style="font-size:14px;color:#666">
+              选择楼盘：
+            </View>
+            <View className="con-picker" >
+              <View>
+                <Picker mode='selector' range={sexSelector} onChange={this.onSexChange}>
+                  <View className='picker'>
+                    {building == '1' ? '男' : building == '2' ? '女' : '　'}
+                  </View>
+                </Picker>
+              </View>
+              <View className="right-icon"></View>
+            </View>
+          </View>
+          <View className="con-item">
+            <View style="font-size:14px;color:#666">
+              选择销售批次：
+            </View>
+            <View className="con-picker" >
+              <View>
+                <Picker mode='selector' range={selector} range-key="buildingTypeName" onChange={this.handleSaleBatchChange}>
+                  <View className='picker'>
+                    {saleBatch || '　'}
+                  </View>
+                </Picker>
+              </View>
+              <View className="right-icon"></View>
+            </View>
+          </View>
+          <View className="con-item">
+            <View style="font-size:14px;color:#666">
+              锁定状态：
+            </View>
+            <View className="con-picker" >
+              <View>
+                <Picker mode='selector' range={selector} range-key="buildingTypeName" onChange={this.handleStatusChange}>
+                  <View className='picker'>
+                    {status || '　'}
+                  </View>
+                </Picker>
+              </View>
+              <View className="right-icon"></View>
+            </View>
+          </View>
+          <View className="bottom-btn">
+            <View className="save" onClick={this.baseSaveBtn}>
+              保存
+            </View>
+            <View className="cancel" onClick={this.baseCancelBtn}>
+              取消
+          </View>
+          </View>
+        </View>
+
+      </Block>
+    )
+  }
+  handleScreenClick() {
 
   }
   handleCondition(value) {
@@ -108,12 +235,12 @@ export default class Records extends Component {
               </View>
             ))}
           </View>
-          <View onClick={this.handleExplainClick}>
+          <View onClick={this.handleScreenClick}>
             <Image style="width:50rpx;height:50rpx" src={transferImage(require('../../assets/screen.png'))}></Image>
           </View>
         </View>
         {current == 0 && this.renderPreselection()}
-        {/* {current == 1 && this.renderPrice()} */}
+        {current == 1 && this.renderRaise()}
       </Block>
     )
   }
@@ -122,7 +249,8 @@ export default class Records extends Component {
 
     return (
       <View className="records" >
-        {this.renderBar()}
+        {/* {this.renderBar()} */}
+        {this.renderRaiseScreen()}
 
 
       </View >

src/onlineSelling/pages/records/index.scss

@@ -45,9 +45,154 @@
   .bottom-con{
     padding: 0 30px;
     margin-top: 20vh;
+    .raise-btn{
+      width: 690px;
+      height:94px;
+      line-height: 94px;
+      background:rgba(187,156,121,1);
+      border-radius:10px;
+      color: #fff;
+      font-size: 36px;
+      text-align: center;
+      margin-bottom: 20px;
+
+    }
+    .statement{
+      font-size: 24px;
+      color: #999;
+      line-height: 1.6;
+    }
+  }
+  .base-con{
+    width: 94%;
+    height:740px;
+    position: absolute;
+    left: 3%;
+    top: 50%;
+    background-color: #fff;
+    padding: 40px;
+    margin-top: -370px;
+    border-radius:12px;
+    .con-item{
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 20px;
+    }
+    .textarea {
+      border: 2px solid #e3e3e3;
+      padding: 20px;
+      border-radius: 12px;
+      width:416px;
+      height:160px;
+      font-size: 26px;
+    }
+    .input {
+      border: 2px solid #e3e3e3;
+      padding: 0 20px;
+      border-radius: 4px;
+      width:416px;
+      height:40px;
+      line-height: 40px;
+      font-size: 26px;
+    }
+    .con-picker{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width:456px;
+      height:48px ;
+      line-height: 48px;
+      padding: 0 16px;
+      background-color: #f4f4f4;
+      .picker{
+        width: 400px;
+      }
+    }
+    .right-icon{
+      width:18px;
+      height:18px;
+      border-top: 2px solid #999;
+      border-right: 2px solid #999;
+      transform:rotate(45deg);
+      float: right;
+    }
+    .bottom-btn{
+      margin: 30px auto 0 auto;
+      width: 90%;
+      height: 80px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 30px;
+    
+      .save{
+        background-color: $primary-color;
+        color:#fff;
+        height: 76px;
+        line-height: 76px;
+        text-align: center;
+        width:240px;
+        border-radius:12px;
+        border:2px solid $primary-color;
+      }
+      .cancel{
+        color: $primary-color;
+        text-align: center;
+        height: 76px;
+        line-height: 76px;
+        width:240px;
+        border-radius:12px;
+        border:2px solid $primary-color;
+      }
+    }
+
   }
-  .statement{
-    font-size: 24px;
-    color: #999;
+  .content {
+    width: 94%;
+    height:518px;
+    position: absolute;
+    left: 3%;
+    top: 50%;
+    background-color: #fff;
+    padding: 40px;
+    margin-top: -259px;
+    border-radius:12px;
+    .textarea {
+      border: 2px solid #e3e3e3;
+      padding: 20px;
+      border-radius: 12px;
+      width:416px;
+      height:258px;
+      font-size: 26px;
+    }
+    .bottom-btn{
+      margin: 70px auto 0 auto;
+      width: 90%;
+      height: 80px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 30px;
+    
+      .save{
+        background-color: $primary-color;
+        color:#fff;
+        height: 76px;
+        line-height: 76px;
+        text-align: center;
+        width:240px;
+        border-radius:12px;
+        border:2px solid $primary-color;
+      }
+      .cancel{
+        color: $primary-color;
+        text-align: center;
+        height: 76px;
+        line-height: 76px;
+        width:240px;
+        border-radius:12px;
+        border:2px solid $primary-color;
+      }
+    } 
   }
 }