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

Merge branch 'dev' of http://git.online.zzfzyc.com/mp/EShop into dev

Browse Source
This commit is contained in:
li tong bao
2022-05-31 20:12:23 +08:00
parent e1f7e085d6 7d3b50bbf8
commit 83f7bdac14
114 changed files with 4961 additions and 726 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/creditLine/index.tsx
+48 -23
View File
@@ -2,25 +2,45 @@
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 { useEffect, useState } from "react"
import {creditInfoApi} from "@/api/creditLine"
import "./index.scss"
import { useSelector } from "@/reducers/hooks";
export default ()=>{
const {userInfo} = useSelector(state => state.userInfo);
const userInfo = useSelector(state => state.userInfo);
useEffect(()=>{
console.log(userInfo,"==");
// getData()
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();
console.log(state);
const progress = result.data.credit_quota_used_line / result.data.credit_quota_line * 100;
const credit_quota_used_line = convertPrice(result.data.credit_quota_used_line);
const credit_quota_line = convertPrice(result.data.credit_quota_line);
const credit_quota_available_line = convertPrice(result.data.credit_quota_available_line);
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;
}
@@ -31,11 +51,11 @@ export default ()=>{
</View>
<View className="credit-line-card">
<View className="credit-line-card-top">
<View><Progress /></View>
<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>999,999<Text>.20</Text></View>
<View className="credit-line-card-top-info-date">有效期: 2022-03-09至2022-05-13</View>
<View className="credit-line-card-top-info-price"><Text>¥</Text>{data?.credit_quota_used_line[0]}<Text>.{data.credit_quota_used_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">
@@ -44,14 +64,14 @@ export default ()=>{
<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 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>999,999<Text>.20</Text></View>
<View className="credit-line-card-bottom-item-price"><Text>¥</Text>{data.credit_quota_available_line[0]}<Text>.{data.credit_quota_available_line[1]}</Text></View>
</View>
</View>
</View>
@@ -59,9 +79,12 @@ export default ()=>{
)
}
const Progress = ()=>{
const Progress = (props)=>{
useEffect(()=>{
getCanvas();
},[props.progress])
const getCanvas = ()=>{
const percentage = 100;
const percentage = props.progress??0;
const query = Taro.createSelectorQuery();
query.select("#myCanvas").fields({ node: true, size: true }).exec((res) => {
const canvas = res[0]?.node;
@@ -116,15 +139,17 @@ const Progress = ()=>{
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>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();