zhxy-jzd/src/pages/base/course-selection/payment.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.xm }}
          </view>
          <view class="student-class"
            >{{ student.njmc }}{{ student.bjmc }}</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="imagUrl(course.xkkcImg)"
          mode="aspectFill"
        ></image>
        <view class="course-details">
          <view class="course-name">{{ course.kcmc }}</view>
          <view class="course-teacher">开课老师：{{ course.jsName }}</view>
          <view class="course-location">上课地点：{{ course.kcdd }}</view>
          <view class="course-price"
            >金额：<text class="price-value">¥{{ course.kcje }}</text></view
          >
        </view>
      </view>
    </view>

    <!-- 底部支付区域 -->
    <view class="payment-footer">
      <view class="total-amount">
        <text>总金额：</text>
        <text class="amount-value">¥{{ course.kcje }}</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 { xkqddeleteApi } from "@/api/base/server";
import { useDataStore } from "@/store/modules/data";
import { imagUrl } from "@/utils";
import { ref, onMounted, onUnmounted } from "vue";
const useData = useDataStore();
const { getData } = storeToRefs(useData);

// 倒计时
// const countdownTime = ref("1分20秒");
// let timer: any = null;
// let seconds = 1 * 60 + 20; // 1分20秒

// 学生信息
const student = ref(getData.value.studentInfo);

// 课程信息
const course = ref(getData.value.enrolledCourse);
console.log(course.value);

// 开始倒计时
// 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: async (res) => {
      if (res.confirm) {
        await xkqddeleteApi({
          id: course.value.id,
        });

        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();
});

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>