joey5628/doodle-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 我的、设置、打印指南页面开发完成

Browse Source
This commit is contained in:
R524809
2026-05-07 16:32:49 +08:00
parent 0737c6165e
commit c732111e12
43 changed files with 1702 additions and 837 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/supportPages/guide/guide.json
+7 -2
View File
@@ -1,6 +1,11 @@
{
"navigationStyle": "custom",
"navigationBarTitleText": "打印指南",
"navigationBarTextStyle": "black",
"navigationBarBackgroundColor": "#f7ee47",
"backgroundColor": "#F6F6F6"
"navigationBarBackgroundColor": "#F8F0E0",
"backgroundColor": "#F8F0E0",
"usingComponents": {
"van-icon": "@vant/weapp/icon/index",
"nav-bar": "../../components3.0/nav-bar/nav-bar"
}
}
miniprogram/supportPages/guide/guide.less
+197 -55
View File
@@ -1,45 +1,105 @@
.guide-page {
min-height: 100vh;
background: #f6f6f6;
padding-bottom: 48rpx;
@import '../../style/theme.less';
page {
min-height: 100%;
background: @bg-header;
}
.guide-page {
min-height: 100vh;
background: @bg-header;
box-sizing: border-box;
}
.guide-page__body {
padding: @section-gap-xs @page-padding-x;
padding-bottom: calc(48rpx + env(safe-area-inset-bottom));
box-sizing: border-box;
}
/* Hero 主卡（参考 profile-hero） */
.guide-page__hero {
background: linear-gradient(180deg, #f7ee47 0%, #e6d520 100%);
padding: 60rpx 40rpx;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: 80rpx @page-padding-inner-x 56rpx;
background: @bg-white;
border-radius: @radius-xl;
border: 1rpx solid rgba(124, 118, 106, 0.12);
box-shadow: @shadow;
overflow: hidden;
margin-bottom: @section-gap-xs;
}
.guide-page__hero-tint {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 192rpx;
background: @brand;
opacity: 0.1;
pointer-events: none;
}
.guide-page__hero-icon-wrap {
position: relative;
width: 144rpx;
height: 144rpx;
border-radius: 50%;
background: @brand;
border: 8rpx solid @bg-white;
box-shadow: @shadow;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
margin-top: 16rpx;
}
.guide-page__hero-icon {
font-size: 80rpx;
margin-bottom: 24rpx;
font-size: 72rpx;
line-height: 1;
}
.guide-page__hero-title {
margin-top: 32rpx;
font-size: 40rpx;
font-weight: 700;
color: #333;
font-weight: 800;
color: @text-title;
text-align: center;
line-height: 1.2;
}
.guide-page__hero-sub {
margin-top: 16rpx;
font-size: 24rpx;
font-weight: 600;
color: @text-secondary;
text-align: center;
letter-spacing: 0.04em;
}
/* 步骤时间线卡片 */
.guide-page__steps {
position: relative;
padding: 40rpx 32rpx 24rpx 32rpx;
margin: 0 24rpx;
margin-top: -24rpx;
background: #fff;
border-radius: 24rpx;
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
padding: 56rpx 40rpx 16rpx;
background: @bg-white;
border-radius: @radius-xl;
border: 1rpx solid rgba(124, 118, 106, 0.12);
box-shadow: @shadow;
margin-bottom: @section-gap-xs;
box-sizing: border-box;
}
.guide-page__timeline-line {
position: absolute;
left: 62rpx;
top: 100rpx;
bottom: 100rpx;
left: 70rpx;
top: 110rpx;
bottom: 110rpx;
width: 4rpx;
background: #eee;
background: @bg-gray;
z-index: 0;
}
@@ -48,62 +108,66 @@
z-index: 1;
display: flex;
flex-direction: row;
margin-bottom: 48rpx;
margin-bottom: 56rpx;
}
.guide-page__step--last {
margin-bottom: 0;
margin-bottom: 40rpx;
}
.guide-page__step-num-wrap {
flex-shrink: 0;
width: 64rpx;
margin-right: 24rpx;
margin-right: 32rpx;
display: flex;
justify-content: center;
}
.guide-page__step-num {
width: 60rpx;
height: 60rpx;
width: 64rpx;
height: 64rpx;
border-radius: 50%;
background: #f7ee47;
font-size: 28rpx;
font-weight: 700;
color: #333;
background: @brand;
font-size: 30rpx;
font-weight: 800;
color: @text-selected-btn;
display: flex;
align-items: center;
justify-content: center;
box-shadow: @shadow;
}
.guide-page__step-body {
flex: 1;
padding-top: 4rpx;
min-width: 0;
}
.guide-page__step-title {
display: block;
font-size: 32rpx;
font-weight: 600;
color: #333;
margin-bottom: 12rpx;
font-weight: 700;
color: @text-title;
margin-bottom: 16rpx;
}
.guide-page__step-desc {
display: block;
font-size: 28rpx;
color: #666;
line-height: 1.55;
margin-bottom: 16rpx;
font-size: 26rpx;
color: @text-secondary;
line-height: 1.6;
margin-bottom: 20rpx;
}
/* 通用 Tip（弱提示） */
.guide-page__tip {
background: #fff8e1;
border-radius: 16rpx;
background: @bg-header;
border-radius: @radius;
padding: 20rpx 24rpx;
font-size: 26rpx;
color: #666;
line-height: 1.5;
font-size: 24rpx;
color: @text-secondary;
line-height: 1.55;
border: 1rpx solid rgba(124, 118, 106, 0.12);
}
.guide-page__tip-line {
@@ -115,36 +179,114 @@
margin-bottom: 0;
}
.guide-page__faq-title {
font-size: 32rpx;
/* 相册权限提示卡 */
.guide-page__perm {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 24rpx 28rpx;
border-radius: @radius;
background: fade(@brand, 18%);
border: 1rpx solid fade(@brand, 36%);
box-sizing: border-box;
}
.guide-page__perm--granted {
background: fade(@brand, 12%);
border-color: fade(@brand, 28%);
}
.guide-page__perm--denied {
background: fade(@brand, 22%);
border-color: fade(@brand, 50%);
}
.guide-page__perm-icon-wrap {
flex-shrink: 0;
width: 56rpx;
height: 56rpx;
border-radius: 50%;
background: @bg-white;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
box-shadow: @shadow;
}
.guide-page__perm-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.guide-page__perm-title {
display: block;
font-size: 26rpx;
font-weight: 700;
color: #333;
padding: 40rpx 32rpx 16rpx;
color: @text-title;
line-height: 1.4;
}
.guide-page__perm-desc {
display: block;
margin-top: 8rpx;
font-size: 24rpx;
color: @text-secondary;
line-height: 1.55;
}
.guide-page__perm-btn {
align-self: flex-start;
margin-top: 20rpx;
padding: 14rpx 32rpx;
border-radius: 999rpx;
background: @brand;
color: @text-selected-btn;
font-size: 24rpx;
font-weight: 700;
box-shadow: @shadow;
line-height: 1;
}
/* FAQ */
.guide-page__faq-title {
font-size: @fs-section-head-title;
font-weight: 800;
color: @text-title;
padding: 16rpx 8rpx 24rpx;
}
.guide-page__faq {
padding: 0 24rpx;
display: flex;
flex-direction: column;
}
.guide-page__faq-item {
background: #fff;
border-radius: 16rpx;
padding: 28rpx 32rpx;
margin-bottom: 20rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
background: @bg-white;
border-radius: @radius-lg;
border: 1rpx solid rgba(124, 118, 106, 0.12);
padding: 32rpx 36rpx;
margin-bottom: 24rpx;
box-sizing: border-box;
}
.guide-page__faq-item--last {
margin-bottom: 0;
}
.guide-page__faq-q {
display: block;
font-size: 28rpx;
font-weight: 700;
color: #333;
color: @text-title;
margin-bottom: 12rpx;
}
.guide-page__faq-a {
display: block;
font-size: 26rpx;
color: #999;
line-height: 1.55;
}
color: @text-secondary;
line-height: 1.6;
}
miniprogram/supportPages/guide/guide.ts
+70 -2
View File
@@ -1,7 +1,75 @@
type AlbumAuthState = 'unknown' | 'granted' | 'denied';
const ALBUM_SCOPE = 'scope.writePhotosAlbum';
Page({
data: {},
data: {
albumAuthState: 'unknown' as AlbumAuthState,
},
onLoad() {
// 静态说明页，无额外逻辑
this.refreshAlbumAuthState();
},
onShow() {
this.refreshAlbumAuthState();
},
refreshAlbumAuthState() {
wx.getSetting({
success: (res) => {
const auth = res.authSetting?.[ALBUM_SCOPE];
let state: AlbumAuthState = 'unknown';
if (auth === true) {
state = 'granted';
} else if (auth === false) {
state = 'denied';
}
this.setData({ albumAuthState: state });
},
fail: () => {
this.setData({ albumAuthState: 'unknown' });
},
});
},
onHandleAlbumPerm() {
const { albumAuthState } = this.data;
// 已被拒绝过：只能去系统设置打开
if (albumAuthState === 'denied') {
wx.openSetting({
success: (res) => {
const granted = !!res.authSetting?.[ALBUM_SCOPE];
this.setData({
albumAuthState: granted ? 'granted' : 'denied',
});
if (granted) {
wx.showToast({
title: '已开启相册权限',
icon: 'success',
duration: 1500,
});
}
},
});
return;
}
// 未授权过：直接发起授权请求
wx.authorize({
scope: ALBUM_SCOPE,
success: () => {
this.setData({ albumAuthState: 'granted' });
wx.showToast({
title: '已开启相册权限',
icon: 'success',
duration: 1500,
});
},
fail: () => {
this.setData({ albumAuthState: 'denied' });
},
});
},
});
miniprogram/supportPages/guide/guide.wxml
+117 -48
View File
@@ -1,63 +1,132 @@
<view class="guide-page">
<view class="guide-page__hero">
<text class="guide-page__hero-icon">🖨️</text>
<text class="guide-page__hero-title">3 步完成打印</text>
</view>
<nav-bar title="打印指南" />
<view class="guide-page__steps">
<view class="guide-page__timeline-line" />
<view class="guide-page__step">
<view class="guide-page__step-num-wrap">
<view class="guide-page__step-num">1</view>
</view>
<view class="guide-page__step-body">
<text class="guide-page__step-title">保存到相册</text>
<text class="guide-page__step-desc">在练习纸预览页点击「保存」或「保存到相册」，授权后即可保存图片。</text>
<view class="guide-page__tip">提示：建议先关闭深色模式截图，打印对比度更好。</view>
<view class="guide-page__body">
<!-- Hero 卡片：白底大圆角 + 顶条品牌色（参考 profile 主卡） -->
<view class="guide-page__hero">
<view class="guide-page__hero-tint"></view>
<view class="guide-page__hero-icon-wrap">
<text class="guide-page__hero-icon">🖨️</text>
</view>
<text class="guide-page__hero-title">3 步完成打印</text>
<text class="guide-page__hero-sub"
>保存图片 → 连接打印机 → 一键打印</text
>
</view>
<view class="guide-page__step">
<view class="guide-page__step-num-wrap">
<view class="guide-page__step-num">2</view>
</view>
<view class="guide-page__step-body">
<text class="guide-page__step-title">连接打印机</text>
<text class="guide-page__step-desc">确保打印机与手机处于同一 Wi-Fi，或按打印机说明完成蓝牙配对。</text>
<view class="guide-page__tip">家用喷墨 / 激光打印机均可；A4 纸竖向打印即可。</view>
</view>
</view>
<!-- 步骤时间线 -->
<view class="guide-page__steps">
<view class="guide-page__timeline-line" />
<view class="guide-page__step guide-page__step--last">
<view class="guide-page__step-num-wrap">
<view class="guide-page__step-num">3</view>
<view class="guide-page__step">
<view class="guide-page__step-num-wrap">
<view class="guide-page__step-num">1</view>
</view>
<view class="guide-page__step-body">
<text class="guide-page__step-title">保存到相册</text>
<text class="guide-page__step-desc">
在练习纸预览页点击「保存到相册」，授权后即可下载图片到手机相册。
</text>
<!-- 相册权限提示（动态状态） -->
<view
class="guide-page__perm guide-page__perm--{{albumAuthState}}">
<view class="guide-page__perm-icon-wrap">
<van-icon
wx:if="{{albumAuthState === 'granted'}}"
name="checked"
size="36rpx"
color="#1fe000" />
<van-icon
wx:elif="{{albumAuthState === 'denied'}}"
name="warning-o"
size="36rpx"
color="#e8793a" />
<van-icon
wx:else
name="info-o"
size="36rpx"
color="#605b50" />
</view>
<view class="guide-page__perm-body">
<text class="guide-page__perm-title"
>{{albumAuthState === 'granted' ?
'已开启相册权限' : albumAuthState === 'denied' ?
'相册权限未开启' : '检查相册权限'}}</text
>
<text class="guide-page__perm-desc"
>{{albumAuthState === 'granted' ?
'可正常将练习纸保存到手机相册。' :
albumAuthState === 'denied' ?
'需要在系统设置中开启「保存到相册」权限，才能下载图片。'
:
'请确认是否已授权小程序保存图片到相册。'}}</text
>
<view
wx:if="{{albumAuthState !== 'granted'}}"
class="guide-page__perm-btn"
bindtap="onHandleAlbumPerm"
>{{albumAuthState === 'denied' ? '前往设置开启'
: '立即检查授权'}}</view
>
</view>
</view>
</view>
</view>
<view class="guide-page__step-body">
<text class="guide-page__step-title">从相册打印</text>
<text class="guide-page__step-desc">打开手机相册，选中刚保存的练习纸图片，点击分享或打印。</text>
<view class="guide-page__tip">
<text class="guide-page__tip-line">iPhone：分享 → 打印 → 选择打印机。</text>
<text class="guide-page__tip-line">Android：更多 → 打印 或 使用系统相册自带的打印入口。</text>
<view class="guide-page__step">
<view class="guide-page__step-num-wrap">
<view class="guide-page__step-num">2</view>
</view>
<view class="guide-page__step-body">
<text class="guide-page__step-title">连接打印机</text>
<text class="guide-page__step-desc">
确保打印机与手机处于同一
Wi-Fi，或按打印机说明完成蓝牙配对。
</text>
<view class="guide-page__tip">
家用喷墨 / 激光打印机均可，A4 纸竖向打印即可。
</view>
</view>
</view>
<view class="guide-page__step guide-page__step--last">
<view class="guide-page__step-num-wrap">
<view class="guide-page__step-num">3</view>
</view>
<view class="guide-page__step-body">
<text class="guide-page__step-title">从相册打印</text>
<text class="guide-page__step-desc">
打开手机相册，选中刚保存的练习纸图片，点击分享或打印。
</text>
<view class="guide-page__tip">
<text class="guide-page__tip-line">
iPhone：分享 → 打印 → 选择打印机。
</text>
<text class="guide-page__tip-line">
Android：更多 → 打印，或使用系统相册自带的打印入口。
</text>
</view>
</view>
</view>
</view>
</view>
<view class="guide-page__faq-title">常见问题</view>
<!-- FAQ -->
<view class="guide-page__faq-title">常见问题</view>
<view class="guide-page__faq">
<view class="guide-page__faq-item">
<text class="guide-page__faq-q">保存失败怎么办？</text>
<text class="guide-page__faq-a">请在小程序设置中开启相册写入权限，并检查手机存储空间是否充足。</text>
</view>
<view class="guide-page__faq-item">
<text class="guide-page__faq-q">打印出来太小/太大？</text>
<text class="guide-page__faq-a">在打印预览中选择「适应页面」或调整缩放比例，通常 100% 即可。</text>
</view>
<view class="guide-page__faq-item">
<text class="guide-page__faq-q">没有打印机？</text>
<text class="guide-page__faq-a">可将图片发到电脑或拷贝至 U 盘，在打印店完成打印。</text>
<view class="guide-page__faq">
<view class="guide-page__faq-item">
<text class="guide-page__faq-q">保存失败怎么办？</text>
<text class="guide-page__faq-a">
请在小程序设置中开启相册写入权限，并检查手机存储空间是否充足。
</text>
</view>
<view class="guide-page__faq-item guide-page__faq-item--last">
<text class="guide-page__faq-q">没有打印机？</text>
<text class="guide-page__faq-a">
可将图片发到电脑或拷贝至 U 盘，在打印店完成打印。
</text>
</view>
</view>
</view>
</view>