hujun
b0ee4f9d7e
1. 新增layout.uts统一管理页面尺寸与安全区计算 2. 修正图片资源路径到static/mobile目录 3. 调整App.vue与AppIcon组件样式适配多端 4. 为微信小程序配置打包忽略规则减少包体积 5. 修复API请求错误抛出类型，完善类型定义 6. 补充README文档说明项目运行与维护规范 7. 优化多个页面的样式与生命周期逻辑
56 lines
3.9 KiB
Plaintext
56 lines
3.9 KiB
Plaintext
<template>
|
|
<view class="page" :style="pageStyle()">
|
|
<AppHeader title="课程详情" />
|
|
<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/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/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 { }
|
|
.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>
|