xuan/TestRestructureWechatLymarketDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

--预存款部分页面完成

Browse Source
This commit is contained in:
li tong bao 2022-06-01 20:33:47 +08:00
parent 83f7bdac14
commit d725e5d01b
14 changed files with 667 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/app.config.ts
View File

@ -128,6 +128,24 @@ export default {
pages: [
"index"
]
},
{
root: "pages/depositBeforehandDetail",
pages: [
"index"
]
},
{
root: "pages/depositBeforehand",
pages: [
"index"
]
},
{
root: "pages/depositList",
pages: [
"index"
]
}
]
}

21
src/components/InfiniteScrollPaging/index.module.scss Normal file
View File

@ -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%;
}
}

124
src/components/InfiniteScrollPaging/index.tsx Normal file
View File

@ -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<t.total){
setRefreshData({
...tRefreshData,
page: ++tRefreshData.page,
size: ++tRefreshData.page*tRefreshData.size,
})
getData({
moreStatus: true
},{
moreStatus: true
});
}
}
//数据加载状态
const statusMore = useMemo(() => {
return dataLoadingStatus({list:data.list, total: data.total, status: refreshData.loading})
}, [refreshData.loading])
return (
<InfiniteScroll refresherEnabled={true} refresherTriggered={refreshData.refreshStatus} moreStatus={refreshData.moreStatus}
selfOnRefresherRefresh={handleRefresh} selfonScrollToLower={handleMoreLoad} statusMore={statusMore}>
{props.children}
</InfiniteScroll>
)
}

18
src/pages/creditLine/index.tsx
View File

@ -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 ()=>{
<View className="credit-line-card-top">
<View><Progress progress={data.progress} /></View>
<View className="credit-line-card-top-info">
<View className="credit-line-card-top-info-title">已用额度</View>
<View className="credit-line-card-top-info-price"><Text>¥</Text>{data?.credit_quota_used_line[0]}<Text>.{data.credit_quota_used_line[1]}</Text></View>
<View className="credit-line-card-top-info-title">可用额度</View>
<View className="credit-line-card-top-info-price"><Text>¥</Text>{data.credit_quota_available_line[0]}<Text>.{data.credit_quota_available_line[1]}</Text></View>
<View className="credit-line-card-top-info-date">有效期: {data.create_time} 2022-03-09至2022-05-13</View>
</View>
</View>
@ -69,9 +71,9 @@ export default ()=>{
<View className="credit-line-card-bottom-item">
<View className="credit-line-card-bottom-item-title">
<Text className="iconfont icon-tick-pressed"></Text>
<View>可用额度</View>
<View>已用额度</View>
</View>
<View className="credit-line-card-bottom-item-price"><Text>¥</Text>{data.credit_quota_available_line[0]}<Text>.{data.credit_quota_available_line[1]}</Text></View>
<View className="credit-line-card-bottom-item-price"><Text>¥</Text>{data?.credit_quota_used_line[0]}<Text>.{data.credit_quota_used_line[1]}</Text></View>
</View>
</View>
</View>

190
src/pages/creditUsed/index.tsx
View File

@ -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 (
<View className="credit-used">
<InfiniteScroll refresherEnabled={true} refresherTriggered={refreshData.refreshStatus} moreStatus={refreshData.moreStatus} selfOnRefresherRefresh={handleRefresh} selfonScrollToLower={handleMoreLoad}>
<InfiniteScrollPaging fetchData={fetchData} change={handleChange}>
{
data.map((item,index)=>{
(data as any)?.list?.map((item,index)=>{
return (
<View key={index} className="credit-used-list">
<View className="credit-used-list-top">
<View className="credit-used-list-type">下单</View>
<View className={`credit-used-list-price ${index%2==0?'green':'red'}`}>-999,999.00</View>
<View className={`credit-used-list-price ${item.amount>0?'green':item.amount<0?'red':''}`}>{item.amount.toLocaleString()}</View>
</View>
<View className="credit-used-list-bottom">
<View className="credit-used-list-date">2022-04-24 16:10:11</View>
<View className="credit-used-list-orderno">订单号：LY2278204399678</View>
<View className="credit-used-list-date">{formatDateTime(item.order_pay_time)}</View>
<View className="credit-used-list-orderno">订单号：{item.order_no}</View>
</View>
</View>
)
@ -70,7 +42,129 @@ export default ()=>{
}
{/* {data.length>0&&<View className="credit-used-list"></View>} */}
<View className="credit-used-list"></View>
</InfiniteScroll>
</InfiniteScrollPaging>
</View>
)
}
// 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<t.total){
// setRefreshData({
// ...tRefreshData,
// page: ++tRefreshData.page,
// size: ++tRefreshData.page*tRefreshData.size,
// })
// getData({
// moreStatus: true
// },{
// moreStatus: true
// });
// }
// }
// //数据加载状态
// const statusMore = useMemo(() => {
// return dataLoadingStatus({list:data.list, total: data.total, status: refreshData.moreStatus})
// }, [data])
// return (
// <View className="credit-used">
// <InfiniteScroll refresherEnabled={true} refresherTriggered={refreshData.refreshStatus} moreStatus={refreshData.moreStatus}
// selfOnRefresherRefresh={handleRefresh} selfonScrollToLower={handleMoreLoad} statusMore={statusMore}>
// {
// (data as any)?.list?.map((item,index)=>{
// return (
// <View key={index} className="credit-used-list">
// <View className="credit-used-list-top">
// <View className="credit-used-list-type">下单</View>
// <View className={`credit-used-list-price ${item.amount>0?'green':item.amount<0?'red':''}`}>{item.amount.toLocaleString()}</View>
// </View>
// <View className="credit-used-list-bottom">
// <View className="credit-used-list-date">{formatDateTime(item.order_pay_time)}</View>
// <View className="credit-used-list-orderno">订单号：{item.order_no}</View>
// </View>
// </View>
// )
// })
// }
// {/* {data.length>0&&<View className="credit-used-list"></View>} */}
// <View className="credit-used-list"></View>
// </InfiniteScroll>
// </View>
// )
// }

3
src/pages/depositBeforehand/index.config.ts Normal file
View File

@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '预存款'
}

87
src/pages/depositBeforehand/index.scss Normal file
View File

@ -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;
}
}

49
src/pages/depositBeforehand/index.tsx Normal file
View File

@ -0,0 +1,49 @@
import { Button, Canvas, Navigator, ScrollView, Text, View } from "@tarojs/components"
import "./index.scss"
export default ()=>{
return (
<View className="deposit-beforehand">
<View className="deposit-beforehand-card">
<View className="deposit-beforehand-balance">
<View className="deposit-beforehand-balance-title">余额 (元)</View>
<Text className="deposit-beforehand-balance-price">999,999.20</Text>
<View className="deposit-beforehand-balance-button">转出</View>
</View>
</View>
<View className="deposit-beforehand-card">
<View className="deposit-beforehand-info">
<View className="deposit-beforehand-info-title">
<View className="deposit-beforehand-info-title-left"><Text></Text> 预存款充值</View>
<View className="deposit-beforehand-info-title-copy">复制</View>
</View>
<View className="deposit-beforehand-info-content">
<View className="deposit-beforehand-info-list">
<View className="deposit-beforehand-info-list-left">开户名称</View>
<View className="deposit-beforehand-info-list-right">佛山市浩川盛世科技有限公司</View>
</View>
<View className="deposit-beforehand-info-list">
<View className="deposit-beforehand-info-list-left">开户银行</View>
<View className="deposit-beforehand-info-list-right">招商银行汾江支行</View>
</View>
<View className="deposit-beforehand-info-list">
<View className="deposit-beforehand-info-list-left">专属汇款账号</View>
<View className="deposit-beforehand-info-list-right">62062342120001221231212</View>
</View>
</View>
</View>
</View>
<View className="deposit-beforehand-card">
<View className="deposit-beforehand-particulars">
<View className="deposit-beforehand-particulars-left">收支明细</View>
<Navigator hoverClass="none" url="/pages/depositList/index" className="deposit-beforehand-particulars-right">
全部 <Text className="iconfont icon-a-moreback"></Text>
</Navigator>
</View>
</View>
</View>
)
}

3
src/pages/depositBeforehandDetail/index.config.ts Normal file
View File

@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '交易详情'
}

41
src/pages/depositBeforehandDetail/index.scss Normal file
View File

@ -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%);
}
}

