raiseMoney

project.config.json

@@ -48,8 +48,8 @@
 			"list": [
 				{
 					"id": -1,
-					"name": "pages/raiseProfile/index",
-					"pathName": "onlineSelling/pages/raiseProfile/index",
+					"name": "pages/raiseMoney/index",
+					"pathName": "onlineSelling/pages/raiseMoney/index",
 					"query": "",
 					"scene": null
 				},

src/onlineSelling/components/ConsultantItem/index.js

@@ -11,7 +11,7 @@ export default function CConsultantItem(props) {
       <Image src={data.photo || data.avatar} className='avatar' ></Image>
       <View className="name">{data.name}<Image src={require('@/assets/person/card.png')} className='card' ></Image>{type == 'raiseProfile' && <View className="tip">您的专属置业顾问</View>}</View>
       <View className="phone">{data.phone}</View>
-      {type != 'raiseProfile' && <View className="home">主页</View>}
+      {!type && <View className="home">主页</View>}
       {type == 'raiseProfile' && <View className="contact">联系我<Text className="right-icon"></Text></View>}
     </View >
   );

src/onlineSelling/components/RaiseCard/index.js

@@ -3,6 +3,7 @@ import { transferImage } from '@/utils/tools'
 import dayjs from 'dayjs'
 import emptyImg from '@/assets/empty.png'
 import copyImg from '../../assets/copy.png'
+import closeImg from '../../assets/close.png'
 
 import './index.scss'
 
@@ -40,10 +41,10 @@ export default function HouseCard(props) {
       })
     }
   }
