小程序提交
This commit is contained in:
@ -1,15 +1,15 @@
|
||||
import { baseUrl } from "../../../request";
|
||||
import { baseUrl, globalImgUrl } from "../../../request";
|
||||
import { decodeBase64 } from "../../../utils/decodebase64";
|
||||
|
||||
// pages/course/courseDetail/courseDetail.js
|
||||
Page({
|
||||
data: {
|
||||
chapterList: [null, null, null,null, null, null], // 章节目录
|
||||
activeTab: 'intro', // 默认选中“课程简介”
|
||||
activeIndex: null, // 默认没有任何标题被选中
|
||||
cid: 0, // 课程ID
|
||||
courseObj: '', // 课程对象
|
||||
richText: '', // 课程概述富文本
|
||||
globalImgUrl,
|
||||
},
|
||||
|
||||
// 获取课程详情
|
||||
@ -29,7 +29,6 @@ Page({
|
||||
if (res.data.code === 1) {
|
||||
this.setData({
|
||||
courseObj: res.data.data,
|
||||
chapterList: res.data.data.courseChapters,
|
||||
richText: decodeBase64(res.data.data.detail)
|
||||
})
|
||||
}
|
||||
@ -59,6 +58,7 @@ Page({
|
||||
})
|
||||
},
|
||||
|
||||
// 好像不要了
|
||||
// 跳转申请推广页面
|
||||
gotoApplyPromotion(e) {
|
||||
const courseId = e.currentTarget.dataset.id;
|
||||
|
||||
@ -1,79 +1,36 @@
|
||||
<view class="flex-col page">
|
||||
<view class="flex-col">
|
||||
<!-- 背景图 -->
|
||||
<view class="flex-col section">
|
||||
<image class="background-image" src="https://img.picui.cn/free/2025/06/26/685cc80000461.png" />
|
||||
</view>
|
||||
|
||||
<!-- 选项卡 -->
|
||||
<view class="flex-col section_3">
|
||||
<view class="flex-row justify-center group_2">
|
||||
<text bindtap="selectTab" data-tab="intro" class="text-tab {{activeTab==='intro'?'tab-active':'tab-inactive'}}">课程简介</text>
|
||||
<text bindtap="selectTab" data-tab="catalog" class="text-tab {{activeTab==='catalog'?'tab-active':'tab-inactive'}}">课程目录</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 标题+价格 -->
|
||||
<view class="flex-col section_4">
|
||||
<view class="flex-row items-center group_4">
|
||||
<view class="shrink-0 group_5">
|
||||
<text class="text_6">{{ courseObj.originPrice }}</text>
|
||||
<text class="font_3 text_7">元券后价</text>
|
||||
</view>
|
||||
<view class="ml-4 flex-col justify-start items-start shrink-0 relative group_6">
|
||||
<text class="font_2 text text_8">{{ courseObj.discountPrice }}元</text>
|
||||
<view class="divider pos"></view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="group_4 text_9 mt-9">{{ courseObj.name }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 课程概述（仅当 activeTab==='intro'） -->
|
||||
<view wx:if="{{activeTab==='intro'}}" class="flex-col section_5">
|
||||
<view class="flex-row items-center group_7">
|
||||
<image class="image" src="./image/cal.png" />
|
||||
<text class="ml-6 font_2 text_10">课程概述</text>
|
||||
</view>
|
||||
<rich-text class="section_6" nodes="{{richText}}"></rich-text>
|
||||
</view>
|
||||
|
||||
<!-- 课程目录（仅当 activeTab==='catalog'） -->
|
||||
<view wx:if="{{activeTab==='catalog'}}" class="flex-col mt-35">
|
||||
<view class="flex-col section_7">
|
||||
<view class="flex-col list">
|
||||
<view class="flex-col list-item mt-15" wx:for="{{chapterList}}" wx:for-item="item" wx:for-index="index" wx:key="index">
|
||||
<!-- <view class="flex-col justify-start self-end text-wrapper_2">
|
||||
<text class="font_4 text_11">全集试看</text>
|
||||
</view> -->
|
||||
<view class="flex-row self-start group_8 mt-1">
|
||||
<text class="shrink-0 self-start font_5 text_12">{{ index + 1}}</text>
|
||||
<text class="ml-16 flex-1 font_2 {{activeIndex === index ? 'active-title' : ''}}" bindtap="selectCourse" data-index="{{index}}">
|
||||
{{ item.name }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="flex-row justify-between self-stretch group_9 mt-1">
|
||||
<!-- <text class="self-start font_6 text_13" style="margin-top: 10rpx;">视频课·27分59秒</text> -->
|
||||
<!-- <image class="image_2" src="./image/lock.png" /> -->
|
||||
</view>
|
||||
<view class="flex-col">
|
||||
<image class="image" src="{{ globalImgUrl + courseObj.image }}" />
|
||||
<view class="flex-col section">
|
||||
<view class="flex-row items-center group">
|
||||
<view class="shrink-0 group_2">
|
||||
<text class="text">{{ courseObj.discountPrice }}</text>
|
||||
<text class="font text_2">元券后价</text>
|
||||
</view>
|
||||
<view class="ml-4 flex-col justify-start items-start shrink-0 relative group_3">
|
||||
<text class="font text_3">{{ courseObj.originPrice }}元</text>
|
||||
<view class="divider pos"></view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="group text_4 mt-9">{{ courseObj.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-26 flex-col section_2">
|
||||
<view class="flex-row items-center group_4">
|
||||
<image class="image_2" src="./image/cal.png" />
|
||||
<text class="ml-6 font text_5">课程概述</text>
|
||||
</view>
|
||||
<rich-text class="section_3" nodes="{{ richText }}"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部固定按钮栏 -->
|
||||
<view class="flex-row items-center section_8 section_8_fixed">
|
||||
<view class="flex-col items-center shrink-0" style="margin-left: 30rpx;">
|
||||
<view class="flex-row justify-between items-center section_4 mt-37">
|
||||
<view class="flex-col items-center">
|
||||
<image class="image_3" src="./image/messge.png" />
|
||||
<text class="font_6 text_16 mt-1">咨询</text>
|
||||
<text class="text_7 mt-1">咨询</text>
|
||||
</view>
|
||||
<view class="ml-44 flex-row flex-1">
|
||||
<view class="flex-col justify-start items-center text-wrapper_3" bind:tap="gotoApplyPromotion" data-id="{{ '1' }}">
|
||||
<text class="font_7 text_14">申请推广</text>
|
||||
</view>
|
||||
<view class="flex-col justify-start items-center text-wrapper_4 ml-15" bind:tap="gotoCourseOrder" data-id="{{ '1' }}">
|
||||
<text class="font_7 text_15">立即购买</text>
|
||||
</view>
|
||||
<view class="flex-col justify-start items-center text-wrapper" bind:tap="gotoCourseOrder" data-id="{{ courseObj.id }}">
|
||||
<text class="text_6">立即购买</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -1,123 +1,43 @@
|
||||
/* pages/course/courseDetail/courseDetail.wxss */
|
||||
|
||||
/* 通用间距 */
|
||||
.mt-9 {
|
||||
margin-top: 16.88rpx;
|
||||
}
|
||||
/* .mt-35 {
|
||||
margin-top: 65.63rpx;
|
||||
} */
|
||||
.mt-15 {
|
||||
margin-top: 28.13rpx;
|
||||
}
|
||||
.mt-7 {
|
||||
margin-top: 13.13rpx;
|
||||
.mt-37 {
|
||||
margin-top: 69.38rpx;
|
||||
}
|
||||
.mt-1 {
|
||||
margin-top: 1.88rpx;
|
||||
}
|
||||
.ml-15 {
|
||||
margin-left: 28.13rpx;
|
||||
}
|
||||
|
||||
/* 背景图样式移至 WXML */
|
||||
.background-image {
|
||||
width: 100%;
|
||||
height: 300rpx; /* 给图片设置固定高度，或者你可以设置为100% */
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* 页面样式保持不变 */
|
||||
.page {
|
||||
background-color: #f6f7f9;
|
||||
padding-bottom: 100rpx;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 100%;
|
||||
padding-bottom: 100rpx; /* 为底部固定栏预留空间 */
|
||||
}
|
||||
|
||||
/* 背景图 */
|
||||
.image {
|
||||
width: 100vw;
|
||||
height: 54.75vw;
|
||||
}
|
||||
.section {
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
padding: 37.5rpx 11.25rpx 30rpx 18.75rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
/* 顶部遮罩 */
|
||||
.section_2 {
|
||||
padding: 131.25rpx 176.25rpx 101.25rpx;
|
||||
background-color: #00000063;
|
||||
backdrop-filter: blur(9.38rpx);
|
||||
}
|
||||
|
||||
/* 宽度组 */
|
||||
.group {
|
||||
width: 344.34rpx;
|
||||
}
|
||||
|
||||
/* 白色文字 */
|
||||
.font {
|
||||
font-size: 26.25rpx;
|
||||
font-family: SourceHanSansCN;
|
||||
line-height: 31.88rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 橙色按钮 */
|
||||
.text-wrapper {
|
||||
padding: 15rpx 0;
|
||||
background-color: #ff8d1a;
|
||||
border-radius: 187.5rpx;
|
||||
width: 208.13rpx;
|
||||
}
|
||||
|
||||
/* 橙色小字体 */
|
||||
.font_3 {
|
||||
font-size: 26.25rpx;
|
||||
font-family: SourceHanSansCN;
|
||||
line-height: 24.6rpx;
|
||||
color: #ff8d1a;
|
||||
}
|
||||
.text_3 {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 选项卡容器 */
|
||||
.section_3 {
|
||||
padding: 0 135rpx 7.5rpx 142.5rpx;
|
||||
background-color: #ffffff;
|
||||
border-bottom: solid 1.88rpx #9c9c9c;
|
||||
}
|
||||
.group_2 {
|
||||
padding: 22.5rpx 0 11.25rpx;
|
||||
display: flex;
|
||||
justify-content: center; /* 增加选项卡间隔 */
|
||||
}
|
||||
|
||||
/* 标题+价格 */
|
||||
.section_4 {
|
||||
padding: 37.5rpx 7.5rpx 30rpx 22.5rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.group_4 {
|
||||
padding: 0 3.75rpx;
|
||||
}
|
||||
.group_5 {
|
||||
.group_2 {
|
||||
line-height: 28.8rpx;
|
||||
height: 30.58rpx;
|
||||
}
|
||||
.text_6 {
|
||||
.text {
|
||||
color: #f84947;
|
||||
font-size: 37.5rpx;
|
||||
font-family: SourceHanSansCN;
|
||||
font-weight: 700;
|
||||
line-height: 28.8rpx;
|
||||
}
|
||||
.text_7 {
|
||||
color: #f84947;
|
||||
line-height: 24.43rpx;
|
||||
}
|
||||
.group_6 {
|
||||
.group_3 {
|
||||
margin-right: 453.75rpx;
|
||||
width: 75.02rpx;
|
||||
}
|
||||
@ -133,212 +53,78 @@
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.text_9 {
|
||||
.text_4 {
|
||||
color: #000000;
|
||||
font-size: 33.75rpx;
|
||||
font-family: SourceHanSansCN;
|
||||
line-height: 41.25rpx;
|
||||
}
|
||||
|
||||
/* 课程概述 */
|
||||
.section_5 {
|
||||
margin-top: 28.13rpx;
|
||||
.section_2 {
|
||||
padding: 0 30rpx 52.5rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.group_7 {
|
||||
.group_4 {
|
||||
padding: 26.25rpx 0;
|
||||
}
|
||||
.image {
|
||||
.image_2 {
|
||||
width: 39.38rpx;
|
||||
height: 39.38rpx;
|
||||
}
|
||||
|
||||
/* 概述内容区 */
|
||||
.section_6 {
|
||||
background-color: #ffffff00;
|
||||
height: 791.25rpx;
|
||||
/* border-left: solid 1.88rpx #000000;
|
||||
border-right: solid 1.88rpx #000000;
|
||||
border-top: solid 1.88rpx #000000;
|
||||
border-bottom: solid 1.88rpx #000000; */
|
||||
}
|
||||
|
||||
/* 目录列表 */
|
||||
.section_7 {
|
||||
padding: 31.88rpx 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.list {
|
||||
margin: 0 22.5rpx;
|
||||
}
|
||||
.group_8 {
|
||||
width: 590.81rpx;
|
||||
display: flex;
|
||||
align-items: center; /* 序号垂直居中 */
|
||||
margin-top: 3rpx !important; /* 视频标题与上方内容的间距 */
|
||||
}
|
||||
.list-item {
|
||||
padding-left: 37.5rpx;
|
||||
padding-bottom: 25.75rpx;
|
||||
background-color: #f6f7f9;
|
||||
border-radius: 10.63rpx;
|
||||
}
|
||||
.list-item:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* 全局试看按钮 */
|
||||
.text-wrapper_2 {
|
||||
padding: 3.75rpx 0;
|
||||
background-color: #ff8d1a;
|
||||
border-radius: 0rpx 9.38rpx 0rpx 9.38rpx;
|
||||
}
|
||||
.font_4 {
|
||||
font-size: 24rpx; /* 放大字体 */
|
||||
font-family: SourceHanSansCN;
|
||||
line-height: 28rpx; /* 放大行高 */
|
||||
color: #ffffff;
|
||||
}
|
||||
.text_11 {
|
||||
margin: 0 7.5rpx;
|
||||
line-height: 28rpx; /* 放大行高 */
|
||||
}
|
||||
|
||||
/* 列表文本 */
|
||||
.font_5 {
|
||||
.font {
|
||||
font-size: 26.25rpx;
|
||||
font-family: SourceHanSansCN;
|
||||
line-height: 19.24rpx;
|
||||
color: #8f8f8f;
|
||||
line-height: 25.97rpx;
|
||||
}
|
||||
.text_12 {
|
||||
margin-top: 0; /* 垂直居中序号 */
|
||||
align-self: center !important;
|
||||
padding-top: 32rpx;
|
||||
}
|
||||
.font_2 {
|
||||
font-size: 26.25rpx;
|
||||
font-family: SourceHanSansCN;
|
||||
.text_3 {
|
||||
width: 100rpx;
|
||||
color: #8c8c8c;
|
||||
line-height: 31.88rpx;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
/* 其他文本 */
|
||||
.text {
|
||||
word-break: break-all;
|
||||
}
|
||||
.text_8 {
|
||||
color: #8c8c8c;
|
||||
width: 100rpx;
|
||||
}
|
||||
.text_2 {
|
||||
color: #ff8d1a;
|
||||
color: #f84947;
|
||||
line-height: 24.43rpx;
|
||||
}
|
||||
.group_9 {
|
||||
padding-left: 41.25rpx;
|
||||
padding-right: 20.63rpx;
|
||||
.text_5 {
|
||||
color: #000000;
|
||||
font-size: 28.13rpx;
|
||||
}
|
||||
.font_6 {
|
||||
font-size: 22.5rpx;
|
||||
font-family: SourceHanSansCN;
|
||||
line-height: 19.24rpx;
|
||||
color: #8f8f8f;
|
||||
.section_3 {
|
||||
height: 791.25rpx;
|
||||
/* 以下是新增 */
|
||||
white-space: normal; /* 允许换行 */
|
||||
word-break: break-all; /* 在任意字符处断行，数字也会换行 */
|
||||
}
|
||||
.text_13 {
|
||||
line-height: 20.79rpx;
|
||||
}
|
||||
.image_2 {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
|
||||
/* 底部原有按钮组 */
|
||||
.section_8 {
|
||||
.section_4 {
|
||||
padding: 15rpx 26.25rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.image_3 {
|
||||
width: 52.5rpx;
|
||||
height: 52.5rpx;
|
||||
}
|
||||
.text_16 {
|
||||
color: #000000;
|
||||
line-height: 20.94rpx;
|
||||
}
|
||||
.text-wrapper_3 {
|
||||
padding: 22.5rpx 0;
|
||||
flex: 1 1 268.13rpx;
|
||||
background-color: #a5d63f;
|
||||
border-radius: 75rpx;
|
||||
height: 71.25rpx;
|
||||
}
|
||||
.font_7 {
|
||||
font-size: 30rpx;
|
||||
font-family: SourceHanSansCN;
|
||||
line-height: 28.8rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
.text_14 {
|
||||
line-height: 28.29rpx;
|
||||
}
|
||||
.text-wrapper_4 {
|
||||
padding: 22.5rpx 0;
|
||||
flex: 1 1 268.13rpx;
|
||||
background-color: #ff8d1a;
|
||||
border-radius: 75rpx;
|
||||
height: 71.25rpx;
|
||||
}
|
||||
.text_15 {
|
||||
line-height: 28.11rpx;
|
||||
}
|
||||
|
||||
/* 新增：选项卡文字基础样式 */
|
||||
.text-tab {
|
||||
font-size: 32rpx;
|
||||
font-family: SourceHanSansCN;
|
||||
line-height: 38rpx;
|
||||
padding-bottom: 8rpx; /* 文字与下划线之间留白 */
|
||||
margin: 0 80rpx; /* 增大间距 */
|
||||
}
|
||||
|
||||
/* 新增：选中/未选中状态 */
|
||||
.tab-active {
|
||||
color: #ff8d1a;
|
||||
border-bottom: 2rpx solid #ff8d1a;
|
||||
}
|
||||
.tab-inactive {
|
||||
color: #000000;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* 覆盖：让 .group_2 居中其子元素，增强间距控制 */
|
||||
.group_2 {
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
/* 新增：底部固定按钮栏 */
|
||||
.section_8_fixed {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
background-color: #ffffff;
|
||||
z-index: 999; /* 确保它在最上层 */
|
||||
}
|
||||
/* 禁止容器内元素换行 */
|
||||
.no-wrap {
|
||||
flex-wrap: nowrap !important;
|
||||
|
||||
.image_3 {
|
||||
width: 52.5rpx;
|
||||
height: 52.5rpx;
|
||||
}
|
||||
/* 强制所有 text 不换行 */
|
||||
.no-wrap text {
|
||||
white-space: nowrap;
|
||||
.text_7 {
|
||||
color: #000000;
|
||||
font-size: 22.5rpx;
|
||||
font-family: SourceHanSansCN;
|
||||
line-height: 20.94rpx;
|
||||
}
|
||||
.mx-15 {
|
||||
margin-left: 15rpx;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
/* 课程目录的点击状态 */
|
||||
.active-title {
|
||||
color: #ff8d1a; /* 点击后的颜色：橙色 */
|
||||
.text-wrapper {
|
||||
padding: 22.5rpx 0 18.75rpx;
|
||||
background-color: #ff8d1a;
|
||||
border-radius: 75rpx;
|
||||
width: 268.13rpx;
|
||||
height: 71.25rpx;
|
||||
}
|
||||
.text_6 {
|
||||
color: #ffffff;
|
||||
font-size: 30rpx;
|
||||
font-family: SourceHanSansCN;
|
||||
line-height: 28.11rpx;
|
||||
}
|
||||
Reference in New Issue
Block a user