template-10559/src/dealer/bank/index.tsx

import {useState} from "react";
import Taro, {useDidShow} from '@tarojs/taro'
import {Button, Cell, Space, Empty, ConfigProvider} from '@nutui/nutui-react-taro'
import {CheckNormal, Checked} from '@nutui/icons-react-taro'
import {View} from '@tarojs/components'
import {ShopDealerBank} from "@/api/shop/shopDealerBank/model";
import {listShopDealerBank, removeShopDealerBank, updateShopDealerBank} from "@/api/shop/shopDealerBank";
import FixedButton from "@/components/FixedButton";

const DealerBank = () => {
  const [list, setList] = useState<ShopDealerBank[]>([])
  const [bank, setAddress] = useState<ShopDealerBank>()

  const reload = () => {
    listShopDealerBank({})
      .then(data => {
        setList(data || [])
        // 默认地址
        setAddress(data.find(item => item.isDefault))
      })
      .catch(() => {
        Taro.showToast({
          title: '获取地址失败',
          icon: 'error'
        });
      })
  }

  const onDefault = async (item: ShopDealerBank) => {
    if (bank) {
      await updateShopDealerBank({
        ...bank,
        isDefault: false
      })
    }
    await updateShopDealerBank({
      id: item.id,
      isDefault: true
    })
    Taro.showToast({
      title: '设置成功',
      icon: 'success'
    });
    reload();
  }

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

  const selectAddress = async (item: ShopDealerBank) => {
    if (bank) {
      await updateShopDealerBank({
        ...bank,
        isDefault: false
      })
    }
    await updateShopDealerBank({
      id: item.id,
      isDefault: true
    })
    setTimeout(() => {
      Taro.navigateBack()
    }, 500)
  }

  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: '/dealer/bank/add'})}>新增地址</Button>
            <Button type="success" fill="dashed"
                    onClick={() => Taro.navigateTo({url: '/dealer/bank/wxAddress'})}>获取微信地址</Button>
          </Space>
        </div>
      </ConfigProvider>
    )
  }

  return (
    <View className={'p-3'}>
      {list.map((item, _) => (
        <Cell.Group>
          <Cell className={'flex flex-col gap-1'} extra={item.bankAccount} onClick={() => selectAddress(item)}>
            <View>
              <View className={'font-medium text-sm'}>{item.bankName}</View>
            </View>
            <View className={'text-xs'}>
              {item.bankCard} {item.bankAccount}
            </View>
          </Cell>
          <Cell
            align="center"
            title={
              <View className={'flex items-center gap-1'} onClick={() => onDefault(item)}>
                {item.isDefault ? <Checked className={'text-green-600'} size={16}/> : <CheckNormal size={16}/>}
                <View className={'text-gray-400'}>选择</View>
              </View>
            }
            extra={
              <>
                <View className={'text-gray-400'} onClick={() => onDel(item.id)}>
                  删除
                </View>
              </>
            }
          />
        </Cell.Group>
      ))}
      {/* 底部浮动按钮 */}
      <FixedButton text={'新增银行卡'} onClick={() => Taro.navigateTo({url: '/dealer/bank/add'})} />
    </View>
  );
};

export default DealerBank;