-  const copyData = (e) =>{
+  const copyData = (e) => {
     e.stopPropagation()
     Taro.setClipboardData({
-      data:code,
+      data: code,
       onSuccess: (() => { }),
     })
   }
@@ -55,16 +56,19 @@ export default function HouseCard(props) {
         }
       </View>
       <View className="body" onClick={toHouseDetail}>
-        {props.type != 'raiseProfile' && props.type != 'houseResource' && <View className={status == '1' ? 'raised badge' : status == '2' ? 'unraise badge' : 'badge'}>{status == '1' ? '已缴费' : '未缴费'}</View>}
+        {props.type == 'raiseMoney' && <Image src={closeImg} className="close-img"></Image>}
+        {!props.type && <View className={status == '1' ? 'raised badge' : status == '2' ? 'unraise badge' : 'badge'}>{status == '1' ? '已缴费' : '未缴费'}</View>}
         {(props.type == 'raiseProfile' || props.type == 'houseResource') && <View style="color:#FF3C3C" className={status == '1' ? 'raised badge' : status == '2' ? 'unraise badge' : 'badge'}>{status == '1' ? '已锁给我' : '未缴费'}</View>}
-        {props.type == 'raiseProfile' && <View style="color:#BB9C79;font-size:30rpx;margin-top:-20rpx">{apartmentName}</View>}
+        {props.type == 'raiseProfile' || props.type == 'raiseMoney' && <View style={props.type == 'raiseMoney' ? 'color:#BB9C79;font-size:30rpx' : 'color:#BB9C79;font-size:30rpx;margin-top:-20rpx'}>{apartmentName}</View>}
+        {props.type == 'raiseMoney' && <View className="red-price">现价{Number(price) + 0}万</View>}
         {props.type == 'houseResource' && <View style="color:#BB9C79;font-size:28rpx;margin:-40rpx 0 26rpx 0">未锁定/已锁定</View>}
         <View className="title">{title}</View>
-        {props.type != 'raiseProfile' && props.type != 'houseResource' && <View className="meta">{showDT}</View>}
+        {!props.type && <View className="meta">{showDT}</View>}
         {props.type == 'raiseProfile' && <View className="price">现价<Text className="red">{Number(price) + 0}</Text>万</View>}
-        {props.type == 'raiseProfile' && <View className="area">建筑面积约<Text className="red">{area1}m²</Text></View>}
-        {props.type == 'raiseProfile' && <View className="area">使用面积约<Text className="red">{area2}m²</Text></View>}
-        {props.type == 'houseResource' && <View className="price" style="margin-top:26rpx">房源编号：{code}
+
+        {props.type == 'raiseProfile' || props.type == 'raiseMoney' && <View className="area">建筑面积约<Text className="red">{area1}m²</Text></View>}
+        {props.type == 'raiseProfile' || props.type == 'raiseMoney' && <View className="area">使用面积约<Text className="red">{area2}m²</Text></View>}
+        {props.type == 'houseResource' && <View className="house-code" style="margin-top:26rpx">房源编号：{code}
           <Image src={copyImg} className="copy-img" onClick={copyData}></Image>
         </View>}
       </View>

src/onlineSelling/components/RaiseCard/index.scss

@@ -28,7 +28,14 @@
     position: relative;
     line-height: 40px;
     padding: 16px;
-
+    .close-img{
+      width: 46px;
+      height: 46px;
+      padding: 10px;
+      position: absolute;
+      right: 10px;
+      top: 10px;
+    }
     .badge {
       font-size: 30px;
       color: #999;
@@ -58,12 +65,24 @@
       color: #333;
       display: flex;
       align-items: center;
+    }
+    .house-code{
+      font-size: 28px;
+      color: #333;
+      display: flex;
+      align-items: center;
       justify-content: space-between;
     }
     .area{
       font-size: 24px;
       color: #333;
     }
+    .red-price{
+      color: #FF3C3C;
+      font-weight: 900;
+      line-height: 2;
+      font-size: 24px;
+    }
     .red{
       color: #FF3C3C;
       margin: 0 6px;

src/onlineSelling/pages/raiseMoney/index.js

@@ -1,30 +1,180 @@
 import Taro, { Component } from '@tarojs/taro'
-import { View } from '@tarojs/components'
+import { View, Block } from '@tarojs/components'
 import './index.scss'
+import RaiseCard from '../../components/RaiseCard'
+import Statement from '../../components/Statement'
+import ConsultantItem from '../../components/ConsultantItem/index'
 
 export default class raiseMoney extends Component {
   config = {
     navigationBarTitleText: '认筹确认'
   }
+  state = {
+    current: 3,
+    houseList: [
+      {
+        apartmentName: 'A户型',
+        blockName: "1栋",
+        buildingId: "9f021a59b2a714822894c23ccca8c2db",
+        buildingImgList: null,
+        buildingName: "万科安平园舍",
+        createDate: "2020-02-27T16:31:56",
+        floorName: "1楼",
+        houseId: "820",
+        preselectionRecordId: 205,
+        price: "111.00000000",
+        roomName: "1户",
+        saleBatchStatus: "1",
+        status: 1,
+        termname: "1期",
+        unitName: "2单元",
+        area1: '290',
+        area2: '270',
+        code: '2-09876545456'
+      }, {
+        apartmentName: 'B户型',
+        blockName: "1栋",
+        buildingId: "9f021a59b2a714822894c23ccca8c2db",
+        buildingImgList: null,
+        buildingName: "凤翔新城",
+        createDate: "2020-02-27T16:31:56",
+        floorName: "1楼",
+        houseId: "820",
+        preselectionRecordId: 206,
+        price: "111.00000000",
+        roomName: "1户",
+        saleBatchStatus: "1",
+        status: 1,
+        termname: "1期",
+        unitName: "2单元",
+        area1: '290',
+        area2: '270',
+        code: '2-09876545333'
+      },
+    ]
 
-  render() {
+  }
+  renderTop() {
+    const tabList = [
+      { title: '确认房源', value: 0 },
+      { title: '阅读协议', value: 1 },
+      { title: '填写资料', value: 2 },
+      { title: '缴纳定金', value: 3 },
+      { title: '认筹结果', value: 4 },
+    ]
+    const { current } = this.state
 
     return (
-      <View className="raiseMoney">
-        <View className="top-con">
-          <View>确认房源</View>
-          <View className="right-icon1" ></View>
-          <View>阅读协议</View>
-          <View className="right-icon1" ></View>
-          <View>填写资料</View>
-          <View className="right-icon1" ></View>
-          <View>缴纳定金</View>
-          <View className="right-icon1" ></View>
-          <View>认筹结果</View>
-          
-       
+      <View className="top-con">
+        {tabList.map((item, index) => (
+          <View className="flex" key={index + 'top'} style={current == item.value ? 'color:#333;font-weight:700' : ''}>
+            {item.title}
+            {item.value != 4 &&
+              <View className="flex" style="margin:0 12rpx 0 4rpx">
+                <View className='right-icon'></View>
+                <View className='right-icon icon2'></View>
+                <View className='right-icon icon3'></View>
+              </View>
+            }
+
+          </View>
+        ))
+        }
+      </View>
+    )
+  }
+  renderHouse() {
+    const { houseList } = this.state
+    return (
+      <ScrollView scrollY className="container">
+        {
+          houseList.map(item => (
+            <View key={item.preselectionRecordId} >
+              <RaiseCard type="raiseMoney" summary={item} />
+            </View>
+          )
+          )
+        }
+        <View className="addhouse">从<Text style="color:#BB9C79">预选记录</Text>中添加其他房源</View>
+        <View className="addhouse">从<Text style="color:#F3B82E">房源列表</Text>中添加其他房源</View>
+        <Statement style="margin-top:80rpx" />
+      </ScrollView>
+    )
+  }
+  renderAgreement() {
+    return (
+      <ScrollView scrollY className="container3">
+        <View className="agent-box">
+          <View className="center-title">线上选房协议</View>
+          <View className="title">chgissvdsghuytredsvbnhjuytrewdsvbnmjkuytrewscvbnmkloiu6543ewsdcvbnmjkoiu65rewsazxcv bnmjytresazx nmjytredscvbnm,kuytrdszx nmjkuy6redsvbnjkoi675erdsfghjklio765ewdxc mjkuytredsxcvbnmki56resaxzc bnjku5redsx bmkju65eszx bnhjyu63wqazXCVHJKLOPIU7TR4QW	W345Y789P,KNB CXZaq1wet5uyjnhbv cxazQWETU67JM 	q1e3tyujm bncxzaa	QE35HYUJNB VCaegtyujm,n vcxzawset5hyujm bncvxza</View>
+        </View>
+      </ScrollView >
+    )
+  }
+  renderProfile() {
+    const item = { name: '哈哈哈1', phone: '138541369741', avatar: 'http://img5.imgtn.bdimg.com/it/u=3299138037,391931528&fm=26&gp=0.jpg' }
+
+    return (
+      <ScrollView scrollY className="container2">
+        <View className="profile-box">
+          <View className="title">我的个人信息</View>
+          <View style="font-size:24rpx;color:#999;line-height:60rpx">除手机号外其他信息修改后会保存到个人信息中</View>
+          <View className="profile-flex">
+            <View className="title">我的置业顾问信息</View>
+            <View className="choose">选择置业顾问</View>
+          </View>
+          <ConsultantItem
+            data={item}
+            style="padding:30rpx 0"
+            type="raiseMoney"
+            onClick={this.handleItemClick}>
+          </ConsultantItem>
         </View>
+      </ScrollView >
+    )
+  }
+  renderMoney(){
+    return (
+      <ScrollView scrollY className="container2" style="padding:0 30rpx">
+           <View className="profile-flex">
+            <View className="title">认筹金额</View>
+            <View className="price">30000 元</View>
+          </View>
+          <View className="center-title">线上选房协议</View>
+      </ScrollView >
+    )
+  }
+  nextStep(current) {
+    this.setState({
+      current: current + 1
+    })
+  }
+  upStep(current) {
+    this.setState({
+      current: current - 1
+    })
+  }
+  renderBottomBtn() {
+    const { current } = this.state
+    return (
+      <View className="bottom-btn">
+        {current == 1 && <View style="font-size:24rpx;color:#999;line-height:70rpx">请仔细阅读选房协议直到结尾才能进入下一步</View>}
+        {current != 4 && <View className="next-btn" onClick={() => this.nextStep(current)}>{current==3?'现在缴费':'下一步'}</View>}
+        {current != 0 && <View className="up-btn" onClick={() => this.upStep(current)}>上一步</View>}
+      </View>
+    )
+  }
 
+  render() {
+    const { current } = this.state
+    return (
+      <View className="raiseMoney">
+        {this.renderTop()}
+        {current == 0 && this.renderHouse()}
+        {current == 1 && this.renderAgreement()}
+        {current == 2 && this.renderProfile()}
+        {current == 3 && this.renderMoney()}
+        {this.renderBottomBtn()}
       </View>
     )
   }

src/onlineSelling/pages/raiseMoney/index.scss

@@ -2,34 +2,104 @@
   .top-con{
     display: flex;
     align-items: center;
+    padding: 0 30px;
+    line-height: 100px;
+    color: #666;
+    font-size: 24px;
+    .flex{
+      display: flex;
+      align-items: center;
+      .right-icon{
+        width:10px;
+        height:10px;
+        border-top: 1px solid rgba(0,0,0,0.4);
+        border-right: 1px solid rgba(0,0,0,0.4);
+        transform:rotate(45deg);
+        display: inline-block;
+      }
+      .icon2{
+        width:13px;
+        height:13px;
+        border-top: 1px solid rgba(0,0,0,0.7);
+        border-right: 1px solid rgba(0,0,0,0.7);
+        margin-left: -2px;
+      }
+      .icon3{
+        width:17px;
+        height:17px;
+        border-top: 0.6px solid rgba(0,0,0,1);
+        border-right: 0.6px solid rgba(0,0,0,1);
+        margin-left: -2px;
+      }
+    }
+  }
+  .addhouse{
+    font-size:28px;
+    color: #333;
+    line-height: 70px;
+    text-align: center;
+  }
+  .container {
+    height: calc(100vh - 254px);
+  }
+  .container2 {
+    height: calc(100vh - 382px);
+  }
+  .container3 {
+    height: calc(100vh - 452px);
+  }
+  .agent-box{
     padding: 30px;
-    .right-icon1{
-      width:11px;
-      height:11px;
-      border-top: 1px solid rgba(0,0,0,0.4);
-      border-right: 1px solid rgba(0,0,0,0.4);
-      transform:rotate(45deg);
-      display: inline-block;
+  }
+  .center-title{
+    font-size: 24px;
+    color: #333;
+    text-align: center;
+  }
+  .profile-box{
+    padding: 0 30px;
+    .title{
+      font-size: 36px;
+      color: #333;
+      font-weight: 700;
     }
-    .right-icon2{
-      width:14px;
-      height:14px;
-      border-top: 1px solid rgba(0,0,0,0.7);
-      border-right: 1px solid rgba(0,0,0,0.4);
-      transform:rotate(45deg);
-      display: inline-block;
-      margin-left: -2px;
+  }
+  .profile-flex{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .choose{
+      font-size: 24px;
+      color: #BB9C79;
+    }
+    .price{
+      color: #FF3C3C;
+      font-size: 44px;
+    }
+  }
+  .bottom-btn{
+      position: fixed;
+      width: 100vw;
+      padding: 30px;
+      .next-btn{
+        height:94px;
+        line-height: 94px;
+        background:rgba(187,156,121,1);
+        border-radius:10px;
+        color: #fff;
+        font-size: 36px;
+        text-align: center; 
     }
-    .right-icon3{
-      width:17px;
-      height:17px;
-      border-top: 1px solid rgba(0,0,0,7);
-      border-right: 1px solid rgba(0,0,0,1);
-      transform:rotate(45deg);
-      display: inline-block;
-      margin-left: -2px;
+      .up-btn{
+        height:94px;
+        line-height: 94px;
+        border-radius:10px;
+        color: #BB9C79;
+        border: 2px solid #BB9C79;
+        font-size: 36px;
+        text-align: center; 
+        margin-top: 36px;
     }
-    
   }
   
 }