miniapp/src/pages/WuYe/BaoXiuQuYu/index.jsx

import React, { useState } from 'react'
import Taro from '@tarojs/taro'
import Page from '@/layouts'
import '@/assets/css/reset.less'
import '@/assets/css/iconfont.less'
import './index.less'

export default function WuYeBaoXiuQuYu () {

  const [TypeList] = useState([
    { icon: 'icongonggongquyu', name: '公共区域问题', desc: '如绿植被破坏、楼道灯不亮等问题', id: 1 },
    { icon: 'iconfangwuzhiliang', name: '房屋质量问题', desc: '如家中墙体开裂、墙皮脱落等问题', id: 2 },
    { icon: 'iconhuneisheshi', name: '户内设施问题', desc: '如通浴室下水道、保洁等可能需要收费的项目', id: 3 }
  ])

  return (
    <Page>
      <view className='WuYeBaoXiuQuYu'>
        {
          TypeList.map((item, index) => (
            <view key={`WuYeBaoXiuQuYu-${index}`}>
              <view onClick={() => { Taro.redirectTo({ url: `/pages/WuYe/TianJiaBaoXiu/index?type=${item.id}` }) }}>
                <view>
                  <text className={`iconfont ${item.icon}`}></text>
                  <text>{item.name}</text>
                </view>
                <text>{item.desc}</text>
              </view>
            </view>
          ))
        }
      </view>
    </Page>
  )
}