37
src/pages/depositBeforehandDetail/index.tsx Normal file
View File

@ -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 (
<View className="deposit-detail">
<TimeLine/>
</View>
)
}
const TimeLine = ()=>{
return(
<View className="deposit-timeline">
<View className="deposit-timeline-item">
<View className="deposit-timeline-item-left"></View>
<View className="deposit-timeline-item-right">
<View className="deposit-timeline-item-title">申请提交</View>
<View className="deposit-timeline-item-date">2022-04-24 16:10:11</View>
</View>
</View>
<View className="deposit-timeline-item">
<View className="deposit-timeline-item-left"></View>
<View className="deposit-timeline-item-right">
<View className="deposit-timeline-item-title">申请提交</View>
<View className="deposit-timeline-item-date">2022-04-24 16:10:11</View>
</View>
</View>
</View>)
}

3
src/pages/depositList/index.config.ts Normal file
View File

@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '收支明细'
}

47
src/pages/depositList/index.scss Normal file
View File

@ -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;
}
}

82
src/pages/depositList/index.tsx Normal file
View File

@ -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 (
<View className="credit-used">
<InfiniteScroll refresherEnabled={true} refresherTriggered={refreshData.refreshStatus} moreStatus={refreshData.moreStatus}
selfOnRefresherRefresh={handleRefresh} selfonScrollToLower={handleMoreLoad} statusMore={refreshData.statusMore as any}>
{
data.map((item,index)=>{
return (
<View key={index} className="credit-used-list">
<View className="credit-used-list-left">
<View className="credit-used-list-type">下单</View>
<View className="credit-used-list-date">2022-04-24 16:10:11</View>
</View>
<View className="credit-used-list-right">
<View>
<View className={`credit-used-list-price ${index%2==0?'green':'red'}`}>-999,999.00</View>
<View className="credit-used-list-orderno">处理中</View>
</View>
<Text className="iconfont icon-a-moreback"></Text>
</View>
</View>
)
})
}
{/* {data.length>0&&<View className="credit-used-list"></View>} */}
<View className="credit-used-list"></View>
</InfiniteScroll>
</View>
)
}