feats

project.config.json

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

src/app.js

@@ -133,6 +133,7 @@ class App extends Component {
           'pages/detail/resultPage',
           'pages/screenHouse/index',
           'pages/protocol/index',
+          'pages/raiseProfile/index',
         ],
       }
     ],

src/onlineSelling/pages/protocol/index.js

@@ -1,7 +1,15 @@
 import Taro, { Component } from '@tarojs/taro'
-import { View, RichText, ScrollView } from '@tarojs/components'
+import { View, RichText } from '@tarojs/components'
+import Statement from '../../components/Statement'
+import ContactConsultant from '../../components/ContactConsultant'
+
+import './index.scss'
 
 export default class Protocol extends Component {
+  config = {
+    navigationBarTitleText: '线上选房协议',
+  }
+
   state = {
     content: `
       <p>New Year in china is an important festival. Nearly everyone thinks highly of it. No matter where people go and no matter how far they go， they will try their best to go home enjoying family time. And no matter what difficulty or trouble they are experiencing， they will put aside for the period of time. In every house， the main atmosphere is happiness. What do people usually do during the New Year time？ They will prepare a big meal together on New Year’s Eve. In the following days， they will visit their relatives. their relatives also will pay a return visit.</p>
@@ -9,19 +17,21 @@ export default class Protocol extends Component {
       <p>No matter where people go and no matter how far they go， they will try their best to go home enjoying family time. And no matter what difficulty or trouble they are experiencing， they will put aside for the period of time. In every house， the main atmosphere is happiness. </p>
       <p>What do people usually do during the New Year time？ They will prepare a big meal together on New Year’s Eve. In the following days， they will visit their relatives. their relatives also will pay a return visit. One of the most important things that they will not forget to do is to worship their ancestors.</p>
     `,
+    buildingId: '9f021a59b2a714822894c23ccca8c2db', // must change this
   }
 
-
   render() {
-    const { content } = this.state
+    const { content, buildingId } = this.state
 
     return (
       <View className="protocal-box">
-        <ScrollView scrollY className="content">
+        <View className="content">
           <RichText nodes={content}/>
-        </ScrollView>
-        <View></View>
-        {/* <todo /> */}
+        </View>
+        <View className="contact">
+          <ContactConsultant text="如有问题，请联系置业顾问" buildingId={buildingId}/>
+        </View>
+        <Statement />
       </View>
     )
   }

src/onlineSelling/pages/protocol/index.scss

@@ -1,12 +1,13 @@
 .protocal-box {
   width: 100vw;
-  height: 100vh;
-  overflow: hidden;
 
   .content {
-    height: 990px;
     margin-top: 48px;
     width: 100%;
-    padding: 40px;
+    padding: 0 40px;
+  }
+
+  .contact {
+    margin: 40px 0;
   }
 }

src/onlineSelling/pages/raiseProfile/Cell.js

@@ -0,0 +1,19 @@
+import { View } from '@tarojs/components'
+import './index.scss'
+
+export default function (props) {
+  const disable = props.disable ? 'disable' : ''
+
+  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>
+    </View>
+  )
+}

src/onlineSelling/pages/raiseProfile/CellBlock.js

@@ -0,0 +1,28 @@
+
+import Cell from './Cell'
+import './index.scss'
+
+export default function(props) {
+  const dataset = props.dataset || []
+  const disable = props.disable
+
+  const handleActionClick = props.onActionClick || (() => {})
+
+  return (
+    <View className="cell-block">
+      {
+        dataset.map((item, inx) => (
+          <View key={`cell-${inx}`} className="cell-block-item">
+            <Cell
+              disable={disable}
+              head={item.head}
+              body={item.body}
+              desc={item.desc}
+              onActionClick={handleActionClick.bind(this, item)}
+              />
+          </View>
+        ))
+      }
+    </View>
+  )
+}

src/onlineSelling/pages/raiseProfile/index.js

@@ -0,0 +1,44 @@
+import Taro, { Component } from '@tarojs/taro'
+import { View } from '@tarojs/components'
+
+import './index.scss'
+import CellBlock from './CellBlock'
+
+export default class extends Component {
+  config = {
+    navigationBarTitleText: '认筹单',
+  }
+
+  state = {}
+
+  componentWillMount () {}
+
+  copyData(data) {
+    Taro.setClipboardData({
+      data,
+      onSuccess: (() => {}),
+    })
+  }
+
+  render() {
+    const otherInfo = [
+      { head: '其他信息', body: '供核对数据使用' },
+      { head: '认筹单编号', body: '234567890-09876545678' },
+      { head: '缴费单编号', body: '234567890-09876543456' },
+      { head: '退费单编号', body: '234567890-09876543456' },
+    ]
+
+    return (
+      <View className="raiseProfilePage">
+        <View>
+          <View>
+            <View className="hr" />
+            <CellBlock dataset={otherInfo} disable />
+          </View>
+          <View></View>
+          <View></View>
+        </View>
+      </View>
+    )
+  }
+}

src/onlineSelling/pages/raiseProfile/index.scss

@@ -0,0 +1,54 @@
+.raiseProfilePage {
+  padding: 0 30px;
+
+  .hr {
+    height: 2px;
+    box-shadow:0px 2px 0px 0px rgba(0, 0, 0, 0.08);
+  }
+}
+
+.cell-block {
+  padding: 45px 0;
+
+  .cell-block-item {
+    & + .cell-block-item {
+      margin-top: 70px;
+    }
+  }
+}
+
+
+.raiseCell {
+  color: #333;
+  text-align: left;
+  font-size: 30px;
+
+  &.disable {
+    color: #999;
+  }
+
+  .row {
+    display: flex;
+
+    .head {
+      width: 260px;
+      flex: none;
+    }
+
+    .action {
+      width: 54px;
+      text-align: right;
+      flex: none;
+    }
+
+    .body {
+      flex: auto;
+    }
+
+    .desc {
+      color: #999;
+      font-size: 32px;
+      line-height: 40px;
+    }
+  }
+}