|
|
@@ -5,7 +5,7 @@
|
|
|
<view class="report-wrap" @tap.stop="stopProp">
|
|
|
<!-- 关闭按钮 -->
|
|
|
<!-- <view class="close-btn" @tap="handleClose">✕</view> -->
|
|
|
- <scroll-view scroll-y class="report-scroll">
|
|
|
+ <scroll-view scroll-y class="report-scroll" :style="{ height: scrollHeight + 'px' }">
|
|
|
<view class="report-wrap-big-box">
|
|
|
<view class="report-wrap-min-box">
|
|
|
<!-- logo -->
|
|
|
@@ -97,8 +97,8 @@
|
|
|
<view class="btn-save" @tap="saveAsImage">保存图片</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <!-- 用于截图的离屏 canvas -->
|
|
|
- <canvas canvas-id="reportCanvas" class="report-canvas"></canvas>
|
|
|
+ <!-- 用于截图的离屏 canvas，需要有实际尺寸才能绘制 -->
|
|
|
+ <canvas canvas-id="reportCanvas" :style="{ width: canvasW + 'px', height: canvasH + 'px', position: 'fixed', left: '-9999px', top: '0' }"></canvas>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -119,6 +119,9 @@
|
|
|
return {
|
|
|
logUrl: uni.getStorageSync('rectangleLogo'),
|
|
|
// logUrl: 'https://gzu.zjznai.com/statics/2026/06/17/00df3205-5321-4b46-aae3-0ffe4451ee51.png',
|
|
|
+ canvasW: 340,
|
|
|
+ canvasH: 100,
|
|
|
+ scrollHeight: Math.floor(uni.getSystemInfoSync().windowHeight * 0.85) - 100,
|
|
|
newData: {
|
|
|
userName: '',
|
|
|
account: '',
|
|
|
@@ -161,11 +164,28 @@
|
|
|
const pad = 48;
|
|
|
const tableW = W - pad * 2;
|
|
|
|
|
|
- // 预估高度
|
|
|
+ // 计算高度（加 buffer 防截断）
|
|
|
const studyRows = (d.studyHoursList || []).length;
|
|
|
const examRows = (d.examPassRecords || []).length;
|
|
|
- const H = 120 + 100 + 60 + (studyRows > 0 ? 80 + studyRows * 32 + 32 : 0) + (examRows > 0 ? 80 + examRows * 32 : 0) + 120 + 160;
|
|
|
-
|
|
|
+ const descLines = 4; // 描述文字大约 4 行
|
|
|
+ const H = 120
|
|
|
+ + 100 + 56 // logo + 标题
|
|
|
+ + 100 + 20 // 用户信息
|
|
|
+ + (studyRows > 0 ? 46 + 34 + studyRows * 32 + 32 + 20 : 0) // 学年学时
|
|
|
+ + (examRows > 0 ? 46 + 34 + examRows * 32 + 20 : 0) // 考试记录
|
|
|
+ + descLines * lineH + 40 // 描述
|
|
|
+ + 80 + 80; // 落款 + 底部
|
|
|
+
|
|
|
+ // 先同步 canvas 尺寸（微信小程序 canvas 需要真实 px 尺寸）
|
|
|
+ this.canvasW = W / 2;
|
|
|
+ this.canvasH = H / 2;
|
|
|
+
|
|
|
+ // 等 DOM 更新后再绘制
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this._drawCanvas(W, H, pad, tableW, lineH, d, studyRows, examRows);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ _drawCanvas(W, H, pad, tableW, lineH, d, studyRows, examRows) {
|
|
|
const ctx = uni.createCanvasContext('reportCanvas', this);
|
|
|
|
|
|
// 背景
|
|
|
@@ -393,11 +413,11 @@
|
|
|
.report-wrap {
|
|
|
position: relative;
|
|
|
width: 90%;
|
|
|
- max-height: 80vh;
|
|
|
background: #fffdf5;
|
|
|
border-radius: 8rpx;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
+ max-height: 85vh;
|
|
|
|
|
|
.close-btn {
|
|
|
position: absolute;
|
|
|
@@ -412,7 +432,7 @@
|
|
|
|
|
|
.report-scroll {
|
|
|
flex: 1;
|
|
|
- max-height: 80vh;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.report-wrap-big-box {
|
|
|
@@ -648,6 +668,38 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .action-bar {
|
|
|
+ display: flex;
|
|
|
+ padding: 20rpx 32rpx;
|
|
|
+ border-top: 1rpx solid #e8dcc8;
|
|
|
+ background: #fffdf5;
|
|
|
+ border-radius: 0 0 8rpx 8rpx;
|
|
|
+ gap: 24rpx;
|
|
|
+
|
|
|
+ .btn-close {
|
|
|
+ flex: 1;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #8b4513;
|
|
|
+ border: 1rpx solid #c9a84c;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-save {
|
|
|
+ flex: 2;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #fff;
|
|
|
+ background: #8b4513;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
dedsudiyu