380 lines
6.9 KiB
Vue
380 lines
6.9 KiB
Vue
<template>
|
|
<view class="course-page">
|
|
<view class="page-content page-fade" :class="{ 'enter-active': enterActive }">
|
|
<view class="safe-top"></view>
|
|
<view class="page-body">
|
|
<text class="page-title">课程分类</text>
|
|
|
|
<view class="search-row">
|
|
<view class="search-box" @click="onTap('搜索关键词')">
|
|
<uni-icons type="search" color="#8a94a6" :size="16" />
|
|
<text class="search-placeholder">搜索关键词</text>
|
|
</view>
|
|
<view class="search-btn" @click="onTap('搜索')">搜索</view>
|
|
</view>
|
|
|
|
<view class="sort-row">
|
|
<view
|
|
v-for="(item, index) in sortTabs"
|
|
:key="item"
|
|
class="sort-item"
|
|
:class="{ active: selectedSort === index }"
|
|
@click="selectedSort = index"
|
|
>
|
|
{{ item }}
|
|
</view>
|
|
</view>
|
|
|
|
<scroll-view scroll-x class="category-scroll" show-scrollbar="false">
|
|
<view class="category-wrap">
|
|
<view
|
|
v-for="(item, index) in categories"
|
|
:key="item"
|
|
class="category-item"
|
|
:class="{ selected: selectedCategory === index }"
|
|
@click="selectedCategory = index"
|
|
>
|
|
{{ item }}
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<view class="buy-row">
|
|
<view
|
|
v-for="(item, index) in buyTabs"
|
|
:key="item"
|
|
class="buy-item"
|
|
:class="{ active: selectedBuy === index }"
|
|
@click="selectedBuy = index"
|
|
>
|
|
{{ item }}
|
|
</view>
|
|
</view>
|
|
|
|
<text class="count-text">共2个内容</text>
|
|
|
|
<view class="course-list">
|
|
<view v-for="item in courses" :key="item.title" class="course-card" @click="openCourse(item)">
|
|
<view class="cover-block">
|
|
<text class="cover-label">{{ item.coverLabel }}</text>
|
|
<view class="qr-box">QR</view>
|
|
<text class="vip-tag">VIP专享</text>
|
|
</view>
|
|
<view class="course-info">
|
|
<text class="course-title">{{ item.title }}</text>
|
|
<text class="teacher">规划杨·15年</text>
|
|
<view class="rank-tag">口碑总榜第1名</view>
|
|
<view class="price-row">
|
|
<text class="price">¥99.00</text>
|
|
<view class="trial-btn" @click.stop="openCourse(item)">
|
|
<uni-icons type="videocam-filled" color="#ffffff" :size="12" />
|
|
<text>试听</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="bottom-space"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
enterActive: false,
|
|
sortTabs: ['最热', '最新', '低价优先', '高价优先'],
|
|
buyTabs: ['全部', '未购买', '已购买'],
|
|
categories: [
|
|
'全部分类',
|
|
'青年篇：入伍成长进阶实战课',
|
|
'职场',
|
|
'年度日更',
|
|
'央国企',
|
|
'家长篇：入伍子女成长护航课',
|
|
'测试'
|
|
],
|
|
selectedSort: 0,
|
|
selectedCategory: 0,
|
|
selectedBuy: 0,
|
|
courses: [
|
|
{
|
|
id: 'parent-guard',
|
|
title: '《家长篇 —— 参军子女成长护航指南》',
|
|
coverLabel: '家长篇\n成长护航'
|
|
},
|
|
{
|
|
id: 'youth-growth',
|
|
title: '《青年篇 —— 军旅成长进阶实战手册》',
|
|
coverLabel: '青年篇\n进阶实战'
|
|
}
|
|
]
|
|
};
|
|
},
|
|
onShow() {
|
|
this.playEnter();
|
|
},
|
|
methods: {
|
|
playEnter() {
|
|
this.enterActive = false;
|
|
setTimeout(() => {
|
|
this.enterActive = true;
|
|
}, 20);
|
|
},
|
|
onTap(label) {
|
|
uni.showToast({
|
|
title: `${label} 可点击`,
|
|
icon: 'none'
|
|
});
|
|
},
|
|
openCourse(course) {
|
|
const courseId = course && course.id ? course.id : 'parent-guard';
|
|
uni.navigateTo({
|
|
url: `/pages/military/course-detail/course-detail?courseId=${courseId}`
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.course-page {
|
|
min-height: 100vh;
|
|
background: #f7f8fb;
|
|
}
|
|
|
|
.page-content {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.page-fade {
|
|
opacity: 0;
|
|
transform: translateY(8rpx);
|
|
transition: opacity 0.3s ease, transform 0.3s ease;
|
|
}
|
|
|
|
.page-fade.enter-active {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.safe-top {
|
|
height: calc(var(--status-bar-height) + 16rpx);
|
|
}
|
|
|
|
.page-body {
|
|
padding: 0 24rpx;
|
|
}
|
|
|
|
.page-title {
|
|
display: block;
|
|
text-align: center;
|
|
font-size: 38rpx;
|
|
font-weight: 700;
|
|
color: #28364d;
|
|
}
|
|
|
|
.search-row {
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.search-box {
|
|
flex: 1;
|
|
height: 74rpx;
|
|
padding: 0 22rpx;
|
|
border-radius: 16rpx;
|
|
background: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.search-placeholder {
|
|
margin-left: 10rpx;
|
|
font-size: 24rpx;
|
|
color: #8a94a6;
|
|
}
|
|
|
|
.search-btn {
|
|
margin-left: 14rpx;
|
|
height: 74rpx;
|
|
padding: 0 30rpx;
|
|
border-radius: 16rpx;
|
|
font-size: 26rpx;
|
|
color: #ffffff;
|
|
font-weight: 600;
|
|
background: #ff8a33;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.sort-row,
|
|
.buy-row {
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 34rpx;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sort-item,
|
|
.buy-item {
|
|
font-size: 25rpx;
|
|
color: #8994a7;
|
|
padding-bottom: 10rpx;
|
|
border-bottom: 4rpx solid transparent;
|
|
}
|
|
|
|
.sort-item.active,
|
|
.buy-item.active {
|
|
color: #ff8a33;
|
|
font-weight: 700;
|
|
border-color: #ff8a33;
|
|
}
|
|
|
|
.category-scroll {
|
|
margin-top: 18rpx;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.category-wrap {
|
|
display: inline-flex;
|
|
gap: 16rpx;
|
|
padding-bottom: 4rpx;
|
|
}
|
|
|
|
.category-item {
|
|
padding: 12rpx 18rpx;
|
|
border-radius: 26rpx;
|
|
font-size: 22rpx;
|
|
background: #f0f2f6;
|
|
color: #4f5d74;
|
|
}
|
|
|
|
.category-item.selected {
|
|
background: #ff8a33;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.count-text {
|
|
display: block;
|
|
margin-top: 18rpx;
|
|
font-size: 24rpx;
|
|
color: #7a8697;
|
|
}
|
|
|
|
.course-list {
|
|
margin-top: 12rpx;
|
|
}
|
|
|
|
.course-card {
|
|
margin-bottom: 18rpx;
|
|
padding: 18rpx;
|
|
border-radius: 22rpx;
|
|
background: #ffffff;
|
|
display: flex;
|
|
box-shadow: 0 8rpx 20rpx rgba(35, 48, 70, 0.08);
|
|
}
|
|
|
|
.cover-block {
|
|
width: 200rpx;
|
|
border-radius: 16rpx;
|
|
padding: 14rpx;
|
|
background: linear-gradient(145deg, #f06a64 0%, #de3f3f 100%);
|
|
color: #ffffff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.cover-label {
|
|
font-size: 24rpx;
|
|
line-height: 1.4;
|
|
white-space: pre-line;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.qr-box {
|
|
margin-top: 10rpx;
|
|
width: 58rpx;
|
|
height: 58rpx;
|
|
border-radius: 10rpx;
|
|
background: #ffffff;
|
|
color: #d44545;
|
|
font-size: 18rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.vip-tag {
|
|
margin-top: 10rpx;
|
|
font-size: 20rpx;
|
|
color: #fff6cc;
|
|
}
|
|
|
|
.course-info {
|
|
margin-left: 18rpx;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.course-title {
|
|
font-size: 28rpx;
|
|
line-height: 1.4;
|
|
font-weight: 700;
|
|
color: #2b3950;
|
|
}
|
|
|
|
.teacher {
|
|
margin-top: 10rpx;
|
|
font-size: 22rpx;
|
|
color: #778399;
|
|
}
|
|
|
|
.rank-tag {
|
|
margin-top: 10rpx;
|
|
padding: 6rpx 12rpx;
|
|
border-radius: 999rpx;
|
|
font-size: 20rpx;
|
|
align-self: flex-start;
|
|
color: #2f8d4f;
|
|
background: #e6f6eb;
|
|
}
|
|
|
|
.price-row {
|
|
margin-top: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.price {
|
|
font-size: 36rpx;
|
|
font-weight: 700;
|
|
color: #f05d31;
|
|
}
|
|
|
|
.trial-btn {
|
|
height: 56rpx;
|
|
padding: 0 20rpx;
|
|
border-radius: 14rpx;
|
|
background: #ff8a33;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
color: #ffffff;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.bottom-space {
|
|
height: 180rpx;
|
|
}
|
|
</style>
|