695 lines
13 KiB
Vue
695 lines
13 KiB
Vue
<template>
|
||
<view class="course-detail-page">
|
||
<view class="safe-top"></view>
|
||
<scroll-view scroll-y class="page-scroll">
|
||
<view class="page-body">
|
||
<view v-if="showVideoPlayer" class="video-wrap">
|
||
<video
|
||
id="course-video-player"
|
||
class="course-video"
|
||
:src="currentVideo.url"
|
||
:poster="banner.poster"
|
||
controls
|
||
autoplay
|
||
show-center-play-btn
|
||
object-fit="cover"
|
||
></video>
|
||
<view class="video-close" @click="closeVideo">
|
||
<uni-icons type="closeempty" color="#ffffff" :size="18" />
|
||
</view>
|
||
<view class="video-title">正在播放：{{ currentVideo.title }}</view>
|
||
</view>
|
||
|
||
<view v-else class="banner-wrap">
|
||
<view class="banner-head">
|
||
<text class="brand">绵若启航</text>
|
||
<view class="teacher-mini">
|
||
<view class="teacher-avatar">杨</view>
|
||
<view>
|
||
<text class="mini-name">杨导</text>
|
||
<text class="mini-role">就业规划师</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<text class="banner-title">义务/直招/军校 规划提升课</text>
|
||
<text class="banner-sub">【实用技能+实战攻略】</text>
|
||
<view class="banner-bottom">
|
||
<view class="dots">
|
||
<view v-for="i in 3" :key="i" class="dot" :class="{ active: i === 1 }"></view>
|
||
</view>
|
||
<view class="qr-tag">二维码</view>
|
||
</view>
|
||
<text class="banner-note">家长端：解陪伴难题，当坚实后盾；青年端：全阶段覆盖，促职业进阶</text>
|
||
</view>
|
||
|
||
<view class="info-card">
|
||
<view class="price-row">
|
||
<view class="price-left">
|
||
<text class="price-tag">优惠价</text>
|
||
<text class="price">¥99.00</text>
|
||
<text class="origin">¥999.00</text>
|
||
</view>
|
||
</view>
|
||
<view class="title-row">
|
||
<text class="course-title">家长篇 —— 参军子女成长护航指南</text>
|
||
<text class="lesson-count">有5节</text>
|
||
</view>
|
||
<view class="summary-box">
|
||
聚焦亲子沟通、子女规划、部队对接等关键痛点，提供可执行实操路径，兼顾效果与合规边界。
|
||
</view>
|
||
<view class="stats-box">
|
||
<view class="stats-item">
|
||
<text class="stats-label">现有课程</text>
|
||
<text class="stats-value">5</text>
|
||
</view>
|
||
<view class="stats-line"></view>
|
||
<view class="stats-item">
|
||
<text class="stats-label">有5人学习</text>
|
||
<text class="stats-value">5</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="teacher-entry" @click="openTeacher">
|
||
<view class="entry-left">
|
||
<view class="entry-avatar">杨</view>
|
||
<view>
|
||
<text class="entry-name">规划杨 老师</text>
|
||
<text class="entry-year">15年</text>
|
||
</view>
|
||
</view>
|
||
<uni-icons type="arrow-right" color="#8a93a3" :size="15" />
|
||
</view>
|
||
|
||
<view class="tab-area">
|
||
<view class="tab-head">
|
||
<view
|
||
v-for="tab in tabs"
|
||
:key="tab.key"
|
||
class="tab-item"
|
||
:class="{ active: activeTab === tab.key }"
|
||
@click="activeTab = tab.key"
|
||
>
|
||
{{ tab.label }}
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="activeTab === 'catalog'" class="catalog-list">
|
||
<view
|
||
v-for="(item, index) in chapters"
|
||
:key="item.id"
|
||
class="catalog-item"
|
||
@click="playChapter(item)"
|
||
>
|
||
<view class="catalog-main">
|
||
<text class="video-tag">视频</text>
|
||
<text class="catalog-title">{{ index + 1 }}. {{ item.title }}</text>
|
||
</view>
|
||
<view class="catalog-sub">
|
||
<text>时长 --:-- | 播放 -- 次</text>
|
||
</view>
|
||
<uni-icons type="locked-filled" color="#c3cad6" :size="16" />
|
||
</view>
|
||
</view>
|
||
|
||
<view v-else-if="activeTab === 'detail'" class="text-panel">
|
||
课程聚焦家长在子女参军过程中的核心需求，通过5节针对性课程，围绕亲子沟通、发展路径、意愿引导、部队对接、合规拜访等维度，系统解决家长常见困惑，帮助家长建立长期可持续的支持方式。
|
||
</view>
|
||
|
||
<view v-else class="review-panel">
|
||
<text class="empty-comment">暂无评论！</text>
|
||
<view class="comment-box">
|
||
<input class="comment-input" placeholder="请输入您的观点" />
|
||
<uni-icons type="star-filled" color="#ffb84d" :size="18" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="bottom-holder"></view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<view class="action-bar">
|
||
<view class="action-left">
|
||
<view class="quick-item" @click="goHome">
|
||
<uni-icons type="home-filled" color="#6e7a8c" :size="20" />
|
||
<text>首页</text>
|
||
</view>
|
||
<view class="quick-item" @click="goProfile">
|
||
<uni-icons type="person-filled" color="#6e7a8c" :size="20" />
|
||
<text>个人中心</text>
|
||
</view>
|
||
</view>
|
||
<view class="buy-btn" @click="onBuy">立即购买</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
const demoVideo = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
courseId: 'parent-guard',
|
||
activeTab: 'catalog',
|
||
tabs: [
|
||
{ key: 'catalog', label: '课程目录' },
|
||
{ key: 'detail', label: '课程详情' },
|
||
{ key: 'review', label: '学员评价' }
|
||
],
|
||
banner: {
|
||
poster: ''
|
||
},
|
||
showVideoPlayer: false,
|
||
currentVideo: {
|
||
title: '',
|
||
url: demoVideo
|
||
},
|
||
chapters: [
|
||
{ id: 'c1', title: '亲子沟通与参军意愿引导', url: demoVideo },
|
||
{ id: 'c2', title: '子女发展路径与目标拆解', url: demoVideo },
|
||
{ id: 'c3', title: '部队对接流程及关键节点', url: demoVideo },
|
||
{ id: 'c4', title: '家长陪伴与情绪管理实操', url: demoVideo },
|
||
{ id: 'c5', title: '合规沟通边界与风险规避', url: demoVideo }
|
||
]
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
if (options && options.courseId) {
|
||
this.courseId = options.courseId;
|
||
}
|
||
},
|
||
methods: {
|
||
playChapter(item) {
|
||
this.currentVideo = {
|
||
title: item.title,
|
||
url: item.url
|
||
};
|
||
this.showVideoPlayer = true;
|
||
},
|
||
closeVideo() {
|
||
this.showVideoPlayer = false;
|
||
},
|
||
openTeacher() {
|
||
uni.navigateTo({
|
||
url: '/pages/military/teacher-detail/teacher-detail'
|
||
});
|
||
},
|
||
goHome() {
|
||
uni.switchTab({
|
||
url: '/pages/military/home/home'
|
||
});
|
||
},
|
||
goProfile() {
|
||
uni.switchTab({
|
||
url: '/pages/military/profile/profile'
|
||
});
|
||
},
|
||
onBuy() {
|
||
uni.showToast({
|
||
title: '请先完成支付流程接入',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.course-detail-page {
|
||
min-height: 100vh;
|
||
background: #f4f5f8;
|
||
}
|
||
|
||
.safe-top {
|
||
height: var(--status-bar-height);
|
||
}
|
||
|
||
.page-scroll {
|
||
height: 100vh;
|
||
}
|
||
|
||
.page-body {
|
||
padding: 0 24rpx;
|
||
}
|
||
|
||
.banner-wrap {
|
||
margin-top: 14rpx;
|
||
padding: 22rpx;
|
||
border-radius: 24rpx;
|
||
background: linear-gradient(135deg, #d24141 0%, #a71e1e 100%);
|
||
color: #ffffff;
|
||
}
|
||
|
||
.banner-head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.brand {
|
||
font-size: 24rpx;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.teacher-mini {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
}
|
||
|
||
.teacher-avatar {
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
border-radius: 50%;
|
||
background: rgba(255, 255, 255, 0.22);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24rpx;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.mini-name {
|
||
display: block;
|
||
font-size: 22rpx;
|
||
}
|
||
|
||
.mini-role {
|
||
display: block;
|
||
font-size: 20rpx;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.banner-title {
|
||
display: block;
|
||
margin-top: 20rpx;
|
||
font-size: 40rpx;
|
||
font-weight: 700;
|
||
line-height: 1.25;
|
||
}
|
||
|
||
.banner-sub {
|
||
display: block;
|
||
margin-top: 10rpx;
|
||
font-size: 24rpx;
|
||
opacity: 0.95;
|
||
}
|
||
|
||
.banner-bottom {
|
||
margin-top: 18rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.dots {
|
||
display: flex;
|
||
gap: 10rpx;
|
||
}
|
||
|
||
.dot {
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
border-radius: 50%;
|
||
background: rgba(255, 255, 255, 0.45);
|
||
}
|
||
|
||
.dot.active {
|
||
background: #ffffff;
|
||
}
|
||
|
||
.qr-tag {
|
||
width: 86rpx;
|
||
height: 86rpx;
|
||
border-radius: 12rpx;
|
||
background: #ffffff;
|
||
color: #ad1f1f;
|
||
font-size: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.banner-note {
|
||
display: block;
|
||
margin-top: 14rpx;
|
||
font-size: 20rpx;
|
||
line-height: 1.5;
|
||
opacity: 0.92;
|
||
}
|
||
|
||
.video-wrap {
|
||
margin-top: 14rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.course-video {
|
||
width: 100%;
|
||
height: 380rpx;
|
||
border-radius: 20rpx;
|
||
background: #000;
|
||
}
|
||
|
||
.video-close {
|
||
position: absolute;
|
||
top: 12rpx;
|
||
right: 12rpx;
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
border-radius: 50%;
|
||
background: rgba(0, 0, 0, 0.45);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.video-title {
|
||
position: absolute;
|
||
left: 14rpx;
|
||
bottom: 12rpx;
|
||
padding: 6rpx 12rpx;
|
||
border-radius: 10rpx;
|
||
font-size: 20rpx;
|
||
color: #fff;
|
||
background: rgba(0, 0, 0, 0.45);
|
||
}
|
||
|
||
.info-card {
|
||
margin-top: 18rpx;
|
||
padding: 20rpx;
|
||
border-radius: 20rpx;
|
||
background: #ffffff;
|
||
}
|
||
|
||
.price-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.price-left {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 12rpx;
|
||
}
|
||
|
||
.price-tag {
|
||
padding: 4rpx 10rpx;
|
||
border-radius: 8rpx;
|
||
font-size: 18rpx;
|
||
color: #ffffff;
|
||
background: #e53b3b;
|
||
}
|
||
|
||
.price {
|
||
font-size: 40rpx;
|
||
font-weight: 700;
|
||
color: #e53b3b;
|
||
}
|
||
|
||
.origin {
|
||
font-size: 22rpx;
|
||
color: #a7afbc;
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
.title-row {
|
||
margin-top: 14rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.course-title {
|
||
flex: 1;
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
color: #27364c;
|
||
}
|
||
|
||
.lesson-count {
|
||
font-size: 22rpx;
|
||
color: #6c7788;
|
||
writing-mode: vertical-rl;
|
||
letter-spacing: 4rpx;
|
||
}
|
||
|
||
.summary-box {
|
||
margin-top: 14rpx;
|
||
padding: 14rpx;
|
||
border-radius: 12rpx;
|
||
background: #eef5ff;
|
||
font-size: 23rpx;
|
||
line-height: 1.6;
|
||
color: #5a6780;
|
||
}
|
||
|
||
.stats-box {
|
||
margin-top: 14rpx;
|
||
height: 98rpx;
|
||
border-radius: 14rpx;
|
||
background: #f7f9fd;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.stats-item {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.stats-label {
|
||
font-size: 22rpx;
|
||
color: #7b8798;
|
||
}
|
||
|
||
.stats-value {
|
||
margin-top: 6rpx;
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
color: #25354c;
|
||
}
|
||
|
||
.stats-line {
|
||
width: 1px;
|
||
height: 54rpx;
|
||
background: #d9e1ee;
|
||
}
|
||
|
||
.teacher-entry {
|
||
margin-top: 14rpx;
|
||
padding: 18rpx;
|
||
border-radius: 16rpx;
|
||
background: #ffffff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.entry-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
}
|
||
|
||
.entry-avatar {
|
||
width: 62rpx;
|
||
height: 62rpx;
|
||
border-radius: 50%;
|
||
background: #d83737;
|
||
color: #fff;
|
||
font-size: 26rpx;
|
||
font-weight: 700;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.entry-name {
|
||
display: block;
|
||
font-size: 27rpx;
|
||
font-weight: 700;
|
||
color: #2a3950;
|
||
}
|
||
|
||
.entry-year {
|
||
display: inline-flex;
|
||
margin-top: 8rpx;
|
||
padding: 2rpx 10rpx;
|
||
border-radius: 999rpx;
|
||
font-size: 20rpx;
|
||
color: #d54242;
|
||
background: #ffecec;
|
||
}
|
||
|
||
.tab-area {
|
||
margin-top: 16rpx;
|
||
border-radius: 18rpx;
|
||
background: #ffffff;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.tab-head {
|
||
display: flex;
|
||
padding: 0 14rpx;
|
||
border-bottom: 1px solid #eef2f8;
|
||
}
|
||
|
||
.tab-item {
|
||
position: relative;
|
||
margin-right: 34rpx;
|
||
height: 84rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
color: #6b768a;
|
||
}
|
||
|
||
.tab-item.active {
|
||
color: #d53a3a;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.tab-item.active::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 12rpx;
|
||
height: 6rpx;
|
||
border-radius: 6rpx;
|
||
background: #d53a3a;
|
||
}
|
||
|
||
.catalog-list,
|
||
.text-panel,
|
||
.review-panel {
|
||
padding: 14rpx;
|
||
}
|
||
|
||
.catalog-item {
|
||
padding: 14rpx 8rpx;
|
||
border-bottom: 1px solid #eef2f8;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.catalog-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.catalog-main {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
max-width: 82%;
|
||
}
|
||
|
||
.video-tag {
|
||
padding: 2rpx 8rpx;
|
||
border-radius: 8rpx;
|
||
font-size: 18rpx;
|
||
color: #ffffff;
|
||
background: #4a9cf6;
|
||
}
|
||
|
||
.catalog-title {
|
||
font-size: 25rpx;
|
||
color: #2f3f56;
|
||
}
|
||
|
||
.catalog-sub {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: -24rpx;
|
||
font-size: 19rpx;
|
||
color: #9ca6b6;
|
||
}
|
||
|
||
.catalog-item {
|
||
position: relative;
|
||
padding-bottom: 34rpx;
|
||
}
|
||
|
||
.text-panel {
|
||
font-size: 25rpx;
|
||
line-height: 1.7;
|
||
color: #4c5a72;
|
||
}
|
||
|
||
.empty-comment {
|
||
display: block;
|
||
font-size: 26rpx;
|
||
color: #7a8598;
|
||
}
|
||
|
||
.comment-box {
|
||
margin-top: 20rpx;
|
||
height: 80rpx;
|
||
padding: 0 16rpx;
|
||
border-radius: 12rpx;
|
||
border: 1px solid #dbe3ef;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.comment-input {
|
||
flex: 1;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.bottom-holder {
|
||
height: 160rpx;
|
||
}
|
||
|
||
.action-bar {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
height: calc(100rpx + env(safe-area-inset-bottom));
|
||
padding: 0 24rpx env(safe-area-inset-bottom);
|
||
background: #ffffff;
|
||
border-top: 1px solid #e8edf6;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
z-index: 99;
|
||
}
|
||
|
||
.action-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.quick-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 20rpx;
|
||
color: #6e7a8c;
|
||
}
|
||
|
||
.buy-btn {
|
||
height: 72rpx;
|
||
padding: 0 54rpx;
|
||
border-radius: 16rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
color: #ffffff;
|
||
background: #2ea35b;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
</style>
|