浏览代码

静态页面

1002884655 3 年前
父节点
当前提交
291af36708

+ 38
- 38
src/pages/index/addedValueService/formData.js 查看文件

@@ -54,71 +54,71 @@ const questions = [
54 54
   {
55 55
     question: '你较为看重家装的哪些方面?',
56 56
     key: 'important',
57
-    type: 'checkbox',
57
+    type: 'checkboxs',
58 58
     result: '',
59 59
     resultId: null,
60 60
     options: [
61
-      { name: '家装价格', id: 1 },
62
-      { name: '施工品质', id: 2 },
63
-      { name: '设计感', id: 3 },
64
-      { name: '环保', id: 4 },
65
-      { name: '舒适度', id: 5 },
66
-      { name: '实用度', id: 5 }
61
+      { name: '家装价格', id: 1, selected: false },
62
+      { name: '施工品质', id: 2, selected: false },
63
+      { name: '设计感', id: 3, selected: false },
64
+      { name: '环保', id: 4, selected: false },
65
+      { name: '舒适度', id: 5, selected: false },
66
+      { name: '实用度', id: 6, selected: false }
67 67
     ]
68 68
   },
69 69
   {
70 70
     question: '你理想的家装风格是哪些?',
71 71
     key: 'style',
72
-    type: 'checkbox',
72
+    type: 'checkboxs',
73 73
     result: '',
74 74
     resultId: null,
75 75
     options: [
76
-      { name: '北欧风格', id: 1 },
77
-      { name: '简欧风格', id: 2 },
78
-      { name: '欧式古典', id: 3 },
79
-      { name: '现代简约', id: 4 },
80
-      { name: '田园风格', id: 5 },
81
-      { name: '新中式风格', id: 6 },
82
-      { name: '地中海风格', id: 7 },
83
-      { name: '东南亚风格', id: 8 },
84
-      { name: '美式风格', id: 9 },
85
-      { name: '日式风格', id: 10 },
86
-      { name: '混搭风格', id: 11 }
76
+      { name: '北欧风格', id: 1, selected: false },
77
+      { name: '简欧风格', id: 2, selected: false },
78
+      { name: '欧式古典', id: 3, selected: false },
79
+      { name: '现代简约', id: 4, selected: false },
80
+      { name: '田园风格', id: 5, selected: false },
81
+      { name: '新中式风格', id: 6, selected: false },
82
+      { name: '地中海风格', id: 7, selected: false },
83
+      { name: '东南亚风格', id: 8, selected: false },
84
+      { name: '美式风格', id: 9, selected: false },
85
+      { name: '日式风格', id: 10, selected: false },
86
+      { name: '混搭风格', id: 11, selected: false }
87 87
     ]
88 88
   },
89 89
   {
90 90
     question: '你最关键的家装诉求是什么?',
91 91
     key: 'mostImportant',
92
-    type: 'checkbox',
92
+    type: 'checkboxs',
93 93
     result: '',
94 94
     resultId: null,
95 95
     options: [
96
-      { name: '设计凸显个性', id: 1 },
97
-      { name: '智能家居齐全', id: 2 },
98
-      { name: '强大的收纳功能', id: 3 },
99
-      { name: '方便清洁和整理', id: 4 },
100
-      { name: '温馨舒适', id: 5 },
101
-      { name: '品质生活', id: 6 },
102
-      { name: '其他', id: 7 }
96
+      { name: '设计凸显个性', id: 1, selected: false },
97
+      { name: '智能家居齐全', id: 2, selected: false },
98
+      { name: '强大的收纳功能', id: 3, selected: false },
99
+      { name: '方便清洁和整理', id: 4, selected: false },
100
+      { name: '温馨舒适', id: 5, selected: false },
101
+      { name: '品质生活', id: 6, selected: false },
102
+      { name: '其他', id: 7, selected: false }
103 103
     ]
104 104
   },
105 105
   {
106 106
     question: '你理想中的家应该包含哪些特殊功能区域?',
107 107
     key: 'special',
108
-    type: 'checkbox',
108
+    type: 'checkboxs',
109 109
     result: '',
110 110
     resultId: null,
111 111
     options: [
112
-      { name: '衣帽间', id: 1 },
113
-      { name: '书房', id: 2 },
114
-      { name: '宠物生活区', id: 3 },
115
-      { name: '超大浴缸', id: 4 },
116
-      { name: '超大衣柜', id: 5 },
117
-      { name: '开放式厨房', id: 6 },
118
-      { name: '种绿植阳台', id: 7 },
119
-      { name: '健身区', id: 8 },
120
-      { name: '婴儿房', id: 9 },
121
-      { name: '其他', id: 10 }
112
+      { name: '衣帽间', id: 1, selected: false },
113
+      { name: '书房', id: 2, selected: false },
114
+      { name: '宠物生活区', id: 3, selected: false },
115
+      { name: '超大浴缸', id: 4, selected: false },
116
+      { name: '超大衣柜', id: 5, selected: false },
117
+      { name: '开放式厨房', id: 6, selected: false },
118
+      { name: '种绿植阳台', id: 7, selected: false },
119
+      { name: '健身区', id: 8, selected: false },
120
+      { name: '婴儿房', id: 9, selected: false },
121
+      { name: '其他', id: 10, selected: false }
122 122
     ]
123 123
   },
124 124
   {

+ 32
- 1
src/pages/index/addedValueService/index.jsx 查看文件

@@ -54,6 +54,14 @@ export default function AddedValueService () {
54 54
     })
55 55
   }
