diff --git a/src/components/Header.vue b/src/components/Header.vue
index 470b173..4f941bd 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -59,10 +59,15 @@ const loading = ref(false);
const showLoader = ref(false);
const pointBook = ref(null);
const showProgress = ref(false);
+const heat = ref(0);
const updateLoading = (value) => {
loading.value = value;
};
+const updateHot = (value) => {
+ heat.value = value;
+};
+
onMounted(() => {
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
@@ -75,13 +80,15 @@ onMounted(() => {
) {
showLoader.value = true;
}
- uni.$on("update-header-loading", updateLoading);
if (currentPage.route === "pages/team-battle") {
showProgress.value = true;
}
+ uni.$on("update-header-loading", updateLoading);
+ uni.$on("update-hot", updateHot);
});
onBeforeUnmount(() => {
uni.$off("update-header-loading", updateLoading);
+ uni.$off("update-hot", updateHot);
});
@@ -110,6 +117,11 @@ onBeforeUnmount(() => {
borderColor="#333"
/>
{{ user.nickName }}
+
@@ -248,12 +260,15 @@ onBeforeUnmount(() => {
align-items: center;
justify-content: flex-start;
}
-.user-header > image {
+.user-header > image:first-child {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2rpx solid #333;
}
+.user-header > image:last-child {
+ width: 36rpx;
+}
.user-header > text:nth-child(2) {
font-weight: 500;
font-size: 30rpx;
diff --git a/src/components/RingBarChart.vue b/src/components/RingBarChart.vue
index ab09b71..deb9bf3 100644
--- a/src/components/RingBarChart.vue
+++ b/src/components/RingBarChart.vue
@@ -42,14 +42,15 @@ const ringText = (ring) => {
-
+
+ {{ Number(b.rate.toFixed(1)) }}%
+
+
@@ -71,6 +72,13 @@ const ringText = (ring) => {
min-height: 50rpx;
}
.container > view:first-child > view {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ font-size: 18rpx;
+ color: #333;
+}
+.container > view:first-child > view > view {
transition: all 0.3s ease;
width: 5vw;
height: 0;
diff --git a/src/pages/point-book.vue b/src/pages/point-book.vue
index 84d663d..64fc1ac 100644
--- a/src/pages/point-book.vue
+++ b/src/pages/point-book.vue
@@ -42,47 +42,37 @@ const toListPage = () => {
});
};
-// 热力图数据
-const heatMapData = ref([
- { x: 150, y: 150, ring: 10, count: 5 },
- { x: 140, y: 160, ring: 9, count: 5 },
- { x: 160, y: 140, ring: 8, count: 3 },
- { x: 130, y: 170, ring: 7, count: 2 },
- { x: 170, y: 130, ring: 6, count: 1 },
- { x: 120, y: 180, ring: 5, count: 5 },
- { x: 180, y: 120, ring: 8, count: 4 },
- { x: 110, y: 190, ring: 4, count: 3 },
- { x: 190, y: 110, ring: 9, count: 2 },
- { x: 145, y: 145, ring: 10, count: 1 },
- { x: 155, y: 155, ring: 9, count: 5 },
- { x: 125, y: 165, ring: 6, count: 4 },
- { x: 175, y: 135, ring: 8, count: 3 },
- { x: 135, y: 175, ring: 7, count: 2 },
- { x: 165, y: 125, ring: 8, count: 1 },
-]);
-
// 绘制热力图
-const drawHeatMap = (width, height) => {
+const drawHeatMap = (width, height, arrows) => {
try {
const ctx = uni.createCanvasContext("heatMapCanvas");
- // ctx.setFillStyle("rgba(255, 255, 255, 0.4)");
- // ctx.fillRect(0, 0, width, height);
-
+ let minCount = 0;
+ let maxCount = 0;
+ // 计算最大和最小频次
+ arrows.forEach((point) => {
+ if (point.count > maxCount) {
+ maxCount = point.count;
+ }
+ if (point.count < minCount) {
+ minCount = point.count;
+ }
+ });
// 绘制热力点
- heatMapData.value.forEach((point) => {
+ arrows.forEach((point) => {
+ if (point.x === 0 && point.y === 0) return;
// 数量越多,半径越小(反比关系)
- const radius = Math.max(8, 30 - point.count * 4);
+ const radius = 20;
// 根据频次设置同一种颜色的5个深浅度
let color;
- if (point.count >= 5) {
+ if (point.count >= maxCount * 0.5) {
color = "rgba(255, 232, 143, 0.7)"; // 最深 - 频次5次及以上
- } else if (point.count >= 4) {
+ } else if (point.count >= maxCount * 0.4) {
color = "rgba(255, 232, 143, 0.5)"; // 较深 - 频次4次
- } else if (point.count >= 3) {
+ } else if (point.count >= maxCount * 0.3) {
color = "rgba(255, 232, 143, 0.3)"; // 中等 - 频次3次
- } else if (point.count >= 2) {
+ } else if (point.count >= maxCount * 0.2) {
color = "rgba(255, 232, 143, 0.2)"; // 较浅 - 频次2次
} else {
color = "rgba(255, 232, 143, 0.1)"; // 最浅 - 频次1次
@@ -91,14 +81,8 @@ const drawHeatMap = (width, height) => {
// 绘制圆形热力点
ctx.setFillStyle(color);
ctx.beginPath();
- ctx.arc(point.x, point.y, radius, 0, 2 * Math.PI);
+ ctx.arc(point.x * width, point.y * height, radius, 0, 2 * Math.PI);
ctx.fill();
-
- // 绘制环数标签
- // ctx.setFillStyle("#fff");
- // ctx.setFontSize(14);
- // ctx.setTextAlign("center");
- // ctx.fillText(point.ring.toString(), point.x, point.y + 5);
});
ctx.draw();
@@ -112,10 +96,16 @@ onShow(async () => {
list.value = result.slice(0, 3);
const result2 = await getPointBookStatisticsAPI();
data.value = result2;
+ let hot = 0;
+ if (result2.checkInCount > -3 && result2.checkInCount < 3) hot = 1;
+ else if (result2.checkInCount >= 3) hot = 2;
+ else if (result2.checkInCount >= 5) hot = 3;
+ else if (result2.checkInCount === 7) hot = 4;
+ uni.$emit("update-hot", hot);
const rect = await getElementRect(".heat-map");
// 延迟绘制热力图确保Canvas准备就绪
setTimeout(() => {
- drawHeatMap(rect.width, rect.height);
+ drawHeatMap(rect.width, rect.height, result2.weekArrows);
}, 500);
});
@@ -279,6 +269,11 @@ onShareTimeline(() => {
/>
+
@@ -316,7 +311,7 @@ onShareTimeline(() => {
font-size: 22rpx;
display: flex;
flex-wrap: wrap;
- padding: 25rpx;
+ padding: 25rpx 0;
margin-bottom: 10rpx;
}
.statistics > view {
@@ -417,4 +412,17 @@ onShareTimeline(() => {
height: 100%;
z-index: 2;
}
+.reward {
+ width: 100%;
+ display: flex;
+ justify-content: flex-end;
+ margin-top: -100rpx;
+}
+.reward > button {
+ width: 100rpx;
+}
+.reward > button > image {
+ width: 100%;
+ height: 100%;
+}
diff --git a/src/static/hot1.png b/src/static/hot1.png
new file mode 100644
index 0000000..dc04867
Binary files /dev/null and b/src/static/hot1.png differ
diff --git a/src/static/hot2.png b/src/static/hot2.png
new file mode 100644
index 0000000..e3f696a
Binary files /dev/null and b/src/static/hot2.png differ
diff --git a/src/static/hot3.png b/src/static/hot3.png
new file mode 100644
index 0000000..c69861e
Binary files /dev/null and b/src/static/hot3.png differ
diff --git a/src/static/hot4.png b/src/static/hot4.png
new file mode 100644
index 0000000..ff9bb38
Binary files /dev/null and b/src/static/hot4.png differ
diff --git a/src/static/reward-us.png b/src/static/reward-us.png
new file mode 100644
index 0000000..6299d30
Binary files /dev/null and b/src/static/reward-us.png differ