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

--授信页面完成

Browse Source
This commit is contained in:
li tong bao
2022-05-31 16:14:16 +08:00
parent 14216d3b0a
commit e1f7e085d6
13 changed files with 447 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/creditLine/index.config.ts
+3
View File
@@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '授信额度'
}
src/pages/creditLine/index.scss
+92
View File
@@ -0,0 +1,92 @@
.credit-line{
height: 100vh;
background-color: #f3f3f3;
canvas{
width: 238px;
height: 238px;
}
.credit-line-tips{
width: 100%;
height: 66px;
background: #ecf5ff;
border: 2px solid #cde5ff;
padding: 0 30px;
display: flex;align-items: center;
font-size: 24px;
font-weight: 400;
color: #007aff;
}
.credit-line-tips text{
margin-right: 10px;
font-size: 30px;
}
.credit-line-card{
width: 702px;
background: #ffffff;
border-radius: 20px;
margin: 20px auto 0;
padding: 0 30px;
box-sizing: border-box;
}
.credit-line-card-top{
display: flex;align-items: flex-end;
padding: 30px 20px;
border-bottom: 1px solid #f6f6f6;
}
.credit-line-card-top-info{
text-align: center;
flex: 1;
}
.credit-line-card-top-info-title{
font-size: 24px;
font-weight: 700;
color: #000000;
margin-bottom: 16px;
}
.credit-line-card-top-info-price{
font-size: 44px;
font-weight: 700;
color: #007aff;
margin-bottom: 48px;
}
.credit-line-card-top-info-price text{
font-size: 20px;
}
.credit-line-card-top-info-date{
font-size: 22px;
font-weight: 400;
color: #ababab;
}
.credit-line-card-bottom{
padding: 30px 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
text-align: center;
}
.credit-line-card-bottom-item-title{
font-size: 24px;
font-weight: 700;
color: #000000;
display: flex;
align-items: center;justify-content: center;
margin-bottom: 15px;
line-height: 38px;
}
.credit-line-card-bottom-item-title text{
font-size: 40px;
margin-right: 10px;
color: #007AFF;
}
.credit-line-card-bottom-item:nth-of-type(2) .credit-line-card-bottom-item-title text{
font-size: 28px;
}
.credit-line-card-bottom-item-price{
font-size: 40px;
font-weight: 400;
color: #ababab;
}
.credit-line-card-bottom-item-price text{
font-size: 20px;
}
}
src/pages/creditLine/index.tsx
+147
View File
@@ -0,0 +1,147 @@
import AddressList from "@/components/AddressList"
import { Button, Canvas, ScrollView, Text, View } from "@tarojs/components"
import Taro, { useReady } from "@tarojs/taro"
import { useEffect } from "react"
import {creditInfoApi} from "@/api/creditLine"
import "./index.scss"
import { useSelector } from "@/reducers/hooks";
export default ()=>{
const {userInfo} = useSelector(state => state.userInfo);
useEffect(()=>{
console.log(userInfo,"==");
// getData()
}, [])
const {fetchData, state} = creditInfoApi();
// 获取数据
const getData = async ()=>{
const result = await fetchData();
console.log(state);
}
return (
<View className="credit-line">
<View className="credit-line-tips">
<Text className="iconfont icon-zhuyi"></Text> 暂不支持线上申请授权，请联系平台客服。
</View>
<View className="credit-line-card">
<View className="credit-line-card-top">
<View><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>999,999<Text>.20</Text></View>
<View className="credit-line-card-top-info-date">有效期: 2022-03-09至2022-05-13</View>
</View>
</View>
<View className="credit-line-card-bottom">
<View className="credit-line-card-bottom-item">
<View className="credit-line-card-bottom-item-title">
<Text className="iconfont icon-yucunkuan"></Text>
<View>总额度</View>
</View>
<View className="credit-line-card-bottom-item-price"><Text>¥</Text>999,999<Text>.20</Text></View>
</View>
<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 className="credit-line-card-bottom-item-price"><Text>¥</Text>999,999<Text>.20</Text></View>
</View>
</View>
</View>
</View>
)
}
const Progress = ()=>{
const getCanvas = ()=>{
const percentage = 100;
const query = Taro.createSelectorQuery();
query.select("#myCanvas").fields({ node: true, size: true }).exec((res) => {
const canvas = res[0]?.node;
if(canvas){
const ctx = canvas.getContext('2d');
const { windowHeight, windowWidth } = Taro.getSystemInfoSync();
const dpr = 750 / windowWidth;
canvas.width = res[0].width * dpr;
canvas.height = res[0].height * dpr;
const r = canvas.width / 2;
ctx.translate(r,r);
// 白色大圆
ctx.beginPath();
ctx.fillStyle = "white";
ctx.shadowBlur = 20;
ctx.shadowColor = "#cde5ff";
ctx.arc(0,0,100,0,2*Math.PI, false);
ctx.fill();
// 刻度
const my_minute = Math.PI*2/60;
const my_second = Math.PI*2/60;
ctx.strokeStyle="#F59F5D";
ctx.lineWidth=2;
ctx.beginPath();
for(let i=0;i<15;i++){
ctx.save();
ctx.rotate(i*4*my_minute);
ctx.moveTo(r-45,0);
ctx.lineTo(r-40,0);
ctx.stroke();
ctx.restore();
}
// 白色小圆
ctx.beginPath();
ctx.fillStyle = "white";
ctx.shadowBlur = 20;
ctx.shadowColor = "rgba(204,204,204,0.50)";
ctx.arc(0,0,74,0,2*Math.PI, false);
ctx.fill();
// 文字
ctx.beginPath();
ctx.restore();
ctx.fillStyle = "#007aff";
ctx.font="42px Cambria, Cambria-Bold";
ctx.textAlign="center";
ctx.textBaseline="middle";
ctx.fillText(percentage+"%", 0,0);
// 蓝色的圆
ctx.beginPath();
ctx.lineWidth = 25;
ctx.lineCap = "round";
const gad = ctx.createLinearGradient(100,0,0,100);
gad.addColorStop(0, "#047CFF");
gad.addColorStop(1, "#51A4FF");
ctx.strokeStyle = gad;
ctx.arc(0,0,104,-Math.PI*0.5,2*Math.PI/100*((percentage<50?percentage:50)-25), false);
ctx.stroke();
if(percentage>50){
ctx.beginPath();
const gad2 = ctx.createLinearGradient(0,-100,0,0);
gad2.addColorStop(0, "#87C0FF");
gad2.addColorStop(1, "#57A8FF");
ctx.strokeStyle = gad2;
ctx.arc(0,0,104,Math.PI*0.5,2*Math.PI/100*(percentage-25), false);
ctx.stroke();
}
}else{
getCanvas();
}
});
}
useReady(()=>{
getCanvas();
})
return <Canvas type="2d" id="myCanvas"/>
}
src/pages/creditUsed/index.config.ts
+3
View File
@@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '已用额度'
}
src/pages/creditUsed/index.scss
+41
View File
@@ -0,0 +1,41 @@
.credit-used{
height: 100vh;
background-color: #f3f3f3;
.credit-used-list{
background-color: white;
padding: 30px 25px;
border-bottom: 1px solid #f6f6f6;
}
.credit-used-list-top{
display: flex;justify-content: space-between;
margin-bottom: 20px;
}
.credit-used-list-type{
font-size: 26px;
font-weight: 400;
color: #000000;
}
.credit-used-list-price{
font-size: 28px;
font-weight: 400;
}
.credit-used-list-bottom{
display: flex;justify-content: space-between;
}
.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;
}
}
src/pages/creditUsed/index.tsx
+76
View File
@@ -0,0 +1,76 @@
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
})
const handleRefresh = async ()=>{
setRefreshData({
...refreshData,
refreshStatus: true
})
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}>
{
data.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>
<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>
</View>
)
})
}
{/* {data.length>0&&<View className="credit-used-list"></View>} */}
<View className="credit-used-list"></View>
</InfiniteScroll>
</View>
)
}