56 56
 
57
+  const CutCheckboxs = (index, subItem, subIndex) => {
58
+    return () => {
59
+      let newFormData = [...FormData]
60
+      newFormData[index].options[subIndex].selected = !subItem.selected
61
+      setFormData([...newFormData])
62
+    }
63
+  }
64
+
57 65
   const CutCheckbox = (item, index) => {
58 66
     return () => {
59 67
       let newFormData = [...FormData]
@@ -85,7 +93,17 @@ export default function AddedValueService () {
85 93
     if (StepId < 4) {
86 94
       setStepId(StepId + 1)
87 95
     } else {
88
-      SubmitForm(FormData)
96
+      let Arr = [...FormData]
97
+      Arr.map((item) => {
98
+        if (item.type === 'checkboxs') {
99
+          item.options.map((subItem) => {
100
+            if (subItem.selected) {
101
+              item.result.push(subItem.name)
102
+            }
103
+          })
104
+        }
105
+      })
106
+      SubmitForm(Arr)
89 107
     }
90 108
   }
91 109
 
@@ -110,6 +128,19 @@ export default function AddedValueService () {
110 128
                   index >= StepRange[0] && index < StepRange[1] &&
111 129
                   <view>
112 130
                     <text>{item.question}</text>
131
+                    {
132
+                      item.type === 'checkboxs' &&
133
+                      <view className='CheckList'>
134
+                        {
135
+                          item.options.map((subItem, subIndex) => (
136
+                            <view key={`${item.key}-${subIndex}`} className={subItem.selected ? 'active' : ''} onClick={CutCheckboxs(index, subItem, subIndex)}>
137
+                              <text>{subItem.name}</text>
138
+                              <Image mode='heightFix' src={require('@/assets/findHouse-icon1.png')}></Image>
139
+                            </view>
140
+                          ))
141
+                        }
142
+                      </view>
143
+                    }
113 144
                     {
114 145
                       item.type === 'checkbox' &&
115 146
                       <view className='CheckList'>

+ 24
- 16
src/pages/index/buildingDetail/components/BasicInfo/index.jsx 查看文件

@@ -93,59 +93,67 @@ export default function BasicInfo (props) {
93 93
       {/* 更多信息 */}
94 94
       <view className='MoreInfo'>
95 95
         <view className='flex-h'>
96
-          <view className='flex-item'>
97
-            <text>楼盘地址</text>
96
+          <view style='width: 60px;'>
97
+            <text>楼盘地址</text>
98 98
           </view>
99
+          <text>:</text>
99 100
           <view className='flex-item3'>
100 101
             <text className='active'>{Info.address}</text>
101 102
           </view>
102 103
         </view>
103 104
         <view className='flex-h'>
104
-          <view className='flex-item'>
105
-            <text>开盘时间</text>
105
+          <view style='width: 60px;'>
106
+            <text>开盘时间</text>
106 107
           </view>
108
+          <text>:</text>
107 109
           <view className='flex-item3'>
108 110
             <text className='active'>{Info.openingDate || '待定'}</text>
109 111
           </view>
110 112
         </view>
111 113
         <view className='flex-h'>
112
-          <view className='flex-item'>
113
-            <text>容积率</text>
114
+          <view style='width: 60px;'>
115
+            <text>容积率</text>
114 116
           </view>
117
+          <text>:</text>
115 118
           <view className='flex-item'>
116 119
             <text className='active'>{Info.volumeRate || '暂无'}</text>
117 120
           </view>
118
-          <view className='flex-item'>
119
-            <text>车位比率</text>
121
+          <view style='width: 60px;'>
122
+            <text>车位比率</text>
120 123
           </view>
124
+          <text>:</text>
121 125
           <view className='flex-item'>
122 126
             <text className='active'>{Info.parkingRate || '暂无'}</text>
123 127
           </view>
124 128
         </view>
125 129
         <view className='flex-h'>
126
-          <view className='flex-item'>
127
-            <text>绿化率</text>
130
+          <view style='width: 60px;'>
131
+            <text>绿化率</text>
128 132
           </view>
133
+          <text>:</text>
129 134
           <view className='flex-item'>
130 135
             <text className='active'>{Info.greeningRate || '暂无'}</text>
131 136
           </view>
132
-          <view className='flex-item'>
133
-            <text>物业费</text>
137
+          <view style='width: 60px;'>
138
+            <text>物业费</text>
134 139
           </view>
140
+          <text>:</text>
135 141
           <view className='flex-item'>
136 142
             <text className='active'>{Info.serviceFee || '暂无'}</text>
137 143
           </view>
138 144
         </view>
139 145
         <view className='flex-h'>
140
-          <view className='flex-item'>
141
-            <text>规划户数</text>
146
+          <view style='width: 60px;'>
147
+            <text>规划户数</text>
142 148
           </view>
149
+          <text>:</text>
143 150
           <view className='flex-item'>
144 151
             <text className='active'>{Info.familyNum || '暂无'}</text>
145 152
           </view>
146
-          <view className='flex-item'>
147
-            <text>物业</text>
153
+          <view style='width: 60px;'>
154
+            <text>物业</text>
148 155
           </view>
156
+          <text>:</text>
149 157
           <view className='flex-item'>
150 158
             <text className='active'>{Info.serviceCompany || '暂无'}</text>
151 159
           </view>

+ 36
- 31
src/pages/index/buildingDetail/components/BasicInfo/index.scss 查看文件

@@ -2,15 +2,15 @@
2 2
   position: relative;
3 3
   overflow: hidden;
4 4
   padding-bottom: 60px;
5
-  >.Title {
5
+  > .Title {
6 6
     padding: 0 30px;
7 7
     position: relative;
8 8
     overflow: hidden;
9 9
     align-items: center;
10 10
     margin-top: 20px;
11
-    >.flex-item {
11
+    > .flex-item {
12 12
       margin-right: 20px;
13
-      >text {
13
+      > text {
14 14
         display: block;
15 15
         font-size: 40px;
16 16
         line-height: 56px;
@@ -18,9 +18,9 @@
18 18
         font-weight: bold;
19 19
       }
20 20
     }
21
-    >.Collect {
21
+    > .Collect {
22 22
       width: 100px;
23
-      >text {
23
+      > text {
24 24
         display: block;
25 25
         text-align: center;
26 26
         font-size: 24px;
@@ -31,17 +31,17 @@
31 31
         }
32 32
 
33 33
         &.active {
34
-          color: #F6B61D;
34
+          color: #f6b61d;
35 35
         }
36 36
       }
37 37
     }
38 38
   }
39
-  >.Tags {
39
+  > .Tags {
40 40
     padding: 0 30px;
41 41
     font-size: 0;
42 42
     position: relative;
43 43
     overflow: hidden;
44
-    >text {
44
+    > text {
45 45
       display: inline-block;
46 46
       vertical-align: middle;
47 47
       margin-top: 16px;
@@ -57,12 +57,12 @@
57 57
       text-align: center;
58 58
     }
59 59
   }
60
-  >.ProjectList {
60
+  > .ProjectList {
61 61
     position: relative;
62 62
     overflow: hidden;
63 63
     margin-top: 40px;
64 64
     height: 200px;
65
-    >scroll-view {
65
+    > scroll-view {
66 66
       width: 100%;
67 67
       height: 100%;
68 68
       font-size: 0;
@@ -81,7 +81,7 @@
81 81
         &:first-child {
82 82
           margin-left: 30px;
83 83
         }
84
-        >image {
84
+        > image {
85 85
           height: 180px;
86 86
           z-index: 1;
87 87
           display: block;
@@ -91,13 +91,13 @@
91 91
           transform: translateX(-50%);
92 92
           -webkit-transform: translateX(-50%);
93 93
         }
94
-        >view {
94
+        > view {
95 95
           width: 100%;
96 96
           height: 100%;
97 97
           position: relative;
98 98
           z-index: 2;
99 99
           overflow: hidden;
100
-          >.SaleStatus {
100
+          > .SaleStatus {
101 101
             display: inline-block;
102 102
             position: absolute;
103 103
             right: 0;
@@ -114,14 +114,14 @@
114 114
               color: #fff;
115 115
             }
116 116
           }
117
-          >view {
117
+          > view {
118 118
             font-size: 0;
119 119
             white-space: nowrap;
120 120
             padding-left: 20px;
121 121
             &:first-child {
122 122
               margin-top: 16px;
123 123
             }
124
-            >text {
124
+            > text {
125 125
               display: inline-block;
126 126
               vertical-align: middle;
127 127
               font-size: 26px;
@@ -140,13 +140,13 @@
140 140
       }
141 141
     }
142 142
   }
143
-  >.CutLine {
143
+  > .CutLine {
144 144
     position: relative;
145 145
     overflow: hidden;
146 146
     margin-top: 28px;
147 147
     height: 8px;
148 148
     &::after {
149
-      content: '';
149
+      content: "";
150 150
       display: block;
151 151
       position: absolute;
152 152
       width: 200px;
@@ -159,24 +159,29 @@
159 159
       -webkit-transform: translateX(-50%);
160 160
     }
161 161
   }
162
-  >.MoreInfo {
162
+  > .MoreInfo {
163 163
     position: relative;
164 164
     overflow: hidden;
165 165
     margin-top: 40px;
166 166
     padding: 0 30px;
167
-    >view {
167
+    > view {
168 168
       align-items: center;
169 169
       margin-top: 20px;
170 170
       &:first-child {
171 171
         margin-top: 0;
172 172
       }
173
-      >view {
174
-        min-width: 25%;
173
+      > text {
174
+        font-size: 26px;
175
+        line-height: 44px;
176
+        color: #999;
177
+      }
178
+      > view {
179
+        // min-width: 25%;
175 180
         &.flex-item3 {
176 181
           flex: 3;
177 182
           -webkit-flex: 3;
178 183
         }
179
-        >text {
184
+        > text {
180 185
           display: block;
181 186
           font-size: 26px;
182 187
           line-height: 44px;
@@ -195,23 +200,23 @@
195 200
       }
196 201
     }
197 202
   }
198
-  >.Views {
203
+  > .Views {
199 204
     padding: 0 30px;
200 205
     position: relative;
201 206
     overflow: hidden;
202 207
     margin-top: 20px;
203 208
     align-items: center;
204
-    >text {
209
+    > text {
205 210
       font-size: 26px;
206 211
       color: #999;
207 212
       line-height: 44px;
208 213
     }
209
-    >.flex-item {
214
+    > .flex-item {
210 215
       position: relative;
211 216
       overflow: hidden;
212 217
       font-size: 0;
213 218
       white-space: nowrap;
214
-      >view {
219
+      > view {
215 220
         display: inline-block;
216 221
         vertical-align: middle;
217 222
         width: 52px;
@@ -224,12 +229,12 @@
224 229
         &:first-child {
225 230
           margin-left: 30px;
226 231
         }
227
-        >image {
232
+        > image {
228 233
           width: 100%;
229 234
           height: 100%;
230 235
         }
231 236
       }
232
-      >text {
237
+      > text {
233 238
         display: inline-block;
234 239
         vertical-align: middle;
235 240
         font-size: 24px;
@@ -238,12 +243,12 @@
238 243
       }
239 244
     }
240 245
   }
241
-  >.Interact {
246
+  > .Interact {
242 247
     padding: 0 30px;
243 248
     position: relative;
244 249
     overflow: hidden;
245 250
     margin-top: 40px;
246
-    >text {
251
+    > text {
247 252
       margin-left: 30px;
248 253
       font-size: 36px;
249 254
       line-height: 90px;
@@ -267,7 +272,7 @@
267 272
     font-size: 0;
268 273
     white-space: nowrap;
269 274
     margin-top: 30px;
270
-    >text {
275
+    > text {
271 276
       display: inline-block;
272 277
       vertical-align: middle;
273 278
       color: #1a3b83;

+ 2
- 1
src/pages/index/buildingInfo/index.scss 查看文件

@@ -28,8 +28,9 @@
28 28
             color: #999;
29 29
             padding: 36px 0;
30 30
             min-width: 120px;
31
-            text-align: right;
32 31
             margin-right: 80px;
32
+            text-align: justify;
33
+            text-align-last: justify;
33 34
           }
34 35
           >view {
35 36
             >text {

+ 14
- 14
src/pages/index/helpToFindHouse/components/RentingHouse/formData.js 查看文件

@@ -10,7 +10,7 @@ const questions = [
10 10
   {
11 11
     question: '你的租房偏好?',
12 12
     key: 'preference',
13
-    type: 'checkbox',
13
+    type: 'radio',
14 14
     result: '',
15 15
     resultId: null,
16 16
     options: [
@@ -22,7 +22,7 @@ const questions = [
22 22
   {
23 23
     question: '你想租几居室的房子?',
24 24
     key: 'layout',
25
-    type: 'checkbox',
25
+    type: 'radio',
26 26
     result: '',
27 27
     resultId: null,
28 28
     options: [
@@ -45,19 +45,19 @@ const questions = [
45 45
     question: '其他要求?',
46 46
     key: 'purpose',
47 47
     type: 'checkbox',
48
-    result: '',
49
-    resultId: null,
48
+    result: [],
49
+    resultId: [],
50 50
     options: [
51
-      { name: '独卫', id: 1 },
52
-      { name: '近地铁', id: 2 },
53
-      { name: '拎包入住', id: 3 },
54
-      { name: '精装修', id: 4 },
55
-      { name: '独立阳台', id: 5 },
56
-      { name: '集中供暖', id: 6 },
57
-      { name: '押一付一', id: 7 },
58
-      { name: '双卫', id: 8 },
59
-      { name: '新上', id: 9 },
60
-      { name: '认证公寓', id: 10 }
51
+      { name: '独卫', id: 1, selected: false },
52
+      { name: '近地铁', id: 2, selected: false },
53
+      { name: '拎包入住', id: 3, selected: false },
54
+      { name: '精装修', id: 4, selected: false },
55
+      { name: '独立阳台', id: 5, selected: false },
56
+      { name: '集中供暖', id: 6, selected: false },
57
+      { name: '押一付一', id: 7, selected: false },
58
+      { name: '双卫', id: 8, selected: false },
59
+      { name: '新上', id: 9, selected: false },
60
+      { name: '认证公寓', id: 10, selected: false }
61 61
     ]
62 62
   },
63 63
   {

+ 38
- 7
src/pages/index/helpToFindHouse/components/RentingHouse/index.jsx 查看文件

@@ -5,7 +5,7 @@ import './index.scss'
5 5
 import questions from './formData'
6 6
 
7 7
 export default function RentingHouse (props) {
8
-  const { change = () => { }, toSubmit = () => {}, AreaInfo = {}, selectArea = () => {} } = props
8
+  const { change = () => { }, toSubmit = () => { }, AreaInfo = {}, selectArea = () => { } } = props
9 9
 
10 10
   const [FormData, setFormData] = useState(questions)
11 11
 
@@ -13,14 +13,22 @@ export default function RentingHouse (props) {
13 13
   const [StepRange, setStepRange] = useState([0, 4])
14 14
 
15 15
   useEffect(() => {
16
-    if(StepId === 1) {
16
+    if (StepId === 1) {
17 17
       setStepRange([0, 4])
18
-    } else if(StepId === 2) {
18
+    } else if (StepId === 2) {
19 19
       setStepRange([4, 6])
20 20
     }
21 21
     change(StepId)
22 22
   }, [StepId])
23 23
 
24
+  const CutCheckboxs = (index, subItem, subIndex) => {
25
+    return () => {
26
+      let newFormData = [...FormData]
27
+      newFormData[index].options[subIndex].selected = !subItem.selected
28
+      setFormData([...newFormData])
29
+    }
30
+  }
31
+
24 32
   const CutCheckbox = (item, index) => {
25 33
     return () => {
26 34
       let newFormData = [...FormData]
@@ -52,7 +60,17 @@ export default function RentingHouse (props) {
52 60
     if (StepId < 2) {
53 61
       setStepId(StepId + 1)
54 62
     } else {
55
-      toSubmit(FormData)
63
+      let Arr = [...FormData]
64
+      Arr.map((item) => {
65
+        if (item.type === 'checkbox') {
66
+          item.options.map((subItem) => {
67
+            if (subItem.selected) {
68
+              item.result.push(subItem.name)
69
+            }
70
+          })
71
+        }
72
+      })
73
+      toSubmit(Arr)
56 74
     }
57 75
   }
58 76
 
@@ -73,6 +91,19 @@ export default function RentingHouse (props) {
73 91
                 <text>{item.question}</text>
74 92
                 {
75 93
                   item.type === 'checkbox' &&
94
+                  <view className='CheckList'>
95
+                    {
96
+                      item.options.map((subItem, subIndex) => (
97
+                        <view key={`${item.key}-${subIndex}`} className={subItem.selected ? 'active' : ''} onClick={CutCheckboxs(index, subItem, subIndex)}>
98
+                          {subItem.name}
99
+                          <Image mode='heightFix' src={require('@/assets/findHouse-icon1.png')}></Image>
100
+                        </view>
101
+                      ))
102
+                    }
103
+                  </view>
104
+                }
105
+                {
106
+                  item.type === 'radio' &&
76 107
                   <view className='CheckList'>
77 108
                     {
78 109
                       item.options.map((subItem, subIndex) => (
@@ -85,9 +116,9 @@ export default function RentingHouse (props) {
85 116
                   </view>
86 117
                 }
87 118
                 {
88
-                  item.type === 'checkbox' && item.remark !== undefined &&
119
+                  item.type === 'radio' && item.remark !== undefined &&
89 120
                   <view className='Textarea'>
90
-                    <Textarea placeholder='请说出您的其他需求,让我们更好的为您服务!' onInput={(e) => {remarkInput(e, index)}} />
121
+                    <Textarea placeholder='请说出您的其他需求,让我们更好的为您服务!' onInput={(e) => { remarkInput(e, index) }} />
91 122
                   </view>
92 123
                 }
93 124
                 {
@@ -116,7 +147,7 @@ export default function RentingHouse (props) {
116 147
                 {
117 148
                   item.type === 'textarea' &&
118 149
                   <view className='Textarea'>
119
-                    <Textarea placeholder='请说出您的其他需求,让我们更好的为您服务!' onInput={(e) => {textareaInput(e, index)}} />
150
+                    <Textarea placeholder='请说出您的其他需求,让我们更好的为您服务!' onInput={(e) => { textareaInput(e, index) }} />
120 151
                   </view>
121 152
                 }
122 153
               </view>

+ 3
- 2
src/pages/index/helpToFindHouse/components/RentingHouse/index.scss 查看文件

@@ -83,16 +83,17 @@
83 83
           }
84 84
           &.active {
85 85
             > image {
86
-              display: block;
86
+              opacity: 1;
87 87
             }
88 88
           }
89 89
           > image {
90
-            display: none;
90
+            display: block;
91 91
             width: 36px;
92 92
             height: 36px;
93 93
             position: absolute;
94 94
             right: -2px;
95 95
             bottom: -2px;
96
+            opacity: 0;
96 97
           }
97 98
         }
98 99
       }