hebo/zhxy-jzd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提取支付界面的公共模块

Browse Source
This commit is contained in:
ywyonui 2025-07-01 21:06:14 +08:00
parent cb258688c7
commit c245940f0f
4 changed files with 200 additions and 316 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
src/pages/base/components/XkPayXkqd/index.vue Normal file
View File

@ -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>

93
src/pages/base/components/XkPayXs/index.vue Normal file
View File

@ -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>

181
src/pages/base/course-selection/payment-success.vue
View File

@ -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>

144
src/pages/base/course-selection/payment.vue
View File

@ -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;