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 (
可用额度
¥{Number(data.credit_quota_available_line[0])?.toLocaleString()}.{data.credit_quota_available_line[1]}
有效期: {data?.credit_quota_start_time} 至{data?.credit_quota_end_time}
{data.quota_status_name}
总额度
¥{Number(data.credit_quota_line[0])?.toLocaleString()}.{data.credit_quota_line[1]}
已用额度
¥{Number(data?.credit_quota_used_line[0])?.toLocaleString()}.{data.credit_quota_used_line[1]}
)
}
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
}