TestEShopDist/src/pages/creditLine/index.tsx

import AddressList from "@/components/AddressList"
import { Button, Canvas, 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 { formatPriceDiv } from "@/common/fotmat"

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: ""
  });
  // 获取数据
  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_line[0] / credit_quota_available_line[0] * 100;
    
    setData({
      ...result.data,
      progress,
      credit_quota_used_line,
      credit_quota_line,
      credit_quota_available_line
    })
  }
  const convertPrice  = (data)=>{
    var t = data.toString().split(".");
    t[0] = t[0].toLocaleString();
    t[1] = t[1]?t[1].padStart(2,0):"00";
    return t;
  }
  

  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 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_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>
        <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>{data.credit_quota_line[0]}<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>
              <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>
        </View>
      </View>
    </View>
  )
}

const Progress = (props)=>{
  useEffect(()=>{
    getCanvas();
  },[props.progress])
  const getCanvas = ()=>{
    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 = "#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, "#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"/>
}