feat: 猫咪信息详情

src/pages/CatMessage/components/View/index.tsx

@@ -0,0 +1,59 @@
+import { formatTime } from '@/scripts/utils';
+import { fetchCurrentCatInfo } from '@/services/cat';
+import { Avatar, Descriptions, Modal } from 'antd';
+import { useEffect, useState } from 'react';
+
+const View = ({ open, setViewVisible, currentCat }: any) => {
+  const [data, setData] = useState<any>({});
+
+  const handleOk = () => {
+    setViewVisible(false);
+  };
+
+  const handleCancel = () => {
+    setViewVisible(false);
+  };
+
+  useEffect(() => {
+    if (open) {
+      fetchCurrentCatInfo({ catId: currentCat }).then((res) => setData(res));
+    }
+  }, [open]);
+
+  const { cat } = data;
+  const {
+    age,
+    area,
+    avatars,
+    color,
+    createAt,
+    details,
+    // isSnipped,
+    isSterilized,
+    name,
+    popularity,
+    sex,
+    // status,
+  } = cat;
+
+  return (
+    <Modal title="猫咪详情" open={open} onOk={handleOk} onCancel={handleCancel}>
+      <Descriptions>
+        <Descriptions.Item label="缩略图">
+          <Avatar src={avatars[0] ?? ''} />
+        </Descriptions.Item>
+        <Descriptions.Item label="昵称">{name ?? ''}</Descriptions.Item>
+        <Descriptions.Item label="花色">{color ?? ''}</Descriptions.Item>
+        <Descriptions.Item label="年龄">{age ?? ''}</Descriptions.Item>
+        <Descriptions.Item label="性别">{sex ?? ''}</Descriptions.Item>
+        <Descriptions.Item label="出没区域">{area ?? ''}</Descriptions.Item>
+        <Descriptions.Item label="热度">{popularity ?? ''}</Descriptions.Item>
+        <Descriptions.Item label="是否绝育">{isSterilized ?? '' ? '是' : '否'}</Descriptions.Item>
+        <Descriptions.Item label="创建时间">{formatTime(createAt ?? '')}</Descriptions.Item>
+        <Descriptions.Item label="描述">{details ?? ''}</Descriptions.Item>
+      </Descriptions>
+    </Modal>
+  );
+};
+
+export default View;

src/pages/CatMessage/index.tsx

@@ -2,9 +2,10 @@ import { fetchCatList } from '@/services/cat';
 import { PlusOutlined } from '@ant-design/icons';
 import type { ActionType, ProColumns } from '@ant-design/pro-components';
 import { FooterToolbar, PageContainer, ProTable } from '@ant-design/pro-components';
-import { Button, Space } from 'antd';
+import { Button } from 'antd';
 import React, { useRef, useState } from 'react';
 import { OPERATIONS } from '../commonSettings';
+import View from './components/View';
 import { CAT_MESSAGE_COLUMNS } from './settings';
 
 // const handleAdd = async (fields: API.RuleListItem) => {
@@ -14,19 +15,11 @@ const handleRemove = async (selectedRows: API.RuleListItem[]) => {
   console.log(selectedRows);
 };
 
