添加柱状图

src/components/AppBackground.vue

@@ -43,6 +43,12 @@ onMounted(() => {
       src="../static/app-bg4.png"
       mode="widthFix"
     />
+    <image
+      class="bg-image"
+      v-if="type === 4"
+      src="../static/app-bg5.png"
+      mode="widthFix"
+    />
     <view class="bg-overlay" v-if="type === 0"></view>
   </view>
 </template>

src/components/PointRecord.vue

@@ -46,7 +46,7 @@ onMounted(() => {
         <text>{{ data.createAt }}</text>
       </view>
       <view>
-        <text>黄心率：{{ data.yellowRate * 100 }}%</text>
+        <text>黄心率：{{ Number(data.yellowRate.toFixed(2)) * 100 }}%</text>
         <text>10环数：{{ data.tenRings }}</text>
         <text>平均：{{ data.averageRing }}</text>
       </view>

src/components/RingBarChart.vue

@@ -0,0 +1,88 @@
+<script setup>
+import { ref, computed } from "vue";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const barColor = (rate) => {
+  if (rate >= 0.4) return "#FDC540";
+  if (rate >= 0.2) return "#FED847";
+  return "#ffe88f";
+};
+
+const bars = computed(() => {
+  let data = Object.values(props.data);
+  if (!data.length) data = new Array(11).fill({ ring: 0, rate: 0 });
+  const newList = data.map((item, index) => {
+    let ring = index;
+    if (ring === 11) ring = "M";
+    if (ring === 0) ring = "X";
+    return {
+      ring: ring,
+      rate: item,
+    };
+  });
+  if (newList.length >= 12) {
+    [newList[0], newList[11]] = [newList[11], newList[0]];
+  }
+  return newList.reverse();
+});
+
+const ringText = (ring) => {
+  if (ring === 11) return "X";
+  if (ring === 0) return "M";
+  return ring;
+};
+</script>
+
+<template>
+  <view class="container">
+    <view>
+      <view
+        v-for="(b, index) in bars"
+        :key="index"
+        :style="{
+          background: barColor(b.rate),
+          height: b.rate * 100 + '%',
+        }"
+      >
+      </view>
+    </view>
+    <view>
+      <text v-for="(b, index) in bars" :key="index">
+        {{ b && b.ring !== undefined ? b.ring : "" }}
+      </text>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container > view {
+  padding: 0 10rpx;
+}
+.container > view:first-child {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-around;
+  height: 120rpx;
+}
+.container > view:first-child > view {
+  transition: all 0.3s ease;
+  width: 5vw;
+  height: 0;
+}
+.container > view:last-child {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  border-top: 1rpx solid #333;
+  font-size: 22rpx;
+  color: #333333;
+}
+.container > view:last-child > text {
+  text-align: center;
+}
+</style>

src/pages/point-book.vue

@@ -3,6 +3,7 @@ import { ref, computed, onMounted, onBeforeUnmount } from "vue";
 import { onShow, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
 import PointRecord from "@/components/PointRecord.vue";
+import RingBarChart from "@/components/RingBarChart.vue";
 import SModal from "@/components/SModal.vue";
 import Signin from "@/components/Signin.vue";
 
@@ -94,7 +95,7 @@ onShareTimeline(() => {
 </script>
 
 <template>
-  <Container :bgType="2" bgColor="#F5F5F5" :whiteBackArrow="false" title="">
+  <Container :bgType="4" bgColor="#F5F5F5" :whiteBackArrow="false" title="">
     <view class="container">
       <view class="daily-signin">
         <view>
@@ -194,6 +195,7 @@ onShareTimeline(() => {
       <view class="title">
         <image src="../static/point-book-title1.png" mode="widthFix" />
       </view>
+      <RingBarChart :data="data.ringRate" />
       <view class="title">
         <image src="../static/point-book-title2.png" mode="widthFix" />
       </view>