laoma/shoot-miniprograms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI还原

Browse Source
This commit is contained in:
kron
2025-09-30 10:53:06 +08:00
parent ca399ffc19
commit c0aa6e8058
2 changed files with 70 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/pages/point-book.vue
View File

@@ -31,6 +31,7 @@ const isIOS = computed(() => {
return systemInfo.osName === "ios";
});
const loadImage = ref(true);
const showModal = ref(false);
const showTip = ref(false);
const data = ref({
@@ -75,26 +76,29 @@ const loadData = async () => {
else if (result2.checkInCount >= 5) hot = 3;
else if (result2.checkInCount === 7) hot = 4;
uni.$emit("update-hot", hot);
try {
const imagePath = await generateKDEHeatmapImage(
"heatMapCanvas",
rect.width,
rect.height,
result2.weekArrows
.filter((item) => item.x && item.y)
.map((item) => [item.x, item.y]),
{
range: [0, 1], // 适配0-1坐标范围
gridSize: 150, // 更高的网格密度，减少锯齿
bandwidth: 0.15, // 稍小的带宽，让热力图更细腻
showPoints: false, // 显示白色原始数据点
}
);
heatMapImageSrc.value = imagePath; // 存储生成的图片地址
console.log("热力图图片地址:", imagePath);
} catch (error) {
console.error("生成热力图图片失败:", error);
}
setTimeout(async () => {
try {
const imagePath = await generateKDEHeatmapImage(
"heatMapCanvas",
rect.width,
rect.height,
result2.weekArrows
.filter((item) => item.x && item.y)
.map((item) => [item.x, item.y]),
{
range: [0, 1], // 适配0-1坐标范围
gridSize: 120, // 更高的网格密度，减少锯齿
bandwidth: 0.15, // 稍小的带宽，让热力图更细腻
showPoints: false, // 显示白色原始数据点
}
);
heatMapImageSrc.value = imagePath; // 存储生成的图片地址
loadImage.value = false;
console.log("热力图图片地址:", imagePath);
} catch (error) {
console.error("生成热力图图片失败:", error);
}
}, 300);
};
watch(
@@ -153,7 +157,7 @@ onShareTimeline(() => {
<view>
<image src="../static/week-check.png" mode="widthFix" />
</view>
<view>
<view :class="data.weeksCheckIn[0] ? 'checked' : ''">
<image
v-if="data.weeksCheckIn[0]"
src="../static/checked-green2.png"
@@ -162,7 +166,7 @@ onShareTimeline(() => {
<view v-else></view>
<text>周一</text>
</view>
<view>
<view :class="data.weeksCheckIn[1] ? 'checked' : ''">
<image
v-if="data.weeksCheckIn[1]"
src="../static/checked-green2.png"
@@ -171,7 +175,7 @@ onShareTimeline(() => {
<view v-else></view>
<text>周二</text>
</view>
<view>
<view :class="data.weeksCheckIn[2] ? 'checked' : ''">
<image
v-if="data.weeksCheckIn[2]"
src="../static/checked-green2.png"
@@ -180,7 +184,7 @@ onShareTimeline(() => {
<view v-else></view>
<text>周三</text>
</view>
<view>
<view :class="data.weeksCheckIn[3] ? 'checked' : ''">
<image
v-if="data.weeksCheckIn[3]"
src="../static/checked-green2.png"
@@ -189,7 +193,7 @@ onShareTimeline(() => {
<view v-else></view>
<text>周四</text>
</view>
<view>
<view :class="data.weeksCheckIn[4] ? 'checked' : ''">
<image
v-if="data.weeksCheckIn[4]"
src="../static/checked-green2.png"
@@ -198,7 +202,7 @@ onShareTimeline(() => {
<view v-else></view>
<text>周五</text>
</view>
<view>
<view :class="data.weeksCheckIn[5] ? 'checked' : ''">
<image
v-if="data.weeksCheckIn[5]"
src="../static/checked-green2.png"
@@ -207,7 +211,7 @@ onShareTimeline(() => {
<view v-else></view>
<text>周六</text>
</view>
<view>
<view :class="data.weeksCheckIn[6] ? 'checked' : ''">
<image
v-if="data.weeksCheckIn[6]"
src="../static/checked-green2.png"
@@ -257,6 +261,9 @@ onShareTimeline(() => {
mode="widthFix"
/>
<image v-if="heatMapImageSrc" :src="heatMapImageSrc" mode="widthFix" />
<view v-if="loadImage" class="load-image">
<text>生成中...</text>
</view>
<canvas
canvas-id="heatMapCanvas"
style="
@@ -269,7 +276,7 @@ onShareTimeline(() => {
"
/>
</view>
<view class="reward" v-if="data.totalArrow">
<view class="reward" v-if="data.totalArrow && !loadImage">
<button hover-class="none" @click="showTip = true">
<image src="../static/reward-us.png" mode="widthFix" />
</button>
@@ -364,6 +371,7 @@ onShareTimeline(() => {
.daily-signin > view:not(:first-child) {
background: #f8f8f8;
padding: 15rpx 8rpx;
box-sizing: border-box;
}
.daily-signin > view:not(:first-child) > image {
width: 32rpx;
@@ -387,6 +395,12 @@ onShareTimeline(() => {
.daily-signin > view:first-child > image {
width: 100%;
}
.checked {
border: 1rpx solid #000;
}
.checked > text {
color: #333 !important;
}
.title {
width: 100%;
display: flex;
@@ -402,13 +416,26 @@ onShareTimeline(() => {
width: calc(100vw - 70rpx);
height: calc(100vw - 70rpx);
}
.heat-map > image {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.load-image {
position: absolute;
width: 160rpx;
top: calc(50% - 65rpx);
left: calc(50% - 75rpx);
/* background: rgb(0 0 0 / 0.4); */
/* padding: 20rpx; */
color: #525252;
font-size: 20rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.reward {
width: 100%;
display: flex;