From c245940f0fd749ae08677f297d6d61670b65ca97 Mon Sep 17 00:00:00 2001
From: ywyonui <ywyonui@163.com>
Date: Tue, 1 Jul 2025 21:06:14 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E5=8F=96=E6=94=AF=E4=BB=98=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2=E7=9A=84=E5=85=AC=E5=85=B1=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/base/components/XkPayXkqd/index.vue |  98 ++++++++++
 src/pages/base/components/XkPayXs/index.vue   |  93 +++++++++
 .../base/course-selection/payment-success.vue | 181 +-----------------
 src/pages/base/course-selection/payment.vue   | 144 +-------------
 4 files changed, 200 insertions(+), 316 deletions(-)
 create mode 100644 src/pages/base/components/XkPayXkqd/index.vue
 create mode 100644 src/pages/base/components/XkPayXs/index.vue

diff --git a/src/pages/base/components/XkPayXkqd/index.vue b/src/pages/base/components/XkPayXkqd/index.vue
new file mode 100644
index 0000000..801e9a9
--- /dev/null
+++ b/src/pages/base/components/XkPayXkqd/index.vue
@@ -0,0 +1,98 @@
+<template>
+  <view class="xkqd-list">
+    <!-- 课程信息卡片 -->
+    <view class="info-card" v-for="(xkqd, index) in xkqdList" :key="index">
+      <view class="card-title">课程信息</view>
+      <view class="divider"></view>
+
+      <view class="course-info">
+        <image
+          class="course-image"
+          :src="xkqd.lxtp ? imagUrl(xkqd.lxtp) : '/static/base/home/11222.png'"
+          mode="aspectFill"
+        ></image>
+        <view class="course-details">
+          <view class="course-name">{{ xkqd.xkmc }}</view>
+          <view class="course-teacher">开课老师：{{ xkqd.jsxm }}</view>
+          <view class="course-location">上课地点：{{ xkqd.kcdd }}</view>
+          <view class="course-price"
+            >金额：<text class="price-value">¥{{ xkqd.jfje }}</text></view
+          >
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { imagUrl } from "@/utils";
+import { useDataStore } from "@/store/modules/data";
+const { getData } = useDataStore();
+
+// 课程信息
+const xkqdList = computed(() => getData.xkqdList);
+
+</script>
+
+<style lang="scss" scoped>
+.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-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>
\ No newline at end of file
diff --git a/src/pages/base/components/XkPayXs/index.vue b/src/pages/base/components/XkPayXs/index.vue
new file mode 100644
index 0000000..df33f74
--- /dev/null
+++ b/src/pages/base/components/XkPayXs/index.vue
@@ -0,0 +1,93 @@
+<template>
+   <view class="info-card">
+      <view class="card-title">报名信息</view>
+      <view class="divider"></view>
+
+      <view class="student-info">
+        <view class="student-avatar">
+          <image :src="curXs.xstxUrl || '/static/base/home/11222.png'" class="tx-img"></image>
+        </view>
+        <view class="student-details">
+          <view class="student-name">
+            {{ curXs.xm }}
+          </view>
+          <view class="student-class"
+            >{{ curXs.njmc }}{{ curXs.bjmc }}</view
+          >
+        </view>
+      </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { useUserStore } from "@/store/modules/user";
+import { useDataStore } from "@/store/modules/data";
+const { getCurXs, getUser } = useUserStore();
+const { setData, getData } = useDataStore();
+
+const curXs = computed(() => getCurXs)
+
+</script>
+
+<style lang="scss" scoped>
+
+.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;
+    }
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/pages/base/course-selection/payment-success.vue b/src/pages/base/course-selection/payment-success.vue
index 0bc82b8..a837bec 100644
--- a/src/pages/base/course-selection/payment-success.vue
+++ b/src/pages/base/course-selection/payment-success.vue
@@ -18,57 +18,11 @@
       </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>
+      <XkPayXs />
 
       <!-- 课程信息卡片 -->
-      <view class="info-card">
-        <view class="card-title">课程信息</view>
-        <view class="divider"></view>
+      <XkPayXkqd />
 
-        <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">
@@ -86,25 +40,8 @@
 </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",
-});
+import XkPayXs from "@/pages/base/components/XkPayXs/index.vue"
+import XkPayXkqd from "@/pages/base/components/XkPayXkqd/index.vue"
 
 // 返回上一页
 const goBack = () => {
@@ -113,9 +50,6 @@ const goBack = () => {
 
 onMounted(() => {
   // 实际应用中，应从页面参数或缓存获取课程和学生信息
-  // const courseId = uni.getStorageSync('selectedCourseId');
-  // const studentId = uni.getStorageSync('currentStudentId');
-  // fetchSuccessInfo(courseId, studentId);
 });
 </script>
 
@@ -198,111 +132,4 @@ onMounted(() => {
   }
 }
 
-.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>
diff --git a/src/pages/base/course-selection/payment.vue b/src/pages/base/course-selection/payment.vue
index 28c0bd1..f90b46f 100644
--- a/src/pages/base/course-selection/payment.vue
+++ b/src/pages/base/course-selection/payment.vue
@@ -13,46 +13,10 @@
     </view>
 
     <!-- 学生信息卡片 -->
-    <view class="info-card">
-      <view class="card-title">报名信息</view>
-      <view class="divider"></view>
-
-      <view class="student-info">
-        <view class="student-avatar">
-          <image :src="curXs.xstxUrl || '/static/base/home/11222.png'" class="tx-img"></image>
-        </view>
-        <view class="student-details">
-          <view class="student-name">
-            {{ curXs.xm }}
-          </view>
-          <view class="student-class"
-            >{{ curXs.njmc }}{{ curXs.bjmc }}</view
-          >
-        </view>
-      </view>
-    </view>
+    <XkPayXs />
 
     <!-- 课程信息卡片 -->
-    <view class="info-card" v-for="(xkqd, index) in xkqdList" :key="index">
-      <view class="card-title">课程信息</view>
-      <view class="divider"></view>
-
-      <view class="course-info">
-        <image
-          class="course-image"
-          :src="xkqd.lxtp ? imagUrl(xkqd.lxtp) : '/static/base/home/11222.png'"
-          mode="aspectFill"
-        ></image>
-        <view class="course-details">
-          <view class="course-name">{{ xkqd.xkmc }}</view>
-          <view class="course-teacher">开课老师：{{ xkqd.jsxm }}</view>
-          <view class="course-location">上课地点：{{ xkqd.kcdd }}</view>
-          <view class="course-price"
-            >金额：<text class="price-value">¥{{ xkqd.jfje }}</text></view
-          >
-        </view>
-      </view>
-    </view>
+    <XkPayXkqd />
 
     <!-- 底部支付区域 -->
     <view class="payment-footer">
@@ -70,13 +34,13 @@
 </template>
 
 <script setup lang="ts">
+import XkPayXs from "@/pages/base/components/XkPayXs/index.vue"
+import XkPayXkqd from "@/pages/base/components/XkPayXkqd/index.vue"
 import { jzXkCancelApi, jzXkFqJfjApi } from "@/api/base/server";
-import { imagUrl } from "@/utils";
 import { useUserStore } from "@/store/modules/user";
 import { useDataStore } from "@/store/modules/data";
-import { result } from "lodash";
 const { getCurXs, getUser } = useUserStore();
-const { setData, getData } = useDataStore();
+const { getData } = useDataStore();
 
 // 学生信息
 const curXs = computed(() => getCurXs);
@@ -261,104 +225,6 @@ onUnmounted(() => {
   }
 }
 
-.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;