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-11-11 10:13:14 +08:00
parent 81ab085e48
commit dfc62c7e3f
9 changed files with 60 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/BattleFooter.vue
View File

@@ -160,10 +160,10 @@ const normalRounds = computed(
padding-top: 5px;
}
.players > view:first-child > view {
background: linear-gradient(270deg, #172a86 0%, #0006 100%);
background: linear-gradient(270deg, #172a86 0%, #0000 100%);
}
.players > view:last-child > view {
background: linear-gradient(270deg, #0006 0%, #6a1212 100%);
background: linear-gradient(270deg, #0000 0%, #6a1212 100%);
}
.players > view > view {
min-height: 52rpx;

9
src/components/ScoreResult.vue
View File

@@ -5,7 +5,6 @@ import SButton from "@/components/SButton.vue";
import ScreenHint from "@/components/ScreenHint.vue";
import BowData from "@/components/BowData.vue";
import UserUpgrade from "@/components/UserUpgrade.vue";
import { wxShare } from "@/util";
import { directionAdjusts } from "@/constants";
import useStore from "@/store";
import { storeToRefs } from "pinia";
@@ -45,6 +44,9 @@ const closePanel = () => {
props.onClose();
}, 300);
};
function onClickShare() {
uni.$emit("share-image");
}
onMounted(() => {
if (props.result.lvl > user.value.lvl) {
showUpgrade.value = true;
@@ -58,9 +60,6 @@ onMounted(() => {
finished.value =
props.result.arrows && props.result.arrows.length === props.total;
});
// setTimeout(() => {
// showPanel.value = true;
// }, 300);
</script>
<template>
@@ -100,7 +99,7 @@ onMounted(() => {
<IconButton
name="分享"
src="../static/share.png"
:onClick="wxShare"
:onClick="onClickShare"
/>
<IconButton
name="教练点评"

3
src/pages.json
View File

@@ -45,9 +45,6 @@
{
"path": "pages/match-page"
},
{
"path": "pages/image-share"
},
{
"path": "pages/my-device"
},

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

@@ -13,7 +13,7 @@ import BowPower from "@/components/BowPower.vue";
import TestDistance from "@/components/TestDistance.vue";
import BubbleTip from "@/components/BubbleTip.vue";
import { createPractiseAPI } from "@/apis";
import { generateCanvasImage } from "@/util";
import { generateCanvasImage, wxShare, debounce } from "@/util";
import { MESSAGETYPES } from "@/constants";
import useStore from "@/store";
import { storeToRefs } from "pinia";
@@ -79,23 +79,23 @@ async function onReceiveMessage(messages = []) {
arrows: JSON.parse(msg.practice.arrows),
lvl: msg.lvl,
};
generateCanvasImage(
"shareCanvas",
1,
user.value,
practiseResult.value
);
}, 1500);
}
}
});
}
const onClickShare = debounce(async () => {
await generateCanvasImage("shareCanvas", 1, user.value, practiseResult.value);
await wxShare("shareCanvas");
});
onMounted(() => {
uni.setKeepScreenOn({
keepScreenOn: true,
});
uni.$on("socket-inbox", onReceiveMessage);
uni.$on("share-image", onClickShare);
});
onBeforeUnmount(() => {
@@ -103,6 +103,7 @@ onBeforeUnmount(() => {
keepScreenOn: false,
});
uni.$off("socket-inbox", onReceiveMessage);
uni.$off("share-image", onClickShare);
});
const nextStep = async () => {

79
src/pages/image-share.vue
View File

@@ -1,79 +0,0 @@
<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import { generateCanvasImage } from "@/util";
import { getPractiseAPI } from "@/apis";
import { wxShare } from "@/util";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
onLoad(async (options) => {
const id = options.id || 461;
const data = await getPractiseAPI(id);
if (!data.arrows.length) return;
generateCanvasImage("shareCanvas", options.type, user.value, data);
});
const saveImage = () => {
uni.canvasToTempFilePath({
canvasId: "shareCanvas",
success: (res) => {
const tempFilePath = res.tempFilePath;
// 保存图片到相册
uni.saveImageToPhotosAlbum({
filePath: tempFilePath,
success: () => {
uni.showToast({ title: "保存成功" });
},
fail: () => {
uni.showToast({ title: "保存失败", icon: "error" });
},
});
},
});
};
</script>
<template>
<Container>
<view class="content">
<view :style="{ overflow: 'hidden', borderRadius: '10px' }">
<canvas
:style="{ width: '300px', height: '534px' }"
canvas-id="shareCanvas"
></canvas>
</view>
</view>
</Container>
</template>
<style scoped>
.content {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 20px;
}
.footer {
width: 100%;
display: flex;
justify-content: space-around;
margin-top: 50px;
}
.footer > button {
display: flex;
flex-direction: column;
align-items: center;
color: #fff;
font-size: 12px;
}
.footer > button > image {
width: 45px;
margin-bottom: 10px;
}
</style>

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

@@ -11,7 +11,7 @@ import BowPower from "@/components/BowPower.vue";
import TestDistance from "@/components/TestDistance.vue";
import BubbleTip from "@/components/BubbleTip.vue";
import { createPractiseAPI } from "@/apis";
import { generateCanvasImage } from "@/util";
import { generateCanvasImage, wxShare, debounce } from "@/util";
import { MESSAGETYPES, roundsName } from "@/constants";
import useStore from "@/store";
import { storeToRefs } from "pinia";
@@ -62,12 +62,6 @@ async function onReceiveMessage(messages = []) {
arrows: JSON.parse(msg.practice.arrows),
lvl: msg.lvl,
};
generateCanvasImage(
"shareCanvas",
2,
user.value,
practiseResult.value
);
}, 1500);
}
}
@@ -89,11 +83,17 @@ async function onComplete() {
}
}
const onClickShare = debounce(async () => {
await generateCanvasImage("shareCanvas", 2, user.value, practiseResult.value);
await wxShare("shareCanvas");
});
onMounted(() => {
uni.setKeepScreenOn({
keepScreenOn: true,
});
uni.$on("socket-inbox", onReceiveMessage);
uni.$on("share-image", onClickShare);
});
onBeforeUnmount(() => {
@@ -101,6 +101,7 @@ onBeforeUnmount(() => {
keepScreenOn: false,
});
uni.$off("socket-inbox", onReceiveMessage);
uni.$off("share-image", onClickShare);
});
</script>

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

