websopy-mp/src/app/appCredential/index.tsx

import {useState} from "react";
import Taro, {useDidShow} from '@tarojs/taro'
import {Button, Cell, CellGroup, Space, Empty, ConfigProvider, Divider} from '@nutui/nutui-react-taro'
import {Dongdong, ArrowRight, CheckNormal, Checked} from '@nutui/icons-react-taro'
import {AppCredential} from "@/api/app/appCredential/model";
import {listAppCredential, removeAppCredential} from "@/api/app/appCredential";

const AppCredentialList = () => {
  const [list, setList] = useState<AppCredential[]>([])

  const reload = () => {
    listAppCredential({})
      .then(data => {
        setList(data || [])
      })
      .catch(() => {
        Taro.showToast({
          title: '获取数据失败',
          icon: 'error'
        });
      })
  }

  const onDel = async (id?: number) => {
    await removeAppCredential(id)
    Taro.showToast({
      title: '删除成功',
      icon: 'success'
    });
    reload();
  }

  useDidShow(() => {
    reload()
  });

  if (list.length == 0) {
    return (
      <ConfigProvider>
        <div className={'h-full flex flex-col justify-center items-center'} style={{
          height: 'calc(100vh - 300px)',
        }}>
          <Empty
            style={{
              backgroundColor: 'transparent'
            }}
            description="暂无数据"
          />
          <Space>
            <Button onClick={() => Taro.navigateTo({url: '/app/appCredential/add'})}>新增应用密钥凭证</Button>
          </Space>
        </div>
      </ConfigProvider>
    )
  }

  return (
    <ConfigProvider>
      <CellGroup>
        {list.map((item) => (
          <Cell
            key={item.id}
            title={item.credentialName || '未命名凭证'}
            description={item.description}
            align="center"
            rightIcon={<ArrowRight />}
            onClick={() => Taro.navigateTo({url: `/app/appCredential/add?id=${item.id}`})}
          />
        ))}
      </CellGroup>
      <Space direction="vertical" style={{padding: '16px'}}>
        <Button onClick={() => Taro.navigateTo({url: '/app/appCredential/add'})}>
          新增应用密钥凭证
        </Button>
      </Space>
    </ConfigProvider>
  );
};

export default AppCredentialList;