250 lines
9.1 KiB
TypeScript
250 lines
9.1 KiB
TypeScript
|
|
import AddressList from "@/components/AddressList"
|
|
import { Button, Canvas, Navigator, ScrollView, Text, View } from "@tarojs/components"
|
|
import Taro, { useReady } from "@tarojs/taro"
|
|
import { useEffect, useState } from "react"
|
|
import {creditInfoApi} from "@/api/creditLine"
|
|
import "./index.scss"
|
|
import { useSelector } from "@/reducers/hooks";
|
|
import { formatDateTime, formatPriceDiv } from "@/common/fotmat"
|
|
import Message from "@/components/Message"
|
|
|
|
export default ()=>{
|
|
|
|
const userInfo = useSelector(state => state.userInfo);
|
|
useEffect(()=>{
|
|
getData()
|
|
}, [])
|
|
const {fetchData, state} = creditInfoApi();
|
|
const [data, setData] = useState({
|
|
credit_quota_used_line: [0,"00"],
|
|
credit_quota_line: [0,"00"],
|
|
credit_quota_available_line: [0,"00"],
|
|
progress: 0,
|
|
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 ()=>{
|
|
const result = await fetchData();
|
|
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_available_line[0]==0&&credit_quota_line[0]==0?100:((credit_quota_available_line[0]??0) / (credit_quota_line[0]??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_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[1] = t[1]?t[1].padEnd(2,0):"00";
|
|
return t;
|
|
}
|
|
|
|
|
|
return (
|
|
<View className="credit-line">
|
|
<Message text="暂不支持线上申请授权，请联系平台客服。"/>
|
|
<View className="credit-line-card">
|
|
<View className="credit-line-card-top">
|
|
<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" 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 style={style.bottomTitle} className="iconfont icon-yucunkuan"></Text>
|
|
<View>总额度</View>
|
|
</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>
|
|
<Navigator hoverClass="none" url="/pages/creditUsed/index" className="credit-line-card-bottom-item">
|
|
<View className="credit-line-card-bottom-item-title">
|
|
<Text style={style.bottomTitle} className="iconfont icon-tick-pressed"></Text>
|
|
<View>已用额度</View>
|
|
</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>
|
|
</Navigator>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const Progress = (props)=>{
|
|
useEffect(()=>{
|
|
if(props.progress!=0){
|
|
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) => {
|
|
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 = props.style?.cir?.color// "#007aff";
|
|
ctx.font="42px Cambria, Cambria-Bold";
|
|
ctx.textAlign="center";
|
|
ctx.textBaseline="middle";
|
|
ctx.fillText(percentage+"%", 0,0);
|
|
|
|
// 蓝色的圆
|
|
if(percentage>0){
|
|
ctx.beginPath();
|
|
ctx.lineWidth = 25;
|
|
ctx.lineCap = "round";
|
|
const gad = ctx.createLinearGradient(100,0,0,100);
|
|
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();
|
|
}
|
|
|
|
if(percentage>50){
|
|
ctx.beginPath();
|
|
const gad2 = ctx.createLinearGradient(0,-100,0,0);
|
|
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.4,2*Math.PI/100*(percentage-25), false);
|
|
ctx.stroke();
|
|
}
|
|
}else{
|
|
getCanvas();
|
|
}
|
|
});
|
|
}
|
|
useReady(()=>{
|
|
getCanvas();
|
|
})
|
|
return <Canvas type="2d" id="myCanvas"/>
|
|
} |