1

李

2026-05-26 0dbc7465447164fef24327b5d494870832d798dd

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<template>
  <div class="credit-score-page">
    <assets-head :title="$t('信用分')" />
 
    <div class="score-wrap">
      <van-circle
        v-model:current-rate="currentRate"
        :rate="score"
        :speed="50"
        :color="circleColor"
        layer-color="#f0f0f0"
        :stroke-width="50"
        size="25rem"
      >
        <div class="score-inner">
          <div class="score-label">{{ $t('信用分') }}</div>
          <div class="score-value">{{ score }}</div>
          <div class="score-grade">{{ grade }}</div>
          <div class="score-time-label">{{ $t('评估时间') }}</div>
          <div class="score-time">{{ assessTime }}</div>
        </div>
      </van-circle>
    </div>
  </div>
</template>
 
<script setup>
import { ref, onMounted } from 'vue'
import dayjs from 'dayjs'
import assetsHead from '@/components/Transform/assets-head/index.vue'
import { _info } from '@/service/user.api'
 
const score = ref(0)
const grade = ref('--')
const assessTime = ref(dayjs().format('YYYY-MM-DD HH:mm'))
const currentRate = ref(0)
const circleColor = '#1989fa'
 
function scoreToGrade(s) {
  if (s >= 90) return 'A+'
  if (s >= 80) return 'A'
  if (s >= 70) return 'B'
  if (s >= 60) return 'C'
  return 'D'
}
 
onMounted(() => {
  _info()
    .then((data) => {
      const val = data?.credit_score != null ? Number(data.credit_score) : 0
      score.value = Math.min(100, Math.max(0, val))
      grade.value = scoreToGrade(score.value)
      assessTime.value = dayjs().format('YYYY-MM-DD HH:mm')
      currentRate.value = score.value
    })
    .catch(() => {
      currentRate.value = score.value
    })
})
</script>
 
<style lang="scss" scoped>
.credit-score-page {
  min-height: 100vh;
  background: #fff;
}
 
.score-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4rem 2rem;
}
 
.score-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  gap: 0.6rem;
}
 
.score-label {
  font-size: 1.4rem;
  color: #333;
}
 
.score-value {
  font-size: 5rem;
  font-weight: 700;
  color: #1989fa;
  line-height: 1.2;
}
 
.score-grade {
  font-size: 1.6rem;
  color: #333;
}
 
.score-time-label {
  font-size: 1.3rem;
  color: #666;
  margin-top: 0.4rem;
}
 
.score-time {
  font-size: 1.4rem;
  color: #333;
  font-weight: 500;
}
</style>