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

分享功能优化

Browse Source
This commit is contained in:
kron
2025-06-21 21:40:31 +08:00
parent a9f4f22622
commit 70ddea8ff4
7 changed files with 123 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.vue
View File

@@ -138,4 +138,12 @@ button::after {
animation: pumpIn 0.3s ease-out forwards;
transform-origin: center center;
}
.share-canvas {
width: 302px;
height: 534px;
position: absolute;
top: -1000px;
left: 0;
}
</style>

1
src/components/BowTarget.vue
View File

@@ -206,6 +206,7 @@ function calcRealY(num) {
.footer > image {
width: 40px;
min-height: 40px;
max-height: 40px;
border-radius: 50%;
}
.container > text {

16
src/components/ScoreResult.vue
View File

@@ -4,6 +4,7 @@ import IconButton from "@/components/IconButton.vue";
import SButton from "@/components/SButton.vue";
import ScreenHint from "@/components/ScreenHint.vue";
import BowData from "@/components/BowData.vue";
import { wxShare } from "@/util";
const props = defineProps({
show: {
type: Boolean,
@@ -25,10 +26,6 @@ const props = defineProps({
type: Object,
default: () => ({}),
},
dataType: {
type: Number,
default: 0,
},
});
const showPanel = ref(true);
const showComment = ref(false);
@@ -42,11 +39,6 @@ const closePanel = () => {
setTimeout(() => {
showPanel.value = true;
}, 300);
const toSharePage = () => {
uni.navigateTo({
url: `image-share?id=${props.result.id}&type=${props.dataType}`,
});
};
</script>
<template>
@@ -93,11 +85,7 @@ const toSharePage = () => {
</view>
</view>
<view>
<IconButton
name="分享"
src="../static/share.png"
:onClick="toSharePage"
/>
<IconButton name="分享" src="../static/share.png" :onClick="wxShare" />
<IconButton
name="教练点评"
src="../static/review.png"

8
src/pages/first-try.vue
View File

@@ -12,6 +12,7 @@ import Avatar from "@/components/Avatar.vue";
import BowPower from "@/components/BowPower.vue";
import StartCountdown from "@/components/StartCountdown.vue";
import { createPractiseAPI, getHomeData } from "@/apis";
import { generateCanvasImage } from "@/util";
import { MESSAGETYPES } from "@/constants";
import useStore from "@/store";
import { storeToRefs } from "pinia";
@@ -65,6 +66,7 @@ async function onReceiveMessage(messages = []) {
...msg.practice,
arrows: JSON.parse(msg.practice.arrows),
};
generateCanvasImage("shareCanvas", 1, user.value, practiseResult.value);
}
});
}
@@ -95,8 +97,8 @@ const nextStep = async () => {
step.value = 4;
startCount.value = true;
} else if (step.value === 5) {
const result = await getHomeData();
if (result.user) updateUser(result.user);
// const result = await getHomeData();
// if (result.user) updateUser(result.user);
uni.navigateBack({
delta: 1,
});
@@ -220,8 +222,8 @@ const onClose = () => {
v-if="step === 4"
:onClose="onClose"
:result="practiseResult"
:dataType="1"
/>
<canvas class="share-canvas" canvas-id="shareCanvas"></canvas>
<StartCountdown :start="startCount" :onFinish="onStart" />
</view>
<view :style="{ marginBottom: '20px' }">

8
src/pages/practise-one.vue
View File

@@ -10,6 +10,7 @@ import Avatar from "@/components/Avatar.vue";
import BowPower from "@/components/BowPower.vue";
import StartCountdown from "@/components/StartCountdown.vue";
import { createPractiseAPI, getHomeData } from "@/apis";
import { generateCanvasImage } from "@/util";
import { MESSAGETYPES, roundsName } from "@/constants";
import useStore from "@/store";
import { storeToRefs } from "pinia";
@@ -57,13 +58,14 @@ async function onReceiveMessage(messages = []) {
...msg.practice,
arrows: JSON.parse(msg.practice.arrows),
};
generateCanvasImage("shareCanvas", 2, user.value, practiseResult.value);
}
});
}
async function onComplete() {
const result = await getHomeData();
if (result.user) updateUser(result.user);
// const result = await getHomeData();
// if (result.user) updateUser(result.user);
uni.navigateBack();
}
@@ -111,8 +113,8 @@ onUnmounted(() => {
:show="showScore"
:onClose="onComplete"
:result="practiseResult"
:dataType="2"
/>
<canvas class="share-canvas" canvas-id="shareCanvas"></canvas>
<StartCountdown :start="startCount" :onFinish="onStart" />
</view>
<view :style="{ marginBottom: '20px' }">

8
src/pages/practise-two.vue
View File

@@ -10,6 +10,7 @@ import Avatar from "@/components/Avatar.vue";
import BowPower from "@/components/BowPower.vue";
import StartCountdown from "@/components/StartCountdown.vue";
import { createPractiseAPI, getHomeData } from "@/apis";
import { generateCanvasImage } from "@/util";
import { MESSAGETYPES } from "@/constants";
import useStore from "@/store";
import { storeToRefs } from "pinia";
@@ -54,13 +55,14 @@ async function onReceiveMessage(messages = []) {
...msg.practice,
arrows: JSON.parse(msg.practice.arrows),
};
generateCanvasImage("shareCanvas", 3, user.value, practiseResult.value);
}
});
}
async function onComplete() {
const result = await getHomeData();
if (result.user) updateUser(result.user);
// const result = await getHomeData();
// if (result.user) updateUser(result.user);
uni.navigateBack();
}
@@ -111,8 +113,8 @@ onUnmounted(() => {
:show="showScore"
:onClose="onComplete"
:result="practiseResult"
:dataType="3"
/>
<canvas class="share-canvas" canvas-id="shareCanvas"></canvas>
<StartCountdown :start="startCount" :onFinish="onStart" />
</view>
<view :style="{ marginBottom: '20px' }">

117
src/util.js
View File

@@ -2,26 +2,7 @@ export function renderScores(ctx, arrows = []) {
let rowIndex = 0;
arrows.forEach((item, i) => {
rowIndex = i;
if (arrows.length === 12) {
if (i > 5) rowIndex = i - 6;
ctx.drawImage(
"../static/score-bg.png",
16 + rowIndex * 46,
i > 5 ? 366 : 320,
40,
40
);
renderText(
ctx,
item.ring,
25,
"#fed847",
36 + rowIndex * 46,
i > 5 ? 395 : 349,
"center"
);
}
if (arrows.length === 36) {
if (arrows.length >= 36 && i < 36) {
ctx.drawImage(
"../static/score-bg.png",
18 + (i % 9) * 30,
@@ -39,6 +20,24 @@ export function renderScores(ctx, arrows = []) {
310 + Math.ceil((i + 1) / 9) * 30,
"center"
);
} else if (arrows.length >= 12 && i < 12) {
if (i > 5) rowIndex = i - 6;
ctx.drawImage(
"../static/score-bg.png",
16 + rowIndex * 46,
i > 5 ? 366 : 320,
40,
40
);
renderText(
ctx,
item.ring,
25,
"#fed847",
36 + rowIndex * 46,
i > 5 ? 395 : 349,
"center"
);
}
});
}
@@ -131,3 +130,81 @@ export const drawRoundImage = async (
ctx.drawImage(imgPath, x, y, width, height);
ctx.restore();
};
export function generateCanvasImage(canvasId, type, user, data) {
var ctx = uni.createCanvasContext(canvasId);
const width = 303;
const height = 535;
ctx.drawImage("../static/share-bg.png", 0, 0, 302, 534);
drawRoundImage(ctx, user.avatar, 20, 20, 35, 35, 20);
ctx.drawImage("../static/avatar-frame.png", 15, 15, 45, 45);
renderText(ctx, user.nickName, 14, "#fff", 77, 35, "center");
renderRankTitle(ctx, user.lvlName, "center");
let titleImage = "../static/first-try-title.png";
let subTitle = "正式开启弓箭手之路";
if (type > 1) {
subTitle = `今日弓箭练习打卡 ${data.createdAt
.split(" ")[0]
.replaceAll("-", ".")}`;
}
if (type == 2) {
titleImage = "../static/practise-one-title.png";
} else if (type == 3) {
titleImage = "../static/practise-two-title.png";
}
ctx.drawImage(titleImage, (width - 160) / 2, 160, 160, 40);
const subTitleWidth = ctx.measureText(subTitle).width;
renderText(ctx, subTitle, 18, "#fff", width / 2 - subTitleWidth + 10, 220);
renderText(ctx, "共", 16, "#fff", 124, 300);
const totalRing = data.arrows.reduce((last, next) => last + next.ring, 0);
renderText(ctx, totalRing, 16, "#fed847", totalRing < 100 ? 144 : 142, 300);
renderText(ctx, "环", 16, "#fff", 166, 300);
renderLine(ctx, 80);
renderLine(ctx, 192);
renderScores(ctx, data.arrows);
ctx.drawImage(
"../static/device-icon.png",
width * 0.06,
height * 0.87,
55,
55
);
renderText(ctx, "射灵平台", 16, "#fff", width * 0.28, height * 0.9);
renderText(
ctx,
"快加入我们一起玩吧~",
11,
"rgba(255, 255, 255, 0.5)",
width * 0.28,
height * 0.93
);
renderText(
ctx,
"后羿就是这样练成的",
11,
"rgba(255, 255, 255, 0.5)",
width * 0.28,
height * 0.96
);
ctx.drawImage("../static/qr-code.png", width * 0.75, height * 0.86, 60, 60);
ctx.draw();
}
export const wxShare = async () => {
try {
const res = await uni.canvasToTempFilePath({
canvasId: "shareCanvas",
fileType: "png", // 图片格式，可选 jpg 或 png
quality: 1, // 图片质量，取值范围为 0-1
});
wx.showShareImageMenu({
path: res.tempFilePath,
});
} catch (error) {
uni.showToast({
title: "生成图片失败",
icon: "error",
});
}
};