admin/qingcheng-xiaochengxu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

commission--yt-commit

Browse Source
This commit is contained in:
yuanteng
2025-06-25 15:44:12 +08:00
parent 0e20be0425
commit 1a8bcbec9f
26 changed files with 1381 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
pages/course/courseDetail/courseDetail.js Normal file
View File

@ -0,0 +1,58 @@
// pages/course/courseDetail/courseDetail.js
Page({
data: {
items: [null, null, null,null, null, null],
activeTab: 'intro', // 默认选中“课程简介”
activeIndex: null, // 默认没有任何标题被选中
},
/** 切换选项卡 */
selectTab(e) {
const tab = e.currentTarget.dataset.tab;
this.setData({ activeTab: tab });
},
/** 选择课程标题 */
selectCourse(e) {
const index = e.currentTarget.dataset.index;
this.setData({
activeIndex: index // 设置选中的课程标题索引
});
},
// 跳转课程订单创建页面
gotoCourseOrder(e) {
const courseId = e.currentTarget.dataset.id;
wx.navigateTo({
url: `/pages/course/createCourseOrder/createCourseOrder?id=${courseId}`,
})
},
// 跳转申请推广页面
gotoApplyPromotion(e) {
const courseId = e.currentTarget.dataset.id;
wx.navigateTo({
url: `/pages/course/applyPromotion/applyPromotion?id=${courseId}`,
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {},
onReady() {},
onShow() {},
onHide() {},
onUnload() {},
onPullDownRefresh() {},
onReachBottom() {},
onShareAppMessage() {}
});

3
pages/course/courseDetail/courseDetail.json Normal file
View File

@ -0,0 +1,3 @@
{
"usingComponents": {}
}

89
pages/course/courseDetail/courseDetail.wxml Normal file
View File

@ -0,0 +1,89 @@
<view class="flex-col page">
<view class="flex-col">
<!-- 背景 + 支付信息 -->
<view class="flex-col justify-start section">
<view class="flex-col section_2">
<view class="flex-row items-baseline self-start no-wrap">
<text class="shrink-0 font">券后支付</text>
<text class="shrink-0 font_2 text text_2 mx-15">168元</text>
<text class="flex-1 font">即可观看所有视频</text>
</view>
<view class="mt-18 flex-col justify-start items-center self-center text-wrapper" bind:tap="gotoCourseOrder" data-id="{{ '1' }}">
<text class="font_3 text_3">立即购买</text>
</view>
</view>
</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">168</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">268元</text>
<view class="divider pos"></view>
</view>
</view>
<text class="group_4 text_9 mt-9">【早鸟42折】掌握CAD技能+++++++实战工作训练营</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>
<view class="section_6"></view>
</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="{{items}}" 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}}">
推荐片：带你透视中国基层干部的生态图景推荐片：带你透视中国基层干部的生态图景
</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>
</view>
</view>
</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;">
<image class="image_3" src="./image/messge.png" />
<text class="font_6 text_16 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>
</view>
</view>

336
pages/course/courseDetail/courseDetail.wxss Normal file
View File

@ -0,0 +1,336 @@
/* 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-1 {
margin-top: 1.88rpx;
}
.ml-15 {
margin-left: 28.13rpx;
}
/* 页面容器 */
.page {
background-color: #f6f7f9;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
padding-bottom: 100rpx; /* 为底部固定栏预留空间 */
}
/* 背景图 */
.section {
background-image: url('https://ide.code.fun/api/image?token=6858ee4b4ae84d0012334127&name=1f211c9a259577e8af923158ce6e4ab6.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
/* 顶部遮罩 */
.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 {
line-height: 28.8rpx;
height: 30.58rpx;
}
.text_6 {
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 {
margin-right: 453.75rpx;
width: 75.02rpx;
}
.divider {
background-color: #8c8c8c;
width: 75.02rpx;
height: 1.88rpx;
}
.pos {
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.text_9 {
color: #000000;
font-size: 33.75rpx;
font-family: SourceHanSansCN;
line-height: 41.25rpx;
}
/* 课程概述 */
.section_5 {
margin-top: 28.13rpx;
padding: 0 30rpx 52.5rpx;
background-color: #ffffff;
}
.group_7 {
padding: 26.25rpx 0;
}
.image {
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: 18.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-size: 26.25rpx;
font-family: SourceHanSansCN;
line-height: 19.24rpx;
color: #8f8f8f;
}
.text_12 {
margin-top: 0; /* 垂直居中序号 */
align-self: center !important;
}
.font_2 {
font-size: 26.25rpx;
font-family: SourceHanSansCN;
line-height: 31.88rpx;
color: #000000;
}
/* 其他文本 */
.text {
word-break: break-all;
}
.text_8 {
color: #8c8c8c;
}
.text_2 {
color: #ff8d1a;
}
.group_9 {
padding-left: 41.25rpx;
padding-right: 20.63rpx;
}
.font_6 {
font-size: 22.5rpx;
font-family: SourceHanSansCN;
line-height: 19.24rpx;
color: #8f8f8f;
}
.text_13 {
line-height: 20.79rpx;
}
.image_2 {
width: 30rpx;
height: 30rpx;
}
/* 底部原有按钮组 */
.section_8 {
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;
}
/* 禁止容器内元素换行 */
.no-wrap {
flex-wrap: nowrap !important;
}
/* 强制所有 text 不换行 */
.no-wrap text {
white-space: nowrap;
}
.mx-15 {
margin-left: 15rpx;
margin-right: 15rpx;
}
/* 课程目录的点击状态 */
.active-title {
color: #ff8d1a; /* 点击后的颜色：橙色 */
}

BIN
pages/course/courseDetail/image/cal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 753 B

BIN
pages/course/courseDetail/image/lock.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 517 B

BIN
pages/course/courseDetail/image/messge.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB