添加选课页面
This commit is contained in:
Net
parent
418bb641a0
commit
f4e8120d91
@ -153,6 +153,48 @@
|
|||||||
"navigationBarTitleText": "详情",
|
"navigationBarTitleText": "详情",
|
||||||
"enablePullDownRefresh": false
|
"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": {
|
"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