react + zarm 实现账单详情页以及编辑删除功能

react + zarm 实现账单详情页以及编辑删除功能

需要实现的交互效果

实现过程

1.封装公用的头部 Header

在 components 目录下新建 Header 目录，添加两个文件 ​​index.jsx​​​ 和 ​​style.module.less​​。

import React from 'react';import PropTypes from 'prop-types';import { useNavigate } from 'react-router-dom'import { NavBar, Icon } from 'zarm';import s from './style.module.less'const Header = ({ title = '' }) => { const navigate = useNavigate() return

};Header.propTypes = { title: PropTypes.string, // 标题};export default Header;

.header-warp { border-bottom: 1px solid #e9e9e9; .block { width: 100%; height: 46px; :global { .za-nav-bar__title { font-size: 14px; color: rgba(0, 0, 0, 0.9); } .za-icon--arrow-left { font-size: 20px; } } } .header { position: fixed; top: 0; left: 0; width: 100%; .more { font-size: 20px; } }}

2.安装 query-string

npm

用法请参考：​​queryString = require('query-string');console.log(location.search);//=> '?foo=bar'const parsed = queryString.parse(location.search);console.log(parsed);//=> {foo: 'bar'}console.log(location.hash);//=> '#token=bada55cafe'const parsedHash = queryString.parse(location.hash);console.log(parsedHash);//=> {token: 'bada55cafe'}parsed.foo = 'unicorn';parsed.ilike = 'pizza';const stringified = queryString.stringify(parsed);//=> 'foo=unicorn&ilike=pizza'location.search = stringified;// note that `location.search` automatically prepends a question markconsole.log(location.search);//=> '?foo=unicorn&ilike=pizza'

3.添加 Detail 路由

在 ​​src\router\index.js​​ 里添加路由：

import Login from '@/container/Login'import Home from '@/container/Home'import Data from '@/container/Data'import User from '@/container/User'import Detail from '@/container/Detail'const routes = [ { path: "/login", component: Login },{ path: "/", component: Home },{ path: "/data", component: Data },{ path: "/user", component: User },{ path: "/detail", component: Detail }];export default

4.添加 Detail 模块代码

在 container 目录下新建 Detail 目录，添加文件 ​​index.jsx​​​ 和 ​​style.module.less​​​，以及 ​​api/index.js​​ 接口配置文件。

import React, { useEffect, useState, useRef } from 'react';import { useLocation, useNavigate } from 'react-router-dom';import { Modal, Toast } from 'zarm';import qs from 'query-string';import cx from 'classnames';import Header from '@/components/Header';import CustomIcon from '@/components/CustomIcon';import PopupAddBill from '@/components/PopupAddBill';import { typeMap } from '@/utils';import { billDetails, billDelete } from './api/index.js';import s from './style.module.less';const Detail = () => { const editRef = useRef(); const navigate = useNavigate(); const location = useLocation(); // 路由 location 实例 const { id } = qs.parse(location.search); // 查询字符串反序列化 const [detail, setDetail] = useState({}); // 订单详情数据 useEffect(() => { getDetail() }, []); const getDetail = async () => { const { data } = await billDetails({ id }); setDetail(data); } // 删除方法const deleteDetail = () => { Modal.confirm({ title: '删除', content: '确认删除账单？', onOk: async () => { const { data } = await billDelete({ id }) Toast.show('删除成功') navigate(-1) }, });} return

}export default

.detail { height: 100%; display: flex; flex-direction: column; background-color: #f5f5f5; padding: 12px 24px 0 24px;}.card { border-radius: 12px; background-color: #fff; padding: 0 12px; display: flex; flex-direction: column; align-items: center; .type { padding: 24px 0 12px 0; span:nth-of-type(1) { display: inline-block; width: 22px; height: 22px; color: #fff; border-radius: 50%; text-align: center; line-height: 24px; margin-right: 8px; } .expense { background-color: #007fff; } .income { background-color: rgb(236, 190, 37); } .iconfont { font-size: 16px; } } .amount { font-size: 24px; font-weight: 600; margin-bottom: 24px; } .info { width: 100%; font-size: 14px; text-align: left; .time { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 12px; span:nth-of-type(1) { flex: 3; color: rgba(0,0,0,0.5) } span:nth-of-type(2) { flex: 9; } } .remark { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 12px; span:nth-of-type(1) { flex: 3; color: rgba(0,0,0,0.5) } span:nth-of-type(2) { flex: 9; color: rgba(0,0,0,0.9) } } } .operation { width: 100%; height: 50px; display: flex; align-items: center; font-size: 16px; .van-icon { margin-right: 4px; } span { display: flex; align-items: center; justify-content: center; height: 100%; flex: 1 } span:nth-of-type(1) { color: red; } }}

import { fetchData } from "@/utils/axios.js";// 获取账单详情export function billDetails(data) { return fetchData('/api/bill/details', 'get', data);}// 删除账单export function billDelete(data) { return fetchData('/api/bill/delete', 'post', data);}

5.更新 PopupAddBill 模块逻辑

里面添加了编辑功能的相关逻辑，以及接口的配置

在 ​​api/index.js​​ 里添加编辑更新账单接口

import { fetchData } from "@/utils/axios.js";// 获取类型字典列表export function queryTypeList(data) { return fetchData('/api/type/list', 'get', data);}// 添加账单export function billAdd(data) { return fetchData('/api/bill/add', 'post', data);}// 更新账单信息export function billUpdate(data) { return fetchData('/api/bill/update', 'post', data);}

6.测试一下效果

详情页面如下

我们在测试一下编辑功能：我们将数据改变一下

回到列表页：我们也发现更新成功了。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。