434 lines
11 KiB
Vue
434 lines
11 KiB
Vue
<template>
|
||
<BasicLayout>
|
||
<view class="p-15">
|
||
<!-- 顶部蓝色背景横幅 -->
|
||
<view class="banner-section">
|
||
<view class="banner-placeholder">
|
||
<view class="banner-content">
|
||
<text class="banner-title">兴趣课程</text>
|
||
<text class="banner-school">泸州市实验小学城西学校</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 课程类型选项卡 -->
|
||
<view class="my-course-section">
|
||
<view class="section-title">
|
||
<u-icon name="calendar" size="18" color="#1976d2"></u-icon>
|
||
<text class="title-text">我的课程</text>
|
||
</view>
|
||
|
||
<view class="tabs-container">
|
||
<view
|
||
class="tab-item"
|
||
:class="{ 'active': activeTab === 'basketball' }"
|
||
@click="switchTab('basketball')"
|
||
>
|
||
<text>篮球</text>
|
||
</view>
|
||
<view
|
||
class="tab-item"
|
||
:class="{ 'active': activeTab === 'football' }"
|
||
@click="switchTab('football')"
|
||
>
|
||
<text>足球</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 篮球课程信息卡片 -->
|
||
<view class="course-card" v-if="activeTab === 'basketball'">
|
||
<view class="course-image-placeholder"></view>
|
||
<view class="course-info">
|
||
<text class="course-name">篮球</text>
|
||
<view class="course-detail">
|
||
<text class="detail-label">开课老师：</text>
|
||
<text class="detail-value">叶老师</text>
|
||
</view>
|
||
<view class="course-detail">
|
||
<text class="detail-label">上课地点：</text>
|
||
<text class="detail-value">教学楼3楼</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 足球课程信息卡片 -->
|
||
<view class="course-card" v-if="activeTab === 'football'">
|
||
<view class="course-image-placeholder"></view>
|
||
<view class="course-info">
|
||
<text class="course-name">足球</text>
|
||
<view class="course-detail">
|
||
<text class="detail-label">开课老师：</text>
|
||
<text class="detail-value">王老师</text>
|
||
</view>
|
||
<view class="course-detail">
|
||
<text class="detail-label">上课地点：</text>
|
||
<text class="detail-value">操场</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 教学计划 -->
|
||
<view class="teaching-plan-section">
|
||
<view class="section-title-bar">
|
||
<text class="title-text">教学计划</text>
|
||
</view>
|
||
|
||
<!-- 篮球教学计划 -->
|
||
<view class="plan-content" v-if="activeTab === 'basketball'">
|
||
<view class="plan-item">
|
||
<text class="plan-phase">第一阶段：</text>
|
||
<text class="plan-desc">了解机器人的组成，知道每个零件的名称及用途，认识机器人的结构。</text>
|
||
</view>
|
||
|
||
<view class="plan-item">
|
||
<text class="plan-phase">第二阶段：</text>
|
||
<text class="plan-desc">在老师的引导下，分组搭建机器人，注意引导幼儿理解机器人的数据线连接和遥控器方向的关系。</text>
|
||
</view>
|
||
|
||
<view class="plan-item">
|
||
<text class="plan-phase">第三阶段：</text>
|
||
<text class="plan-desc">学会操控机器人的移动方向，并练习把魔方根据要求推到指定位置。</text>
|
||
</view>
|
||
|
||
<view class="plan-item">
|
||
<text class="plan-phase">第四阶段：</text>
|
||
<text class="plan-desc">组织幼儿参加创客机器人比赛。</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 足球教学计划 -->
|
||
<view class="plan-content" v-if="activeTab === 'football'">
|
||
<view class="plan-item">
|
||
<text class="plan-phase">第一阶段：</text>
|
||
<text class="plan-desc">基础训练，包括传球、控球和基本规则学习。</text>
|
||
</view>
|
||
|
||
<view class="plan-item">
|
||
<text class="plan-phase">第二阶段：</text>
|
||
<text class="plan-desc">进阶技巧学习，包括带球跑动、射门和防守基础。</text>
|
||
</view>
|
||
|
||
<view class="plan-item">
|
||
<text class="plan-phase">第三阶段：</text>
|
||
<text class="plan-desc">团队配合训练，学习简单的战术配合和位置意识。</text>
|
||
</view>
|
||
|
||
<view class="plan-item">
|
||
<text class="plan-phase">第四阶段：</text>
|
||
<text class="plan-desc">小型比赛实践，培养学生的团队协作能力和比赛经验。</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 课堂随拍 -->
|
||
<view class="class-photos-section">
|
||
<view class="section-title-bar">
|
||
<text class="title-text">课堂随拍</text>
|
||
</view>
|
||
|
||
<!-- 篮球课堂照片 -->
|
||
<view class="photos-grid" v-if="activeTab === 'basketball'">
|
||
<view class="photo-placeholder"></view>
|
||
<view class="photo-placeholder"></view>
|
||
<view class="photo-placeholder"></view>
|
||
<view class="photo-placeholder"></view>
|
||
</view>
|
||
|
||
<!-- 足球课堂照片 -->
|
||
<view class="photos-grid" v-if="activeTab === 'football'">
|
||
<view class="photo-placeholder football-photo"></view>
|
||
<view class="photo-placeholder football-photo"></view>
|
||
<view class="photo-placeholder football-photo"></view>
|
||
<view class="photo-placeholder football-photo"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<template #bottom>
|
||
<view class="white-bg-color py-5">
|
||
<view class="flex-row items-center pb-10 pt-5">
|
||
<u-button text="取消" class="ml-15 mr-7" :plain="true" @click="navigateBack"/>
|
||
<u-button text="退课申请" class="mr-15 mr-7" type="primary" @click="submit"/>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</BasicLayout>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { navigateBack } from "@/utils/uniapp";
|
||
import { ref } from "vue";
|
||
import { xkFindDqXsApi } from "@/api/base/server";
|
||
import { useUserStore } from "@/store/modules/user";
|
||
const { getCurXs } = useUserStore();
|
||
|
||
// 当前激活的选项卡，默认为篮球
|
||
const activeTab = ref('basketball');
|
||
|
||
// 切换选项卡
|
||
function switchTab(tab: string) {
|
||
activeTab.value = tab;
|
||
}
|
||
|
||
function submit() {
|
||
const courseName = activeTab.value === 'basketball' ? '篮球' : '足球';
|
||
|
||
uni.showModal({
|
||
title: '确认退课',
|
||
content: `确定要退出${courseName}课程吗？`,
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.showToast({
|
||
title: `${courseName}退课申请已提交`,
|
||
icon: 'none'
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
onMounted(async () => {
|
||
// Make onMounted async
|
||
xkFindDqXsApi({
|
||
xsId: getCurXs.id,
|
||
xklxId: '816059832'
|
||
}).then(res => {
|
||
// 根据接口返回的result判断是否已报名
|
||
if (res && res.resultCode === 1) {
|
||
console.log(res)
|
||
} else {
|
||
// 接口调用成功但返回错误
|
||
console.warn("检查获取当前学期俱乐部接口返回错误:", res);
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
// 接口调用失败
|
||
console.error("调用获取当前学期俱乐部接口失败:", error);
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/* 顶部蓝色背景横幅 */
|
||
.banner-section {
|
||
margin-bottom: 15px;
|
||
|
||
.banner-placeholder {
|
||
height: 120px;
|
||
background-color: #3986FF;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.banner-content {
|
||
text-align: center;
|
||
|
||
.banner-title {
|
||
font-size: 22px;
|
||
color: #ffffff;
|
||
font-weight: 500;
|
||
margin-bottom: 8px;
|
||
display: block;
|
||
}
|
||
|
||
.banner-school {
|
||
font-size: 14px;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 我的课程 */
|
||
.my-course-section {
|
||
margin-bottom: 15px;
|
||
|
||
.section-title {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
|
||
.title-text {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #303133;
|
||
margin-left: 6px;
|
||
}
|
||
}
|
||
|
||
.tabs-container {
|
||
display: flex;
|
||
border-bottom: 1px solid #ebeef5;
|
||
margin-bottom: 15px;
|
||
|
||
.tab-item {
|
||
padding: 12px 0;
|
||
margin-right: 20px;
|
||
position: relative;
|
||
|
||
text {
|
||
color: #606266;
|
||
font-size: 15px;
|
||
}
|
||
|
||
&.active {
|
||
text {
|
||
color: #1976d2;
|
||
font-weight: 500;
|
||
}
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 2px;
|
||
background-color: #1976d2;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.course-card {
|
||
background-color: #ffffff;
|
||
border-radius: 10px;
|
||
padding: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
|
||
|
||
.course-image-placeholder {
|
||
width: 120px;
|
||
height: 100px;
|
||
background-color: #f0f0f0;
|
||
border-radius: 6px;
|
||
margin-right: 15px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.course-info {
|
||
flex: 1;
|
||
|
||
.course-name {
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
color: #303133;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.course-detail {
|
||
display: flex;
|
||
margin-bottom: 6px;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.detail-label {
|
||
color: #606266;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.detail-value {
|
||
color: #303133;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 教学计划 */
|
||
.teaching-plan-section {
|
||
margin-bottom: 15px;
|
||
background-color: #ffffff;
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
|
||
|
||
.section-title-bar {
|
||
padding: 12px 15px;
|
||
border-bottom: 1px solid #f2f2f2;
|
||
|
||
.title-text {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #303133;
|
||
}
|
||
}
|
||
|
||
.plan-content {
|
||
padding: 15px;
|
||
|
||
.plan-item {
|
||
margin-bottom: 15px;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.plan-phase {
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
color: #303133;
|
||
}
|
||
|
||
.plan-desc {
|
||
font-size: 14px;
|
||
color: #606266;
|
||
line-height: 1.5;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 课堂随拍 */
|
||
.class-photos-section {
|
||
background-color: #ffffff;
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
|
||
margin-bottom: 60px;
|
||
|
||
.section-title-bar {
|
||
padding: 12px 15px;
|
||
border-bottom: 1px solid #f2f2f2;
|
||
|
||
.title-text {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #303133;
|
||
}
|
||
}
|
||
|
||
.photos-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding: 15px;
|
||
|
||
.photo-placeholder {
|
||
width: calc(50% - 8px);
|
||
height: 110px;
|
||
background-color: #f0f0f0;
|
||
border-radius: 6px;
|
||
margin-right: 8px;
|
||
margin-bottom: 8px;
|
||
|
||
&:nth-child(2n) {
|
||
margin-right: 0;
|
||
}
|
||
|
||
&:nth-child(3), &:nth-child(4) {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
&.football-photo {
|
||
background-color: #f5f5f5;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|