feat:V2.5.3 修改下载分享弹窗问题、新增连连看

This commit is contained in:
R524809
2025-12-17 18:00:22 +08:00
parent 4a3ad82d08
commit a8ed4a2cfc
11 changed files with 700 additions and 6 deletions
@@ -0,0 +1,12 @@
{
"navigationBarTitleText": "连连看",
"navigationBarBackgroundColor": "#FFD719",
"homeButton": true,
"backgroundColor": "#F6F6F6",
"enablePullDownRefresh": false,
"usingComponents": {
"toy-button": "../../ui/button/button",
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons"
}
}
@@ -0,0 +1,97 @@
import MatchConnectDraw from '../shared/service/matchConnectDraw';
import { createFocusPage } from '../shared/common/focusPageMixin';
import { MatchConnectData } from '../shared/service/matchConnectDraw';
createFocusPage({
canvas: null as Canvas | null,
ctx: null as RenderingContext | null,
boxHeight: 0,
boxWidth: 0,
drawService: null as MatchConnectDraw | null,
matchData: null as MatchConnectData | null,
data: {
pageTitle: '连连看',
functionId: '',
hasContent: false,
showShareDialog: false,
},
onLoad(options: { id?: string }) {
const functionId = options.id || 'match-connect';
this.setData({
functionId,
});
this.initPageInfo(functionId, '连连看');
},
onReady() {
this.initCanvas({
createDrawService: (
canvas: Canvas,
ctx: RenderingContext,
options?: Record<string, any>,
) => {
return new MatchConnectDraw(canvas, ctx, options);
},
drawServiceOptions: {
title: this.data.pageTitle,
subTitle: '快来根据物品连一连吧!',
functionId: this.data.functionId,
},
onCanvasReady: () => {
// 初始随机生成
this.onRandom();
},
});
},
/**
* 绘制Canvas内容
*/
async drawCanvas() {
if (!this.ctx || !this.drawService || !this.matchData) {
return;
}
try {
await this.drawService.draw(this.matchData);
this.setData({ hasContent: true });
} catch (error) {
console.error('绘制失败:', error);
this.setData({ hasContent: false });
}
},
/**
* 随机生成
*/
onRandom() {
// 从33张图片中随机选择5张不重复的图片
const allImageIndices = Array.from({ length: 33 }, (_, i) => i + 1);
const shuffled = [...allImageIndices].sort(() => Math.random() - 0.5);
const selectedImages = shuffled.slice(0, 5);
// 创建参考序列(顺序)
const referenceSequence = [...selectedImages];
// 创建6个框,每个框包含5张图片的索引(位置由绘制服务随机生成)
const boxes: Array<{
imageIndices: number[];
}> = [];
for (let boxIndex = 0; boxIndex < 6; boxIndex++) {
// 每个框使用相同的5张图片
boxes.push({
imageIndices: [...selectedImages],
});
}
this.matchData = {
referenceSequence,
boxes,
};
this.drawCanvas();
},
});
@@ -0,0 +1,37 @@
<view class="page-container">
<view class="wrapper">
<text class="wrapper-title">预览打印效果</text>
<!-- 预览打印效果 -->
<view id="canvasWrapper" class="canvas-wrapper">
<canvas
type="2d"
id="canvasContent"
class="canvas-content"
style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
</view>
<!-- 随机生成按钮 -->
<view class="random-button-area">
<toy-button
class="random-button"
type="primary"
bind:click="onRandom"
width="100%"
height="80rpx"
icon="refresh"
icon-class-prefix="toy-icon">
随机生成
</toy-button>
</view>
</view>
<view class="empty"></view>
</view>
<math-bottom-buttons
disabled="{{!hasContent}}"
bind:share="onShareAppMessage"
bind:export="exportToPrint" />
<share-guide-popup
show="{{showShareDialog}}"
bind:onClose="onCloseShareDialog"
bind:onShareSuccess="onShareSuccess" />
@@ -0,0 +1 @@
@import '../../base/baseDrawPage.wxss';