|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+import Taro, { Component } from '@tarojs/taro'
|
|
|
2
|
+import { View, ScrollView } from '@tarojs/components'
|
|
|
3
|
+
|
|
|
4
|
+import './index.scss'
|
|
|
5
|
+
|
|
|
6
|
+export default class extends Component {
|
|
|
7
|
+ config = {
|
|
|
8
|
+ navigationBarTitleText: '添加其他房源',
|
|
|
9
|
+ }
|
|
|
10
|
+
|
|
|
11
|
+ state = {
|
|
|
12
|
+ dataType: 1, // maybe need change 1 预选, 2 认筹
|
|
|
13
|
+ chooseList: [ { name: '1期1栋1单元1楼101户' }, { name: '1期1栋1单元1楼102户' } ], // 已经选择的房源列表
|
|
|
14
|
+ collapsed: true, // 已选列表默认关闭, true 关闭, false 开启
|
|
|
15
|
+ }
|
|
|
16
|
+
|
|
|
17
|
+ componentWillMount () {}
|
|
|
18
|
+
|
|
|
19
|
+ changeShowData = (dataType) => {
|
|
|
20
|
+ // 此处需要按照 dataType 去切换数据
|
|
|
21
|
+ // 切换成功之后
|
|
|
22
|
+ this.setState({ dataType })
|
|
|
23
|
+ }
|
|
|
24
|
+
|
|
|
25
|
+ // 确认选择
|
|
|
26
|
+ handleSubmit = () => {
|
|
|
27
|
+
|
|
|
28
|
+ }
|
|
|
29
|
+
|
|
|
30
|
+ // 取消选择
|
|
|
31
|
+ subChooseList = (house) => {
|
|
|
32
|
+ Taro.showModal({
|
|
|
33
|
+ title: '取消选择',
|
|
|
34
|
+ content: `确认取消 ${house.name} ?`,
|
|
|
35
|
+ success: (res) => {
|
|
|
36
|
+ if (res.confirm) {
|
|
|
37
|
+ // TODO: 取消房源选择
|
|
|
38
|
+ }
|
|
|
39
|
+ }
|
|
|
40
|
+ })
|
|
|
41
|
+ }
|
|
|
42
|
+
|
|
|
43
|
+ // 是否展开已选列表
|
|
|
44
|
+ trigCartPannel = () => {
|
|
|
45
|
+ const { collapsed } = this.state;
|
|
|
46
|
+ this.setState({ collapsed: !collapsed })
|
|
|
47
|
+ }
|
|
|
48
|
+
|
|
|
49
|
+ renderHead() {
|
|
|
50
|
+ const { dataType } = this.state
|
|
|
51
|
+
|
|
|
52
|
+ return (
|
|
|
53
|
+ <View className="head">
|
|
|
54
|
+ <View className="tips">仅显示符合认筹条件的房源。点击房源卡片查看房源详情，不要在房源详情页做操作。请在当前页面选择提交认筹。</View>
|
|
|
55
|
+ <View className="actions">
|
|
|
56
|
+ <View className={`action ${dataType === 1 ? 'active' : ''}`} onClick={() => this.changeShowData(1)}>预选热度图</View>
|
|
|
57
|
+ <View className={`action ${dataType === 2 ? 'active' : ''}`} onClick={() => this.changeShowData(2)}>认筹热度图</View>
|
|
|
58
|
+ </View>
|
|
|
59
|
+ </View>
|
|
|
60
|
+ );
|
|
|
61
|
+ }
|
|
|
62
|
+
|
|
|
63
|
+ renderHouses() {
|
|
|
64
|
+ return (
|
|
|
65
|
+ <ScrollView className="body" scrollY>
|
|
|
66
|
+
|
|
|
67
|
+ </ScrollView>
|
|
|
68
|
+ )
|
|
|
69
|
+ }
|
|
|
70
|
+
|
|
|
71
|
+ renderAction() {
|
|
|
72
|
+ const { chooseList, collapsed } = this.state;
|
|
|
73
|
+ const title = collapsed ? `已选择: ${chooseList[0].name} 等 ${chooseList.length} 个房源` : '已选列表'
|
|
|
74
|
+ const opened = collapsed ? 'off' : 'on'
|
|
|
75
|
+
|
|
|
76
|
+ return (
|
|
|
77
|
+ <View className="footer">
|
|
|
78
|
+ <View className="shoping-cart collapse">
|
|
|
79
|
+ <View className={`title ${opened}`} onClick={this.trigCartPannel}>
|
|
|
80
|
+ <Text>{title}</Text>
|
|
|
81
|
+ <Text className="at-icon at-icon-chevron-down"></Text>
|
|
|
82
|
+ </View>
|
|
|
83
|
+ <View className={`choose-list ${opened}`}>
|
|
|
84
|
+ {chooseList.map((house, index) => {
|
|
|
85
|
+ return (
|
|
|
86
|
+ <View key={`cart-item-${index}`} className="choose-item" onClick={() => this.subChooseList(house)}>
|
|
|
87
|
+ <View className="choose-item-body">{house.name}</View>
|
|
|
88
|
+ <View className="choose-item-action">
|
|
|
89
|
+ <Text className="at-icon at-icon-subtract-circle"></Text>
|
|
|
90
|
+ </View>
|
|
|
91
|
+ </View>
|
|
|
92
|
+ )
|
|
|
93
|
+ })}
|
|
|
94
|
+ </View>
|
|
|
95
|
+ </View>
|
|
|
96
|
+ <Button className="btn" onClick={this.handleSubmit}>确认以上选择</Button>
|
|
|
97
|
+ </View>
|
|
|
98
|
+ )
|
|
|
99
|
+ }
|
|
|
100
|
+
|
|
|
101
|
+ render() {
|
|
|
102
|
+ return (
|
|
|
103
|
+ <View className="house-cart">
|
|
|
104
|
+ {this.renderHead()}
|
|
|
105
|
+ {this.renderHouses()}
|
|
|
106
|
+ {this.renderAction()}
|
|
|
107
|
+ </View>
|
|
|
108
|
+ )
|
|
|
109
|
+ }
|
|
|
110
|
+}
|
