refactor: 重构移动端页面布局与资源路径,优化打包配置

1. 新增layout.uts统一管理页面尺寸与安全区计算
2. 修正图片资源路径到static/mobile目录
3. 调整App.vue与AppIcon组件样式适配多端
4. 为微信小程序配置打包忽略规则减少包体积
5. 修复API请求错误抛出类型,完善类型定义
6. 补充README文档说明项目运行与维护规范
7. 优化多个页面的样式与生命周期逻辑
This commit is contained in:
hujun
2026-09-15 16:16:55 +08:00
parent 626cef9d38
commit b0ee4f9d7e
67 changed files with 80727 additions and 189 deletions
+33 -6
View File
@@ -1,28 +1,55 @@
<template>
<view class="page">
<view class="page" :style="pageStyle()">
<AppHeader title="课程详情" />
<scroll-view scroll-y class="lesson-detail-scroll"><view class="lesson-detail-content"><image class="lesson-cover" :src="cover" mode="aspectFill"></image><text class="lesson-detail-title">{{ title }}</text><view class="lesson-detail-meta"><text>{{ tag }}</text><text>{{ duration }} · 课程</text></view><view class="lesson-progress"><view class="progress-fill"></view></view><text class="lesson-intro">本课程将从实际申请场景出发,帮助你理解准备材料、评估资质和选择产品的关键步骤。</text><view class="chapter" v-for="(item,index) in chapters" :key="item"><view class="chapter-index">{{ index + 1 }}</view><view class="chapter-copy"><text class="chapter-title">{{ item }}</text><text class="chapter-desc">预计 2 分钟 · 可随时回看</text></view><AppIcon name="chevron-right" :size="28" muted /></view><button class="primary-button start-learning" @click="start">开始学习</button></view></scroll-view>
<scroll-view scroll-y class="lesson-detail-scroll" :style="contentStyle(96, false)"><view class="lesson-detail-content"><image class="lesson-cover" :src="cover" mode="aspectFill"></image><text class="lesson-detail-title">{{ title }}</text><view class="lesson-detail-meta"><text>{{ tag }}</text><text>{{ duration }} · 课程</text></view><view class="lesson-progress"><view class="progress-fill"></view></view><text class="lesson-intro">本课程将从实际申请场景出发,帮助你理解准备材料、评估资质和选择产品的关键步骤。</text><view class="chapter" v-for="(item,index) in chapters" :key="item"><view class="chapter-index">{{ index + 1 }}</view><view class="chapter-copy"><text class="chapter-title">{{ item }}</text><text class="chapter-desc">预计 2 分钟 · 可随时回看</text></view><AppIcon name="chevron-right" :size="28" muted /></view><button class="primary-button start-learning" @click="start">开始学习</button></view></scroll-view>
</view>
</template>
<script setup lang="uts">
import { usePageLayout } from '@/services/layout.uts'
const { contentStyle, pageStyle } = usePageLayout()
import AppHeader from '@/components/AppHeader.uvue'
import AppIcon from '@/components/AppIcon.uvue'
const title = ref('如何提高个人贷款通过率')
const tag = ref('个人融资')
const duration = ref('6 分钟')
const cover = ref('/static/images/news-calculator.png')
const cover = ref('/static/mobile/images/news-calculator.png')
const chapters = ref(['理解征信评分', '整理收入与负债', '准备申请材料', '选择适合的产品'])
onLoad((options) => {
if (options == null) return
const lessonId = options['id'] == null ? '' : options['id'] as string
if (lessonId == '1') { title.value = '小微企业融资材料清单'; tag.value = '企业融资'; duration.value = '8 分钟'; cover.value = '/static/images/news-business.png'; chapters.value = ['确认主体与经营信息', '整理银行流水与纳税记录', '准备企业资质材料', '核对授权与提交清单'] }
else if (lessonId == '2') { title.value = '读懂贷款利率与还款方式'; tag.value = '基础知识'; duration.value = '5 分钟'; cover.value = '/static/images/news-city.png'; chapters.value = ['年化利率怎么看', '等额本息与先息后本', '期限对总成本的影响', '选择适合现金流的方案'] }
if (lessonId == '1') { title.value = '小微企业融资材料清单'; tag.value = '企业融资'; duration.value = '8 分钟'; cover.value = '/static/mobile/images/news-business.png'; chapters.value = ['确认主体与经营信息', '整理银行流水与纳税记录', '准备企业资质材料', '核对授权与提交清单'] }
else if (lessonId == '2') { title.value = '读懂贷款利率与还款方式'; tag.value = '基础知识'; duration.value = '5 分钟'; cover.value = '/static/mobile/images/news-city.png'; chapters.value = ['年化利率怎么看', '等额本息与先息后本', '期限对总成本的影响', '选择适合现金流的方案'] }
if (options['title'] != null) title.value = options['title'] as string
})
const start = () => { uni.showToast({ title: '课程内容已准备好', icon: 'none' }) }
</script>
<style>
.lesson-detail-scroll { height: calc(100vh - var(--status-bar-height) - 96rpx); }.lesson-detail-content { padding: 26rpx 28rpx 90rpx; }.lesson-cover { width: 100%; height: 290rpx; border-radius: 18rpx; }.lesson-detail-title { display: block; color: #172640; font-size: 36rpx; line-height: 50rpx; font-weight: 800; margin-top: 24rpx; }.lesson-detail-meta { flex-direction: row; justify-content: space-between; color: #0868f7; font-size: 21rpx; margin-top: 12rpx; }.lesson-progress { height: 12rpx; margin-top: 22rpx; border-radius: 8rpx; background-color: #e4edf8; overflow: hidden; }.progress-fill { width: 12%; height: 100%; border-radius: 8rpx; background-color: #0868f7; }.lesson-intro { display: block; color: #5f6d81; font-size: 24rpx; line-height: 42rpx; margin: 26rpx 0; }.chapter { min-height: 100rpx; padding: 16rpx 0; border-bottom: 1rpx solid #e7edf5; flex-direction: row; align-items: center; }.chapter-index { width: 48rpx; height: 48rpx; border-radius: 16rpx; background-color: #e8f2ff; color: #0868f7; align-items: center; justify-content: center; font-size: 22rpx; font-weight: 800; margin-right: 16rpx; }.chapter-copy { flex: 1; }.chapter-title { color: #23324a; font-size: 25rpx; font-weight: 700; }.chapter-desc { display: block; color: #97a3b2; font-size: 19rpx; margin-top: 7rpx; }.start-learning { margin-top: 28rpx; }
.lesson-detail-scroll { }
.lesson-detail-content { padding: 26rpx 28rpx 90rpx; }
.lesson-cover { width: 100%; height: 290rpx; border-radius: 18rpx; }
.lesson-detail-title {
/* #ifndef APP */
display: block;
/* #endif */
color: #172640; font-size: 36rpx; line-height: 50rpx; font-weight: 800; margin-top: 24rpx; }
.lesson-detail-meta { flex-direction: row; justify-content: space-between; color: #0868f7; font-size: 21rpx; margin-top: 12rpx; }
.lesson-progress { height: 12rpx; margin-top: 22rpx; border-radius: 8rpx; background-color: #e4edf8; overflow: hidden; }
.progress-fill { width: 12%; height: 100%; border-radius: 8rpx; background-color: #0868f7; }
.lesson-intro {
/* #ifndef APP */
display: block;
/* #endif */
color: #5f6d81; font-size: 24rpx; line-height: 42rpx; margin: 26rpx 0; }
.chapter { min-height: 100rpx; padding: 16rpx 0; border-bottom: 1rpx solid #e7edf5; flex-direction: row; align-items: center; }
.chapter-index { width: 48rpx; height: 48rpx; border-radius: 16rpx; background-color: #e8f2ff; color: #0868f7; align-items: center; justify-content: center; font-size: 22rpx; font-weight: 800; margin-right: 16rpx; }
.chapter-copy { flex: 1; }
.chapter-title { color: #23324a; font-size: 25rpx; font-weight: 700; }
.chapter-desc {
/* #ifndef APP */
display: block;
/* #endif */
color: #97a3b2; font-size: 19rpx; margin-top: 7rpx; }
.start-learning { margin-top: 28rpx; }
</style>