29 lines
3.7 KiB
Plaintext
29 lines
3.7 KiB
Plaintext
|
<template>
|
||
|
|
<view class="page">
|
||
|
|
<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>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="uts">
|
||
|
|
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 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 (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; }
|
||
|
|
</style>
|