miniapp/src/pages/index/specialPriceHouse/index.jsx

import { useState } from 'react'
import withLayout from '@/layout'
import { ScrollView, Image } from '@tarojs/components'
import '@/assets/css/iconfont.css'
import './index.scss'

const defaultRuleImage = 'https://yz-websit.oss-cn-hangzhou.aliyuncs.com/xlk/index-icon19.jpg'

export default withLayout(() => {


  const [PageList, setPageList] = useState(['', '', ''])

  return (
    <view className='Page specialPriceHouse'>
      <ScrollView scroll-y>
        <view className='PageContent'>

          {/* 主图 */}
          <view className='MainPicture'>
            <Image mode='widthFix' src={defaultRuleImage}></Image>
          </view>

          {/* 列表 */}
          <view className='List'>
            {
              PageList.map((item, index) => (
                <view key={`ListItem-${index}`}>

                  <view className='Title'>
                    <view>
                      <text className='iconfont icon-shoucang'></text>
                      <text>{index + 1 > 9 ? index + 1 : `0${index + 1}`}</text>
                      <text className='iconfont icon-shoucang'></text>
                    </view>
                  </view>

                  <view className='InfoContent'>
                    <view className='Img'>
                      <Image mode='scaleToFill' src={null} className='centerLabel'></Image>
                    </view>
                    <view className='Name flex-h'>
                      <view className='flex-item'>
                        <text>奥园金基天著尚居</text>
                      </view>
                      <text>约</text>
                      <text>20000/㎡</text>
                    </view>
                    <text className='Address'>江宁禄口云熙99路号（诚信大道）</text>
                    <view className='Tag'>
                      <text>纯新盘</text>
                      <text>纯新盘</text>
                      <text>纯新盘</text>
                    </view>
                    <view className='Views flex-h'>
                      <view className='flex-item'>
                        <text className='iconfont icon-fenxiang'></text>
                        <text>3次分享</text>
                      </view>
                      <view className='Icons'>
                        <view>
                          <Image mode='scaleToFill' src={null} className='centerLabel'></Image>
                        </view>
                        <view>
                          <Image mode='scaleToFill' src={null} className='centerLabel'></Image>
                        </view>
                        <view>
                          <Image mode='scaleToFill' src={null} className='centerLabel'></Image>
                        </view>
                      </view>
                      <text>...9人围观</text>
                    </view>
                    <view className='SpecialList'>
                      <ScrollView scrollX>
                        {
                          [{}, {}].map((subItem, subIndex) => (
                            <view className='ListItem' key={`List-${subIndex}`}>
                              <text className='Tips'>省17.6万</text>
                              <view className='Price'>
                                <text>879万</text>
                                <text>932万</text>
                              </view>
                              <text className='Time'>距结束06天10时14分</text>
                              <text className='HouseType'>4室2厅2卫 234/㎡</text>
                              <text className='DoorNumber'>1#-5单元-401</text>
                            </view>
                          ))
                        }
                      </ScrollView>
                    </view>
                  </view>

                </view>
              ))
            }
          </view>

          <view className='Bottom'>
            <view>
              <view>
                <text className='iconfont icon-shengming'></text>
                <text>免责声明</text>
              </view>
              <view>
                <text>&emsp;&emsp;以上价格仅供参考,具体一房一价的信息以售楼处展示为准。房屋位置交通、医疗、教育、商业等配套信息，来源于第三方不作为要约,仅供参考,双方具体权利义务应以法律规定及买卖合同约定为准。本平台对项目周边文化教育的介绍旨在提供相关信息1 意味着信息发布方对就学安排作出承诺。相关教育资首页信息存在调整的可能,应以政府教育主管部门门及办学颁布的政策规定为准。详情请仔细阅读</text>
                <text className='active'>《新联宝使用免责条款》</text>
              </view>
            </view>
          </view>

        </view>
      </ScrollView>
    </view>
  )
})