添加选课页面
This commit is contained in:
Net
parent
418bb641a0
commit
f4e8120d91
@ -153,6 +153,48 @@
|
||||
"navigationBarTitleText": "详情",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/base/course-selection/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "课程选择",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/base/course-selection/detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "课程详情",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/base/course-selection/payment",
|
||||
"style": {
|
||||
"navigationBarTitleText": "支付",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/base/course-selection/payment-success",
|
||||
"style": {
|
||||
"navigationBarTitleText": "支付成功",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/base/course-selection/payment-fail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "支付失败",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/base/course-selection/club-selection",
|
||||
"style": {
|
||||
"navigationBarTitleText": "俱乐部选课",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
|
||||
418
src/pages/base/course-selection/club-selection.vue
Normal file
418
src/pages/base/course-selection/club-selection.vue
Normal file
@ -0,0 +1,418 @@
|
||||
<template>
|
||||
<view class="interest-course">
|
||||
<!-- 选课信息头部 -->
|
||||
<view class="selection-header">
|
||||
<view class="header-content">
|
||||
<view class="title">2023年秋季俱乐部选课</view>
|
||||
<view class="countdown">
|
||||
<text class="time-text">{{ remainTime }}</text>
|
||||
<view class="time-icon">
|
||||
<text class="time-value">90</text>
|
||||
<text class="time-unit">mins</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 多选提示 -->
|
||||
<view class="selection-tip">
|
||||
<text>可选择多个俱乐部（{{ selectedCount }}/{{ maxSelectCount }}）</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 课程网格列表 -->
|
||||
<view class="course-grid">
|
||||
<view
|
||||
v-for="(course, index) in courseList"
|
||||
:key="index"
|
||||
class="course-item"
|
||||
:class="{ selected: course.isSelected }"
|
||||
@click="toggleSelection(course)"
|
||||
>
|
||||
<view class="course-name">{{ course.title }}</view>
|
||||
<view class="register-info">
|
||||
<text>报名情况：</text>
|
||||
<text class="register-count">{{ course.registeredCount }}</text>
|
||||
<text> | {{ course.maxCount }}</text>
|
||||
</view>
|
||||
<view class="detail-btn" @click.stop="viewCourseDetail(course)"
|
||||
>详情</view
|
||||
>
|
||||
<view v-if="course.isSelected" class="selected-mark">
|
||||
<uni-icons
|
||||
type="checkbox-filled"
|
||||
color="#3FBF72"
|
||||
size="22"
|
||||
></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部报名按钮 -->
|
||||
<view class="register-btn-container">
|
||||
<view class="selected-count">已选择：{{ selectedCount }}/{{ maxSelectCount }}</view>
|
||||
<view class="register-btn" @click="submitRegistration">点击报名</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { navigateTo } from "@/utils/uniapp";
|
||||
import { ref, computed, onMounted } from "vue";
|
||||
|
||||
// 剩余时间
|
||||
const remainTime = ref("89:57");
|
||||
|
||||
// 最大可选课程数
|
||||
const maxSelectCount = ref(3);
|
||||
|
||||
// 计算已选课程数量
|
||||
const selectedCount = computed(() => {
|
||||
return courseList.value.filter(course => course.isSelected).length;
|
||||
});
|
||||
|
||||
// 课程列表数据
|
||||
const courseList = ref([
|
||||
{
|
||||
id: 1,
|
||||
title: "少儿声乐",
|
||||
registeredCount: 23,
|
||||
maxCount: 30,
|
||||
isSelected: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "机器人创客",
|
||||
registeredCount: 23,
|
||||
maxCount: 30,
|
||||
isSelected: false,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "科学实践",
|
||||
registeredCount: 23,
|
||||
maxCount: 30,
|
||||
isSelected: false,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "趣味手工",
|
||||
registeredCount: 23,
|
||||
maxCount: 30,
|
||||
isSelected: false,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "动画制作",
|
||||
registeredCount: 23,
|
||||
maxCount: 30,
|
||||
isSelected: false,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: "趣味英语",
|
||||
registeredCount: 23,
|
||||
maxCount: 30,
|
||||
isSelected: false,
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: "篮球",
|
||||
registeredCount: 23,
|
||||
maxCount: 30,
|
||||
isSelected: false,
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: "足球",
|
||||
registeredCount: 23,
|
||||
maxCount: 30,
|
||||
isSelected: false,
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: "羽毛球",
|
||||
registeredCount: 23,
|
||||
maxCount: 30,
|
||||
isSelected: false,
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
title: "主持人",
|
||||
registeredCount: 23,
|
||||
maxCount: 30,
|
||||
isSelected: false,
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
title: "心育课堂",
|
||||
registeredCount: 23,
|
||||
maxCount: 30,
|
||||
isSelected: false,
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
title: "童戏皮影",
|
||||
registeredCount: 23,
|
||||
maxCount: 30,
|
||||
isSelected: false,
|
||||
},
|
||||
]);
|
||||
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
// 查看课程详情
|
||||
const viewCourseDetail = (course: any) => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/base/course-selection/detail?id=${course.id}`,
|
||||
});
|
||||
};
|
||||
|
||||
// 选择或取消选择课程（改为多选）
|
||||
const toggleSelection = (course: any) => {
|
||||
// 如果当前课程未选中，且已达到最大选择数量，则提示
|
||||
if (!course.isSelected && selectedCount.value >= maxSelectCount.value) {
|
||||
uni.showToast({
|
||||
title: `最多可选择${maxSelectCount.value}个俱乐部`,
|
||||
icon: "none",
|
||||
duration: 2000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 直接切换当前课程的选中状态
|
||||
course.isSelected = !course.isSelected;
|
||||
|
||||
uni.vibrateShort({
|
||||
success: () => {
|
||||
// 震动反馈成功
|
||||
},
|
||||
});
|
||||
|
||||
uni.showToast({
|
||||
title: course.isSelected ? "已选择" : "已取消选择",
|
||||
icon: "none",
|
||||
duration: 500,
|
||||
});
|
||||
};
|
||||
|
||||
// 提交报名
|
||||
const submitRegistration = () => {
|
||||
const selectedCourses = courseList.value.filter(
|
||||
(course) => course.isSelected
|
||||
);
|
||||
|
||||
if (selectedCourses.length === 0) {
|
||||
uni.showToast({
|
||||
title: "请至少选择一个俱乐部",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
uni.showModal({
|
||||
title: "确认报名",
|
||||
content: `您确定要报名已选择的${selectedCourses.length}个俱乐部吗？`,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({
|
||||
title: "报名中...",
|
||||
});
|
||||
|
||||
// 模拟提交报名
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
navigateTo("/pages/base/course-selection/payment");
|
||||
}, 1500);
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// 页面加载
|
||||
onMounted(() => {
|
||||
// 实际应用中，可以从后端获取课程列表和倒计时信息
|
||||
// fetchCourseList();
|
||||
// startCountdown();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.interest-course {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f7fa;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 15px;
|
||||
height: 44px;
|
||||
background-color: #fff;
|
||||
|
||||
.nav-left {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
width: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.selection-header {
|
||||
background-color: #eef4ff;
|
||||
padding: 20px 15px;
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.title {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.countdown {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.time-text {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
color: #ff4d4f;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.time-icon {
|
||||
position: relative;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #2879ff;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #fff;
|
||||
|
||||
.time-value {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.time-unit {
|
||||
font-size: 10px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.selection-tip {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.course-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 15px;
|
||||
|
||||
.course-item {
|
||||
position: relative;
|
||||
width: calc(50% - 10px);
|
||||
margin-bottom: 15px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:nth-child(odd) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border: 1px solid #3fbf72;
|
||||
}
|
||||
|
||||
.course-name {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.register-info {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.register-count {
|
||||
color: #2879ff;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-btn {
|
||||
display: inline-block;
|
||||
color: #2879ff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.selected-mark {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: -6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.register-btn-container {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 15px;
|
||||
background-color: #fff;
|
||||
|
||||
.selected-count {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.register-btn {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
background-color: #2879ff;
|
||||
color: #fff;
|
||||
border-radius: 25px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
279
src/pages/base/course-selection/detail.vue
Normal file
279
src/pages/base/course-selection/detail.vue
Normal file
@ -0,0 +1,279 @@
|
||||
<template>
|
||||
<BasicLayout>
|
||||
<view class="course-detail">
|
||||
<!-- 课程信息卡片 -->
|
||||
<view class="info-card">
|
||||
<view class="card-title">课程信息</view>
|
||||
<view class="divider"></view>
|
||||
|
||||
<view class="course-info">
|
||||
<image
|
||||
class="course-image"
|
||||
:src="courseDetail.image || '/static/images/course-default.jpg'"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
|
||||
<view class="course-content">
|
||||
<view class="course-name">{{ courseDetail.title }}</view>
|
||||
<view class="course-teacher"
|
||||
>开课老师：{{ courseDetail.teacher }}</view
|
||||
>
|
||||
<view class="course-location"
|
||||
>上课地点：{{ courseDetail.location }}</view
|
||||
>
|
||||
<view class="course-price"
|
||||
>金额：<text class="price-value"
|
||||
>¥{{ courseDetail.price }}</text
|
||||
></view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 老师信息卡片 -->
|
||||
<view class="info-card">
|
||||
<view class="card-title">老师信息</view>
|
||||
<view class="divider"></view>
|
||||
|
||||
<view class="teacher-info">
|
||||
<image
|
||||
class="teacher-avatar"
|
||||
:src="teacherInfo.avatar || '/static/images/teacher-avatar.jpg'"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
|
||||
<view class="teacher-intro">
|
||||
<text>{{ teacherInfo.introduction }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 教学理念 -->
|
||||
<view class="info-card">
|
||||
<view class="card-title">教学理念</view>
|
||||
<view class="divider"></view>
|
||||
|
||||
<view class="content-section">
|
||||
<text>{{ teachingPhilosophy }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 教学计划 -->
|
||||
<view class="info-card">
|
||||
<view class="card-title">教学计划</view>
|
||||
<view class="divider"></view>
|
||||
|
||||
<view class="content-section">
|
||||
<view
|
||||
v-for="(phase, index) in teachingPlan"
|
||||
:key="index"
|
||||
class="teaching-phase"
|
||||
>
|
||||
<text>{{ phase }}</text>
|
||||
</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"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</BasicLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { navigateBack } from "@/utils/uniapp";
|
||||
// 课程详情数据
|
||||
const courseDetail = ref({
|
||||
id: 2,
|
||||
title: "机器人创客",
|
||||
teacher: "叶老师",
|
||||
location: "第一教学楼302",
|
||||
price: 142,
|
||||
image: "/static/images/robot-course.jpg",
|
||||
});
|
||||
|
||||
// 教师信息
|
||||
const teacherInfo = ref({
|
||||
name: "叶老师",
|
||||
avatar: "/static/images/teacher-avatar.jpg",
|
||||
introduction:
|
||||
"叶老师，男，出生于1997年7月10日，青少年机器人创客指导教师，指导祥富小学-晟航水木年华获得2022年青少年机器人竞赛小学组三等奖。",
|
||||
});
|
||||
|
||||
// 教学理念
|
||||
const teachingPhilosophy = ref(
|
||||
'"做中学、玩中学"的教育理念，机器人课程最大的优势就是能够让孩子在"玩"中去探索，去体验属于他们自己的世界，很多孩子刚开始接触的时候都是出于兴趣。培养孩子更进一步的能力，提高孩子的学习效果也的确需要从兴趣开始。但真正激发孩子能力，形成学习动力的是对目标的追求。我就通过机器人赛事帮助孩子把"兴趣"变成学习的目标，继而助力孩子未来成长的道路。'
|
||||
);
|
||||
|
||||
// 教学计划
|
||||
const teachingPlan = ref([
|
||||
"第一阶段：了解机器人的组成，知道每个零件的名称及用途，认识机器人的结构。",
|
||||
"第二阶段：在老师的引导下，分组搭建机器人，注意引导幼儿理解机器人的数据线连接和遥控器方向的关系。",
|
||||
"第三阶段：学会操控机器人的移动方向，并练习把魔方根据要求推到指定位置。",
|
||||
"第四阶段：组织幼儿参加创客机器人比赛。",
|
||||
]);
|
||||
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
// 页面加载时获取课程详情
|
||||
onMounted(() => {
|
||||
// 实际应用中从URL参数获取课程ID，然后请求详情
|
||||
const courseId = uni.getStorageSync("currentCourseId") || 2;
|
||||
// fetchCourseDetail(courseId);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.course-detail {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f7fa;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 15px;
|
||||
height: 44px;
|
||||
background-color: #2879ff;
|
||||
|
||||
.nav-left {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-card {
|
||||
margin: 15px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background-color: #eee;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.course-info {
|
||||
display: flex;
|
||||
|
||||
.course-image {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 8px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.course-content {
|
||||
flex: 1;
|
||||
|
||||
.course-name {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.course-teacher,
|
||||
.course-location {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.course-price {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
|
||||
.price-value {
|
||||
color: #ff6b00;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.teacher-info {
|
||||
display: flex;
|
||||
|
||||
.teacher-avatar {
|
||||
width: 80px;
|
||||
height: 100px;
|
||||
border-radius: 4px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.teacher-intro {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
|
||||
.content-section {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
|
||||
.teaching-phase {
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-action {
|
||||
padding: 15px;
|
||||
margin-top: 20px;
|
||||
|
||||
.back-btn {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
border-radius: 22px;
|
||||
font-size: 16px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
391
src/pages/base/course-selection/index.vue
Normal file
391
src/pages/base/course-selection/index.vue
Normal file
@ -0,0 +1,391 @@
|
||||
<template>
|
||||
<view class="interest-course">
|
||||
<!-- 选课信息头部 -->
|
||||
<view class="selection-header">
|
||||
<view class="header-content">
|
||||
<view class="title">2023年秋季选课</view>
|
||||
<view class="countdown">
|
||||
<text class="time-text">{{ remainTime }}</text>
|
||||
<view class="time-icon">
|
||||
<text class="time-value">90</text>
|
||||
<text class="time-unit">mins</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 课程网格列表 -->
|
||||
<view class="course-grid">
|
||||
<view
|
||||
v-for="(course, index) in courseList"
|
||||
:key="index"
|
||||
class="course-item"
|
||||
:class="{ selected: course.isSelected }"
|
||||
@click="toggleSelection(course)"
|
||||
>
|
||||
<view class="course-name">{{ course.title }}</view>
|
||||
<view class="register-info">
|
||||
<text>报名情况：</text>
|
||||
<text class="register-count">{{ course.registeredCount }}</text>
|
||||
<text> | {{ course.maxCount }}</text>
|
||||
</view>
|
||||
<view class="detail-btn" @click.stop="viewCourseDetail(course)"
|
||||
>详情</view
|
||||
>
|
||||
<view v-if="course.isSelected" class="selected-mark">
|
||||
<uni-icons
|
||||
type="checkbox-filled"
|
||||
color="#3FBF72"
|
||||
size="22"
|
||||
></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部报名按钮 -->
|
||||
<view class="register-btn-container">
|
||||
<view class="register-btn" @click="submitRegistration">点击报名</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { navigateTo } from "@/utils/uniapp";
|
||||
import { ref, computed, onMounted } from "vue";
|
||||
|
||||
// 剩余时间
|
||||
const remainTime = ref("89:57");
|
||||
|
||||
// 课程列表数据
|
||||
const courseList = ref([
|
||||
{
|
||||
id: 1,
|
||||
title: "少儿声乐",
|
||||
registeredCount: 23,
|
||||
maxCount: 30,
|
||||
isSelected: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "机器人创客",
|
||||
registeredCount: 23,
|
||||
maxCount: 30,
|
||||
isSelected: false,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "科学实践",
|
||||
registeredCount: 23,
|
||||
maxCount: 30,
|
||||
isSelected: false,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "趣味手工",
|
||||
registeredCount: 23,
|
||||
maxCount: 30,
|
||||
isSelected: false,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "动画制作",
|
||||
registeredCount: 23,
|
||||
maxCount: 30,
|
||||
isSelected: false,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: "趣味英语",
|
||||
registeredCount: 23,
|
||||
maxCount: 30,
|
||||
isSelected: false,
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: "篮球",
|
||||
registeredCount: 23,
|
||||
maxCount: 30,
|
||||
isSelected: false,
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: "足球",
|
||||
registeredCount: 23,
|
||||
maxCount: 30,
|
||||
isSelected: false,
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: "羽毛球",
|
||||
registeredCount: 23,
|
||||
maxCount: 30,
|
||||
isSelected: false,
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
title: "主持人",
|
||||
registeredCount: 23,
|
||||
maxCount: 30,
|
||||
isSelected: false,
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
title: "心育课堂",
|
||||
registeredCount: 23,
|
||||
maxCount: 30,
|
||||
isSelected: false,
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
title: "童戏皮影",
|
||||
registeredCount: 23,
|
||||
maxCount: 30,
|
||||
isSelected: false,
|
||||
},
|
||||
]);
|
||||
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
// 查看课程详情
|
||||
const viewCourseDetail = (course: any) => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/base/course-selection/detail?id=${course.id}`,
|
||||
});
|
||||
};
|
||||
|
||||
// 选择或取消选择课程
|
||||
const toggleSelection = (course: any) => {
|
||||
const wasSelected = course.isSelected;
|
||||
|
||||
// 先取消所有课程的选中状态
|
||||
courseList.value.forEach((item) => {
|
||||
item.isSelected = false;
|
||||
});
|
||||
|
||||
// 如果之前未选中，则设为选中；如果之前已选中，则保持取消状态
|
||||
if (!wasSelected) {
|
||||
course.isSelected = true;
|
||||
}
|
||||
|
||||
uni.vibrateShort({
|
||||
success: () => {
|
||||
// 震动反馈成功
|
||||
},
|
||||
});
|
||||
|
||||
uni.showToast({
|
||||
title: course.isSelected ? "已选择" : "已取消选择",
|
||||
icon: "none",
|
||||
duration: 500,
|
||||
});
|
||||
};
|
||||
|
||||
// 提交报名
|
||||
const submitRegistration = () => {
|
||||
const selectedCourses = courseList.value.filter(
|
||||
(course) => course.isSelected
|
||||
);
|
||||
|
||||
if (selectedCourses.length === 0) {
|
||||
uni.showToast({
|
||||
title: "请选择一门课程",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
uni.showModal({
|
||||
title: "确认报名",
|
||||
content: `您确定要报名"${selectedCourses[0].title}"课程吗？`,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({
|
||||
title: "报名中...",
|
||||
});
|
||||
|
||||
// 模拟提交报名
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
navigateTo("/pages/base/course-selection/payment");
|
||||
}, 1500);
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// 页面加载
|
||||
onMounted(() => {
|
||||
// 实际应用中，可以从后端获取课程列表和倒计时信息
|
||||
// fetchCourseList();
|
||||
// startCountdown();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.interest-course {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f7fa;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 15px;
|
||||
height: 44px;
|
||||
background-color: #fff;
|
||||
|
||||
.nav-left {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
width: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.selection-header {
|
||||
background-color: #eef4ff;
|
||||
padding: 20px 15px;
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.title {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.countdown {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.time-text {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
color: #ff4d4f;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.time-icon {
|
||||
position: relative;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #2879ff;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #fff;
|
||||
|
||||
.time-value {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.time-unit {
|
||||
font-size: 10px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.course-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 15px;
|
||||
|
||||
.course-item {
|
||||
position: relative;
|
||||
width: calc(50% - 10px);
|
||||
margin-bottom: 15px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:nth-child(odd) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border: 1px solid #3fbf72;
|
||||
}
|
||||
|
||||
.course-name {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.register-info {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.register-count {
|
||||
color: #2879ff;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-btn {
|
||||
display: inline-block;
|
||||
color: #2879ff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.selected-mark {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: -6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.register-btn-container {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 15px;
|
||||
background-color: #fff;
|
||||
|
||||
.register-btn {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
background-color: #2879ff;
|
||||
color: #fff;
|
||||
border-radius: 25px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
117
src/pages/base/course-selection/payment-fail.vue
Normal file
117
src/pages/base/course-selection/payment-fail.vue
Normal file
@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<view class="payment-fail">
|
||||
<!-- 失败提示卡片 -->
|
||||
<view class="fail-card">
|
||||
<view class="fail-icon-container">
|
||||
<image
|
||||
class="fail-icon"
|
||||
src="/static/base/2222.png"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
</view>
|
||||
|
||||
<view class="fail-text">抱歉，报名失败！</view>
|
||||
|
||||
<view class="divider"></view>
|
||||
|
||||
<view class="tip-text">请点击下方按钮</view>
|
||||
|
||||
<view class="finger-icon">
|
||||
<image
|
||||
src="/static/base/33333.png"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
</view>
|
||||
|
||||
<view class="action-btn" @click="reselect">
|
||||
重新选课
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
// 返回选课页面
|
||||
const reselect = () => {
|
||||
uni.redirectTo({
|
||||
url: '/pages/base/course-selection/index'
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// 实际应用中可能需要记录失败原因等信息
|
||||
console.log('支付失败页面加载');
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.payment-fail {
|
||||
min-height: 100%;
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.fail-card {
|
||||
margin: 15px;
|
||||
width: 90%;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 30px 15px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.fail-icon-container {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.fail-icon {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.fail-text {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #eee;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tip-text {
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.finger-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-bottom: 15px;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 200px;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
text-align: center;
|
||||
border-radius: 22.5px;
|
||||
border: 1px solid #2879ff;
|
||||
color: #2879ff;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
308
src/pages/base/course-selection/payment-success.vue
Normal file
308
src/pages/base/course-selection/payment-success.vue
Normal file
@ -0,0 +1,308 @@
|
||||
<template>
|
||||
<BasicLayout>
|
||||
<view class="payment-success">
|
||||
<!-- 成功提示卡片 -->
|
||||
<view class="success-card">
|
||||
<view class="success-icon-container">
|
||||
<image
|
||||
class="success-icon-bg"
|
||||
src="/static/base/11223.png"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<view class="success-icon">
|
||||
<u-icon name="checkmark" size="40" color="#fff"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="success-text">恭喜你，报名成功！</view>
|
||||
</view>
|
||||
|
||||
<!-- 学生信息卡片 -->
|
||||
<view class="info-card student-card">
|
||||
<view class="card-title">报名信息</view>
|
||||
<view class="divider"></view>
|
||||
|
||||
<view class="student-info">
|
||||
<view class="student-avatar">
|
||||
<image
|
||||
src="/static/images/student-avatar.jpg"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</view>
|
||||
<view class="student-details">
|
||||
<view class="student-name">
|
||||
{{ student.name }}
|
||||
<view class="gender-icon">
|
||||
<u-icon
|
||||
v-if="student.gender === '男'"
|
||||
name="man"
|
||||
color="#2879ff"
|
||||
size="18"
|
||||
></u-icon>
|
||||
<u-icon v-else name="woman" color="#ff6b9d" size="18"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="student-id">{{ student.id }}</view>
|
||||
<view class="student-class">{{ student.class }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 课程信息卡片 -->
|
||||
<view class="info-card">
|
||||
<view class="card-title">课程信息</view>
|
||||
<view class="divider"></view>
|
||||
|
||||
<view class="course-info">
|
||||
<image
|
||||
class="course-image"
|
||||
:src="course.image"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<view class="course-details">
|
||||
<view class="course-name">{{ course.title }}</view>
|
||||
<view class="course-teacher">开课老师：{{ course.teacher }}</view>
|
||||
<view class="course-location">上课地点：{{ course.time }}</view>
|
||||
<view class="course-price"
|
||||
>金额：<text class="price-value">¥{{ course.price }}</text></view
|
||||
>
|
||||
</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=""
|
||||
/>
|
||||
</view>
|
||||
</view> -->
|
||||
</template>
|
||||
</BasicLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
|
||||
// 学生信息
|
||||
const student = ref({
|
||||
name: "何明远",
|
||||
gender: "男",
|
||||
id: "202111115724522",
|
||||
class: "三年级2班",
|
||||
});
|
||||
|
||||
// 课程信息
|
||||
const course = ref({
|
||||
id: 2,
|
||||
title: "机器人创客",
|
||||
teacher: "叶老师",
|
||||
time: "星期一",
|
||||
price: 142,
|
||||
image: "/static/images/robot-course.jpg",
|
||||
});
|
||||
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// 实际应用中，应从页面参数或缓存获取课程和学生信息
|
||||
// const courseId = uni.getStorageSync('selectedCourseId');
|
||||
// const studentId = uni.getStorageSync('currentStudentId');
|
||||
// fetchSuccessInfo(courseId, studentId);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.payment-success {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 15px;
|
||||
height: 44px;
|
||||
background-color: #2879ff;
|
||||
|
||||
.nav-left {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
width: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.success-card {
|
||||
margin: 15px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 30px 15px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.success-icon-container {
|
||||
position: relative;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.success-icon-bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background-color: #2879ff;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.success-text {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.info-card {
|
||||
margin: 15px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||||
|
||||
&.student-card {
|
||||
background-color: #eef4ff;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background-color: #eee;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.student-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.student-avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-right: 15px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.student-details {
|
||||
.student-name {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
|
||||
.gender-icon {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.student-id,
|
||||
.student-class {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 5px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.course-info {
|
||||
display: flex;
|
||||
|
||||
.course-image {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 8px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.course-details {
|
||||
flex: 1;
|
||||
|
||||
.course-name {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.course-teacher,
|
||||
.course-location {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.course-price {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
|
||||
.price-value {
|
||||
color: #ff6b00;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
398
src/pages/base/course-selection/payment.vue
Normal file
398
src/pages/base/course-selection/payment.vue
Normal file
@ -0,0 +1,398 @@
|
||||
<template>
|
||||
<view class="payment-page">
|
||||
<!-- 倒计时区域 -->
|
||||
<view class="countdown-section">
|
||||
<view class="countdown-icon">
|
||||
<u-icon name="clock" size="22" color="#fff"></u-icon>
|
||||
</view>
|
||||
<view class="countdown-text">待支付</view>
|
||||
<view class="countdown-timer">
|
||||
<text>剩余：</text>
|
||||
<text class="time-value">{{ countdownTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 学生信息卡片 -->
|
||||
<view class="info-card">
|
||||
<view class="card-title">报名信息</view>
|
||||
<view class="divider"></view>
|
||||
|
||||
<view class="student-info">
|
||||
<view class="student-avatar">
|
||||
<image
|
||||
src="/static/images/student-avatar.jpg"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</view>
|
||||
<view class="student-details">
|
||||
<view class="student-name">
|
||||
{{ student.name }}
|
||||
<view class="gender-icon">
|
||||
<u-icon
|
||||
v-if="student.gender === '男'"
|
||||
name="man"
|
||||
color="#2879ff"
|
||||
size="18"
|
||||
></u-icon>
|
||||
<u-icon v-else name="woman" color="#ff6b9d" size="18"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="student-class">{{ student.class }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 课程信息卡片 -->
|
||||
<view class="info-card">
|
||||
<view class="card-title">课程信息</view>
|
||||
<view class="divider"></view>
|
||||
|
||||
<view class="course-info">
|
||||
<image
|
||||
class="course-image"
|
||||
:src="course.image"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<view class="course-details">
|
||||
<view class="course-name">{{ course.title }}</view>
|
||||
<view class="course-teacher">开课老师：{{ course.teacher }}</view>
|
||||
<view class="course-location">上课地点：{{ course.location }}</view>
|
||||
<view class="course-price"
|
||||
>金额：<text class="price-value">¥{{ course.price }}</text></view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部支付区域 -->
|
||||
<view class="payment-footer">
|
||||
<view class="total-amount">
|
||||
<text>总金额：</text>
|
||||
<text class="amount-value">¥{{ course.price }}</text>
|
||||
</view>
|
||||
|
||||
<view class="action-buttons">
|
||||
<view class="cancel-btn" @click="cancelRegistration">取消报名</view>
|
||||
<view class="pay-btn" @click="payNow">立即支付</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
|
||||
// 倒计时
|
||||
const countdownTime = ref("1分20秒");
|
||||
let timer: any = null;
|
||||
let seconds = 1 * 60 + 20; // 1分20秒
|
||||
|
||||
// 学生信息
|
||||
const student = ref({
|
||||
name: "何明远",
|
||||
gender: "男",
|
||||
class: "三年级2班",
|
||||
});
|
||||
|
||||
// 课程信息
|
||||
const course = ref({
|
||||
id: 2,
|
||||
title: "机器人创客",
|
||||
teacher: "叶老师",
|
||||
location: "第一教学楼302",
|
||||
price: 142,
|
||||
image: "/static/images/robot-course.jpg",
|
||||
});
|
||||
|
||||
// 开始倒计时
|
||||
const startCountdown = () => {
|
||||
timer = setInterval(() => {
|
||||
seconds--;
|
||||
if (seconds <= 0) {
|
||||
clearInterval(timer);
|
||||
uni.showModal({
|
||||
title: "支付超时",
|
||||
content: "支付已超时，请重新选课",
|
||||
showCancel: false,
|
||||
success: () => {
|
||||
goBack();
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
const remainSeconds = seconds % 60;
|
||||
countdownTime.value = `${minutes}分${remainSeconds}秒`;
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
|
||||
// 取消报名
|
||||
const cancelRegistration = () => {
|
||||
uni.showModal({
|
||||
title: "取消报名",
|
||||
content: "确定要取消报名吗？",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showToast({
|
||||
title: "已取消报名",
|
||||
icon: "success",
|
||||
});
|
||||
setTimeout(() => {
|
||||
goBack();
|
||||
}, 1500);
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// 立即支付
|
||||
const payNow = () => {
|
||||
uni.showLoading({
|
||||
title: "支付中...",
|
||||
});
|
||||
|
||||
// 模拟支付过程
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
|
||||
uni.redirectTo({
|
||||
url: "/pages/base/course-selection/payment-success",
|
||||
});
|
||||
// uni.redirectTo({
|
||||
// url: "/pages/base/course-selection/payment-fail",
|
||||
// });
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
startCountdown();
|
||||
|
||||
// 实际应用中，应从页面参数或缓存获取课程和学生信息
|
||||
// const courseId = uni.getStorageSync('selectedCourseId');
|
||||
// const studentId = uni.getStorageSync('currentStudentId');
|
||||
// fetchPaymentInfo(courseId, studentId);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (timer) {
|
||||
clearInterval(timer);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.payment-page {
|
||||
min-height: 100%;
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 15px;
|
||||
height: 44px;
|
||||
background-color: #2879ff;
|
||||
|
||||
.nav-left {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
width: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.countdown-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
background-color: #2879ff;
|
||||
|
||||
.countdown-icon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.countdown-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.countdown-timer {
|
||||
font-size: 15px;
|
||||
color: #fff;
|
||||
|
||||
.time-value {
|
||||
color: #ff4d4f;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-card {
|
||||
margin: 15px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background-color: #eee;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.student-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.student-avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-right: 15px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.student-details {
|
||||
.student-name {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
|
||||
.gender-icon {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.student-class {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.course-info {
|
||||
display: flex;
|
||||
|
||||
.course-image {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 8px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.course-details {
|
||||
flex: 1;
|
||||
|
||||
.course-name {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.course-teacher,
|
||||
.course-location {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.course-price {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
|
||||
.price-value {
|
||||
color: #ff6b00;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.payment-footer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
|
||||
|
||||
.total-amount {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
|
||||
.amount-value {
|
||||
color: #ff6b00;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.cancel-btn,
|
||||
.pay-btn {
|
||||
width: 48%;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
text-align: center;
|
||||
border-radius: 22px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.pay-btn {
|
||||
background-color: #ff8c00;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
src/static/base/11223.png
Normal file
BIN
src/static/base/11223.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
src/static/base/2222.png
Normal file
BIN
src/static/base/2222.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
src/static/base/33333.png
Normal file
BIN
src/static/base/33333.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Loading…
x
Reference in New Issue
Block a user