-export type CatMessageItems = {
-  key: number;
-  cat_name: string;
-  create_by: string;
-  update_by: string;
-  date_at: number;
-  cat_status: number;
-  content_collect: string;
-};
-
 const CatMessage: React.FC = () => {
   const actionRef = useRef<ActionType>();
   const [selectedRowsState, setSelectedRows] = useState<API.RuleListItem[]>([]);
+  const [currentCat, setCurrentCat] = useState('');
+  const [viewVisible, setViewVisible] = useState(false);
 
   const fetchCommunityInfo = () => {
     return '637ce159b15d9764c31f9c84';
@@ -54,12 +47,34 @@ const CatMessage: React.FC = () => {
     ...CAT_MESSAGE_COLUMNS,
     {
       ...OPERATIONS,
-      render: () => (
-        <Space>
-          <a key="edit">编辑</a>
-          <a key="view">查看</a>
-          <a key="delete">删除</a>
-        </Space>
+      render: (_, record) => (
+        <>
+          <Button
+            type="link"
+            size="small"
+            key="edit"
+            onClick={() => {
+              console.log(currentCat);
+              console.log(viewVisible);
+            }}
+          >
+            编辑
+          </Button>
+          <Button
+            type="link"
+            size="small"
+            key="view"
+            onClick={() => {
+              setCurrentCat(record.id);
+              setViewVisible(true);
+            }}
+          >
+            查看
+          </Button>
+          <Button type="link" size="small" danger key="delete">
+            删除
+          </Button>
+        </>
       ),
     },
   ];
@@ -87,6 +102,7 @@ const CatMessage: React.FC = () => {
           },
         }}
       />
+      <View open={viewVisible} setViewVisible={setViewVisible} currentCat={currentCat} />
       {selectedRowsState?.length > 0 && (
         <FooterToolbar
           extra={

src/pages/CatMessage/settings.tsx

@@ -1,17 +1,18 @@
 import { NAME } from '@/pages/commonSettings';
 import { ProColumns } from '@ant-design/pro-components';
-import { Badge, Space } from 'antd';
+import { Avatar, Badge, Space } from 'antd';
 
 const MAX_ORDER = 10;
 
 export const AVATAR_IMG: ProColumns = {
   title: '缩略图',
   dataIndex: 'avatarUrl',
   hideInSearch: true,
+  render: (_) => <Avatar src={_} size={40}></Avatar>,
 };
 
 export const COLOR: ProColumns = {
-  title: '颜色',
+  title: '花色',
   dataIndex: 'color',
   hideInSearch: true,
 };
@@ -50,8 +51,8 @@ export const CAT_MESSAGE_COLUMNS = [
     order: MAX_ORDER - 4,
     ...AREA,
   },
-  {
-    order: MAX_ORDER - 2,
-    ...IS_COLLECTED,
-  },
+  //   {
+  //     order: MAX_ORDER - 2,
+  //     ...IS_COLLECTED,
+  //   },
 ];

src/pages/commonSettings.tsx

@@ -20,7 +20,7 @@ export const OPERATIONS: ProColumns = {
 };
 
 export const NAME: ProColumns = {
-  title: '名称',
+  title: '昵称',
   dataIndex: 'name',
 };
 

src/services/auth.ts

@@ -2,24 +2,32 @@ import { request } from '@umijs/max';
 
 const DEFAULT_URL = 'https://meowchat.xhpolaris.com';
 
-/** 获取当前的用户 GET /user/get_user_info */
+/**
+ * 获取当前的用户
+ * @param params
+ * @returns
+ */
 export async function currentUser(options?: { [key: string]: any }) {
-    return request<{
-        user: API.CurrentUser;
-    }>(`${DEFAULT_URL}/user/get_user_info`, {
-        method: 'GET',
-        ...(options || {}),
-    });
+  return request<{
+    user: API.CurrentUser;
+  }>(`${DEFAULT_URL}/user/get_user_info`, {
+    method: 'GET',
+    ...(options || {}),
+  });
 }
 
-/** 登录接口 POST /auth/sign_in */
+/**
+ * 登录接口
+ * @param params
+ * @returns
+ */
 export async function login(body: API.LoginParams, options?: { [key: string]: any }) {
-    return request<API.LoginResult>(`${DEFAULT_URL}/auth/sign_in`, {
-        method: 'POST',
-        data: {
-            ...body,
-            authType: 'email',
-        },
-        ...(options || {}),
-    });
+  return request<API.LoginResult>(`${DEFAULT_URL}/auth/sign_in`, {
+    method: 'POST',
+    data: {
+      ...body,
+      authType: 'email',
+    },
+    ...(options || {}),
+  });
 }

src/services/cat.ts

@@ -20,7 +20,26 @@ export const fetchCatList = async (
     params: {
       ...params,
       page: (params.current || 1) - 1,
-      // communityId: '637ce159b15d9764c31f9c84'
     },
     ...(options || {}),
   });
+
+/**
+ * 获取猫咪具体信息
+ * @param params
+ * @returns
+ */
+export const fetchCurrentCatInfo = async (
+  params: {
+    catId: string;
+  },
+  options?: { [key: string]: any },
+) => {
+  return request(`${DEFAULT_URL}/collection/get_cat_detail`, {
+    method: 'GET',
+    params: {
+      ...params,
+    },
+    ...(options || {}),
+  });
+};