@@ -11,7 +11,7 @@ import BowPower from "@/components/BowPower.vue";
import TestDistance from "@/components/TestDistance.vue";
import BubbleTip from "@/components/BubbleTip.vue";
import { createPractiseAPI } from "@/apis";
import { generateCanvasImage } from "@/util";
import { generateCanvasImage, wxShare, debounce } from "@/util";
import { MESSAGETYPES } from "@/constants";
import useStore from "@/store";
import { storeToRefs } from "pinia";
@@ -56,12 +56,6 @@ async function onReceiveMessage(messages = []) {
arrows: JSON.parse(msg.practice.arrows),
lvl: msg.lvl,
};
generateCanvasImage(
"shareCanvas",
3,
user.value,
practiseResult.value
);
}, 1500);
}
}
@@ -82,11 +76,17 @@ async function onComplete() {
}
}
const onClickShare = debounce(async () => {
await generateCanvasImage("shareCanvas", 3, user.value, practiseResult.value);
await wxShare("shareCanvas");
});
onMounted(() => {
uni.setKeepScreenOn({
keepScreenOn: true,
});
uni.$on("socket-inbox", onReceiveMessage);
uni.$on("share-image", onClickShare);
});
onBeforeUnmount(() => {
@@ -94,6 +94,7 @@ onBeforeUnmount(() => {
keepScreenOn: false,
});
uni.$off("socket-inbox", onReceiveMessage);
uni.$off("share-image", onClickShare);
});
</script>

28
src/store.js
View File

@@ -71,22 +71,16 @@ export default defineStore("store", {
},
async updateUser(user = {}) {
this.user = { ...defaultUser, ...user };
if (user.avatar) {
// 先保存到本地，分享只能用本地图片
const imageInfo = await uni.getImageInfo({ src: user.avatar });
this.user.avatar = imageInfo.path;
}
if (this.user.rankLvl !== undefined) {
this.user.lvlName = getLvlName(
this.user.rankLvl,
this.config.randInfos
);
}
const lvlImage = getLvlImage(this.user.rankLvl, this.config.randInfos);
if (lvlImage) {
const imageInfo = await uni.getImageInfo({ src: lvlImage });
this.user.lvlImage = imageInfo.path;
}
this.user.lvlImage = getLvlImage(
this.user.rankLvl,
this.config.randInfos
);
},
updateDevice(deviceId, deviceName) {
this.device.deviceId = deviceId;
@@ -95,13 +89,15 @@ export default defineStore("store", {
async updateConfig(config) {
this.config = config;
if (this.user.scores !== undefined) {
this.user.lvlName = getLvlName(this.user.scores, this.config.randInfos);
}
const lvlImage = getLvlImage(this.user.rankLvl, this.config.randInfos);
if (lvlImage) {
const imageInfo = await uni.getImageInfo({ src: lvlImage });
this.user.lvlImage = imageInfo.path;
this.user.lvlName = getLvlName(
this.user.rankLvl,
this.config.randInfos
);
}
this.user.lvlImage = getLvlImage(
this.user.rankLvl,
this.config.randInfos
);
},
},

20
src/util.js
View File

@@ -162,14 +162,29 @@ export const drawRoundImage = async (
ctx.restore();
};
const loadImage = (src) =>
new Promise((resolve) => {
try {
uni.getImageInfo({
src,
success: (res) => resolve(res.path || res.tempFilePath || src),
fail: () => resolve(src),
});
} catch (e) {
resolve(src);
}
});
export async function generateCanvasImage(canvasId, type, user, data) {
try {
var ctx = uni.createCanvasContext(canvasId);
const width = 300;
const height = 534;
ctx.drawImage("../static/share-bg.png", 0, 0, width, height);
drawRoundImage(ctx, user.avatar, 17, 20, 32, 32, 20);
ctx.drawImage(user.lvlImage, 12, 15, 42, 42);
const avatar = await loadImage(user.avatar);
drawRoundImage(ctx, avatar, 17, 20, 32, 32, 20);
const lvlImage = await loadImage(user.lvlImage);
ctx.drawImage(lvlImage, 12, 15, 42, 42);
renderText(ctx, user.nickName, 13, "#fff", 58, 34);
renderRankTitle(ctx, user.lvlName);
@@ -239,6 +254,7 @@ export const wxShare = async (canvasId = "shareCanvas") => {
path: res.tempFilePath,
});
} catch (error) {
console.log("生成图片失败:", error);
uni.showToast({
title: "生成图片失败",
icon: "error",