399 lines
7.8 KiB
Vue
399 lines
7.8 KiB
Vue
|
<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>
|