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-06 16:20:03 +08:00
parent d725e5d01b
commit 0114259106
21 changed files with 401 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/creditLine/index.config.ts
+2 -1
View File
@@ -1,3 +1,4 @@
export default {
navigationBarTitleText: '授信额度'
navigationBarTitleText: '授信额度',
enableShareAppMessage: true,
}
src/pages/creditLine/index.scss
+16 -3
View File
@@ -9,13 +9,13 @@
.credit-line-tips{
width: 100%;
height: 66px;
background: #ecf5ff;
border: 2px solid #cde5ff;
background: #FFE6CE;
border: 2px solid #ffe6ce;
padding: 0 30px;
display: flex;align-items: center;
font-size: 24px;
font-weight: 400;
color: #007aff;
color: #EE7500;
}
.credit-line-tips text{
margin-right: 10px;
@@ -33,6 +33,7 @@
display: flex;align-items: flex-end;
padding: 30px 20px;
border-bottom: 1px solid #f6f6f6;
position: relative;
}
.credit-line-card-top-info{
text-align: center;
@@ -58,6 +59,18 @@
font-weight: 400;
color: #ababab;
}
.credit-line-card-top-status{
padding: 0 20px;
height: 38px;
background: #ebfaea;
font-size: 22px;
font-weight: 400;
color: #07c160;
display: flex;align-items: center;justify-content: center;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
position: absolute;right: 0;top: 30px;
}
.credit-line-card-bottom{
padding: 30px 0;
display: grid;
src/pages/creditLine/index.tsx
+92 -18
View File
@@ -6,7 +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"
import { formatDateTime, formatPriceDiv } from "@/common/fotmat"
export default ()=>{
@@ -20,7 +20,20 @@ export default ()=>{
credit_quota_line: [0,"00"],
credit_quota_available_line: [0,"00"],
progress: 0,
create_time: ""
create_time: "",
quota_status_name: "",
quota_status: "",
credit_quota_start_time: "",
credit_quota_end_time: ""
});
const [style, setStyle]= useState({
type: {},
cir: {
color: "",
background: {start: [], end: []}
},
available: {},
bottomTitle: {}
});
// 获取数据
const getData = async ()=>{
@@ -28,20 +41,79 @@ export default ()=>{
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;
const progress = (credit_quota_available_line[0] / credit_quota_line[0] * 100).toFixed(0);
switch(Number(result.data.quota_status)){
case 0://暂未开通
setStyle({
type: {background: "#e4e4ff",color: "#1818B4" },
cir: {
color: "#707070",
background: {start: ["#727272", "#CDCDCD"] as any, end: ["#CDCDCD", "#EEEEEE"] as any}
},
available: {color: "#707070", textDecoration: "line-through"},
bottomTitle: {color: "#cccccc"}
})
break;
case 1://申请中
setStyle({
type: {background: "#cde5ff",color: "#007AFF" },
cir: {
color: "#707070",
background: {start: ["#727272", "#CDCDCD"] as any, end: ["#CDCDCD", "#EEEEEE"] as any}
},
available: {color: "#707070", textDecoration: "line-through"},
bottomTitle: {color: "#cccccc"}
})
break;
case 2://生效中
setStyle({
type: {background: "#cde5ff",color: "#007AFF" },
cir: {
color: "#007aff",
background: {start: ["#047CFF", "#51A4FF"] as any, end: ["#87C0FF", "#57A8FF"] as any}
},
available: {color: "#007aff"},
bottomTitle: {color: "#007AFF"}
})
break;
case 3://已失效
setStyle({
type: {background: "#f6f6f6",color: "#ABABAB" },
cir: {
color: "#707070",
background: {start: ["#727272", "#CDCDCD"] as any, end: ["#CDCDCD", "#EEEEEE"] as any}
},
available: {color: "#707070", textDecoration: "line-through"},
bottomTitle: {color: "#cccccc"}
})
break;
case 4://失效待还款
setStyle({
type: {background: "#FFE6CE",color: "#EE7500" },
cir: {
color: "#707070",
background: {start: ["#EF7907", "#FAC897"] as any, end: ["#FAC897", "#FFE6CE"] as any}
},
available: {color: "#EE7500"},
bottomTitle: {color: "#007AFF"}
})
break;
}
setData({
...result.data,
progress,
credit_quota_used_line,
credit_quota_line,
credit_quota_available_line
credit_quota_available_line,
credit_quota_start_time: formatDateTime(result.data?.credit_quota_start_time, "YYYY-MM-DD"),
credit_quota_end_time: formatDateTime(result.data?.credit_quota_end_time, "YYYY-MM-DD"),
})
}
const convertPrice = (data)=>{
var t = data.toString().split(".");
t[0] = t[0].toLocaleString();
t[1] = t[1]?t[1].padStart(2,0):"00";
t[1] = t[1]?t[1].padEnd(2,0):"00";
return t;
}
@@ -53,27 +125,28 @@ export default ()=>{
</View>
<View className="credit-line-card">
<View className="credit-line-card-top">
<View><Progress progress={data.progress} /></View>
<View><Progress progress={data.progress} style={style} /></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_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 className="credit-line-card-top-info-price" style={style.available}><Text>¥</Text>{Number(data.credit_quota_available_line[0])?.toLocaleString()}<Text>.{data.credit_quota_available_line[1]}</Text></View>
<View className="credit-line-card-top-info-date">有效期: {data?.credit_quota_start_time} 至{data?.credit_quota_end_time}</View>
</View>
<View className="credit-line-card-top-status" style={style.type}>{data.quota_status_name}</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>
<Text style={style.bottomTitle} className="iconfont icon-yucunkuan"></Text>
<View>总额度</View>
</View>
<View className="credit-line-card-bottom-item-price"><Text>¥</Text>{data.credit_quota_line[0]}<Text>.{data.credit_quota_line[1]}</Text></View>
<View className="credit-line-card-bottom-item-price"><Text>¥</Text>{Number(data.credit_quota_line[0])?.toLocaleString()}<Text>.{data.credit_quota_line[1]}</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>
<Text style={style.bottomTitle} className="iconfont icon-tick-pressed"></Text>
<View>已用额度</View>
</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 className="credit-line-card-bottom-item-price"><Text>¥</Text>{Number(data?.credit_quota_used_line[0])?.toLocaleString()}<Text>.{data.credit_quota_used_line[1]}</Text></View>
</View>
</View>
</View>
@@ -86,6 +159,7 @@ const Progress = (props)=>{
getCanvas();
},[props.progress])
const getCanvas = ()=>{
// const percentage = props.progress??0;
const percentage = props.progress??0;
const query = Taro.createSelectorQuery();
query.select("#myCanvas").fields({ node: true, size: true }).exec((res) => {
@@ -134,7 +208,7 @@ const Progress = (props)=>{
ctx.beginPath();
ctx.restore();
ctx.fillStyle = "#007aff";
ctx.fillStyle = props.style?.cir?.color// "#007aff";
ctx.font="42px Cambria, Cambria-Bold";
ctx.textAlign="center";
ctx.textBaseline="middle";
@@ -146,8 +220,8 @@ const Progress = (props)=>{
ctx.lineWidth = 25;
ctx.lineCap = "round";
const gad = ctx.createLinearGradient(100,0,0,100);
gad.addColorStop(0, "#047CFF");
gad.addColorStop(1, "#51A4FF");
gad.addColorStop(0, props.style?.cir?.background?.start[0]);
gad.addColorStop(1, props.style?.cir?.background?.start[1]);
ctx.strokeStyle = gad;
ctx.arc(0,0,104,-Math.PI*0.5,2*Math.PI/100*((percentage<50?percentage:50)-25), false);
ctx.stroke();
@@ -156,8 +230,8 @@ const Progress = (props)=>{
if(percentage>50){
ctx.beginPath();
const gad2 = ctx.createLinearGradient(0,-100,0,0);
gad2.addColorStop(0, "#87C0FF");
gad2.addColorStop(1, "#57A8FF");
gad2.addColorStop(0, props.style?.cir?.background?.end[0]);
gad2.addColorStop(1, props.style?.cir?.background?.start[1]);
ctx.strokeStyle = gad2;
ctx.arc(0,0,104,Math.PI*0.5,2*Math.PI/100*(percentage-25), false);
ctx.stroke();