feat: 办理记录组件

zhangyongtian

2024-09-06 ee7848e5597f688b7f7eecdb10b3e9679dc9c016

 gz-customerSystem/src/views/register/matterDetail/ApplyInfo.jsx

@@ -1,9 +1,73 @@
import React from 'react'
import React, { Fragment, useState } from 'react';
import { register, downO, up } from '@/assets/images';

export default function ApplyInfo(props) {
  const [list, setList] = useState([
    {
      appType: '上报申请',
      time: '2024-7-12 10:00',
      addr: '白云区新市街汇桥北社区委员会 ',
      people: '李晓明',
      status: 1,
      statusName: '审核通过',
      id: 1,
    },
    {
      appType: '上报申请',
      time: '2024-7-12 10:00',
      addr: '白云区新市街汇桥北社区委员会 ',
      people: '李晓明',
      status: 2,
      statusName: '审核中',
      id: 2,
    },
    {
      appType: '上报申请',
      time: '2024-7-12 10:00',
      addr: '白云区新市街汇桥北社区委员会 ',
      people: '李晓明',
      status: 3,
      statusName: '审核不通过',
      id: 3,
    }
  ]);

  const toggleView = (id) => {
    setList(list.map(record => {
      if (record.id === id) {
        return {
          ...record,
          showView: !record.showView,
        };
      }
      return record;
    }));
  };

  return (
    <div>
      
    <div style={{ margin: '0 16px' }}>
      <div>
        {list?.map(item => {
          return <div className='applyInfoClass'>
            <div className='applyInfoClass-img' onClick={() => { toggleView(item.id) }}>
              <img src={item.showView ? up : downO} alt="" className="title-downUp" />
            </div>
            <div className='applyInfoClass-title'>
              <div className='applyInfoClass-title-txt'>{item.appType}</div>
              <div className={`applyInfoClass-title-tag-${item.status}`} >{item.statusName}</div>
            </div>
            <div>
              <span style={{ marginRight: '32px' }}>
                <span style={{ color: '#86909C' }}>申请时间：</span><span>{item.time}</span>
              </span>
              <span style={{ marginRight: '8px' }}>
                <span style={{ color: '#86909C' }}>申请人：</span><span>{item.addr}</span>
              </span>
              <span><span>{item.people}<img src={register} alt="" className="title-register" /></span></span>
            </div>
          </div>
        })}
      </div>
    </div>
  )
}