258 lines
9.5 KiB
TypeScript
258 lines
9.5 KiB
TypeScript
|
|
import { Button, Canvas, Navigator, ScrollView, Text, View } from '@tarojs/components'
|
|
import Taro, { useReady } from '@tarojs/taro'
|
|
import React, { useEffect, useState } from 'react'
|
|
import AddressList from '@/components/AddressList'
|
|
import { creditInfoApi } from '@/api/creditLine'
|
|
import './index.scss'
|
|
import { useSelector } from '@/reducers/hooks'
|
|
import { formatDateTime, formatPriceDiv } from '@/common/fotmat'
|
|
import Message from '@/components/Message'
|
|
import useLogin from '@/use/useLogin'
|
|
|
|
interface ProgressType {
|
|
progress: number
|
|
style: Record<string, any>
|
|
}
|
|
const Progress = (props: ProgressType) => {
|
|
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()
|
|
})
|
|
useEffect(() => {
|
|
if (props.progress != 0) {
|
|
getCanvas()
|
|
}
|
|
}, [props.progress])
|
|
return <Canvas type="2d" id="myCanvas" />
|
|
}
|
|
const CreditLine = () => {
|
|
useLogin()
|
|
const userInfo = useSelector(state => state.userInfo)
|
|
|
|
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 convertPrice = (data) => {
|
|
const t = data.toString().split('.')
|
|
t[1] = t[1] ? t[1].padEnd(2, 0) : '00'
|
|
return t
|
|
}
|
|
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'),
|
|
})
|
|
}
|
|
|
|
useEffect(() => {
|
|
getData()
|
|
}, [])
|
|
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>
|
|
<Text className="iconfont icon-a-moreback miconfont"></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>
|
|
</Navigator>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export default CreditLine
|