静态页面

src/pages/index/addedValueService/formData.js

   {
     question: '你较为看重家装的哪些方面？',
     key: 'important',
-    type: 'checkbox',
+    type: 'checkboxs',
     result: '',
     resultId: null,
     options: [
-      { name: '家装价格', id: 1 },
-      { name: '施工品质', id: 2 },
-      { name: '设计感', id: 3 },
-      { name: '环保', id: 4 },
-      { name: '舒适度', id: 5 },
-      { name: '实用度', id: 5 }
+      { name: '家装价格', id: 1, selected: false },
+      { name: '施工品质', id: 2, selected: false },
+      { name: '设计感', id: 3, selected: false },
+      { name: '环保', id: 4, selected: false },
+      { name: '舒适度', id: 5, selected: false },
+      { name: '实用度', id: 6, selected: false }
     ]
   },
   {
     question: '你理想的家装风格是哪些？',
     key: 'style',
-    type: 'checkbox',
+    type: 'checkboxs',
     result: '',
     resultId: null,
     options: [
-      { name: '北欧风格', id: 1 },
-      { name: '简欧风格', id: 2 },
-      { name: '欧式古典', id: 3 },
-      { name: '现代简约', id: 4 },
-      { name: '田园风格', id: 5 },
-      { name: '新中式风格', id: 6 },
-      { name: '地中海风格', id: 7 },
-      { name: '东南亚风格', id: 8 },
-      { name: '美式风格', id: 9 },
-      { name: '日式风格', id: 10 },
-      { name: '混搭风格', id: 11 }
+      { name: '北欧风格', id: 1, selected: false },
+      { name: '简欧风格', id: 2, selected: false },
+      { name: '欧式古典', id: 3, selected: false },
+      { name: '现代简约', id: 4, selected: false },
+      { name: '田园风格', id: 5, selected: false },
+      { name: '新中式风格', id: 6, selected: false },
+      { name: '地中海风格', id: 7, selected: false },
+      { name: '东南亚风格', id: 8, selected: false },
+      { name: '美式风格', id: 9, selected: false },
+      { name: '日式风格', id: 10, selected: false },
+      { name: '混搭风格', id: 11, selected: false }
     ]
   },
   {
     question: '你最关键的家装诉求是什么？',
     key: 'mostImportant',
-    type: 'checkbox',
+    type: 'checkboxs',
     result: '',
     resultId: null,
     options: [
-      { name: '设计凸显个性', id: 1 },
-      { name: '智能家居齐全', id: 2 },
-      { name: '强大的收纳功能', id: 3 },
-      { name: '方便清洁和整理', id: 4 },
-      { name: '温馨舒适', id: 5 },
-      { name: '品质生活', id: 6 },
-      { name: '其他', id: 7 }
+      { name: '设计凸显个性', id: 1, selected: false },
+      { name: '智能家居齐全', id: 2, selected: false },
+      { name: '强大的收纳功能', id: 3, selected: false },
+      { name: '方便清洁和整理', id: 4, selected: false },
+      { name: '温馨舒适', id: 5, selected: false },
+      { name: '品质生活', id: 6, selected: false },
+      { name: '其他', id: 7, selected: false }
     ]
   },
   {
     question: '你理想中的家应该包含哪些特殊功能区域？',
     key: 'special',
-    type: 'checkbox',
+    type: 'checkboxs',
     result: '',
     resultId: null,
     options: [
-      { name: '衣帽间', id: 1 },
-      { name: '书房', id: 2 },
-      { name: '宠物生活区', id: 3 },
-      { name: '超大浴缸', id: 4 },
-      { name: '超大衣柜', id: 5 },
-      { name: '开放式厨房', id: 6 },
-      { name: '种绿植阳台', id: 7 },
-      { name: '健身区', id: 8 },
-      { name: '婴儿房', id: 9 },
-      { name: '其他', id: 10 }
+      { name: '衣帽间', id: 1, selected: false },
+      { name: '书房', id: 2, selected: false },
+      { name: '宠物生活区', id: 3, selected: false },
+      { name: '超大浴缸', id: 4, selected: false },
+      { name: '超大衣柜', id: 5, selected: false },
+      { name: '开放式厨房', id: 6, selected: false },
+      { name: '种绿植阳台', id: 7, selected: false },
+      { name: '健身区', id: 8, selected: false },
+      { name: '婴儿房', id: 9, selected: false },
+      { name: '其他', id: 10, selected: false }
     ]
   },
   {

src/pages/index/addedValueService/index.jsx

     })
   }
 
