diff --git a/src/app.config.ts b/src/app.config.ts index f2ce4d9..2d92a16 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -128,6 +128,24 @@ export default { pages: [ "index" ] + }, + { + root: "pages/depositBeforehandDetail", + pages: [ + "index" + ] + }, + { + root: "pages/depositBeforehand", + pages: [ + "index" + ] + }, + { + root: "pages/depositList", + pages: [ + "index" + ] } ] } diff --git a/src/components/InfiniteScrollPaging/index.module.scss b/src/components/InfiniteScrollPaging/index.module.scss new file mode 100644 index 0000000..aab1d77 --- /dev/null +++ b/src/components/InfiniteScrollPaging/index.module.scss @@ -0,0 +1,21 @@ + +.scroll_main{ + height: 100%; + .infinite_scroll{ + font-size: $font_size_medium; + color: $color_font_two; + width: 100%; + display: flex; + justify-content: center; + .loading_more{ + display: flex; + align-items: center; + } + .noMore{ + padding-top: 20px; + } + } + .scrollViewCon { + // height: 100%; + } +} \ No newline at end of file diff --git a/src/components/InfiniteScrollPaging/index.tsx b/src/components/InfiniteScrollPaging/index.tsx new file mode 100644 index 0000000..8db82b0 --- /dev/null +++ b/src/components/InfiniteScrollPaging/index.tsx @@ -0,0 +1,124 @@ + +import InfiniteScroll from "@/components/infiniteScroll" +import { ReactNode, useEffect, useMemo, useRef, useState } from "react" +import { dataLoadingStatus, getFilterData } from "@/common/util"; +import { isEmptyObject } from "@/common/common"; + +interface Params{ + children?: ReactNode, + query?: object, + fetchData: (data: object)=>any, + change?: (data: any)=>void +} + +export default (props: Params)=>{ + const { query={} } = props; + useEffect(()=>{ + refreshDataRef.current = refreshData; + dataRef.current = data; + getData({moreStatus: true},{moreStatus: true}); + }, []) + useEffect(()=>{ + if(!isEmptyObject(query)){ + setData({list: [],total: 0}); + getData({moreStatus: true},{moreStatus: true}); + } + },[query]) + const getData = async (startStatus, endStatus)=>{ + const tRefreshDataRef = refreshDataRef.current as any; + setRefreshData({ + ...tRefreshDataRef, + ...startStatus, + loading: true + }) + const result = await props.fetchData({ + ...query, + page: tRefreshDataRef.page, + size: tRefreshDataRef.size, + }); + // 返回数据 + props.change&&props.change(result); + if(result.success){ + if(result.data.total<=0){ + setRefreshData({ + ...tRefreshDataRef, + ...endStatus, + loading: false + }) + }else{ + setData({ + list: result.data.list, + // list: tRefreshDataRef.page>1?(dataRef.current as any).list.concat(result.data.list):result.data.list, + total: result.data.total + }) + setRefreshData({ + ...tRefreshDataRef, + refreshStatus: false, + moreStatus: false, + loading: false + }) + } + }else{ + setRefreshData({ + ...tRefreshDataRef, + refreshStatus: false, + moreStatus: true, + loading: false + }) + } + } + // 加载刷新数据 + const [refreshData, setRefreshData] = useState({ + refreshStatus: false, + moreStatus: false, + page: 1, + size: 10, + loading: false + }) + const refreshDataRef = useRef({}); + // 渲染(数据) + const [data, setData] = useState({ + list: [], + total: 0 + }); + const dataRef = useRef({}); + // 下拉刷新 + const handleRefresh = async ()=>{ + let tRefreshData = refreshDataRef.current as any; + setRefreshData({ + ...tRefreshData, + page: 1, + size: 10, + }) + getData({refreshStatus: true,moreStatus: false},{refreshStatus: false,moreStatus: true}); + } + // 加载更多 + const handleMoreLoad = async ()=>{ + let t = (dataRef.current as any); + let tRefreshData = refreshDataRef.current as any; + if(t.list.length { + return dataLoadingStatus({list:data.list, total: data.total, status: refreshData.loading}) + }, [refreshData.loading]) + + + return ( + + {props.children} + + ) +} diff --git a/src/pages/creditLine/index.tsx b/src/pages/creditLine/index.tsx index a69aadb..ea08485 100644 --- a/src/pages/creditLine/index.tsx +++ b/src/pages/creditLine/index.tsx @@ -6,6 +6,7 @@ import { useEffect, useState } from "react" import {creditInfoApi} from "@/api/creditLine" import "./index.scss" import { useSelector } from "@/reducers/hooks"; +import { formatPriceDiv } from "@/common/fotmat" export default ()=>{ @@ -24,10 +25,11 @@ export default ()=>{ // 获取数据 const getData = async ()=>{ const result = await fetchData(); - const progress = result.data.credit_quota_used_line / result.data.credit_quota_line * 100; - const credit_quota_used_line = convertPrice(result.data.credit_quota_used_line); - const credit_quota_line = convertPrice(result.data.credit_quota_line); - const credit_quota_available_line = convertPrice(result.data.credit_quota_available_line); + const credit_quota_used_line = convertPrice(formatPriceDiv(result.data.credit_quota_used_line)); + const credit_quota_line = convertPrice(formatPriceDiv(result.data.credit_quota_line)); + const credit_quota_available_line = convertPrice(formatPriceDiv(result.data.credit_quota_available_line)); + const progress = credit_quota_line[0] / credit_quota_available_line[0] * 100; + setData({ ...result.data, progress, @@ -53,8 +55,8 @@ export default ()=>{ - 已用额度 - ¥{data?.credit_quota_used_line[0]}.{data.credit_quota_used_line[1]} + 可用额度 + ¥{data.credit_quota_available_line[0]}.{data.credit_quota_available_line[1]} 有效期: {data.create_time} 2022-03-09至2022-05-13 @@ -69,9 +71,9 @@ export default ()=>{ - 可用额度 + 已用额度 - ¥{data.credit_quota_available_line[0]}.{data.credit_quota_available_line[1]} + ¥{data?.credit_quota_used_line[0]}.{data.credit_quota_used_line[1]} diff --git a/src/pages/creditUsed/index.tsx b/src/pages/creditUsed/index.tsx index 3798a05..8858ad9 100644 --- a/src/pages/creditUsed/index.tsx +++ b/src/pages/creditUsed/index.tsx @@ -1,68 +1,40 @@ - -import AddressList from "@/components/AddressList" -import InfiniteScroll from "@/components/infiniteScroll" +import InfiniteScrollPaging from "@/components/InfiniteScrollPaging" import { Button, Canvas, ScrollView, Text, View } from "@tarojs/components" import Taro, { useReady } from "@tarojs/taro" -import { useEffect, useState } from "react" +import { useCallback, useEffect, useMemo, useRef, useState } from "react" import {creditListApi} from "@/api/creditLine" import "./index.scss" +import { formatDateTime } from "@/common/fotmat" +import { dataLoadingStatus, getFilterData } from "@/common/util"; export default ()=>{ - useEffect(()=>{ - getData(); - }, []) const {fetchData, state} = creditListApi(); - const data = Array.from({length: 10}); - const getData = async ()=>{ - fetchData(); - } - // 刷新 - const [refreshData, setRefreshData] = useState({ - refreshStatus: false, - moreStatus: false - }) - const handleRefresh = async ()=>{ - setRefreshData({ - ...refreshData, - refreshStatus: true + // 渲染(数据) + const [data, setData] = useState({ + list: [], + total: 0 + }); + const handleChange = useCallback((result)=>{ + setData({ + list: result.data.list, + total: result.data.total }) - - - setTimeout(()=>{ - setRefreshData({ - ...refreshData, - moreStatus: false - }) - }, 3000) - } - const handleMoreLoad = async ()=>{ - setRefreshData({ - ...refreshData, - moreStatus: true - }) - - setTimeout(()=>{ - setRefreshData({ - ...refreshData, - refreshStatus: false - }) - },3000) - } + }, []) return ( - + { - data.map((item,index)=>{ + (data as any)?.list?.map((item,index)=>{ return ( 下单 - -999,999.00 + 0?'green':item.amount<0?'red':''}`}>{item.amount.toLocaleString()} - 2022-04-24 16:10:11 - 订单号:LY2278204399678 + {formatDateTime(item.order_pay_time)} + 订单号:{item.order_no} ) @@ -70,7 +42,129 @@ export default ()=>{ } {/* {data.length>0&&} */} - + ) } + +// export default ()=>{ +// useEffect(()=>{ +// refreshDataRef.current = refreshData; +// dataRef.current = data; +// getData({ +// moreStatus: true +// },{ +// moreStatus: true +// }); +// }, []) +// const {fetchData, state} = creditListApi(); +// const getData = async (startStatus, endStatus)=>{ +// const tRefreshDataRef = refreshDataRef.current as any; +// setRefreshData({ +// ...tRefreshDataRef, +// ...startStatus +// }) +// const result = await fetchData({ +// page: tRefreshDataRef.page, +// size: tRefreshDataRef.size, +// }); +// if(result.success){ +// if(result.data.total<=0){ +// setRefreshData({ +// ...tRefreshDataRef, +// ...endStatus +// }) +// }else{ +// setData({ +// list: result.data.list, +// // list: tRefreshDataRef.page>1?(dataRef.current as any).list.concat(result.data.list):result.data.list, +// total: result.data.total +// }) +// setRefreshData({ +// ...tRefreshDataRef, +// refreshStatus: false, +// moreStatus: false +// }) +// } +// } +// } +// // 加载刷新数据 +// const [refreshData, setRefreshData] = useState({ +// refreshStatus: false, +// moreStatus: false, +// page: 1, +// size: 10 +// }) +// const refreshDataRef = useRef({}); +// // 渲染(数据) +// const [data, setData] = useState({ +// list: [], +// total: 0 +// }); +// const dataRef = useRef({}); +// // 下拉刷新 +// const handleRefresh = async ()=>{ +// let tRefreshData = refreshDataRef.current as any; +// setRefreshData({ +// ...tRefreshData, +// page: 1, +// size: 10, +// }) +// getData({ +// refreshStatus: true, +// moreStatus: false +// },{ +// refreshStatus: false, +// moreStatus: true +// }); +// } +// // 加载更多 +// const handleMoreLoad = async ()=>{ +// let t = (dataRef.current as any); +// let tRefreshData = refreshDataRef.current as any; +// if(t.list.length { + +// return dataLoadingStatus({list:data.list, total: data.total, status: refreshData.moreStatus}) +// }, [data]) + + +// return ( +// +// +// { +// (data as any)?.list?.map((item,index)=>{ +// return ( +// +// +// 下单 +// 0?'green':item.amount<0?'red':''}`}>{item.amount.toLocaleString()} +// +// +// {formatDateTime(item.order_pay_time)} +// 订单号:{item.order_no} +// +// +// ) +// }) +// } +// {/* {data.length>0&&} */} +// +// +// +// ) +// } diff --git a/src/pages/depositBeforehand/index.config.ts b/src/pages/depositBeforehand/index.config.ts new file mode 100644 index 0000000..8206758 --- /dev/null +++ b/src/pages/depositBeforehand/index.config.ts @@ -0,0 +1,3 @@ +export default { + navigationBarTitleText: '预存款' +} diff --git a/src/pages/depositBeforehand/index.scss b/src/pages/depositBeforehand/index.scss new file mode 100644 index 0000000..8e73ead --- /dev/null +++ b/src/pages/depositBeforehand/index.scss @@ -0,0 +1,87 @@ +.deposit-beforehand{ + height: 100vh; + background-color: #f3f3f3; + display: flex; + flex-direction: column; + .deposit-beforehand-card{ + width: 702px; + background: #ffffff; + border-radius: 20px; + margin: 30px auto; + padding: 30px; + box-sizing: border-box; + } + .deposit-beforehand-balance{ + display: flex;flex-direction: column;align-items: center; + } + .deposit-beforehand-balance-title{ + font-size: 28px; + font-weight: 400; + color: #000000; + margin-bottom: 35px; + } + .deposit-beforehand-balance-price{ + font-size: 40px; + font-weight: 700; + color: #000000; + margin-bottom: 70px; + } + .deposit-beforehand-balance-button{ + width: 276px; + height: 74px; + background: #007aff; + border-radius: 38px; + display: flex;align-items: center;justify-content: center; + color: white; + margin-bottom: 10px; + } + + .deposit-beforehand-info-title{ + display: flex;justify-content: space-between; + margin-bottom: 50px; + } + .deposit-beforehand-info-title-left{ + font-size: 28px; + font-weight: 700; + color: #000000; + } + .deposit-beforehand-info-title-copy{ + font-size: 24px; + font-weight: 400; + color: #007aff; + } + .deposit-beforehand-info-list{ + display: flex;align-items: center; + line-height: 60px; + } + .deposit-beforehand-info-list-left{ + width: 160px; + font-size: 24px; + font-weight: 400; + color: #3c3c3c; + border-right: 1px solid #dddddd; + margin-right: 25px; + } + .deposit-beforehand-info-list-right{ + font-size: 26px; + font-weight: 400; + color: #000000; + } + + .deposit-beforehand-particulars{ + display: flex;align-items: center;justify-content: space-between; + } + .deposit-beforehand-particulars-left{ + font-size: 28px; + font-weight: 700; + color: #000000; + } + .deposit-beforehand-particulars-right{ + font-size: 24px; + font-weight: 400; + color: #ababab; + } + .deposit-beforehand-particulars-right text{ + font-size: 28px; + } +} \ No newline at end of file diff --git a/src/pages/depositBeforehand/index.tsx b/src/pages/depositBeforehand/index.tsx new file mode 100644 index 0000000..65925fa --- /dev/null +++ b/src/pages/depositBeforehand/index.tsx @@ -0,0 +1,49 @@ + + +import { Button, Canvas, Navigator, ScrollView, Text, View } from "@tarojs/components" +import "./index.scss" + +export default ()=>{ + + return ( + + + + 余额 (元) + 999,999.20 + 转出 + + + + + + 预存款充值 + 复制 + + + + 开户名称 + 佛山市浩川盛世科技有限公司 + + + 开户银行 + 招商银行汾江支行 + + + 专属汇款账号 + 62062342120001221231212 + + + + + + + 收支明细 + + 全部 + + + + + ) +} diff --git a/src/pages/depositBeforehandDetail/index.config.ts b/src/pages/depositBeforehandDetail/index.config.ts new file mode 100644 index 0000000..1ae5fe4 --- /dev/null +++ b/src/pages/depositBeforehandDetail/index.config.ts @@ -0,0 +1,3 @@ +export default { + navigationBarTitleText: '交易详情' +} diff --git a/src/pages/depositBeforehandDetail/index.scss b/src/pages/depositBeforehandDetail/index.scss new file mode 100644 index 0000000..de766bc --- /dev/null +++ b/src/pages/depositBeforehandDetail/index.scss @@ -0,0 +1,41 @@ +.deposit-detail{ + // height: 100vh; + // background-color: #f3f3f3; + .deposit-timeline{ + + } + .deposit-timeline-item{ + display: flex; + margin-left: 50px; + } + .deposit-timeline-item-title{ + font-size: 24px; + font-weight: 400; + color: #3c3c3c; + } + .deposit-timeline-item-date{ + font-size: 24px; + font-weight: 400; + color: #ababab; + margin-bottom: 55px; + } + .deposit-timeline-item-left{ + position: relative; + margin-right: 55px; + } + .deposit-timeline-item-left::before{ + content: " "; + width: 12px; + height: 12px; + background: #007aff; + border-radius: 50%; + display: block; + margin-top: 10px; + } + .deposit-timeline-item-left::after{ + content: " "; + border-right: 1px dashed #007aff; + position: absolute;top: 25px;bottom: -8px; + left: 50%;transform: translateX(-50%); + } +} \ No newline at end of file diff --git a/src/pages/depositBeforehandDetail/index.tsx b/src/pages/depositBeforehandDetail/index.tsx new file mode 100644 index 0000000..6bdae63 --- /dev/null +++ b/src/pages/depositBeforehandDetail/index.tsx @@ -0,0 +1,37 @@ + +import AddressList from "@/components/AddressList" +import InfiniteScroll from "@/components/infiniteScroll" +import { Button, Canvas, ScrollView, Text, View } from "@tarojs/components" +import Taro, { useReady } from "@tarojs/taro" +import { useEffect, useState } from "react" +import {creditListApi} from "@/api/creditLine" +import "./index.scss" + +export default ()=>{ + + return ( + + + + ) +} + +const TimeLine = ()=>{ + return( + + + + + 申请提交 + 2022-04-24 16:10:11 + + + + + + 申请提交 + 2022-04-24 16:10:11 + + + ) +} \ No newline at end of file diff --git a/src/pages/depositList/index.config.ts b/src/pages/depositList/index.config.ts new file mode 100644 index 0000000..63423c7 --- /dev/null +++ b/src/pages/depositList/index.config.ts @@ -0,0 +1,3 @@ +export default { + navigationBarTitleText: '收支明细' +} diff --git a/src/pages/depositList/index.scss b/src/pages/depositList/index.scss new file mode 100644 index 0000000..825cef8 --- /dev/null +++ b/src/pages/depositList/index.scss @@ -0,0 +1,47 @@ +.credit-used{ + height: 100vh; + background-color: #f3f3f3; + .credit-used-list{ + background-color: white; + padding: 30px 25px; + border-bottom: 1px solid #f6f6f6; + display: flex;justify-content: space-between; + } + .credit-used-list-left{ + } + .credit-used-list-type{ + font-size: 26px; + font-weight: 400; + color: #000000; + margin-bottom: 20px; + } + .credit-used-list-price{ + font-size: 28px; + font-weight: 400; + margin-bottom: 20px; + } + .credit-used-list-right{ + display: flex;align-items: center; + text-align: right; + } + .credit-used-list-right text{ + font-size: 30px; + margin-left: 10px; + } + .credit-used-list-date{ + font-size: 24px; + font-weight: 400; + color: #ababab; + } + .credit-used-list-orderno{ + font-size: 20px; + font-weight: 400; + color: #ababab; + } + .green{ + color: #07C160; + } + .red{ + color: #FF0000; + } +} \ No newline at end of file diff --git a/src/pages/depositList/index.tsx b/src/pages/depositList/index.tsx new file mode 100644 index 0000000..22dc658 --- /dev/null +++ b/src/pages/depositList/index.tsx @@ -0,0 +1,82 @@ + +import AddressList from "@/components/AddressList" +import InfiniteScroll from "@/components/infiniteScroll" +import { Button, Canvas, ScrollView, Text, View } from "@tarojs/components" +import Taro, { useReady } from "@tarojs/taro" +import { useEffect, useState } from "react" +import {creditListApi} from "@/api/creditLine" +import "./index.scss" + +export default ()=>{ + useEffect(()=>{ + getData(); + }, []) + const {fetchData, state} = creditListApi(); + const data = Array.from({length: 10}); + const getData = async ()=>{ + fetchData(); + } + // 刷新 + const [refreshData, setRefreshData] = useState({ + refreshStatus: false, + moreStatus: false, + statusMore: 1 + }) + const handleRefresh = async ()=>{ + setRefreshData({ + ...refreshData, + refreshStatus: true + }) + + + setTimeout(()=>{ + setRefreshData({ + ...refreshData, + refreshStatus: false + }) + }, 3000) + } + const handleMoreLoad = async ()=>{ + setRefreshData({ + ...refreshData, + moreStatus: true + }) + + // setTimeout(()=>{ + // setRefreshData({ + // ...refreshData, + // moreStatus: false + // }) + // },3000) + } + + return ( + + + { + data.map((item,index)=>{ + return ( + + + 下单 + 2022-04-24 16:10:11 + + + + + -999,999.00 + 处理中 + + + + + ) + }) + } + {/* {data.length>0&&} */} + + + + ) +}