feat: 我的、设置、打印指南页面开发完成
This commit is contained in:
R524809
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user