Merge branch 'dev' of http://git.ycjcjy.com/zhiyuxing/miniapp-v3 into dev

src/onlineSelling/pages/raiseProfile/Cell.js

@@ -1,19 +1,30 @@
 import { View } from '@tarojs/components'
 import './index.scss'
+import NamedIcon from '../../components/NamedIcon'
 
 export default function (props) {
   const disable = props.disable ? 'disable' : ''
+  console.log('------->', props)
 
   return (
     <View className={`raiseCell ${disable}`}>
       <View className="row">
         <View className="head">{props.head}</View>
         <View className="body">{props.body}</View>
-        <View className="action" onClick={props.onActionClick}>{props.action}</View>
-      </View>
-      <View className="row desc">
-        <View className="desc">{props.desc}</View>
+        <View className="action" onClick={props.onActionClick}>
+          {
+            props.action && (<NamedIcon name="copy" size={34} />)
+          }
+        </View>
       </View>
+      {
+        props.desc &&
+        (
+          <View className="row desc">
+            <View className="desc">{props.desc}</View>
+          </View>
+        )
+      }
     </View>
   )
 }

src/onlineSelling/pages/raiseProfile/CellBlock.js

@@ -6,7 +6,11 @@ export default function(props) {
   const dataset = props.dataset || []
   const disable = props.disable
 
-  const handleActionClick = props.onActionClick || (() => {})
+  const handleActionClick = (item) => {
+    if (item.action && props.onActionClick) {
+      props.onActionClick(item)
+    }
+  }
 
   return (
     <View className="cell-block">
@@ -17,6 +21,7 @@ export default function(props) {
               disable={disable}
               head={item.head}
               body={item.body}
+              action={item.action}
               desc={item.desc}
               onActionClick={handleActionClick.bind(this, item)}
               />

src/onlineSelling/pages/raiseProfile/index.js

@@ -1,18 +1,26 @@
 import Taro, { Component } from '@tarojs/taro'
-import { View } from '@tarojs/components'
+import { View, Block } from '@tarojs/components'
+import dayjs from 'dayjs'
 
-import './index.scss'
 import CellBlock from './CellBlock'
+import Statement from '../../components/Statement'
+import ContactConsultant from '../../components/ContactConsultant'
+import NamedIcon from '../../components/NamedIcon'
+
+import './index.scss'
 
 export default class extends Component {
   config = {
     navigationBarTitleText: '认筹单',
   }
 
-  state = {}
+  state = {
+    buildingId: '9f021a59b2a714822894c23ccca8c2db', // must change this
+  }
 
   componentWillMount () {}
 
+  // 复制数据
   copyData(data) {
     Taro.setClipboardData({
       data,
@@ -20,24 +28,126 @@ export default class extends Component {
     })
   }
 
+  // 跳转去交费
+  toPay = () => {
+
+  }
+
+  // 查看所有认筹房源
+  viewAllHouses = () => {}
+
+  renderHead() {
+    return (
+      <View className="head flexSpace">
+        <View className="flexSpace-fixed">
+          <View className="title">认筹房源</View>
+        </View>
+        <View className="flexSpace-fixed">
+          <View className="gray" onClick={this.viewAllHouses}>
+            <Text>查看全部（4）</Text>
+            <Text className='at-icon at-icon-chevron-right'></Text>
+          </View>
+        </View>
+      </View>
+    )
+  }
+
+  // 取消认购原因
+  renderCancelReason() {
+    return (
+      <Block>
+        <View className="cancelReason flexSpace">
+          <View className="flexSpace-fixed">
+            <NamedIcon name="void" size={120}/>
+          </View>
+          <View className="flexSpace-item" style="margin-left: 20px">
+            <View>认筹单作废原因：</View>
+            <View className="gray">认筹单作废原因作废原因原因认筹单作废原因作废原因原因
+              认筹单作废原因作废原因原因认筹单作废原因作废原因原因</View>
+          </View>
+        </View>
+        <View className="hr"></View>
+      </Block>
+    )
+  }
+
+  // 未交费提示
+  renderUnpayNotice() {
+    return (
+      <Block>
+        <View className="unpayNotice flexSpace" onClick={this.toPay}>
+          <View className="flexSpace-fixed">
+            <NamedIcon name="pay" size={64} />
+            <View className="a-line txt">未缴费？点我缴费</View>
+          </View>
+          <View className="flexSpace-fixed">
+            <Text className="a-line">认筹金额</Text>
+            <Text className="a-line price">30000元</Text>
+          </View>
+        </View>
+        <View className="hr"></View>
+      </Block>
+    )
+  }
+
   render() {
+    const { buildingId } = this.state;
+
+    // 认筹信息
+    const raiseInfo = [
+      { head: '认筹人', body: '姓名' },
+      { head: '身份证号', body: '412702199709215528' },
+      { head: '手机号', body: '17716241245' },
+    ]
+
+    // 缴费信息
+    const payInfo = [
+      { head: '缴费方式', body: '线上缴费/线下缴费' },
+      { head: '实际支付费用', body: '234元' },
+      { head: '缴费成功时间', body: dayjs('2020-2-28 17:12:48').format('YYYY/MM/DD HH:mm:ss') },
+    ]
+
+    // 退费信息
+    const refundInfo = [
+      { head: '退费状态', body: '退费中/退费完成' },
+      { head: '退费结果', body: '成功/失败' },
+      { head: '退费发起时间', body: dayjs('2020-2-28 17:12:48').format('YYYY/MM/DD HH:mm:ss') },
+      { head: '实退费用', body: '234元' },
+      { head: '退费到账时间', body: dayjs('2020-2-28 17:12:48').format('YYYY/MM/DD HH:mm:ss') },
+      { head: '退费原因', desc: '无效原因无效原因无效原因无效原因无效原因无效原因无效原因无效原因无效原因无效原因' },
+    ]
+
+    // 其他信息
     const otherInfo = [
       { head: '其他信息', body: '供核对数据使用' },
-      { head: '认筹单编号', body: '234567890-09876545678' },
-      { head: '缴费单编号', body: '234567890-09876543456' },
-      { head: '退费单编号', body: '234567890-09876543456' },
+      { head: '认筹单编号', body: '234567890-09876545678', action: true },
+      { head: '缴费单编号', body: '234567890-09876543456', action: true },
+      { head: '退费单编号', body: '234567890-09876543423', action: true },
     ]
 
     return (
       <View className="raiseProfilePage">
-        <View>
+        <View className="main">
+          {this.renderHead()}
+          <View className="tip">注意：请在一个工作日内，到售楼处或项目现场办理认购手续。逾期未办理视为放弃购买。</View>
+          {this.renderCancelReason()}
+          {this.renderUnpayNotice()}
           <View>
+            <CellBlock dataset={raiseInfo} />
+            <View className="hr" />
+            <CellBlock dataset={payInfo} />
             <View className="hr" />
-            <CellBlock dataset={otherInfo} disable />
+            <CellBlock dataset={refundInfo} />
+            <View className="hr" />
+            <CellBlock dataset={otherInfo} disable onActionClick={dt => this.copyData(dt.body)} />
           </View>
           <View></View>
           <View></View>
         </View>
+        <View className="contact">
+          <ContactConsultant text="如有问题，请联系置业顾问" buildingId={buildingId}/>
+        </View>
+        <Statement />
       </View>
     )
   }

src/onlineSelling/pages/raiseProfile/index.scss

@@ -1,10 +1,84 @@
+
+@import "~taro-ui/dist/style/components/icon.scss";
+
 .raiseProfilePage {
-  padding: 0 30px;
+
+  .main {
+    padding: 0 30px;
+    font-size: 30px;
+
+    .head {
+      margin: 40px 0 30px;
+    }
+
+    .title {
+      font-weight: 700;
+    }
+
+    .tip {
+      font-size: 24px;
+      line-height: 36px;
+      color: #FF3C3C;
+    }
+
+    .cancelReason {
+      font-size: 21px;
+      line-height: 32px;
+      color: #333;
+      margin: 40px 0 30px;
+    }
+
+    .unpayNotice {
+      margin: 30px 0 20px;
+      font-size: 28px;
+      color: #333;
+
+      .a-line {
+        display: inline-block;
+        height: 64px;
+        line-height: 64px;
+        vertical-align: bottom;
+      }
+
+      .txt {
+        margin-left: 10px;
+        font-size: 30px;
+        color: #666;
+      }
+
+      .price {
+        margin-left: 20px;
+        font-size: 44px;
+        color: #FF3C3C;
+      }
+    }
+
+    .gray {
+      color: #999;
+    }
+  }
 
   .hr {
     height: 2px;
     box-shadow:0px 2px 0px 0px rgba(0, 0, 0, 0.08);
   }
+
+  .contact {
+    margin: 44px 0;
+  } 
+}
+
+.flexSpace {
+  display: flex;
+  justify-content: space-between;
+
+  &-fixed {
+    flex: none;
+  }
+
+  &-item {
+    flex: auto;
+  }
 }
 
 .cell-block {
@@ -29,6 +103,7 @@
 
   .row {
     display: flex;
+    line-height: 1.1em;
 
     .head {
       width: 260px;
@@ -49,6 +124,7 @@
       color: #999;
       font-size: 32px;
       line-height: 40px;
+      margin-top: 28px;
     }
   }
 }