+  const CutCheckboxs = (index, subItem, subIndex) => {
+    return () => {
+      let newFormData = [...FormData]
+      newFormData[index].options[subIndex].selected = !subItem.selected
+      setFormData([...newFormData])
+    }
+  }
+
   const CutCheckbox = (item, index) => {
     return () => {
       let newFormData = [...FormData]
     if (StepId < 4) {
       setStepId(StepId + 1)
     } else {
-      SubmitForm(FormData)
+      let Arr = [...FormData]
+      Arr.map((item) => {
+        if (item.type === 'checkboxs') {
+          item.options.map((subItem) => {
+            if (subItem.selected) {
+              item.result.push(subItem.name)
+            }
+          })
+        }
+      })
+      SubmitForm(Arr)
     }
   }
 
                   index >= StepRange[0] && index < StepRange[1] &&
                   <view>
                     <text>{item.question}</text>
+                    {
+                      item.type === 'checkboxs' &&
+                      <view className='CheckList'>
+                        {
+                          item.options.map((subItem, subIndex) => (
+                            <view key={`${item.key}-${subIndex}`} className={subItem.selected ? 'active' : ''} onClick={CutCheckboxs(index, subItem, subIndex)}>
+                              <text>{subItem.name}</text>
+                              <Image mode='heightFix' src={require('@/assets/findHouse-icon1.png')}></Image>
+                            </view>
+                          ))
+                        }
+                      </view>
+                    }
                     {
                       item.type === 'checkbox' &&
                       <view className='CheckList'>

src/pages/index/buildingDetail/components/BasicInfo/index.jsx

       {/* 更多信息 */}
       <view className='MoreInfo'>
         <view className='flex-h'>
-          <view className='flex-item'>
-            <text>楼盘地址：</text>
+          <view style='width: 60px;'>
+            <text>楼盘地址</text>
           </view>
+          <text>：</text>
           <view className='flex-item3'>
             <text className='active'>{Info.address}</text>
           </view>
         </view>
         <view className='flex-h'>
-          <view className='flex-item'>
-            <text>开盘时间：</text>
+          <view style='width: 60px;'>
+            <text>开盘时间</text>
           </view>
+          <text>：</text>
           <view className='flex-item3'>
             <text className='active'>{Info.openingDate || '待定'}</text>
           </view>
         </view>
         <view className='flex-h'>
-          <view className='flex-item'>
-            <text>容积率：</text>
+          <view style='width: 60px;'>
+            <text>容积率</text>
           </view>
+          <text>：</text>
           <view className='flex-item'>
             <text className='active'>{Info.volumeRate || '暂无'}</text>
           </view>
-          <view className='flex-item'>
-            <text>车位比率：</text>
+          <view style='width: 60px;'>
+            <text>车位比率</text>
           </view>
+          <text>：</text>
           <view className='flex-item'>
             <text className='active'>{Info.parkingRate || '暂无'}</text>
           </view>
         </view>
         <view className='flex-h'>
-          <view className='flex-item'>
-            <text>绿化率：</text>
+          <view style='width: 60px;'>
+            <text>绿化率</text>
           </view>
+          <text>：</text>
           <view className='flex-item'>
             <text className='active'>{Info.greeningRate || '暂无'}</text>
           </view>
-          <view className='flex-item'>
-            <text>物业费：</text>
+          <view style='width: 60px;'>
+            <text>物业费</text>
           </view>
+          <text>：</text>
           <view className='flex-item'>
             <text className='active'>{Info.serviceFee || '暂无'}</text>
           </view>
         </view>
         <view className='flex-h'>
-          <view className='flex-item'>
-            <text>规划户数：</text>
+          <view style='width: 60px;'>
+            <text>规划户数</text>
           </view>
+          <text>：</text>
           <view className='flex-item'>
             <text className='active'>{Info.familyNum || '暂无'}</text>
           </view>
-          <view className='flex-item'>
-            <text>物业：</text>
+          <view style='width: 60px;'>
+            <text>物业</text>
           </view>
+          <text>：</text>
           <view className='flex-item'>
             <text className='active'>{Info.serviceCompany || '暂无'}</text>
           </view>

src/pages/index/buildingDetail/components/BasicInfo/index.scss

   position: relative;
   overflow: hidden;
   padding-bottom: 60px;
-  >.Title {
+  > .Title {
     padding: 0 30px;
     position: relative;
     overflow: hidden;
     align-items: center;
     margin-top: 20px;
-    >.flex-item {
+    > .flex-item {
       margin-right: 20px;
-      >text {
+      > text {
         display: block;
         font-size: 40px;
         line-height: 56px;
         font-weight: bold;
       }
     }
-    >.Collect {
+    > .Collect {
       width: 100px;
-      >text {
+      > text {
         display: block;
         text-align: center;
         font-size: 24px;
         }
 
         &.active {
-          color: #F6B61D;
+          color: #f6b61d;
         }
       }
     }
   }
-  >.Tags {
+  > .Tags {
     padding: 0 30px;
     font-size: 0;
     position: relative;
     overflow: hidden;
-    >text {
+    > text {
       display: inline-block;
       vertical-align: middle;
       margin-top: 16px;
       text-align: center;
     }
   }
-  >.ProjectList {
+  > .ProjectList {
     position: relative;
     overflow: hidden;
     margin-top: 40px;
     height: 200px;
-    >scroll-view {
+    > scroll-view {
       width: 100%;
       height: 100%;
       font-size: 0;
         &:first-child {
           margin-left: 30px;
         }
-        >image {
+        > image {
           height: 180px;
           z-index: 1;
           display: block;
           transform: translateX(-50%);
           -webkit-transform: translateX(-50%);
         }
-        >view {
+        > view {
           width: 100%;
           height: 100%;
           position: relative;
           z-index: 2;
           overflow: hidden;
-          >.SaleStatus {
+          > .SaleStatus {
             display: inline-block;
             position: absolute;
             right: 0;
               color: #fff;
             }
           }
-          >view {
+          > view {
             font-size: 0;
             white-space: nowrap;
             padding-left: 20px;
             &:first-child {
               margin-top: 16px;
             }
-            >text {
+            > text {
               display: inline-block;
               vertical-align: middle;
               font-size: 26px;
       }
     }
   }
-  >.CutLine {
+  > .CutLine {
     position: relative;
     overflow: hidden;
     margin-top: 28px;
     height: 8px;
     &::after {
-      content: '';
+      content: "";
       display: block;
       position: absolute;
       width: 200px;
       -webkit-transform: translateX(-50%);
     }
   }
-  >.MoreInfo {
+  > .MoreInfo {
     position: relative;
     overflow: hidden;
     margin-top: 40px;
     padding: 0 30px;
-    >view {
+    > view {
       align-items: center;
       margin-top: 20px;
       &:first-child {
         margin-top: 0;
       }
-      >view {
-        min-width: 25%;
+      > text {
+        font-size: 26px;
+        line-height: 44px;
+        color: #999;
+      }
+      > view {
+        // min-width: 25%;
         &.flex-item3 {
           flex: 3;
           -webkit-flex: 3;
         }
-        >text {
+        > text {
           display: block;
           font-size: 26px;
           line-height: 44px;
       }
     }
   }
-  >.Views {
+  > .Views {
     padding: 0 30px;
     position: relative;
     overflow: hidden;
     margin-top: 20px;
     align-items: center;
-    >text {
+    > text {
       font-size: 26px;
       color: #999;
       line-height: 44px;
     }
-    >.flex-item {
+    > .flex-item {
       position: relative;
       overflow: hidden;
       font-size: 0;
       white-space: nowrap;
-      >view {
+      > view {
         display: inline-block;
         vertical-align: middle;
         width: 52px;
         &:first-child {
           margin-left: 30px;
         }
-        >image {
+        > image {
           width: 100%;
           height: 100%;
         }
       }
-      >text {
+      > text {
         display: inline-block;
         vertical-align: middle;
         font-size: 24px;
       }
     }
   }
-  >.Interact {
+  > .Interact {
     padding: 0 30px;
     position: relative;
     overflow: hidden;
     margin-top: 40px;
-    >text {
+    > text {
       margin-left: 30px;
       font-size: 36px;
       line-height: 90px;
     font-size: 0;
     white-space: nowrap;
     margin-top: 30px;
-    >text {
+    > text {
       display: inline-block;
       vertical-align: middle;
       color: #1a3b83;

src/pages/index/buildingInfo/index.scss

             color: #999;
             padding: 36px 0;
             min-width: 120px;
-            text-align: right;
             margin-right: 80px;
+            text-align: justify;
+            text-align-last: justify;
           }
           >view {
             >text {

src/pages/index/helpToFindHouse/components/RentingHouse/formData.js

   {
     question: '你的租房偏好？',
     key: 'preference',
-    type: 'checkbox',
+    type: 'radio',
     result: '',
     resultId: null,
     options: [
   {
     question: '你想租几居室的房子？',
     key: 'layout',
-    type: 'checkbox',
+    type: 'radio',
     result: '',
     resultId: null,
     options: [
     question: '其他要求？',
     key: 'purpose',
     type: 'checkbox',
-    result: '',
-    resultId: null,
+    result: [],
+    resultId: [],
     options: [
-      { name: '独卫', id: 1 },
-      { name: '近地铁', id: 2 },
-      { name: '拎包入住', id: 3 },
-      { name: '精装修', id: 4 },
-      { name: '独立阳台', id: 5 },
-      { name: '集中供暖', id: 6 },
-      { name: '押一付一', id: 7 },
-      { name: '双卫', id: 8 },
-      { name: '新上', id: 9 },
-      { name: '认证公寓', id: 10 }
+      { name: '独卫', id: 1, selected: false },
+      { name: '近地铁', id: 2, selected: false },
+      { name: '拎包入住', id: 3, selected: false },
+      { name: '精装修', id: 4, selected: false },
+      { name: '独立阳台', id: 5, selected: false },
+      { name: '集中供暖', id: 6, selected: false },
+      { name: '押一付一', id: 7, selected: false },
+      { name: '双卫', id: 8, selected: false },
+      { name: '新上', id: 9, selected: false },
+      { name: '认证公寓', id: 10, selected: false }
     ]
   },
   {

src/pages/index/helpToFindHouse/components/RentingHouse/index.jsx

 import questions from './formData'
 
 export default function RentingHouse (props) {
-  const { change = () => { }, toSubmit = () => {}, AreaInfo = {}, selectArea = () => {} } = props
+  const { change = () => { }, toSubmit = () => { }, AreaInfo = {}, selectArea = () => { } } = props
 
   const [FormData, setFormData] = useState(questions)
 
   const [StepRange, setStepRange] = useState([0, 4])
 
   useEffect(() => {
-    if(StepId === 1) {
+    if (StepId === 1) {
       setStepRange([0, 4])
-    } else if(StepId === 2) {
+    } else if (StepId === 2) {
       setStepRange([4, 6])
     }
     change(StepId)
   }, [StepId])
 
+  const CutCheckboxs = (index, subItem, subIndex) => {
+    return () => {
+      let newFormData = [...FormData]
+      newFormData[index].options[subIndex].selected = !subItem.selected
+      setFormData([...newFormData])
+    }
+  }
+
   const CutCheckbox = (item, index) => {
     return () => {
       let newFormData = [...FormData]
     if (StepId < 2) {
       setStepId(StepId + 1)
     } else {
-      toSubmit(FormData)
+      let Arr = [...FormData]
+      Arr.map((item) => {
+        if (item.type === 'checkbox') {
+          item.options.map((subItem) => {
+            if (subItem.selected) {
+              item.result.push(subItem.name)
+            }
+          })
+        }
+      })
+      toSubmit(Arr)
     }
   }
 
                 <text>{item.question}</text>
                 {
                   item.type === 'checkbox' &&
+                  <view className='CheckList'>
+                    {
+                      item.options.map((subItem, subIndex) => (
+                        <view key={`${item.key}-${subIndex}`} className={subItem.selected ? 'active' : ''} onClick={CutCheckboxs(index, subItem, subIndex)}>
+                          {subItem.name}
+                          <Image mode='heightFix' src={require('@/assets/findHouse-icon1.png')}></Image>
+                        </view>
+                      ))
+                    }
+                  </view>
+                }
+                {
+                  item.type === 'radio' &&
                   <view className='CheckList'>
                     {
                       item.options.map((subItem, subIndex) => (
                   </view>
                 }
                 {
-                  item.type === 'checkbox' && item.remark !== undefined &&
+                  item.type === 'radio' && item.remark !== undefined &&
                   <view className='Textarea'>
-                    <Textarea placeholder='请说出您的其他需求，让我们更好的为您服务！' onInput={(e) => {remarkInput(e, index)}} />
+                    <Textarea placeholder='请说出您的其他需求，让我们更好的为您服务！' onInput={(e) => { remarkInput(e, index) }} />
                   </view>
                 }
                 {
                 {
                   item.type === 'textarea' &&
                   <view className='Textarea'>
-                    <Textarea placeholder='请说出您的其他需求，让我们更好的为您服务！' onInput={(e) => {textareaInput(e, index)}} />
+                    <Textarea placeholder='请说出您的其他需求，让我们更好的为您服务！' onInput={(e) => { textareaInput(e, index) }} />
                   </view>
                 }
               </view>

src/pages/index/helpToFindHouse/components/RentingHouse/index.scss

           }
           &.active {
             > image {
-              display: block;
+              opacity: 1;
             }
           }
           > image {
-            display: none;
+            display: block;
             width: 36px;
             height: 36px;
             position: absolute;
             right: -2px;
             bottom: -2px;
+            opacity: 0;
           }
         }
       }